/* ===========================================================================
   LA GALERÍA (27-sep-2026)

   Las personas del proyecto: los fundadores y los docentes fiscalizadores. Lo pidió Ernesto como «la sección más especial y sentimental de la
   plataforma», así que es la más cuidada, pero con los materiales de siempre:
   el cristal de la casa (`--cristal`, `--cristal-velo`, `--cristal-borde`),
   `--radius-xl` y la paleta que ponga la marca activa. Nada de colores a mano
   salvo el blanco de los reflejos.

   Las estrellas que caen las dibuja js/galeria.js en un lienzo FIJO colgado del
   <body>, detrás de <main> y delante del círculo. Sobre el lienzo translúcido
   de siempre y no sobre el azul oscuro de Astrah: así lo pidió Ernesto.

   LAS ANIMACIONES SIN FIN SÓLO MUEVEN `transform` Y `opacity`, y una por
   elemento. Es la regla de la auditoría de rendimiento (punto 21 de CLAUDE.md)
   y la vigila scripts/pruebas/animaciones-componibles.mjs. El brillo del borde
   que sigue al puntero NO es una animación: son dos variables que escribe el
   JavaScript al mover el ratón.
   =========================================================================== */

#vista-galeria{position:relative}

.galeria-cielo{position:fixed;inset:0;width:100%;height:100%;z-index:0;
  pointer-events:none;display:block;opacity:0;transition:opacity 900ms var(--ease-standard)}
.galeria-cielo.encendido{opacity:1}

/* ---------- Tonos propios, sacados de los de la marca ---------- */
#vista-galeria,
.galeria-detalle{
  --gal-luz-1:var(--halo-1, var(--brand-accent));
  --gal-luz-2:var(--halo-2, var(--brand-soft));
  --gal-aro:conic-gradient(from 210deg,
      var(--brand-accent), var(--brand-soft), var(--brand-primary), var(--brand-accent));
  --gal-reflejo:rgba(255,255,255,.62);
}
:root[data-tema="oscuro"] #vista-galeria,
:root[data-tema="oscuro"] .galeria-detalle{--gal-reflejo:rgba(255,255,255,.12)}

.galeria-cabecera .intro{margin-bottom:var(--sp-5)}
.galeria-cabecera .galeria-antetitulo{display:block;margin:0 0 var(--sp-2);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold,600);letter-spacing:.18em;
  text-transform:uppercase;color:var(--brand-accent)}

/* ---------- El índice de la galería: tres píldoras de cristal ---------- */
.galeria-indice{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-2);
  margin:0 auto var(--sp-8)}
.galeria-pildora{display:inline-flex;align-items:center;gap:8px;padding:9px 18px;
  border-radius:var(--radius-pill);background:var(--cristal);
  backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);color:var(--text-title);
  font-size:var(--fs-sm);font-weight:var(--fw-semibold,600);
  box-shadow:inset 0 1px 0 var(--gal-reflejo), var(--shadow-xs);
  transition:transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             border-color var(--dur-base) var(--ease-standard)}
button.galeria-pildora{cursor:pointer}
button.galeria-pildora:hover{transform:translateY(-2px);border-color:var(--border-strong);
  box-shadow:inset 0 1px 0 var(--gal-reflejo), var(--shadow-sm)}
button.galeria-pildora:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.galeria-pildora svg{width:14px;height:14px;color:var(--brand-soft);flex:none}

/* ---------- Cada bloque ---------- */
.galeria-bloque{margin:0 0 calc(var(--sp-8) * 1.4);scroll-margin-top:96px}
.galeria-bloque-cabeza{text-align:center;margin:0 auto var(--sp-6);max-width:640px}
.galeria-bloque-cabeza h3{font-family:var(--font-display);font-size:var(--fs-h2);
  margin:0 0 var(--sp-2);color:var(--text-title)}
.galeria-bloque-cabeza p{margin:0;color:var(--text-muted)}
/* La rayita de luz debajo del título: dos trazos que se funden en el centro. */
.galeria-bloque-cabeza h3::after{content:"";display:block;width:72px;height:2px;margin:12px auto 0;
  border-radius:2px;background:linear-gradient(90deg,transparent,var(--brand-accent),var(--brand-soft),transparent)}

/* ---------- El cristal de la galería ----------
   El de la casa con un canto de luz arriba (el `inset`) y un aro que sólo se
   enciende al pasar por encima, siguiendo al puntero (`--mx`, `--my`). */
