:root {
    /* Azul marino del overlay original del sitio anterior. */
    --ink:      #1C2745;
    --ink-2:    #26335A;
    /* Azul casi negro. Solo para titulos grandes sobre fondo claro: a ese tamano
       el --ink normal se lee blando y el indice de areas pedia mas peso. */
    --ink-dk:   #111729;
    --paper:    #FFFFFF;
    --paper-2:  #F3F4F7;
    --gold:     #B8873B;
    --gold-lt:  #D9B877;
    --grey:     #5C6470;
    /* Texto secundario sobre azul. Va claro a proposito: el Caslon Text tiene astas
       finas y la textura de fondo le resta legibilidad. */
    --grey-dk:  #CFD6E2;
    --rule:     #E1E4E9;
    --rule-dk:  rgba(184,135,59,.22);

    --display: "Libre Caslon Display", "Times New Roman", serif;
    --text:    "Libre Caslon Text", Georgia, serif;
    --sans:    "IBM Plex Sans", system-ui, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, monospace;

    --pad: clamp(1.25rem, 4vw, 3.5rem);
    --max: 1440px;
    --header-h: 92px;
    /* Interior de los botones de contorno: cada seccion lo iguala a su fondo. */
    --btn-bg: #FFFFFF;
  }
  .caption, .counsel, .figures, .bench, footer { --btn-bg: var(--ink); }
  .siteheader { --btn-bg: #000; }
  .verdicts, .journal { --btn-bg: #F3F4F7; }
  .bench__body { --btn-bg: #222C4C; }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0; background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.7; font-weight: 300;
    -webkit-font-smoothing: antialiased;
  }
  img { display: block; max-width: 100%; }
  a { color: inherit; text-decoration: none; }
  [hidden] { display: none !important; }
  :focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

  .wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--pad); }

  /* Etiquetas en monoespaciada: la voz de una caratula de expediente. */
  .tag {
    font-family: var(--mono); font-size: .68rem; font-weight: 500;
    letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin: 0;
  }
  .display {
    font-family: var(--display); font-weight: 400; line-height: 1.04; letter-spacing: -.015em;
    margin: 0; text-wrap: balance;
  }
  .lede { font-family: var(--text); font-size: 1.06rem; line-height: 1.75; color: var(--grey); max-width: 58ch; }

  /* ================= HEADER ================= */
  .siteheader {
    position: fixed; top: 0; left: 0; right: 0; z-index: 60;
    transition: background .4s ease, border-color .4s ease;
    border-bottom: 1px solid transparent;
  }
  .siteheader::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(36,50,87,.72), rgba(36,50,87,0));
    transition: opacity .4s ease;
  }
  /* Negro al compactarse, igual que la barra de utilidades. */
  .siteheader.is-stuck { background: #000; border-bottom-color: var(--rule-dk); }
  .siteheader.is-stuck::before { opacity: 0; }
  /* Al salir del hero el header se compacta: la barra de utilidades se retira y el
     logo baja de tamano, para no ocupar un cuarto de la pantalla durante el scroll. */
  .siteheader.is-stuck .utility { display: none; }
  .siteheader.is-stuck .brand img { width: 112px; }

  /* Una sombra muy leve en la fila del menu.
     El degradado de arriba se apaga justo donde caen los enlaces, asi que sobre un
     fotograma claro del video las letras se pierden. Esto las separa sin meter una
     banda oscura encima del video. Al compactarse el header el fondo ya es negro y la
     sombra sobra. */
  .siteheader .nav > li > a { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
  /* El logo GOLD sobre el video: en las escenas claras (cielo, piedra) el dorado pierde
     contraste, sobre todo "TRIAL LAWYERS". Dos sombras, sin tocar el color del logo: una
     corta y algo mas firme que perfila las letras, y un halo difuso que las separa del
     fondo. Sobre el header negro (is-stuck) no hace falta ninguna. */
  .siteheader .brand img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 8px rgba(0,0,0,.35)); }
  .siteheader.is-stuck .nav > li > a { text-shadow: none; }
  .siteheader.is-stuck .brand img { filter: none; }

  /* Barra de utilidades: solida siempre, para que el dato de contacto no dependa del video. */
  .utility { background: #000; border-bottom: 1px solid rgba(255,255,255,.12); }
  /* Mas especifico que `.siteheader .wrap`, que si no le impone el grid del menu. */
  .siteheader .utility .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-block: .6rem; line-height: 1.35; }
  /* Sin el saludo, el grupo ocupa la franja entera: los datos arrancan a la izquierda,
     donde estaba el saludo, y las redes se van al otro extremo con margin-left:auto.
     El primero pierde el relleno izquierdo y las redes el derecho, para que los dos
     extremos queden a ras del ancho de pagina, alineados con el logo de abajo. */
  .utility__right { display: flex; flex-wrap: wrap; align-items: center; flex: 1; }
  .utility__right > *:first-child { padding-left: 0; }
  .utility__right > * {
    display: flex; align-items: center; gap: .55rem; font-size: .84rem; color: #CFD6E2;
    padding-inline: clamp(.8rem, 1.6vw, 1.5rem); border-left: 1px solid rgba(255,255,255,.16);
  }
  .utility__right > *:first-child { border-left: 0; }
  .utility__right svg { color: var(--gold); flex: none; }

  /* Redes, donde antes iba el telefono. El numero se fue a la barra principal, que es la
     que sobrevive al scroll; en esta franja fina van los iconos. Cajas mas pequenas que
     las del pie: alli la seccion da aire y aqui la franja mide lo que mide.
     Los selectores llevan .utility__right delante para ganarle por especificidad a las
     reglas genericas de `> *` y `svg` de arriba, y no depender del orden del archivo. */
  .utility__right > .utility__social { gap: .4rem; margin-left: auto; padding-right: .9rem; }
  .utility__right .utility__social a {
    width: 26px; height: 26px; display: grid; place-items: center;
    border: 1px solid rgba(255,255,255,.16); color: #CFD6E2;
    transition: border-color .25s ease, color .25s ease;
  }
  .utility__right .utility__social a:hover { border-color: var(--gold); color: var(--gold); }
  .utility__right .utility__social svg { color: currentColor; }

  /* --- zonas de servicio ----------------------------------------------------
     Reutiliza .pcards y .pcard del indice de areas: las tarjetas de ciudad tienen
     que verse como el resto del sitio, no como un directorio pegado por detras.
     Lo de aqui son solo los anadidos que esas clases no traen. */
  .zona__condado { font-size: .82rem; letter-spacing: .05em; text-transform: uppercase;
    color: var(--gold); margin: -.2rem 0 .5rem; }
  .zona__condado--ficha { text-transform: none; letter-spacing: 0; font-size: .95rem;
    color: inherit; opacity: .8; margin: 0 0 1.8rem; }
  .zona__seccion { margin: 0 0 2.2rem; max-width: 68ch; }
  .zona__seccion h2 { margin: 0 0 .6rem; }
  .zona__seccion p { margin: 0; }
  /* El aviso de zona de servicio. Se ve, pero sin gritar: es la linea que impide que la
     pagina se lea como una sede que no existe, asi que tiene que leerse de verdad. */
  .zona__aviso { margin: 2rem 0 0; padding: .9rem 1.1rem; border-left: 3px solid var(--gold);
    background: rgba(184,135,59,.07); font-size: .95rem; line-height: 1.6; max-width: 68ch; }
  .zona__aviso--oficina { border-left-color: var(--navy-2, #0f2745); }
  /* Dos columnas en el cuerpo de la ficha: texto a ancho legible y, al lado, la
     tarjeta de contacto. Debajo de 900 px se apila y la tarjeta pasa detras del texto,
     que es donde tiene sentido leerla en un movil. */
  .zona__cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 3rem; align-items: start; }
  .zona__texto { min-width: 0; }
  /* La tarjeta acompana durante el scroll: el telefono no deberia quedarse arriba
     mientras se lee el resto de la pagina. */
  .zona__aside-caja { position: sticky; top: 96px; border: 1px solid var(--rule, rgba(0,0,0,.14));
    border-radius: 10px; overflow: hidden; background: #fff; }
  .zona__aside-foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
    object-position: center 22%; }
  .zona__aside-cuerpo { padding: 1.3rem 1.4rem 1.5rem; }
  .zona__aside-nombre { margin: 0 0 .3rem; font-size: .78rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--gold); }
  .zona__aside-titulo { margin: 0 0 .6rem; font-size: 1.3rem; line-height: 1.2; }
  .zona__aside-texto { margin: 0 0 1rem; font-size: .93rem; line-height: 1.6; opacity: .85; }
  .zona__aside-tel { display: inline-block; font-size: 1.28rem; font-weight: 700; letter-spacing: .02em;
    text-decoration: none; color: inherit; margin: 0 0 .8rem; }
  .zona__aside-tel:hover { color: var(--gold); }
  .zona__aside-dato { margin: 0 0 .6rem; font-size: .88rem; line-height: 1.55; opacity: .8; }
  .zona__aside-boton { margin: 1.1rem 0 0; }
  .zona__aside-boton .hbtn { width: 100%; text-align: center; }

  .zona__areas, .zona__cercanas { list-style: none; margin: 1rem 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: .5rem .7rem; }
  .zona__areas a, .zona__cercanas a { display: inline-block; padding: .45rem .9rem;
    border: 1px solid var(--rule, rgba(0,0,0,.14)); border-radius: 999px;
    text-decoration: none; font-size: .93rem; transition: border-color .15s, color .15s; }
  .zona__areas a:hover, .zona__cercanas a:hover { border-color: var(--gold); color: var(--gold); }
  .zona__volver { margin: 1.2rem 0 0; }
  .zona__cta { max-width: 68ch; }
  .zona__cta-botones { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.2rem 0 0; }

  /* --- selector de idioma ---------------------------------------------------
     Dos sitios, un componente: la franja de arriba en escritorio y junto al boton
     del menu cuando la navegacion se pliega. Se ensena uno u otro, nunca los dos,
     para que no haya dos selectores en pantalla a la vez.

     Va montado como un interruptor de dos posiciones: un marco tenue y el idioma
     activo en dorado solido. Asi se ve de un vistazo que hay dos opciones y cual
     esta puesta, que es lo que no se entendia cuando era solo texto con opacidades.
     Sigue siendo pequeno: es una utilidad, no una llamada a la accion. */
  .langsw {
    display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
    padding: .16rem .4rem .16rem .5rem;
    border: 1px solid rgba(255,255,255,.2); border-radius: 999px;
    background: rgba(255,255,255,.06);
  }
  .langsw__globo { font-size: .8em; line-height: 1; opacity: .8; }
  /* La barra se queda: el formato pedido es 🌐 EN | ES. Muy tenue, porque con la
     pastilla dorada ya se distingue cual esta puesto. */
  .langsw__sep { opacity: .3; font-weight: 300; margin: 0 -.06rem; }
  .langsw__op {
    font-weight: 700; letter-spacing: .05em; font-size: .84em; line-height: 1;
    padding: .24rem .46rem; border-radius: 999px; text-decoration: none;
    color: inherit; opacity: .72;
    transition: background-color .15s, color .15s, opacity .15s;
  }
  /* El activo, dorado solido con texto oscuro: contrasta con el negro de la franja
     y se lee antes que cualquier juego de opacidades. */
  .langsw__op.is-active {
    background: var(--gold); color: #10203a; opacity: 1; cursor: default;
  }
  a.langsw__op:hover, a.langsw__op:focus-visible {
    background: rgba(255,255,255,.14); color: var(--gold-lt); opacity: 1;
  }
  /* El foco se ve: quien navega con teclado tiene que saber donde esta. */
  a.langsw__op:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

  /* El selector va el ultimo de la franja, a la derecha del todo: las redes llevan
     margin-left:auto y lo empujan todo a ese extremo. */
  .utility__right > .langsw--barra { padding: .16rem .4rem .16rem .5rem; border: 1px solid rgba(255,255,255,.2); }
  .utility__right > .utility__social + .langsw--barra { padding-left: 0; margin-left: .9rem; }
  /* La de la cabecera no existe mientras la navegacion de escritorio este visible. */
  .langsw--cabecera { display: none; }
  @keyframes gleam {
    0%, 62% { transform: translateX(-160%) skewX(-18deg); }
    100%    { transform: translateX(380%) skewX(-18deg); }
  }

  /* El telefono en la barra principal, donde antes iba el boton de consulta. Mismo
     tratamiento que el de la franja de arriba —oro, mono, esquina cortada y el mismo
     destello— solo que a la escala de esta barra.
     No duplica al de arriba: al hacer scroll la franja se oculta (.is-stuck .utility),
     asi que este acaba siendo el unico numero a la vista, que es cuando mas hace falta. */
  .hphone {
    position: relative; overflow: hidden; justify-self: end;
    /* La chapa se ajusta al contenido: se aprieta el relleno, no la letra. El numero y
       el auricular se quedan como estaban —son lo que hay que leer desde lejos— y lo que
       encoge es el oro de alrededor. */
    display: inline-flex; align-items: center; gap: .65rem;
    padding: .6rem 1.15rem; background: var(--gold); color: #000;
    font-family: var(--mono); font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 600; letter-spacing: .05em;
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
    transition: background .25s;
  }
  /* El auricular y el filete que lo separa del numero. El filete es el mismo recurso
     que la casa usa en la franja de arriba y en el pie para separar datos, solo que en
     negro traslucido porque aqui el fondo es oro. Sin el, el icono y el numero se leian
     como un bloque suelto. */
  .hphone svg { flex: none; filter: drop-shadow(0 1px 0 rgba(255,255,255,.4)); }
  .hphone > span {
    padding-left: .65rem; border-left: 1px solid rgba(0,0,0,.28);
    text-shadow: 0 1px 0 rgba(255,255,255,.4);
  }
  /* El filete separador tambien, para que no se quede plano al lado del resto. */
  .hphone > span { box-shadow: -1px 0 0 rgba(255,255,255,.28); }
  .hphone:hover { background: var(--gold-lt); }
  .hphone::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.65), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: gleam 3.6s ease-in-out infinite;
  }
  .siteheader .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.5rem; padding-block: .7rem; }

  /* El logo oficial GOLD (assets/img/ace-law-logo-gold.svg, 1862x1350): un solo SVG, sin
     tocar ni animar. Se fija el ANCHO y el alto sale de la proporcion (height: auto; los
     atributos width/height del <img> solo reservan el hueco sin salto al cargar). El mismo
     ancho que tenia el logo anterior; al ser mas apaisado, ocupa menos alto, y el header
     mide su altura real por JS (--header-h), asi que el hero se adapta solo. */
  .brand img { display: block; width: 172px; height: auto; max-width: 100%; transition: width .3s ease; }
  .nav { display: flex; justify-content: center; gap: 2.1rem; list-style: none; margin: 0; padding: 0; }
  .nav > li { position: relative; }
  .nav > li > a {
    display: block; padding: .5rem 0; font-family: var(--mono); font-size: .88rem;
    font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #EDEAE3;
    border-bottom: 1px solid transparent; text-shadow: 0 1px 5px rgba(10,16,32,.85);
  }
  .nav > li:hover > a { color: var(--gold-lt); border-bottom-color: var(--gold); }
  .nav > li > a.is-active { color: #fff; border-bottom-color: var(--gold); }
  .sub {
    position: absolute; top: 100%; left: -1.1rem; min-width: 285px; background: var(--ink);
    border: 1px solid var(--rule-dk); border-top: 1px solid var(--gold);
    list-style: none; margin: .5rem 0 0; padding: .35rem 0;
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s ease;
  }
  .nav > li:hover .sub, .nav > li:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
  .sub a { display: block; padding: .62rem 1.15rem; font-size: .88rem; color: #CFD6E2; }
  .sub a:hover { color: var(--gold-lt); background: var(--ink-2); }

  /* Todos los botones con esquinas cortadas. Un borde normal se cortaria en las
     diagonales, asi que el marco son dos capas: ::before es el filete y ::after el
     interior, pintado del color de la seccion via --btn-bg. */
  .hbtn {
    position: relative; isolation: isolate;
    display: inline-flex; align-items: center; gap: .6rem; font-family: var(--mono);
    font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    padding: .9rem 1.6rem; border: 0; background: transparent; color: var(--gold-lt);
    cursor: pointer; transition: color .25s ease;
  }
  .hbtn::before, .hbtn::after {
    content: ""; position: absolute; pointer-events: none;
    clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  }
  .hbtn::before { inset: 0; z-index: -2; background: var(--gold); transition: background .25s ease; }
  .hbtn::after { inset: 1px; z-index: -1; background: var(--btn-bg); transition: opacity .25s ease; }
  .hbtn:hover { color: var(--ink); }
  .hbtn:hover::after { opacity: 0; }

  .hbtn--solid { color: #000; }
  .hbtn--solid::after { opacity: 0; }
  .hbtn--solid:hover { color: #000; }
  .hbtn--solid:hover::before { background: var(--gold-lt); }

  .hbtn--ink { color: var(--ink); }
  .hbtn--ink::before { background: var(--ink); }
  .hbtn--ink:hover { color: var(--paper); }

  .burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 40px; padding: 0 10px; background: transparent; border: 1px solid rgba(255,255,255,.32); cursor: pointer; }
  .burger span { display: block; height: 1px; background: #fff; transition: transform .25s, opacity .25s; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .mobilemenu { background: var(--ink); border-top: 1px solid var(--rule-dk); max-height: 74vh; overflow-y: auto; }
  .mobilemenu ul { list-style: none; margin: 0; padding: .5rem 0 1.5rem; display: grid; }
  .mobilemenu a { display: block; padding: .85rem 0; font-size: .95rem; color: #EDEAE3; border-bottom: 1px solid rgba(255,255,255,.07); }
  .mobilemenu a:hover { color: var(--gold-lt); }
  .mobilemenu .grp { font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding: 1.15rem 0 .3rem; }
  .mobilemenu a.sub-item { padding-left: 1rem; font-size: .92rem; color: #CFD6E2; }
  @media (min-width: 1081px) { .mobilemenu { display: none !important; } }

  /* ================= HERO ================= */
  /* El texto va abajo: el video se ve limpio arriba y el titular gana contraste. */
  /* svh evita el salto por la barra de direcciones en moviles; vh queda de respaldo. */
  .hero {
    position: relative; min-height: 100vh; min-height: 100svh;
    display: flex; flex-direction: column; justify-content: flex-end;
    overflow: hidden; background: var(--ink);
  }
  .hero__media { position: absolute; inset: 0; }
  .hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }
  /* Poster del hero: un fotograma real del propio video (0,5 s) encima del <video>
     mientras este arranca, para que no haya salto poster -> negro -> vestibulo. Solo se
     pinta si el script de HeroVideo lo enciende (data-video="cargando"), y en cuanto el
     video empieza a reproducirse (desde 0:00, detras) se funde en 0,8 s. No es un velo:
     es una imagen del video, y terminado el fundido no queda nada encima salvo el scrim
     de siempre. Ver components/HeroVideo.tsx. */
  .hero__poster { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .8s ease; }
  .hero[data-video="cargando"] .hero__poster { opacity: 1; transition: none; }
  /* Sombra plana al 20%: el video se ve casi limpio. La legibilidad del titular
     la sostiene el text-shadow, no el velo. */
  .hero__scrim { position: absolute; inset: 0; background: rgba(28,39,69,.20); }
  .hero > .wrap { position: relative; z-index: 2; width: 100%; text-align: center; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); padding-top: calc(var(--header-h) + 4rem); }

  /* Sombra fuerte en el texto en vez de velo sobre el video: el clip se ve limpio. */
  .hero__title, .hero__creed, .hero__name span {
    text-shadow: 0 2px 22px rgba(10,16,32,.92), 0 2px 7px rgba(10,16,32,.78), 0 1px 2px rgba(10,16,32,.6);
  }
  /* El tope baja de 4.5rem a 3.9rem (-13%): en pantallas anchas el titular comia
     demasiado. El factor de 5.4vw no se toca, asi que por debajo de ~1150 px queda
     exactamente igual que antes. */
  .hero__title {
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.85rem, 5.4vw, 3.9rem); line-height: 1.14; letter-spacing: .005em;
    color: #fff; margin: 0; text-wrap: balance;
  }
  /* La raya dorada bajo ACE (AS en espanol). Subraya la palabra de la marca, no la
     frase entera: es la que da nombre al despacho.

     Va en el ESTADO BASE a scaleX(1), visible. Cuando la entrada no corre —llegando
     desde otra pagina del sitio, con movimiento reducido o sin JavaScript— la raya
     forma parte del hero de siempre, no aparece de la nada. La entrada solo decide
     CUANDO se dibuja. */
  .hero__ace { position: relative; display: inline-block; }
  .hero__ace::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -.08em;
    height: max(3px, .07em); background: var(--gold-lt); border-radius: 2px;
    box-shadow: 0 1px 10px rgba(10,16,32,.75);
    transform: scaleX(1); transform-origin: left center;
  }

  .hero__creed {
    font-family: var(--display); text-transform: uppercase;
    font-size: clamp(.9rem, 1.85vw, 1.45rem); line-height: 1.4; letter-spacing: .02em;
    color: #fff; margin: clamp(.9rem, 1.8vw, 1.35rem) 0 clamp(1.25rem, 2.4vw, 1.85rem);
  }
  .hero__name { margin: 0; }
  /* Marco de esquinas cortadas hecho con dos capas: el ::before es el filete y el
     ::after tapa el interior dejando 1px a la vista. Un borde normal se cortaria
     en las diagonales del clip-path. */
  .hero__name span {
    position: relative; display: inline-block; isolation: isolate;
    padding: clamp(.55rem, 1.1vw, .9rem) clamp(1.6rem, 4vw, 3.4rem);
    font-family: var(--text); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.15rem, 2.7vw, 2.15rem); letter-spacing: .07em; color: var(--gold-lt);
  }
  .hero__name span::before {
    content: ""; position: absolute; inset: 0; z-index: -3;
    background: rgba(255,255,255,.72);
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  }
  .hero__name span::after {
    content: ""; position: absolute; inset: 1px; z-index: -2;
    background: rgba(10,16,32,.3);
    clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  }
  .hero__name .gleam {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
  }
  .hero__name .gleam::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.32), transparent);
    transform: translateX(-160%) skewX(-18deg);
    animation: gleam 4.2s ease-in-out infinite;
  }


  /* ---------- ENTRADA DE LA PORTADA (tres frases y luego el hero) ----------
     Tres frases encadenadas sobre el video y despues el hero de siempre. Unos 11,65 s:
     cada frase aguanta 2,7 s y la cruza un brillo, una sola vez, de izquierda a derecha;
     al final vuelve el titular y, dos segundos despues, se traza la raya bajo ACE.

     TRES DECISIONES QUE NO SON DE ESTILO:

     1. El estado BASE de esta hoja es el hero final, visible. La entrada solo existe
        cuando un script marca .hero[data-intro="rodando"]. Sin JavaScript, con el
        script fallando o con un rastreador que no lo ejecute, la portada se ve
        entera desde el primer fotograma: el H1 nunca depende de una animacion.
     2. El telon y las frases viven DENTRO del hero, con z-index 3. La cabecera va
        fija a 60, asi que nunca queda tapada ni pierde contraste.
     3. pointer-events: none en todo el bloque. La entrada es decorado; ni un solo
        clic se pierde contra ella mientras corre.

     El texto de las frases es aria-hidden: es narrativa, no contenido. Un lector de
     pantalla va directo al H1 sin esperar seis segundos. */

  .hero__intro {
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    display: grid; place-items: center;
  }
  .hero__telon {
    position: absolute; inset: 0; background: rgba(10,16,32,.58);
    opacity: 0; transition: opacity .4s ease;
  }
  .hero__intro > .wrap { display: grid; place-items: center; }
  /* Las tres en la MISMA celda de la rejilla: se funden una sobre otra sin moverse
     de sitio y sin posicionamiento absoluto. */
  .hero__linea {
    position: relative;
    grid-area: 1 / 1; margin: 0; max-width: min(90vw, 44rem); text-align: center;
    font-family: var(--display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.2rem, 3.4vw, 2.55rem); line-height: 1.24; letter-spacing: .045em;
    color: #fff; text-wrap: balance;
    text-shadow: 0 2px 22px rgba(10,16,32,.92), 0 2px 7px rgba(10,16,32,.78), 0 1px 2px rgba(10,16,32,.6);
    opacity: 0; transition: opacity .35s ease;
  }
  /* El brillo que cruza la frase una vez, de izquierda a derecha.

     Es una COPIA del texto encima del original (content: attr(data-texto)) con un
     degradado recortado a las letras. El texto de abajo conserva su sombra intacta,
     que es lo que lo hace legible sobre el video; recortar el degradado sobre el
     original habria matado la sombra y con ella la lectura.

     El destello es DORADO, no blanco. La primera version lo hice blanco, como el de la
     chapa del nombre, y no se veia nada: el texto ya es blanco. Sobre letras blancas lo
     unico que registra es un color, y el del sitio es el oro del filete de debajo.

     En reposo el degradado esta fuera de la caja: no se ve nada. */
  .hero__linea::before {
    content: attr(data-texto);
    position: absolute; inset: 0; pointer-events: none;
    background-image: linear-gradient(102deg,
      transparent 34%, rgba(217,184,119,.9) 44%, #FBF0D8 50%, rgba(217,184,119,.9) 56%, transparent 66%);
    background-size: 250% 100%; background-repeat: no-repeat;
    background-position: 108% 0;
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    text-shadow: none;
  }

  /* Filete dorado bajo la frase: la marca asomando, no un adorno suelto. */
  .hero__linea::after {
    content: ""; display: block; width: clamp(2.6rem, 7vw, 4.2rem); height: 1px;
    margin: clamp(.9rem, 2vw, 1.35rem) auto 0; background: var(--gold-lt);
    transform: scaleX(0); opacity: 0;
  }

  /* Porcentajes calculados sobre los 2,7 s de cada frase: entra en 0,24 s, aguanta
     2,05 s a plena opacidad y sale en 0,4 s. */
  @keyframes heroFrase {
    0%   { opacity: 0; transform: translateY(16px); filter: blur(7px); }
    9%   { opacity: 1; transform: translateY(0);    filter: blur(0); }
    85%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
    100% { opacity: 0; transform: translateY(-12px); filter: blur(5px); }
  }
  @keyframes heroFilete {
    0%   { opacity: 0; transform: scaleX(0); }
    14%  { opacity: .9; transform: scaleX(1); }
    85%  { opacity: .9; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
  }
  /* Una sola pasada, de izquierda a derecha, y termina fuera: no vuelve.

     Los porcentajes van al reves de lo que parece. Con background-size al 250 %,
     background-position: X% alinea el X% de la imagen con el X% de la caja, asi que
     subir X empuja la imagen hacia la IZQUIERDA. De 108 % a -8 % la banda entra por
     el borde izquierdo y sale por el derecho, que es lo que se pedia. Los dos
     extremos la dejan completamente fuera de la caja, asi que en reposo no se ve
     nada ni antes ni despues. */
  @keyframes heroBrillo {
    from { background-position: 108% 0; }
    to   { background-position: -8% 0; }
  }
  @keyframes heroTelon {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { opacity: 0; }
  }
  /* El hero NO empieza escondido: empieza pintado y se disuelve en el telon en
     menos de medio segundo. Es la diferencia entre un LCP de 0,15 s y uno de 7 s.

     Chrome anota el Largest Contentful Paint cuando el elemento se PINTA, y no
     retira la anotacion si luego se oculta; un elemento que nace en opacity 0 no
     se pinta nunca hasta que la animacion lo trae, y ahi el titular tardaba seis
     segundos en existir para la metrica. Medido en este mismo servidor: 156 ms
     asi, 7064 ms empezando invisible. La segunda cifra es "Poor" en Core Web
     Vitals, en la portada de un despacho que vive del buscador.

     A la vista tampoco pierde: la escena aparece, se atenua y entra el relato.
     El titular vuelve entero al final. */
  @keyframes heroSeVa {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes heroEntra {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroAsoma {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  /* La raya se recoge con la disolucion del principio y se vuelve a trazar, de
     izquierda a derecha, un segundo largo despues de que vuelva el titular. */
  @keyframes heroRayaFuera {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0); }
  }
  @keyframes heroRaya {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }

  /* Solo con el atributo puesto por el script. Y solo si el visitante no ha pedido
     menos movimiento: ahi no hay entrada, hay portada. */
  @media (prefers-reduced-motion: no-preference) {
    /* Sin telon: durante las tres frases el video se ve con la MISMA luz que despues,
       solo con el velo fijo del 20 % (.hero__scrim). Oscurecerlo al 58 % mientras
       pasaban las frases hacia que la portada se viera apagada al llegar y luego se
       aclarara. Las frases se leen por su sombra, igual que el titular. */
    .hero[data-intro="rodando"] .hero__linea {
      animation: heroFrase 2.7s cubic-bezier(.22,.61,.36,1) both;
    }
    .hero[data-intro="rodando"] .hero__linea::after {
      animation: heroFilete 2.7s cubic-bezier(.22,.61,.36,1) both;
    }
    /* El brillo entra 0,4 s despues de la frase, cuando ya esta entera y nitida.
       Antes cruzaria un texto todavia borroso y no se entenderia que es. */
    .hero[data-intro="rodando"] .hero__linea::before {
      animation: heroBrillo 1.25s cubic-bezier(.4,0,.3,1) forwards;
    }
    .hero[data-intro="rodando"] .hero__linea--1,
    .hero[data-intro="rodando"] .hero__linea--1::after { animation-delay: .45s; }
    .hero[data-intro="rodando"] .hero__linea--2,
    .hero[data-intro="rodando"] .hero__linea--2::after { animation-delay: 3s; }
    .hero[data-intro="rodando"] .hero__linea--3,
    .hero[data-intro="rodando"] .hero__linea--3::after { animation-delay: 5.55s; }
    .hero[data-intro="rodando"] .hero__linea--1::before { animation-delay: .85s; }
    .hero[data-intro="rodando"] .hero__linea--2::before { animation-delay: 3.4s; }
    .hero[data-intro="rodando"] .hero__linea--3::before { animation-delay: 5.95s; }

    /* El hero de siempre, entrando escalonado cuando la tercera frase se va. */
    .hero[data-intro="rodando"] .hero__title {
      animation: heroSeVa .45s ease forwards, heroEntra .9s cubic-bezier(.22,.61,.36,1) 8.15s forwards;
    }
    .hero[data-intro="rodando"] .hero__creed {
      animation: heroSeVa .45s ease forwards, heroEntra .9s cubic-bezier(.22,.61,.36,1) 8.35s forwards;
    }
    .hero[data-intro="rodando"] .hero__name {
      animation: heroSeVa .45s ease forwards, heroEntra .9s cubic-bezier(.22,.61,.36,1) 8.55s forwards;
    }
    .hero[data-intro="rodando"] .areabar {
      animation: heroSeVa .45s ease forwards, heroAsoma .8s ease 8.75s forwards;
    }
    /* El titular esta entero a los 9,05 s; la raya entra DOS SEGUNDOS despues, a los
       11,05 s. Ese respiro es el que hace que se lea como un subrayado y no como una
       parte mas del titulo que llega tarde. */
    .hero[data-intro="rodando"] .hero__ace::after {
      animation: heroRayaFuera .45s ease forwards, heroRaya .6s cubic-bezier(.22,.61,.36,1) 11.05s forwards;
    }
  }

  /* Al saltarla (una rueda, un clic, una tecla) el atributo pasa a "hecho": las
     animaciones desaparecen y estas transiciones dejan un aterrizaje suave en vez
     de un corte seco. .hero solo existe en la portada, asi que no alcanzan a nadie
     mas. */
  .hero__title, .hero__creed, .hero__name, .hero .areabar {
    transition: opacity .45s ease, transform .45s ease;
  }
  .hero[data-intro="hecho"] .hero__telon,
  .hero[data-intro="hecho"] .hero__linea { opacity: 0; }

  /* Fachada del juzgado detras de las bandas azules: da profundidad sin restar lectura.
     isolation crea contexto de apilado para que el z-index -1 quede sobre el fondo
     de la seccion y debajo del contenido. */
  .caption, .counsel, .figures, .bench, footer { position: relative; isolation: isolate; }
  .caption::before, .counsel::before, .figures::before, .bench::before, footer::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: url(/assets/img/hero.webp) center / cover no-repeat;
    opacity: .14;
  }

  /* ================= FRANJA DE AREAS (dentro del video) ================= */
  .areabar { position: relative; z-index: 2; }
  .areabar .wrap { padding-block: 0 clamp(1.5rem, 3vw, 2.5rem); }
  /* Los filetes son bordes de cada celda, no el fondo del contenedor visto por el gap:
     con el truco del gap el color del contenedor se colaba por las celdas transparentes
     y velaba el video entero. Asi el panel queda limpio y solo se dibujan las lineas.
     Se apagan con `transparent` en vez de `0` para no alterar el tamano al reacomodar. */
  .areabar__grid {
    --area-rule: rgba(255,255,255,.26);
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: transparent; border: 1px solid rgba(255,255,255,.3);
  }
  .areabar__grid a {
    display: grid; justify-items: center; gap: .8rem; text-align: center;
    padding: clamp(.8rem, 1.4vw, 1.1rem) .75rem; gap: .6rem;
    background: transparent;
    border-left: 1px solid var(--area-rule); border-top: 1px solid var(--area-rule);
    color: #fff; transition: background .25s ease, color .25s ease;
  }
  .areabar__grid a:nth-child(5n+1) { border-left-color: transparent; }
  .areabar__grid a:nth-child(-n+5) { border-top-color: transparent; }
  .areabar__grid a:hover { background: rgba(10,16,32,.42); color: var(--gold-lt); }
  /* Con la celda casi transparente, la lectura la sostienen las sombras. */
  .areabar svg { width: 32px; height: 32px; stroke: currentColor; filter: drop-shadow(0 1px 5px rgba(10,16,32,.95)); }
  .areabar span { font-size: .8rem; line-height: 1.3; text-shadow: 0 1px 7px rgba(10,16,32,.95), 0 1px 2px rgba(10,16,32,.8); }

  /* ================= CARATULA ================= */
  /* Bloque de datos con el aire de la caratula de un expediente. */
  .caption { background: var(--ink); color: var(--paper); }
  .caption .wrap { padding-block: clamp(2.25rem, 4vw, 3.25rem); }
  .caption__grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-dk); }
  .caption__cell { padding: 1.5rem clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--rule-dk); }
  .caption__cell:first-child { border-left: 0; }
  .caption__cell dt { font-family: var(--mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
  .caption__cell dd { margin: 0; font-family: var(--display); font-size: 1.32rem; line-height: 1.25; color: #fff; }
  .caption__cell dd small { display: block; font-family: var(--sans); font-size: .8rem; color: var(--grey-dk); margin-top: .35rem; letter-spacing: .01em; }

  /* ================= AREAS DE PRACTICA ================= */
  .index { background: var(--paper); }
  .index .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .index__head { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-bottom: clamp(2rem, 4vw, 3rem); }
  .index__head .display { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin-top: .9rem; }
  .index__head .display em { font-style: normal; color: var(--gold); }

  /* minmax(0, 1fr) y no 1fr a secas: con 1fr una palabra larga que no cabe (en negrita,
     "Planificacion" o "Litigation" en tarjetas de ~185 px) ensanchaba su columna y el grid
     dejaba de ser regular. Asi las columnas son siempre iguales; si una palabra no cabe, el
     titulo la corta con guion (ver .pcard > h3). */
  .pcards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.35rem; }
  .pcard {
    position: relative; background: #fff;
    border: 1px solid var(--rule); border-top: 3px solid var(--gold);
    padding: 2.1rem 1.6rem 1.8rem;
    display: flex; flex-direction: column;
    transition: border-color .25s ease, box-shadow .3s ease, transform .3s ease;
  }
  .pcard:hover { border-color: rgba(184,135,59,.55); border-top-color: var(--gold); box-shadow: 0 20px 44px rgba(28,39,69,.15); transform: translateY(-6px); }
  /* Indice de servicio: mismo registro monoespaciado que la caratula. */
  /* La esquina lleva el as del logo, no el numero de orden: la marca dice de quien es
     la tarjeta y no sugiere que las areas esten ordenadas por importancia.
     Se balancea despacio, cada tarjeta desfasada respecto a la anterior para que la
     fila no lata a la vez; al pasar el raton se para, crece y se endereza. */
  .pcard::before {
    content: ""; position: absolute; top: 1rem; right: 1.15rem;
    width: 28px; height: 32px; opacity: .85;
    background: url(/assets/img/mark-gold.webp) center / contain no-repeat;
    transform-origin: 50% 88%;
    animation: aceSway 6.5s ease-in-out infinite;
    transition: opacity .3s ease, transform .3s ease;
  }
  .pcard:nth-child(2)::before { animation-delay: -1.3s; }
  .pcard:nth-child(3)::before { animation-delay: -2.6s; }
  .pcard:nth-child(4)::before { animation-delay: -3.9s; }
  .pcard:nth-child(5)::before { animation-delay: -5.2s; }
  .pcard:hover::before { animation: none; opacity: 1; transform: scale(1.18) rotate(0deg); }
  @keyframes aceSway {
    0%, 100% { transform: rotate(-4deg) translateY(0); }
    50%      { transform: rotate(4deg) translateY(-2px); }
  }
  /* Las tarjetas van sin icono: el as de la esquina es la unica marca. El titulo
     reserva el hueco del as para que no se le meta debajo al partirse en dos lineas, y
     una altura minima para que en una fila los titulos de una y de dos lineas dejen el
     parrafo a la misma altura.

     h3 = una PRACTICA (portada, indice de areas y areas de cada ciudad, EN y ES). Su
     aspecto es el de los titulos de las tarjetas de practica de todo el sitio: lo pone la
     regla compartida ".svc h3, .pcard h3" de pages.css (serif 700, casi negro, filete
     dorado). Aqui solo va lo propio de esta tarjeta.

     h2 = una CIUDAD, en el indice de zonas: alli las tarjetas son la primera seccion bajo
     el H1 y saltar al h3 dejaria un hueco en la jerarquia. No es una practica y conserva
     su estilo. */
  .pcard h3, .pcard h2 { padding-right: 2.4rem; }
  /* Dos lineas de titulo (2 x line-height 1.25) mas el hueco del filete (.7rem): con un
     titulo de una linea el filete baja al mismo sitio que en uno de dos, y los parrafos
     de la fila arrancan alineados. */
  .pcard h3 { min-height: calc(2.5em + .7rem); }
  /* Con el titulo en negrita, en 5 columnas algunas areas ocupan TRES lineas ("Business &
     Civil Litigation", "Planificacion patrimonial y sucesoria"), y una altura minima fija
     ya no alinea la fila. Con subgrid cada fila de tarjetas comparte sus tres pistas
     (titulo, parrafo, enlace): el titulo mas alto de la fila marca la altura para todas y
     los parrafos arrancan a la misma altura con una, dos o tres lineas. El titulo se
     ajusta a su texto (align-self: start) para que el filete dorado quede pegado a el.
     Solo las tarjetas de practica (h3); las de ciudad (h2, con condado) no cambian. Sin
     subgrid o sin :has() se queda la altura minima de arriba. */
  @supports (grid-template-rows: subgrid) {
    .pcard:has(> h3) { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .pcard:has(> h3) > h3 { min-height: 0; align-self: start; }
  }
  /* Mismo cuerpo que el resto de titulos de practica. En las tarjetas mas estrechas (5
     columnas entre ~1080 y ~1250 px) una palabra larga en negrita puede no caber entera:
     se corta con guion segun el idioma de la pagina (<html lang>), en vez de ensanchar la
     columna o salirse de la tarjeta. */
  .pcard > h3 { hyphens: auto; overflow-wrap: break-word; }
  .pcard h2 {
    font-family: var(--display); font-weight: 400; font-size: 1.34rem; line-height: 1.2;
    color: var(--ink); margin: 0 0 .8rem; min-height: 2.4em;
  }
  .pcard p { font-size: .88rem; line-height: 1.62; color: var(--grey); margin: 0 0 1.75rem; }
  .pcard .more {
    margin-top: auto; display: inline-flex; align-items: center; gap: .5rem;
    font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  }
  .pcard .more svg { transition: transform .25s ease; }
  .pcard:hover .more svg { transform: translateX(4px); }

  /* ================= KEVIN ================= */
  .counsel { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
  .counsel .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }
  /* La foto es un retrato vertical, asi que la columna se estrecha: con el reparto
     anterior una foto 4:5 salia mas alta que todo el texto de al lado. */
  .counsel__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
  /* Esquinas cortadas, mismo corte que la chapa del telefono pero a escala de foto. */
  .counsel__photo {
    position: relative; overflow: hidden; aspect-ratio: 4 / 5;
    clip-path: polygon(44px 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%, 0 44px);
  }
  .counsel__photo img {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
    display: block; filter: grayscale(.32) contrast(1.04);
    transition: transform .7s cubic-bezier(.22,1,.36,1), filter .5s ease;
  }

  /* El retrato cambia en cada carga.
     Se pintan todos los retratos y aqui se destapa uno solo. Quien elige es un script
     de una linea que marca <html data-retrato="N"> antes de que se pinte nada: asi la
     portada sigue siendo una pagina estatica —no hay que renderizarla por peticion— y
     no se ve el cambio de foto. Sin JavaScript sale el primero, que es el caso por
     defecto y no un fallo.
     Al anadir un retrato: una linea mas en el HTML y un bloque mas aqui. */
  .counsel__photo img { display: none; }
  .counsel__photo img:first-child { display: block; }
  :root[data-retrato="1"] .counsel__photo img { display: none; }
  :root[data-retrato="1"] .counsel__photo img:nth-child(2) { display: block; }
  .counsel__photo:hover img { transform: scale(1.06); filter: grayscale(0) contrast(1.06); }
  .counsel .display { font-size: clamp(1.9rem, 4vw, 3.1rem); color: #fff; }
  .counsel .lede { color: var(--grey-dk); }
  .pull {
    font-family: var(--display); font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.2;
    color: var(--gold-lt); margin: clamp(1.5rem, 3vw, 2.25rem) 0;
    padding-left: clamp(1rem, 2vw, 1.75rem); border-left: 1px solid var(--gold);
  }
  .docket { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; }
  .docket li { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1.25rem; padding: .85rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .92rem; color: var(--grey-dk); }
  .docket b { font-family: var(--mono); font-weight: 400; font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); padding-top: .35em; }

  /* ================= CIFRAS ================= */
  .figures { background: var(--ink); }
  .figures .wrap { padding-block: clamp(3rem, 5.5vw, 4.75rem); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
  .figure { padding-inline: clamp(1rem, 2vw, 2rem); border-left: 1px solid rgba(255,255,255,.15); text-align: center; }
  .figure:first-child { border-left: 0; }
  .figure > svg { color: var(--gold); margin: 0 auto 1.15rem; }
  .figure b { display: block; font-family: var(--display); font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: .95; color: #fff; font-variant-numeric: tabular-nums; }
  .figure span { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-top: .95rem; }

  /* ================= RESENAS ================= */
  .verdicts { background: var(--paper-2); }
  .verdicts .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .vhead { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: end; margin-bottom: 2.5rem; }
  .vrating { text-align: right; }
  .vrating b { display: block; font-family: var(--display); font-size: clamp(3rem, 6vw, 4.4rem); line-height: .88; color: var(--ink); font-variant-numeric: tabular-nums; }
  .vrating .stars { color: var(--gold); font-size: 1rem; letter-spacing: .22em; margin: .6rem 0 .4rem; }
  .vrating span { font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey); }
  /* Dos paginas de tres apiladas en la misma celda: la altura la fija la mas alta,
     asi el bloque no salta al cambiar de pagina. */
  .vstack { display: grid; }
  .vpage {
    grid-area: 1 / 1;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
    background: var(--rule); border: 1px solid var(--rule);
    opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s;
  }
  .vpage.is-on { opacity: 1; visibility: visible; }
  .vcard {
    position: relative; background: var(--paper);
    padding: clamp(1.6rem, 2.4vw, 2.1rem); border-top: 2px solid transparent;
    display: flex; flex-direction: column; transition: border-top-color .3s ease;
  }
  .vcard:hover { border-top-color: var(--gold); }
  .vcard__quote {
    position: absolute; top: .55rem; right: 1.2rem; pointer-events: none;
    font-family: var(--display); font-size: 4.2rem; line-height: 1; color: var(--gold); opacity: .16;
  }
  .vcard__stars { font-size: .82rem; letter-spacing: .2em; color: var(--gold); margin-bottom: 1rem; }
  /* pre-line: las resenas de Google pueden traer parrafos; se respetan sin tocar el texto. */
  .vcard blockquote { font-family: var(--text); font-size: 1.02rem; line-height: 1.65; margin: 0 0 1.75rem; color: var(--ink); white-space: pre-line; }
  .vcard__meta { margin-top: auto; display: flex; align-items: center; gap: .8rem; padding-top: 1.15rem; border-top: 1px solid var(--rule); }
  .vcard__av {
    width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--gold);
    display: grid; place-items: center;
    font-family: var(--mono); font-size: .68rem; letter-spacing: .02em; color: var(--gold);
  }
  .vcard__who { display: grid; line-height: 1.35; }
  .vcard cite { font-style: normal; font-family: var(--display); font-size: 1.02rem; color: var(--ink); }
  .vcard .src { font-family: var(--mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); }
  /* Portada: la ficha compacta (ReviewCard variante="home"). Con el texto entero, una
     resena larga estiraba la fila y las otras dos quedaban con un hueco en blanco. Aqui
     el texto va recortado a cinco lineas —y ocupa cinco aunque sea corto—, con una fila
     reservada para "Leer resena completa"/"Mostrar traduccion", asi que las tres miden
     lo mismo. El recorte es solo visual; el modal y los botones son los de la pagina de
     resenas (pages.css: .vtexto__*, .vmodal). */
  .vcard--home .vtexto__cita {
    margin: 0; font-family: var(--text); font-size: 1.02rem; line-height: 1.65; color: var(--ink);
    white-space: pre-line; overflow: hidden;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5;
    min-height: calc(1.02rem * 1.65 * 5);
  }
  .vcard--home .vtexto__acciones { margin: .75rem 0 1.1rem; }
  .vcard--home .vtexto__vacia { margin-bottom: 1.1rem; min-height: calc(1.02rem * 1.65 * 5 + 2.65rem); }
  /* Por debajo de 900px tres columnas dejan ~20 caracteres por linea: los botones se
     apilan y los nombres largos saltan de linea y descuadran el pie. Una columna. */
  /* Y en una columna no hay vecinas con las que igualar la altura: fuera el minimo de
     cinco lineas y la fila de botones vacia, o una resena corta dejaria un hueco. */
  @media (max-width: 900px) {
    .vpage { grid-template-columns: 1fr; }
    .vcard--home .vtexto__cita, .vcard--home .vtexto__vacia { min-height: 0; }
    .vcard--home .vtexto__acciones:empty { min-height: 0; margin: 0 0 1.1rem; }
  }

  /* Desglose por plataforma, en el registro de la caratula. */
  .vplatforms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-top: 0; }
  .vplat { background: var(--paper); padding: 1.1rem clamp(1rem, 1.8vw, 1.5rem); display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
  .vplat b { font-family: var(--mono); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
  .vplat span { font-family: var(--display); font-size: 1.06rem; color: var(--gold); font-variant-numeric: tabular-nums; }

  .vfoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; margin-top: 1.85rem; }
  .vdots { display: flex; gap: .55rem; }
  .vdots button { width: 36px; height: 3px; padding: 0; border: 0; background: var(--rule); cursor: pointer; transition: background .3s ease; }
  .vdots button:hover { background: var(--gold-lt); }
  .vdots button.is-on { background: var(--gold); }

  /* ================= EQUIPO ================= */
  /* Dos paneles gemelos: la foto en uno, el contenido en el otro. Mismo corte de
     esquinas y misma altura, porque el grid los estira por igual. */
  .bench { background: var(--ink); }
  .bench .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }
  /* min-width:0 en las celdas: si no, la columna de la foto se dimensiona por el
     ancho natural del archivo (1800px) y estira la retícula fuera de la pantalla. */
  .bench__grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: clamp(1rem, 2vw, 1.6rem); align-items: stretch; }
  .bench__grid > * { min-width: 0; }
  .bench__panel { clip-path: polygon(44px 0, 100% 0, 100% calc(100% - 44px), calc(100% - 44px) 100%, 0 100%, 0 44px); }
  /* La proporcion fija el alto de la fila: si el contenido cabe en ese alto, la foto
     entra exacta y no se recorta a nadie. Por eso el panel de texto va compacto. */
  /* width:100% ata el ancho a su columna: sin eso, cuando el texto crece y estira la
     fila, la proporcion recalcula el ancho a partir del alto y la foto se sale de la
     pantalla. Con el ancho fijado, el recorte lo hace object-fit. */
  .bench__photo { overflow: hidden; aspect-ratio: 1800 / 1000; width: 100%; }
  .bench__photo img {
    width: 100%; height: 100%; display: block; object-fit: cover;
    transition: transform .7s cubic-bezier(.22,1,.36,1);
  }
  .bench__photo:hover img { transform: scale(1.03); }
  .bench__body {
    background: rgba(255,255,255,.055); padding: clamp(1.4rem, 2.4vw, 2.1rem);
    display: flex; flex-direction: column; justify-content: center;
  }
  .bench__cols { display: grid; gap: .9rem; }
  .bench__body .display { color: #fff; font-size: clamp(1.3rem, 2.3vw, 1.72rem); margin-top: .65rem; }
  .bench__lead {
    font-family: var(--text); font-size: .97rem; line-height: 1.55; color: #fff;
    border-left: 2px solid var(--gold); padding-left: 1rem; margin: 0;
  }
  .bench__body p { font-family: var(--text); font-size: .86rem; line-height: 1.58; color: var(--grey-dk); margin: 0; }
  /* Aire entre parrafos: la cita con el filete dorado y el texto que la sigue estaban
     pegados y se leian como un solo bloque. */
  .bench__body p + p { margin-top: 1.05rem; }

  /* ================= BLOG ================= */
  /* Fondo propio y filete arriba: separa el blog del cierre blanco que lo precede. */
  .journal { background: var(--paper-2); border-top: 1px solid var(--rule); }
  .journal .wrap { padding-block: clamp(3.5rem, 7vw, 6rem); }
  .journal__head { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: end; justify-content: space-between; margin-bottom: 1.75rem; }
  /* Filete con rombo al centro, en el registro editorial de la pagina. */
  .journal__rule { display: flex; align-items: center; gap: 1.1rem; margin-bottom: clamp(2rem, 4vw, 2.75rem); }
  .journal__rule::before, .journal__rule::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
  .journal__rule i { font-style: normal; font-size: .5rem; letter-spacing: .55em; color: var(--gold); }
  .journal__head .display { font-size: clamp(1.9rem, 4vw, 3rem); margin-top: .9rem; }
  .journal__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
  /* Filete superior en vez de tarjeta: distingue el blog de los servicios. */
  .post { border-top: 2px solid var(--ink); padding-top: 1.5rem; display: flex; flex-direction: column; transition: border-top-color .3s ease; }
  .post:hover { border-top-color: var(--gold); }
  /* Portada de la entrada. Proporcion fija: las imagenes vienen del panel con tamanos
     distintos y sin ella el texto de las tres tarjetas empezaria a alturas distintas. */
  .post__img {
    display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
    margin: 0 0 1.15rem; background: var(--paper);
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    transition: opacity .3s ease;
  }
  .post:hover .post__img { opacity: .9; }
  /* Hueco de la entrada sin portada: la marca en muy bajo contraste, para que se lea
     como un espacio reservado y no como una imagen que no cargo. */
  .post__img--vacio {
    background: var(--paper) url(/assets/img/mark-gold.webp) center / 34px no-repeat;
    opacity: .5;
  }
  .post__meta { display: flex; align-items: baseline; gap: .5rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 .9rem; }
  .post__meta i { font-style: normal; opacity: .45; }
  .post__meta em { font-style: normal; font-size: .78rem; color: var(--gold); opacity: .55; margin-right: .3rem; }
  .post__meta time { color: var(--grey); }
  .post h3 { font-family: var(--display); font-weight: 400; font-size: 1.3rem; line-height: 1.24; color: var(--ink); margin: 0 0 .8rem; transition: color .25s ease; }
  .post:hover h3 { color: var(--gold); }
  .post__ex { font-size: .9rem; line-height: 1.62; color: var(--grey); margin: 0 0 1.5rem; }
  .post__go { margin-top: auto; font-family: var(--mono); font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }

  /* ================= CTA ================= */
  .closing { background: var(--paper); text-align: center; }
  .closing .wrap { padding-block: clamp(4rem, 8vw, 7rem); }
  .closing .display { font-size: clamp(2.2rem, 5.4vw, 4.4rem); max-width: 18ch; margin-inline: auto; }
  .closing .lede { margin: 1.5rem auto 2.25rem; text-align: center; }
  .closing__btns { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

  /* ================= FOOTER ================= */
  footer { background: var(--ink); color: var(--grey-dk); font-size: .9rem; }
  .foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block: clamp(3rem, 5vw, 4.5rem); }
  footer h5 { font-family: var(--mono); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 1.25rem; }
  footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
  footer a:hover { color: var(--gold-lt); }
  .foot__brand img { display: block; width: 168px; height: auto; max-width: 100%; margin-bottom: 1.5rem; }
  .foot__brand p { font-family: var(--text); max-width: 32ch; }
  .social { display: flex; gap: .55rem; margin-top: 1.5rem; }
  .social a { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); }
  .social a:hover { border-color: var(--gold); color: var(--gold); }
  .legal { border-top: 1px solid rgba(255,255,255,.09); }
  .legal .wrap { display: flex; flex-wrap: wrap; gap: .65rem 2rem; justify-content: space-between; padding-block: 1.4rem; font-family: var(--mono); font-size: .66rem; letter-spacing: .06em; }

/* ================= COLEGIOS Y ASOCIACIONES ================= */
  /* Franja de credenciales al cierre de la portada. Los seis logos son marcas ajenas con
     paletas que no se hablan entre si: en gris y algo apagados forman una linea tranquila
     y no le pelean el protagonismo al oro de la casa. El color vuelve al pasar por
     encima, y solo donde se puede pasar el raton. */
  .bars { background: var(--paper); border-top: 1px solid var(--rule); }
  .bars .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
  .bars__lede {
    font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .18em;
    text-transform: uppercase; color: var(--gold); text-align: center; margin: 0 0 2rem;
  }
  .bars__grid {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(7, 1fr);
    align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  }
  .bars__grid li { display: flex; justify-content: center; }
  .bars__grid img {
    display: block; width: auto; height: clamp(46px, 5vw, 62px);
    filter: grayscale(1); opacity: .5; transition: filter .4s ease, opacity .4s ease;
  }
  @media (hover: hover) {
    .bars__grid a:hover img { filter: grayscale(0); opacity: 1; }
  }
  /* El foco por teclado tiene que verse igual que el raton: si no, quien navega con
     tabulador no sabe donde esta. */
  .bars__grid a:focus-visible img { filter: grayscale(0); opacity: 1; }

  /* ================= RESPONSIVE ================= */
  /* La barra de utilidades va soltando datos segun se estrecha; el telefono nunca cae. */
  @media (max-width: 1240px) {
    /* El equipo se apila en cuanto la reticula baja de 1240. Con dos columnas, la del
       texto se estrecha y crece a lo alto; el grid estira los dos paneles por igual, asi
       que el de la foto se alarga y `object-fit: cover` recorta el encuadre por los
       lados: 26% a 1240px y 62% a 768px, donde ya faltaba media plantilla. Solo deja de
       recortar cerca de 1440, que es donde `--max` para de crecer y la columna del texto
       vuelve a ser ancha. Apilada, la foto ocupa su fila entera y la proporcion manda. */
    .bench__grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 900px) {
    /* Una sola columna: la tarjeta va detras del texto y deja de pegarse al scroll,
       que en una pantalla alta y estrecha solo estorba. */
    .zona__cuerpo { grid-template-columns: 1fr; gap: 2.2rem; }
    .zona__aside-caja { position: static; display: grid; grid-template-columns: 130px 1fr; }
    .zona__aside-foto { height: 100%; aspect-ratio: auto; }
    .zona__aside-cuerpo { padding: 1.1rem 1.2rem; }
  }

  @media (max-width: 560px) {
    /* Sin la foto: en un movil estrecho ocuparia la mitad de la tarjeta sin aportar. */
    .zona__aside-caja { grid-template-columns: 1fr; }
    .zona__aside-foto { display: none; }
  }

  @media (max-width: 1080px) {
    /* La navegacion se pliega: el selector se va con ella, al lado del boton del menu,
       donde queda visible sin tener que abrirlo. */
    .langsw--barra { display: none; }
    /* Blanco, como las lineas del boton del menu que tiene al lado: la cabecera es
       oscura siempre —transparente sobre la foto del hero, negra al hacer scroll—, asi
       que el azul marino de la marca aqui no se leeria. */
    .langsw--cabecera { display: inline-flex; color: #fff; }
    .langsw--cabecera .langsw__op { opacity: .82; }
    .langsw--cabecera .langsw__op.is-active { opacity: 1; }
  }

  @media (max-width: 980px) {
    .utility__right > span:nth-child(2) { display: none; }
  }
  @media (max-width: 620px) {
    /* Caidos los dos datos, en la franja solo quedan las redes: centradas, y sin el
       margin-left:auto que las empujaba contra un borde que ya no tiene nada enfrente. */
    .utility__right > span:first-child { display: none; }
    .utility__right { justify-content: center; }
    .utility__right > .utility__social { margin-left: 0; padding-inline: 0; }
  }

  @media (max-width: 1080px) {
    .bars__grid { grid-template-columns: repeat(4, 1fr); }
    .nav { display: none; }
    .burger { display: flex; }
    /* 5 celdas en 3 columnas dejarian la fila 2 coja: la cuarta ocupa dos. */
    .areabar__grid { grid-template-columns: repeat(3, 1fr); }
    .areabar__grid a:nth-child(4) { grid-column: span 2; }
    /* Se reencienden todos los filetes y se apagan los de la nueva primera columna
       y primera fila. `:nth-child(n)` iguala la especificidad de las reglas de abajo. */
    .areabar__grid a:nth-child(n) { border-left-color: var(--area-rule); border-top-color: var(--area-rule); }
    .areabar__grid a:nth-child(3n+1) { border-left-color: transparent; }
    .areabar__grid a:nth-child(-n+3) { border-top-color: transparent; }
    .siteheader .wrap { grid-template-columns: auto 1fr; }
    .pcards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .caption__grid { grid-template-columns: repeat(2, 1fr); }
    .caption__cell:nth-child(3) { border-left: 0; }
    .counsel__grid, .index__head { grid-template-columns: 1fr; gap: 1.5rem; }
    .figures .wrap { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
    .figure:nth-child(3) { border-left: 0; padding-left: 0; }
    .foot { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 760px) {
    .bars__grid { grid-template-columns: repeat(3, 1fr); }
    .bars__grid li:last-child { grid-column: 1 / -1; }
    .vpage { grid-template-columns: 1fr; }
    .vhead, .vrating { text-align: left; }
    .vhead { grid-template-columns: 1fr; }
    .vplatforms { grid-template-columns: repeat(2, 1fr); }
    .areabar__grid { grid-template-columns: repeat(2, 1fr); }
    .areabar__grid a:nth-child(4) { grid-column: auto; }
    .areabar__grid a:nth-child(5) { grid-column: span 2; }
    .areabar__grid a:nth-child(n) { border-left-color: var(--area-rule); border-top-color: var(--area-rule); }
    .areabar__grid a:nth-child(2n+1) { border-left-color: transparent; }
    .areabar__grid a:nth-child(-n+2) { border-top-color: transparent; }
    .areabar span { font-size: .8rem; }
    /* Cinco tarjetas en una fila no caben: en movil desbordaban la pantalla a lo ancho. */
    .pcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
    .hero__title { max-width: none; }
    /* En movil el titular quedaba pegado al borde inferior: el video es mucho mas alto
       que ancho y dejaba media pantalla vacia arriba. Los margenes auto reparten ese
       hueco por encima y por debajo del bloque, y la franja de areas sigue anclada
       al fondo porque absorbe el resto del espacio libre. */
    .hero > .wrap { margin-block: auto; padding-top: var(--header-h); }
    .bench__cols { grid-template-columns: 1fr; gap: 1.5rem; }
    .journal__grid { grid-template-columns: 1fr; }
    .matter { grid-template-columns: 3rem 1fr; }
    .matter__go { display: none; }
    .caption__grid { grid-template-columns: 1fr; }
    .caption__cell { border-left: 0; border-top: 1px solid var(--rule-dk); }
    .caption__cell:first-child { border-top: 0; }
    .figures .wrap { grid-template-columns: 1fr; }
    .figure { border-left: 0; padding-left: 0; }
    .docket li { grid-template-columns: 1fr; gap: .2rem; }
    .foot { grid-template-columns: 1fr; }
  }
  /* Movil estrecho: una tarjeta por fila, y la cabecera a escala para que el logo,
     el boton y el burger quepan en una sola linea sin partir el texto del boton. */
  @media (max-width: 560px) {
    .pcards { grid-template-columns: minmax(0, 1fr); }
    /* En un movil estrecho la fila de la cabecera no da para logo + chapa del telefono
       + selector + boton del menu: el logo se quedaba en cero. El selector se sube a la
       franja de arriba, que en estos anchos solo lleva los iconos sociales y va sobrada
       de sitio. Sigue visible siempre, sin tener que abrir el menu. */
    .langsw--cabecera { display: none; }
    .langsw--barra { display: inline-flex; }
    .utility__right > .utility__social + .langsw--barra { margin-left: .7rem; }
    .brand img { width: 128px; }
    .siteheader .wrap { gap: .6rem; }
    .siteheader .hbtn { font-size: .66rem; letter-spacing: .08em; padding: .7rem .9rem; white-space: nowrap; }
    /* En movil el icono y el filete se quedan, pero encogidos: a tamano de escritorio
       la chapa dejaba al logo sin sitio. */
    .hphone { font-size: .95rem; padding: .6rem .95rem; gap: .5rem; white-space: nowrap; }
    .hphone svg { width: 16px; height: 16px; }
    .hphone > span { padding-left: .5rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
  }

  /* ================= SELLO DEL EQUIPO ================= */
  /* Va anclado a la esquina superior derecha del panel de texto, que es la unica del
     bloque sin bisel (el clip-path corta la de arriba a la izquierda y la de abajo a
     la derecha). Solo lleva datos comprobables: la nota media y el numero de resenas
     que ya estan en /en/client-reviews/. */
  .bench__body { position: relative; }
  /* El hueco que el titular deja libre a la derecha crece con el sello, para que no se
     le meta debajo cuando la linea es larga. */
  .bench__body > .bench__cols > div:first-child { padding-right: clamp(0px, 9.5vw, 10.5rem); }
  .seal {
    position: absolute; top: clamp(1rem, 1.8vw, 1.6rem); right: clamp(1rem, 1.8vw, 1.6rem);
    width: clamp(92px, 11.5vw, 158px); aspect-ratio: 1; pointer-events: none;
  }
  .seal svg { width: 100%; height: 100%; overflow: visible; }
  .seal__rule { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: .55; }
  .seal__rule--thick { stroke-width: 3; opacity: .35; }
  .seal__ring {
    fill: var(--gold-lt); font-family: var(--mono); font-size: 11px;
    font-weight: 500; letter-spacing: .13em; text-transform: uppercase;
  }
  /* Gira como una moneda: una vuelta entera sobre su eje vertical y una pausa larga de
     frente, para que casi siempre se lea. Solo si nadie ha pedido menos movimiento. */
  @media (prefers-reduced-motion: no-preference) {
    .seal { perspective: 700px; }
    .seal svg { animation: selloMoneda 8s cubic-bezier(.45, 0, .25, 1) 1.5s infinite; }
    @keyframes selloMoneda {
      0% { transform: rotateY(0deg); }
      15% { transform: rotateY(360deg); }
      100% { transform: rotateY(360deg); }
    }
  }
  /* En movil el panel es estrecho: el sello pasa a la fila, centrado sobre el texto. */
  @media (max-width: 760px) {
    .seal { position: static; margin: 0 auto 1.25rem; width: 92px; }
    .bench__body > .bench__cols > div:first-child { padding-right: 0; }
  }