.galeria-cristal{position:relative;isolation:isolate;
  background:var(--cristal);
  backdrop-filter:var(--cristal-velo);-webkit-backdrop-filter:var(--cristal-velo);
  border:1px solid var(--cristal-borde);border-radius:var(--radius-xl);
  box-shadow:inset 0 1px 0 var(--gal-reflejo), var(--shadow-sm)}
.galeria-cristal::before{content:"";position:absolute;inset:-1px;border-radius:inherit;
  padding:1.5px;pointer-events:none;z-index:2;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),
      var(--gal-luz-1), var(--gal-luz-2) 42%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity 420ms var(--ease-standard)}
.galeria-cristal::after{content:"";position:absolute;inset:0;border-radius:inherit;
  pointer-events:none;z-index:-1;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),
      color-mix(in srgb,var(--gal-luz-1) 22%,transparent), transparent 70%);
  opacity:0;transition:opacity 420ms var(--ease-standard)}
.galeria-cristal.iluminada::before,
.galeria-cristal.iluminada::after{opacity:1}

/* ---------- La rejilla de personas ---------- */
.galeria-rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(14px,2.2vw,26px)}

.galeria-tarjeta{position:relative;display:flex;flex-direction:column;align-items:center;
  gap:6px;width:100%;padding:14px 14px 20px;text-align:center;cursor:pointer;color:inherit;
  font:inherit;transform-style:preserve-3d;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform 380ms cubic-bezier(.2,.8,.2,1), box-shadow 380ms var(--ease-standard)}
.galeria-tarjeta.iluminada{--ty:-6px;box-shadow:inset 0 1px 0 var(--gal-reflejo), var(--shadow-md)}
.galeria-tarjeta:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.galeria-foto{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:20px;
  overflow:hidden;background:var(--gal-aro);padding:2px}
.galeria-foto > img,
.galeria-foto > .galeria-iniciales{display:block;width:100%;height:100%;border-radius:18px;object-fit:cover}
.galeria-foto > img{transition:transform 700ms cubic-bezier(.2,.8,.2,1)}
.galeria-tarjeta.iluminada .galeria-foto > img{transform:scale(1.045)}
.galeria-iniciales{display:grid !important;place-items:center;
  font-family:var(--font-display);font-size:clamp(28px,5vw,44px);font-weight:600;color:var(--text-onbrand);
  background:linear-gradient(150deg,
      color-mix(in srgb,var(--brand-accent) 78%,white),
      color-mix(in srgb,var(--brand-soft) 70%,white))}
/* La silueta de los ejemplos de la vista previa. */
.galeria-silueta{display:block;width:100%;height:100%;border-radius:18px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--brand-accent) 26%,var(--cristal-vivo)),
      color-mix(in srgb,var(--brand-soft) 24%,var(--cristal-vivo)))}
.galeria-silueta svg{width:100%;height:100%;color:color-mix(in srgb,var(--brand-accent) 26%,transparent)}
/* Un velo de luz que cruza la foto una vez, al pasar por encima. */
.galeria-foto::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.38) 50%,transparent 65%);
  transform:translateX(-110%);transition:transform 0s}
.galeria-tarjeta.iluminada .galeria-foto::after{transform:translateX(110%);transition:transform 900ms var(--ease-standard)}

.galeria-nombre{margin-top:10px;font-family:var(--font-display);font-weight:600;
  font-size:1.05rem;line-height:1.25;color:var(--text-title)}
.galeria-ocupacion{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.4}
.galeria-ver{margin-top:6px;font-size:var(--fs-xs,.75rem);font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-accent);opacity:0;transform:translateY(4px);
  transition:opacity 320ms var(--ease-standard), transform 320ms var(--ease-standard)}
.galeria-tarjeta.iluminada .galeria-ver,
.galeria-tarjeta:focus-visible .galeria-ver{opacity:1;transform:none}
/* Sin ratón no hay «pasar por encima»: se enseña siempre. */
@media (hover:none){.galeria-ver{opacity:1;transform:none}}
.galeria-detalle-panel:focus{outline:none}
.galeria-ejemplo{position:absolute;top:22px;left:22px;z-index:3;padding:3px 10px;border-radius:var(--radius-pill);
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  background:var(--cristal-claro);color:var(--text-muted);border:1px solid var(--cristal-borde)}

/* La tarjeta DESTACADA: a lo ancho, con la foto a un lado y la presentación al
   otro. Es la de quien fundó el proyecto (se marca en el panel). */
.galeria-tarjeta.destacada{grid-column:1 / -1;display:grid;grid-template-columns:minmax(200px,300px) 1fr;
  gap:clamp(18px,3vw,40px);align-items:center;text-align:left;padding:18px}
.galeria-tarjeta.destacada .galeria-nombre{margin-top:0;font-size:clamp(1.4rem,2.6vw,2rem)}
.galeria-tarjeta.destacada .galeria-ocupacion{font-size:var(--fs-body,1rem)}
.galeria-tarjeta.destacada .galeria-extracto{display:block;margin:12px 0 4px;color:var(--text-body);
  line-height:1.7;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.galeria-tarjeta.destacada .galeria-ver{opacity:1;transform:none}
.galeria-tarjeta.destacada .galeria-sello{display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  padding:4px 12px;border-radius:var(--radius-pill);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--text-onbrand);background:linear-gradient(90deg,var(--brand-accent),var(--brand-soft))}
.galeria-extracto,.galeria-sello{display:none}
.galeria-sello svg{width:12px;height:12px;flex:none}

/* ---------- La entrada: escalonada, una sola vez ---------- */
.galeria-aparece{opacity:0;transform:translateY(22px) scale(.98);
  transition:opacity 700ms var(--ease-standard), transform 900ms cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(var(--i,0) * 70ms)}
.galeria-aparece.visible{opacity:1;transform:none}
/* La tarjeta ya lleva su propia `transform`; al aparecer se le suma. */
.galeria-tarjeta.galeria-aparece{transform:perspective(900px) translateY(26px) scale(.97)}
.galeria-tarjeta.galeria-aparece.visible{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.galeria-tarjeta.galeria-aparece.visible.asentada{transition:transform 380ms cubic-bezier(.2,.8,.2,1), box-shadow 380ms var(--ease-standard), opacity 700ms}

/* ---------- PRÓXIMAMENTE ----------
   La tarjeta de cristal en el centro, y detrás una rejilla fantasma de
   tarjetas veladas que flotan despacio: se anuncia lo que viene sin enseñarlo. */
.galeria-pronto{position:relative;display:grid;place-items:center;min-height:min(560px,70svh);
  margin:0 auto var(--sp-8)}
.galeria-fantasmas{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);
  gap:18px;align-content:center;pointer-events:none;
  -webkit-mask:radial-gradient(ellipse at center,#000 30%,transparent 78%);
          mask:radial-gradient(ellipse at center,#000 30%,transparent 78%)}
.galeria-fantasma{aspect-ratio:4/5;border-radius:22px;background:var(--cristal);
  border:1px solid var(--cristal-borde);box-shadow:inset 0 1px 0 var(--gal-reflejo);
  filter:blur(2px);opacity:.75;animation:galeria-flota 8s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * -1.3s)}
.galeria-fantasma:nth-child(even){animation-duration:9.5s}
.galeria-pronto-tarjeta{position:relative;z-index:1;width:min(560px,100%);
  padding:clamp(28px,5vw,52px) clamp(22px,5vw,48px);text-align:center}
.galeria-pronto-tarjeta .galeria-antetitulo{display:block;margin:0 0 6px;font-size:var(--fs-sm);
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent)}
.galeria-pronto-tarjeta h3{margin:0 0 var(--sp-3);font-family:var(--font-display);
  font-size:clamp(2.2rem,6vw,3.6rem);line-height:1.05;letter-spacing:var(--ls-display,-.02em);
  background:linear-gradient(100deg,var(--brand-primary),var(--brand-accent) 55%,var(--brand-soft));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.galeria-pronto-tarjeta p{margin:0 auto var(--sp-5);max-width:420px;color:var(--text-body);line-height:1.7}
.galeria-pronto-tarjeta .galeria-indice{margin-bottom:var(--sp-5)}
.galeria-pronto-tarjeta .boton{margin-top:var(--sp-2)}

/* ---------- La vista previa del panel ---------- */
.galeria-previa{position:sticky;top:84px;z-index:5;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:center;gap:var(--sp-3);margin:0 auto var(--sp-6);padding:10px 16px;
  width:fit-content;max-width:100%}
.galeria-previa p{margin:0;font-size:var(--fs-sm);color:var(--text-body)}
.galeria-previa strong{color:var(--text-title)}
.galeria-previa .boton{padding:8px 16px;font-size:var(--fs-sm)}

/* ---------- El detalle de una persona ---------- */
.galeria-detalle{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;padding:16px}
.galeria-detalle-velo{position:absolute;inset:0;
  background:color-mix(in srgb,var(--surface-page) 42%,transparent);
  backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  animation:galeria-funde 420ms var(--ease-standard) both}
.galeria-detalle-panel{position:relative;width:min(980px,100%);max-height:calc(100svh - 32px);
  overflow:auto;overscroll-behavior:contain;display:grid;grid-template-columns:minmax(220px,340px) 1fr;
  gap:clamp(20px,3.5vw,44px);padding:clamp(20px,3.5vw,40px);
  background:var(--cristal-medio, var(--cristal));
  animation:galeria-sube 520ms cubic-bezier(.2,.8,.2,1) both}
.galeria-detalle.saliendo .galeria-detalle-velo{animation:galeria-funde 320ms var(--ease-standard) reverse both}
.galeria-detalle.saliendo .galeria-detalle-panel{animation:galeria-sube 320ms var(--ease-standard) reverse both}
.galeria-detalle-retrato{position:sticky;top:0;align-self:start;text-align:center}
.galeria-detalle-retrato .galeria-foto{border-radius:26px;padding:3px;
  box-shadow:0 24px 50px color-mix(in srgb,var(--brand-primary) 18%,transparent)}
.galeria-detalle-retrato .galeria-foto > img,
.galeria-detalle-retrato .galeria-foto > .galeria-iniciales{border-radius:23px}
.galeria-detalle-retrato h3{margin:var(--sp-4) 0 4px;font-family:var(--font-display);
  font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2}
.galeria-detalle-retrato .galeria-ocupacion{font-size:var(--fs-body,1rem)}
.galeria-detalle-grupo{display:inline-block;margin-top:var(--sp-3)}
.galeria-detalle-texto{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0}
.galeria-apartado{padding:var(--sp-5);border-radius:var(--radius-lg);
  background:color-mix(in srgb,var(--cristal-vivo) 60%,transparent);
  border:1px solid var(--cristal-borde-tenue, var(--cristal-borde));
  animation:galeria-sube 620ms cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(120ms + var(--i,0) * 90ms)}
.galeria-apartado h4{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-3);
  font-family:var(--font-display);font-size:1.05rem;color:var(--text-title)}
.galeria-apartado h4 svg{width:18px;height:18px;color:var(--brand-soft);flex:none}
.galeria-apartado p{margin:0 0 var(--sp-3);line-height:1.75;color:var(--text-body)}
.galeria-apartado p:last-child{margin-bottom:0}
.galeria-apartado .galeria-vacio{color:var(--text-muted);font-style:italic}
.galeria-vision{position:relative;margin:var(--sp-4) 0 0;padding:var(--sp-4) var(--sp-4) var(--sp-4) calc(var(--sp-4) + 6px);
  border-radius:var(--radius-md);background:color-mix(in srgb,var(--gal-luz-1) 14%,transparent);
  font-family:var(--font-display);font-size:1.02rem;line-height:1.65;color:var(--text-title)}
.galeria-vision::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--brand-accent),var(--brand-soft))}
.galeria-vision-rotulo{display:block;margin-bottom:4px;font-family:var(--font-ui,inherit);font-size:11px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-accent)}
.galeria-cerrar{position:absolute;top:14px;right:14px;z-index:3;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:var(--cristal-claro);border:1px solid var(--cristal-borde);
  color:var(--text-title);cursor:pointer;transition:transform var(--dur-base) var(--ease-standard)}
.galeria-cerrar:hover{transform:rotate(90deg)}
.galeria-cerrar:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
.galeria-cerrar svg{width:18px;height:18px}
.galeria-pasos{grid-column:1 / -1;display:flex;justify-content:space-between;gap:var(--sp-3);
  padding-top:var(--sp-4);border-top:1px solid var(--cristal-borde-tenue, var(--cristal-borde))}
.galeria-pasos .boton{padding:8px 16px}

/* La foto viaja de la tarjeta al detalle con la API de transiciones de vista,
   donde la haya. Donde no, el panel sube y ya. */
::view-transition-group(galeria-foto){animation-duration:520ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-old(root),::view-transition-new(root){animation-duration:360ms}

@keyframes galeria-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes galeria-funde{from{opacity:0}to{opacity:1}}
@keyframes galeria-sube{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- El enlace de la tarjeta de acceso ---------- */
.acceso-galeria{display:inline-flex;align-items:center;gap:6px;text-decoration:underline}
.acceso-galeria svg{width:13px;height:13px;flex:none}

/* ---------- Quien llega sin cuenta ----------
   Como el invitado del FARMA-Quiz: una casa con una sola habitación. No es
   seguridad (eso lo llevan las reglas de Firestore), es no enseñar puertas que
   no se pueden abrir. */
body.galeria-invitado .nav,
body.galeria-invitado .cabecera-acciones{display:none !important}
body.galeria-invitado .cabecera .marca{pointer-events:none}
/* El botón de volver a la puerta sólo lo ve quien entró sin cuenta. Va por CSS
   y no al pintar: la sección se pinta ANTES de que acceso.js sepa si hay
   sesión, y así no hay que repintar cuando se entera. */
.galeria-solo-invitado{display:none !important}
body.galeria-invitado .galeria-solo-invitado{display:revert !important}
body.galeria-invitado button.galeria-solo-invitado{display:inline-flex !important}

/* ---------- Pantallas estrechas ---------- */
@media (max-width:760px){
  .galeria-tarjeta.destacada{grid-template-columns:1fr;text-align:center}
  .galeria-detalle{padding:0;place-items:end stretch}
  .galeria-detalle-panel{grid-template-columns:1fr;max-height:92svh;border-radius:26px 26px 0 0}
  .galeria-detalle-retrato{position:static}
  .galeria-detalle-retrato .galeria-foto{width:min(240px,70%);margin:0 auto}
  .galeria-fantasmas{grid-template-columns:repeat(3,1fr)}
  .galeria-fantasma:nth-child(n+10){display:none}
  .galeria-previa{position:relative;top:auto}
}
@media (max-width:420px){
  .galeria-rejilla{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .galeria-tarjeta{padding:10px 10px 14px}
  .galeria-nombre{font-size:.95rem}
}

@media (prefers-reduced-motion:reduce){
  .galeria-fantasma{animation:none}
  .galeria-aparece,.galeria-tarjeta.galeria-aparece{opacity:1;transform:none;transition:none}
  .galeria-detalle-velo,.galeria-detalle-panel,.galeria-apartado{animation:none}
}

/* ---------- El panel: la pantalla de gestión ---------- */
.galeria-panel-estado{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.galeria-panel-estado .galeria-panel-verbos{display:flex;flex-wrap:wrap;gap:var(--sp-2);margin-left:auto}
.galeria-panel-persona{display:flex;align-items:center;gap:var(--sp-3)}
.galeria-panel-miniatura{flex:none;width:52px;height:64px;border-radius:12px;overflow:hidden;
  background:var(--gal-aro, linear-gradient(135deg,var(--brand-accent),var(--brand-soft)));padding:1.5px}
.galeria-panel-miniatura img,.galeria-panel-miniatura span{display:grid;place-items:center;width:100%;height:100%;
  border-radius:10.5px;object-fit:cover;font-weight:600;color:var(--text-onbrand);
  background:linear-gradient(150deg,color-mix(in srgb,var(--brand-accent) 78%,white),color-mix(in srgb,var(--brand-soft) 70%,white))}
.galeria-panel-orden{display:inline-flex;gap:4px}
.galeria-panel-orden .boton{padding:6px 10px;min-width:0}
.galeria-panel-editor{display:grid;grid-template-columns:minmax(180px,240px) 1fr;gap:var(--sp-5);align-items:start}
.galeria-panel-foto{display:flex;flex-direction:column;gap:var(--sp-2)}
.galeria-panel-foto .galeria-foto{width:100%}
.galeria-panel-foto input[type="range"]{width:100%}
.galeria-panel-campos{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.galeria-panel-dos{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.galeria-panel-contador{font-size:var(--fs-xs,.75rem);color:var(--text-muted);text-align:right}
@media (max-width:760px){
  .galeria-panel-editor,.galeria-panel-dos{grid-template-columns:1fr}
  .galeria-panel-foto{max-width:220px}
}