/* ============================================================================
   /surnames/ — El índice de apellidos.

   SISTEMA: el mismo de la portada (assets/home-v2.css). Las cinco reglas:
   1. UN SOLO ACENTO DE ACCIÓN. El oro es para filetes, numerales y el sello:
      NUNCA es pulsable, salvo el botón --oro sobre fondo oscuro, que es el
      patrón ya establecido en el cierre de la portada.
   2. UNA SOLA FAMILIA: Montserrat. Cambia el PESO, no la fuente. Display en
      300 con tracking negativo; títulos chicos en 600.
   3. TRES RADIOS Y SE ACABÓ: --pill 100px · --r 3px papel · 50% círculo.
   4. UNA SOLA FAMILIA DE SOMBRA, sólo en lo apoyado sobre la mesa.
   5. RITMO ASIMÉTRICO: el default es split 7/5, no centrado.

   ⚠️ LOS TOKENS SE COPIAN ACÁ A PROPÓSITO. En home-v2.css viven bajo `#fc-h3`,
   no en `:root`, así que no se heredan. Copiarlos deja esta página
   independiente: si mañana se toca la portada, esto no se mueve.
   ========================================================================= */

#fc-sn {
  /* -- tinta y papel -- */
  --papel:   #F4EFE6;
  --papel2:  #E7DCC7;
  --papel3:  #FDFBF7;
  --gris:    #F7F7F7;
  --navy:    #112B3D;
  --noche:   #0A1922;
  --oro:     #C9A84C;
  --oro-osc: #8A6E20;
  --tinta:   #14232E;
  --prosa:   #3D4C58;
  --tenue:   #55606A;
  --filete:  #DBD0BC;
  --filete2: rgba(219,208,188,.5);

  /* -- medidas -- */
  --wrap: 1180px;
  --pill: 100px;
  --r: 3px;

  /* -- movimiento -- */
  --sal: cubic-bezier(.23, 1, .32, 1);

  /* -- escala tipográfica (px+vw: Astra escala el rem en mobile) -- */
  --f-h1:   clamp(38px, 3.3vw + 24px, 70px);
  --f-h2:   clamp(29px, 2.3vw + 21px, 48px);
  --f-h3:   clamp(19px, .55vw + 17px, 25px);
  --f-lede: clamp(17.5px, .7vw + 15.4px, 21px);
  --f-body: clamp(16.5px, .3vw + 15.3px, 18px);
  --f-cap:  clamp(13px, .2vw + 12.3px, 14.5px);
  --f-eye:  clamp(11.5px, .1vw + 11.2px, 12.5px);

  /* -- ritmo vertical -- */
  --aire:   clamp(62px, 6.4vw, 116px);
  --aire-s: clamp(40px, 4vw, 68px);

  --sombra: 0 1px 2px rgba(20,35,46,.05), 0 8px 24px rgba(20,35,46,.07);

  position: relative;
  background: var(--papel);
  color: var(--tinta);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--f-body);
  line-height: 1.62;
}

/* La página nace del ancho completo aunque el tema la meta en un contenedor.
   ⚠️ El recorte va en el BODY: un overflow-x:clip acá crea un bloque
   contenedor y aplasta el full-bleed de sus propios hijos. */
#fc-sn .fc-sn-ancho {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.fc-sn-page { overflow-x: clip; }
#fc-sn .fc-sn-wrap {
  width: min(100% - 2 * clamp(20px, 5vw, 56px), var(--wrap));
  margin-inline: auto;
}

/* --- El tema mete padding y márgenes al contenedor del contenido --------- */
body.fc-sn-page .entry-content,
body.fc-sn-page .site-content > .ast-container,
body.fc-sn-page #primary {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}
body.fc-sn-page .entry-header,
body.fc-sn-page .ast-single-post-order,
body.fc-sn-page .post-navigation { display: none !important; }

/* ---------------------------------------------------------------------------
   TIPOGRAFÍA

   ⚠️ EL TEMA LE PONE UNA SERIF A TODA PÁGINA QUE NO SEA LA PORTADA. La regla
   es del theme y dice, textual:

     body.page:not(.home):not(.page-template-page-heritage-funnel)
       .entry-content p, … { font-family: Besley, Georgia, "Times New Roman", serif }

   Por eso la portada se ve bien y cualquier página nueva sale en serif: la
   excepción está escrita por NOMBRE, no por sistema. Esa regla la usan el blog
   y las legales, así que no se toca — se gana en especificidad, y sólo acá
   adentro.

   El selector universal no es pereza: la regla 2 del sistema es UNA SOLA
   FAMILIA para toda la página. Declararlo una vez es exactamente esa regla.
   ------------------------------------------------------------------------ */
#fc-sn#fc-sn,
#fc-sn#fc-sn *:not(svg):not(path):not(circle) {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* --- doble id porque el tema aplica p{font-size:15px !important} y además
   pisa el color: hay que ganar en tamaño Y en color. --- */
#fc-sn#fc-sn h1,
#fc-sn#fc-sn h2,
#fc-sn#fc-sn h3 {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  color: var(--tinta) !important;
  letter-spacing: -.012em !important;
  text-wrap: balance;
  margin: 0;
}
#fc-sn#fc-sn h1 { font-size: var(--f-h1) !important; line-height: 1.06 !important; font-weight: 300 !important; letter-spacing: -.022em !important; }
#fc-sn#fc-sn h1 strong { font-weight: 700; }
#fc-sn#fc-sn h2 { font-size: var(--f-h2) !important; line-height: 1.14 !important; font-weight: 300 !important; letter-spacing: -.018em !important; }
#fc-sn#fc-sn h3 { font-size: var(--f-h3) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.004em !important; }
#fc-sn#fc-sn p  { font-size: var(--f-body) !important; color: var(--prosa) !important; margin: 0; }
#fc-sn#fc-sn a  { text-decoration: none; }
#fc-sn img { max-width: 100%; display: block; }
#fc-sn :focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: var(--r); }
#fc-sn .fc-sn-oscuro :focus-visible { outline-color: var(--oro); }

/* --- bandas --- */
#fc-sn .fc-sn-banda { padding-block: var(--aire); }
/* Blanco puro, el mismo valor que `.fc-h3-sec--blanca` de la portada. */
#fc-sn .fc-sn-b-blanca { background: #FFFFFF; }
#fc-sn .fc-sn-b-papel3 { background: var(--papel3); }
#fc-sn .fc-sn-b-gris   { background: var(--gris); }
#fc-sn .fc-sn-oscuro {
  background: linear-gradient(160deg, var(--noche) 0%, var(--navy) 100%);
  color: #EDE7DC;
}
/* ⚠️ EL CIERRE VA NAVY PLANO, NO DEGRADADO — y es exactamente el color del pie.
   `footer.fc-footer` está pintado en #112B3D (medido en vivo). Con el degradado
   la última sección terminaba en un tono distinto al del pie y se leía como si
   la página estuviera cortada en dos bloques oscuros. Plano y del mismo color,
   lo único que separa es la línea del pie, igual que en la portada. */
#fc-sn .fc-sn-oscuro--liso {
  background: var(--navy);
  /* ⚠️ La línea de abajo es la MISMA que usa el cierre de la portada, que a su
     vez repite la que separa las dos bandas del pie (1px rgb(209,213,219) en
     `.site-below-footer-wrap` del tema). Sin ella, cierre y pie quedan pegados
     en un solo bloque navy sin ninguna junta. */
  border-bottom: 1px solid rgba(209, 213, 219, .22);
}
#fc-sn#fc-sn .fc-sn-oscuro h1,
#fc-sn#fc-sn .fc-sn-oscuro h2,
#fc-sn#fc-sn .fc-sn-oscuro h3 { color: #F6F1E8 !important; }
#fc-sn#fc-sn .fc-sn-oscuro p  { color: #C3CBD2 !important; }

/* --- el rótulo con filete: el patrón de toda la página --- */
#fc-sn#fc-sn .fc-sn-eye {
  display: flex; align-items: center; gap: 16px;
  font-size: var(--f-eye) !important; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--oro-osc) !important; margin: 0 0 14px !important;
}
#fc-sn .fc-sn-eye::after { content: ""; flex: 0 1 96px; height: 1px; background: var(--filete); }
#fc-sn#fc-sn .fc-sn-oscuro .fc-sn-eye { color: var(--oro) !important; }
#fc-sn .fc-sn-oscuro .fc-sn-eye::after { background: rgba(201,168,76,.42); }

#fc-sn#fc-sn .fc-sn-lede {
  font-size: var(--f-lede) !important; color: var(--prosa) !important;
  line-height: 1.58; max-width: 46ch; margin-top: 18px !important;
}
#fc-sn#fc-sn .fc-sn-oscuro .fc-sn-lede { color: #C3CBD2 !important; }

/* ===========================================================================
   EL HEADER

   ⚠️ ACÁ NO HAY NADA DEL HEADER, Y ES A PROPÓSITO.

   Esta página carga `home-v2.css` y lleva la clase `fc-h3-page` en el body, así
   que el header transparente, su comportamiento al scrollear, el cajón del menú
   y la guarda anti-parpadeo son LOS DE LA PORTADA — el mismo archivo, no una
   copia. Decisión del owner, y con razón: la versión anterior replicaba esas
   reglas y la copia se desincronizó (velo distinto, brillo de fondo distinto),
   lo que hacía aparecer un recuadro blanco detrás del logo que en la portada no
   existe. Si algún día se corrige allá, se corrige acá solo.

   🔴 NO volver a escribir reglas de `.site-header` en este archivo.
   ======================================================================== */

/* ===========================================================================
   1 · HERO
   ======================================================================== */
#fc-sn .fc-sn-foto { position: relative; isolation: isolate; }
#fc-sn .fc-sn-foto > .fc-sn-fondo {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img-fondo);
  background-size: cover;
  background-position: 72% center;
  background-repeat: no-repeat;
}
/* ⚠️ EL VELO ES UN GRADIENTE, NO UN VELO PLANO. La columna de texto va a la
   izquierda y la imagen respira a la derecha: un velo parejo apagaría justo lo
   que hace buena a la foto. Se levanta sólo donde cae el texto.

   ⚠️ NO LLEVA NINGÚN LAVADO ESPECIAL PARA EL LOGO, Y ES A PROPÓSITO.

   `familycrests-logo.webp` es blanco puro y OPACO (verificado dibujándolo
   sobre magenta en un canvas: alpha 255 en todo el borde). O sea que sobre
   cualquier fondo que no sea casi blanco aparece su recuadro — y eso pasa
   también en la portada, sólo que ahí la foto mide 242 de brillo justo debajo
   del logo y 13 niveles de diferencia no se perciben.

   Hubo dos intentos de taparlo desde el CSS y los dos estaban mal: un lavado
   radial en la esquina (el header es `fixed` y el fondo del hero scrollea, así
   que se despegaban) y una banda de lado a lado (tapaba el borde de los libros
   de registro). El arreglo correcto fue en la IMAGEN: se le aclaró la zona
   donde se apoya el logo hasta 242 —el mismo número que la portada— así que
   acá no hace falta nada. Medido en todo el recorrido de scroll en el que el
   header puede verse sobre la foto (0 a 130 px). */
/* ⚠️ EL VELO ES SUAVE, Y ES UNA DECISIÓN MEDIDA, NO UN GUSTO.
   La imagen nueva ya trae el lado izquierdo limpio: mide 238-242 de brillo en
   toda la columna del texto. Un velo fuerte ahí no compra contraste —la tinta
   #14232E sobre 242 ya da más de 14:1— y en cambio APAGA la foto y, sobre todo,
   baja el brillo justo donde se apoya el logo: con el velo al 80% la zona caía
   a 238 y el recuadro blanco del logo volvía a aparecer.
   La portada usa 0.16 por el mismo motivo. Medido, no estimado. */
#fc-sn .fc-sn-foto > .fc-sn-velo {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(253,251,247,.40) 0%,
    rgba(253,251,247,.28) 34%,
    rgba(244,239,230,.10) 56%,
    rgba(244,239,230,0) 76%);
}
#fc-sn .fc-sn-foto > .fc-sn-wrap { position: relative; z-index: 2; }

#fc-sn .fc-sn-hero {
  /* ⚠️ EL HERO PASA POR DEBAJO DEL HEADER. El tema reserva el alto del header
     con `body { padding-top }` y el header va `position: fixed`. Para que la
     foto llegue al borde de arriba —sin franja blanca— el hero se sube ese
     alto y se lo devuelve como padding. */
  margin-top: calc(-1 * var(--fc-header-height, 0px));
  padding-top: calc(var(--fc-header-height, 72px) + clamp(30px, 4vw, 62px));
  padding-bottom: var(--aire);
  border-bottom: 1px solid var(--filete2);
}
/* ⚠️ `align-items: start`, NO `center`. Con las dos columnas centradas, cada
   vez que la ficha cambia de alto —y cambia con cada apellido— la columna de
   texto se recentra y SE MUEVE. El efecto que reportó el owner era ése: tocaba
   una píldora, la ficha crecía, las píldoras se corrían bajo el puntero y se
   encendía el `:hover` de otra, como si hubiera elegido la que no era.
   Ancladas arriba, la columna izquierda no se mueve nunca. */
#fc-sn .fc-sn-hero-g {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(30px, 4vw, 64px);
  align-items: start;
}
#fc-sn .fc-sn-hero-txt { min-width: 0; }
/* ⚠️ La bajada del hero se corta antes que el resto de las bajadas de la
   página: a 46ch llegaba hasta x≈740 y se metía encima de los libros de
   registro, donde el fondo deja de ser pared clara y el texto pierde
   contraste. A 38ch termina dentro de la zona lisa. */
#fc-sn#fc-sn .fc-sn-hero-txt .fc-sn-lede { max-width: 38ch; }

/* -- el buscador -- */
#fc-sn .fc-sn-busca { position: relative; margin-top: clamp(26px, 3vw, 38px); max-width: 520px; }
#fc-sn .fc-sn-campo {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--filete); border-radius: var(--pill);
  padding: 6px 8px 6px 22px; box-shadow: var(--sombra);
  transition: border-color .22s var(--sal), box-shadow .22s var(--sal);
}
#fc-sn .fc-sn-campo:focus-within {
  border-color: var(--navy);
  box-shadow: 0 1px 2px rgba(20,35,46,.05), 0 10px 30px rgba(17,43,61,.14);
}

/* ⚠️ EL CONTORNO DE FOCO VA EN LA PÍLDORA, NO EN EL <input>.
   En la portada el input ES la píldora, así que el `:focus-visible` general le
   cae encima y se ve un solo perímetro. Acá el input vive DENTRO de la
   píldora: el mismo contorno dibujaba un segundo rectángulo adentro. Se apaga
   en el campo y se lo pinta al contenedor, con el mismo grosor y el mismo
   offset que usa el resto del sitio.

   ⚠️ Va con `:has(#fc-sn-q:focus)` y no con `:focus-within` a secas: el botón
   también vive adentro, y con `:focus-within` al tabular hasta él se verían
   DOS anillos —el suyo y el de la píldora—. Donde `:has()` no exista, el
   cambio de color del borde sigue marcando el foco. */
#fc-sn#fc-sn #fc-sn-q:focus-visible,
#fc-sn#fc-sn #fc-sn-q:focus { outline: 0 none transparent !important; box-shadow: none !important; }
/* ⚠️ 1px Y offset 0, NO 2px con separación. Medido sobre el campo de la
   portada con el foco puesto: `outline: 1px solid rgb(17,43,61)` y
   `outline-offset: 0px`. El contorno cae JUSTO ENCIMA del borde de 1px y los
   dos se leen como una sola línea. Con 2px y 3px de separación aparecían dos
   perímetros concéntricos, que es lo que se veía acá y no en la portada. */
#fc-sn .fc-sn-campo:has(#fc-sn-q:focus) {
  outline: 1px solid var(--navy);
  outline-offset: 0;
  border-radius: var(--pill);
}
#fc-sn .fc-sn-campo > svg { flex: none; color: var(--tenue); }
#fc-sn#fc-sn #fc-sn-q {
  flex: 1; min-width: 0; border: 0; background: none; outline: none;
  padding: 14px 0; margin: 0; box-shadow: none;
  font-family: inherit; font-weight: 400; color: var(--tinta);
  /* ⚠️ 17px mínimo: por debajo de 16 iOS hace zoom al enfocar el campo. */
  font-size: clamp(17px, .4vw + 15.5px, 19px);
}
#fc-sn #fc-sn-q::placeholder { color: #9AA4AC; font-weight: 300; opacity: 1; }
#fc-sn#fc-sn .fc-sn-btn {
  flex: none; border: 0; cursor: pointer; border-radius: var(--pill);
  background: var(--navy); color: #fff; font-family: inherit; font-weight: 400;
  font-size: clamp(15px, .14vw + 14.4px, 16.5px); padding: 0 26px; height: 48px;
  line-height: 48px; display: inline-block; text-align: center;
  transition: background .2s var(--sal), transform .2s var(--sal), box-shadow .2s var(--sal);
}
#fc-sn#fc-sn .fc-sn-btn:hover { background: var(--noche); }
#fc-sn#fc-sn .fc-sn-btn:active { transform: translateY(1px); }
/* El botón dorado sobre fondo oscuro — mismo patrón que el cierre de la portada. */
#fc-sn#fc-sn .fc-sn-btn--oro {
  background: var(--oro); color: var(--noche); height: 56px; line-height: 56px;
  padding: 0 32px; font-weight: 500; font-size: clamp(16px,.14vw + 15.4px,17.5px);
}
@media (hover: hover) {
  #fc-sn#fc-sn .fc-sn-btn--oro:hover { background: #DCBC63; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
}

#fc-sn .fc-sn-sug {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid var(--filete); border-radius: var(--r);
  box-shadow: 0 2px 6px rgba(20,35,46,.06), 0 18px 44px rgba(20,35,46,.16);
  max-height: 336px; overflow-y: auto; display: none;
}
#fc-sn .fc-sn-sug.on { display: block; }
#fc-sn .fc-sn-sug button {
  display: flex; align-items: baseline; gap: 10px; width: 100%; text-align: left;
  padding: 11px 20px; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--tinta); border-bottom: 1px solid var(--filete2);
}
#fc-sn .fc-sn-sug button:last-child { border-bottom: 0; }
#fc-sn .fc-sn-sug button:hover,
#fc-sn .fc-sn-sug button.sel { background: var(--papel); }
#fc-sn .fc-sn-sug .nm { font-weight: 600; font-size: 16px; letter-spacing: -.004em; }
#fc-sn .fc-sn-sug .dt {
  margin-left: auto; font-size: 13px; color: var(--tenue);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
#fc-sn#fc-sn .fc-sn-sug .vacio { padding: 18px 20px; color: var(--tenue) !important; font-size: var(--f-cap) !important; }

#fc-sn .fc-sn-probar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
#fc-sn#fc-sn .fc-sn-probar > span { font-size: var(--f-cap) !important; color: var(--tenue) !important; margin-right: 2px; }
#fc-sn .fc-sn-probar button {
  border: 1px solid var(--filete); background: rgba(255,255,255,.66); border-radius: var(--pill);
  padding: 5px 15px; font: inherit; font-size: 13.5px; color: var(--prosa); cursor: pointer;
  transition: background .18s var(--sal), border-color .18s var(--sal), color .18s var(--sal);
}
#fc-sn .fc-sn-probar button:hover { background: #fff; border-color: var(--navy); color: var(--tinta); }

#fc-sn#fc-sn .fc-sn-libre {
  display: flex; align-items: center; gap: 9px; margin-top: 22px !important;
  font-size: var(--f-cap) !important; color: var(--tenue) !important;
}
#fc-sn .fc-sn-libre i { width: 5px; height: 5px; border-radius: 50%; background: var(--oro-osc); flex: none; }

/* -- el botón al mapa --------------------------------------------------------
   Va debajo de «Free to read» en escritorio; en teléfono lo baja el JS hasta
   después de la ficha. NO va dentro de la ficha: su cuerpo scrollea y ahí abajo
   el botón quedaría enterrado.

   ⚠️ MACIZO EN NAVY CON TEXTO BLANCO, IGUAL QUE «Look up» — pedido del owner.
   La primera versión iba en contorno, tratándolo como acción secundaria; y no
   lo es: sobre la foto del hero un botón en contorno casi no se veía, y en
   teléfono es LA acción que sigue después de leer la ficha. Un solo lenguaje de
   botón en toda la página. El oro queda sólo en la flecha, que no es el
   elemento clickeable sino su acento. */
#fc-sn#fc-sn .fc-sn-mapa-btn {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 0 24px; height: 48px; border-radius: var(--pill);
  border: 0; background: var(--navy);
  color: #fff !important; text-decoration: none !important;
  font-family: inherit; font-weight: 400;
  font-size: clamp(15px, .14vw + 14.4px, 16.5px);
  box-shadow: none;
  transition: background .2s var(--sal), transform .2s var(--sal);
}
#fc-sn#fc-sn .fc-sn-mapa-btn:hover { background: var(--noche); color: #fff !important; }
#fc-sn#fc-sn .fc-sn-mapa-btn:active { transform: translateY(1px); }
#fc-sn .fc-sn-mapa-btn svg { width: 17px; height: 17px; flex: none; color: var(--oro); }
#fc-sn .fc-sn-mapa-btn[hidden] { display: none !important; }

/* -- compartir ----------------------------------------------------------------
   🔴 EL MARCADO ES EL DE LOS BLOGS: lo escribe `fc_ba_compartir()` en
   mu-plugins/familycrests-blog-articulo.php, que es la única fuente de los
   iconos y de la estructura.
   Lo que se copia acá son las reglas de aspecto, porque el original está
   acotado a `#fc-ba` y esta página cuelga de `#fc-sn`. Mismas medidas: círculo
   de 38 px, hover invertido, panel a 10 px. El original vive en
   mu-plugins/fc-blog-articulo/estilo.css, líneas 301-378 — si se toca uno,
   mirar el otro.
   ⚠️ Acá el fondo es la FOTO del hero, no papel: los círculos llevan un velo
   blanco propio para que los iconos se lean sobre cualquier parte de la imagen. */
#fc-sn .fc-ba-comp { margin: 18px 0 0; position: relative; }
#fc-sn#fc-sn .fc-ba-comp__eye {
  margin: 0 0 9px !important; font-size: 10.5px !important; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--tenue) !important;
}
#fc-sn#fc-sn .fc-ba-comp__lista {
  list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
#fc-sn#fc-sn .fc-ba-comp__lista li { margin: 0; padding: 0; position: relative; }
/* ⚠️ box-shadow:none — el tema le pone 0 1px 2px a TODO <button>, así que el
   «…» arrastraba un círculo tenue que los <a> de al lado no tenían. */
#fc-sn .fc-ba-comp__b {
  display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 50%; background: rgba(255, 255, 255, .78); border: 1px solid var(--filete);
  cursor: pointer; color: var(--tenue); text-decoration: none !important; padding: 0;
  box-shadow: none !important;
  transition: background .2s var(--sal), color .2s var(--sal), transform .2s var(--sal), border-color .2s var(--sal);
}
#fc-sn .fc-ba-comp__b svg { width: 17px; height: 17px; display: block; }
#fc-sn .fc-ba-comp__b:hover { background: var(--navy); border-color: var(--navy); color: #fff; transform: translateY(-1px); }
#fc-sn .fc-ba-comp__t[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }

#fc-sn .fc-ba-comp__panel {
  position: absolute; z-index: 40; left: 0; top: calc(100% + 10px); min-width: 206px;
  background: #fff; border: 1px solid var(--filete); border-radius: var(--r);
  box-shadow: 0 14px 34px rgba(20, 35, 46, .16); padding: 8px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--sal), transform .2s var(--sal), visibility .2s;
}
#fc-sn .fc-ba-comp__mas.is-abierto .fc-ba-comp__panel { opacity: 1; visibility: visible; transform: none; }
/* Sin JS el panel queda estático y visible: nunca un botón muerto. */
#fc-sn:not(.fc-sn-js) .fc-ba-comp__panel {
  position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; margin-top: 10px;
}
#fc-sn:not(.fc-sn-js) .fc-ba-comp__t { display: none; }
#fc-sn#fc-sn .fc-ba-comp__panel-t {
  font-size: 10.5px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--tenue) !important; margin: 6px 10px 8px !important;
}
#fc-sn .fc-ba-comp__i {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  background: transparent; border: 0; border-radius: var(--r); padding: 9px 10px; cursor: pointer;
  font-family: inherit; font-size: 14px; color: var(--tinta); text-decoration: none !important;
  box-shadow: none !important; transition: background .18s var(--sal);
}
#fc-sn .fc-ba-comp__i span { color: var(--tinta); }
#fc-sn .fc-ba-comp__i svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--tenue); }
#fc-sn .fc-ba-comp__i:hover { background: var(--gris); }
#fc-sn .fc-ba-comp__i:hover svg { color: var(--navy); }
#fc-sn#fc-sn .fc-ba-comp__aviso {
  font-size: 12.5px !important; color: var(--tenue) !important; margin: 10px 0 0 !important;
  min-height: 1.2em; opacity: 0; transition: opacity .2s var(--sal);
}
#fc-sn .fc-ba-comp__aviso.is-on { opacity: 1; }

/* -- la ficha viva -- */
/* ⚠️ LA FICHA TIENE ALTO NATURAL: mide lo que trae cada apellido.
   Historia, para no volver atrás: el 29-sep se le puso alto FIJO (830/900 px)
   porque crecía y se achicaba con cada apellido y arrastraba a toda la primera
   sección. El 30-sep el owner fijó la regla definitiva: «el tamaño de la
   sección no debía cambiar nunca, en todo caso lo que varía es el tamaño del
   globo». Así que lo fijo ahora es la SECCIÓN (computadora, más abajo) y la
   ficha va natural; en teléfono, natural y sin mínimos (bloque siguiente). */
#fc-sn .fc-sn-tarj {
  background: #fff; border: 1px solid var(--filete); border-radius: var(--r);
  box-shadow: var(--sombra); overflow: hidden;
  height: auto; display: flex; flex-direction: column;
}
#fc-sn .fc-sn-tarj-cuerpo { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; }
#fc-sn .fc-sn-tarj-top { flex: none; }

/* 🔴 EN TELÉFONO LA FICHA NO SCROLLEA POR DENTRO. NUNCA.
   Lo marcó el owner apenas se metió el bloque de compartir adentro de la ficha:
   «es como que se puede scrollear adentro del globo y eso no debería pasar». Y
   tiene razón — una caja que scrollea dentro de una página que ya scrollea es
   confusa, y encima esconde contenido sin avisar.

   🔴 Y SIN ALTO MÍNIMO: la ficha mide lo que trae (owner, 2026-09-30, con
   captura de Smith: «queda mucho espacio en blanco... no debería pasar»).
   Hasta ese día llevaba mínimos de 920 / 1.120 px, medidos con compartir
   ADENTRO; compartir se mudó a la página de cada apellido y los mínimos
   quedaron sobrando — medido a 390 px: Smith necesita 962 (158 en blanco),
   Nowak 582 (538 en blanco).
   Acá la ficha va DEBAJO del texto, así que al cambiar de apellido sólo se
   mueve lo que está por debajo de ella: el buscador y las píldoras, que es lo
   que se está tocando, quedan quietos.

   ⚠️ SÓLO VACÍA reserva lugar (`:empty`, antes del primer dibujo): el alto de
   Kowalski, que es con lo que abre la página, para que no salte al cargar.
   Medido: 390 → 894 · 700 → 738. */
@media (max-width: 940px) {
  #fc-sn .fc-sn-tarj { height: auto; min-height: 0; }
  #fc-sn .fc-sn-tarj:empty { min-height: 738px; }
  #fc-sn .fc-sn-tarj-cuerpo { overflow: visible; }
}
@media (max-width: 560px) { #fc-sn .fc-sn-tarj:empty { min-height: 894px; } }

/* 🔴 EN COMPUTADORA LA PRIMERA SECCIÓN MIDE LA PANTALLA. SIEMPRE LA MISMA.
   LO QUE CAMBIA DE ALTO ES LA FICHA, NO LA SECCIÓN.

   Lo pidió el owner el 2026-09-30: «el tamaño de la sección no debía cambiar
   nunca, en todo caso lo que varía es el tamaño del globo si hay más o menos
   info». Había dos síntomas del mismo error:
   · en /surnames/ la ficha fija de 830 px llevaba la sección a 1.057 px en una
     pantalla de 912 — había que bajar para ver el final;
   · en /surnames/{apellido}/ la ficha no tiene alto fijo y la sección se
     encogía con ella (Kowal: 823 px).

   Ahora: la sección tiene `height` = el alto de la ventana, con un piso que es
   lo que necesita la ficha más alta medida; la ficha tiene alto NATURAL y va
   anclada arriba (`align-items: start` del hero), así que al cambiar de apellido
   no se mueve nada más que el borde de abajo de la ficha.

   El aire de arriba se achica cuando la pantalla es baja: va de 22 px al valor
   de siempre (30–62) según lo que sobre después de la ficha más alta.

   Ficha más alta medida (Smith, índice, con los espaciados de abajo), +12 px:
     ≥1181 → 784 · 1081–1180 → 841 · 941–1080 → 879
   Una pantalla de 912 de alto (la del owner) entra justo: 71 + 25 + 796 + 20.

   ⚠️ Los espaciados de adentro de la ficha se ajustan 6 px en computadora
   (bloques 20→14, cuerpo 18/22→16/18) para que Smith entre en 912: sin eso le
   faltaban 9 px y la sección no llegaba a ser una pantalla.

   ⚠️ `max-height` + scroll adentro queda SÓLO como red: un apellido con más
   contenido que lo medido (dos renglones de significado, por ejemplo) se
   desplaza adentro de la ficha en vez de recortarse o de estirar la sección.
   Ningún apellido medido lo usa. */
@media (min-width: 941px) {
  #fc-sn .fc-sn-hero {
    --sn-vh: 100vh;
    --sn-cab: var(--fc-header-height, 72px);
    --sn-cmax: 796px;
    --sn-abajo: 20px;
    --sn-piso: calc(var(--sn-cab) + 22px + var(--sn-cmax) + var(--sn-abajo));
    --sn-alto: max(var(--sn-vh), var(--sn-piso));
    --sn-arriba: calc(var(--sn-cab) + clamp(22px, var(--sn-vh) - var(--sn-cab) - var(--sn-cmax) - var(--sn-abajo), clamp(30px, 4vw, 62px)));
    height: var(--sn-alto);
    padding-top: var(--sn-arriba);
    padding-bottom: var(--sn-abajo);
  }
  /* ⚠️ el mínimo, SÓLO vacía (antes del primer dibujo): con un apellido de
     pocos datos —«De Pauw»: dos barras— un mínimo fijo dejaba ~200 px en
     blanco dentro de la ficha. Mismo criterio que en teléfono. */
  #fc-sn .fc-sn-tarj:empty { min-height: 480px; }
  #fc-sn .fc-sn-tarj {
    height: auto; min-height: 0;
    max-height: calc(var(--sn-alto) - var(--sn-arriba) - var(--sn-abajo));
  }
  #fc-sn#fc-sn .fc-sn-tarj-cuerpo { overflow-y: auto; }
  /* doble id: las reglas de base de estos dos vienen más abajo en el archivo */
  #fc-sn#fc-sn .fc-sn-tarj-cuerpo { padding: 16px 24px 18px; }
  #fc-sn#fc-sn .fc-sn-tarj .fc-sn-blq:not(:last-child) { margin-bottom: 14px; }
}
@supports (height: 100svh) {
  @media (min-width: 941px) { #fc-sn .fc-sn-hero { --sn-vh: 100svh; } }
}
@media (min-width: 941px) and (max-width: 1180px) { #fc-sn .fc-sn-hero { --sn-cmax: 853px; } }
@media (min-width: 941px) and (max-width: 1080px) { #fc-sn .fc-sn-hero { --sn-cmax: 891px; } }

/* ⚠️ LA INFORMACIÓN NUEVA ENTRA DE ARRIBA HACIA ABAJO, no de golpe.
   El marco se queda quieto y los bloques van apareciendo en orden: se ve
   ENTRAR el dato nuevo, que es lo que hace que se lea como una consulta y no
   como un refresco de pantalla. */
@keyframes fc-sn-entra {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
#fc-sn .fc-sn-tarj [data-entra] { animation: fc-sn-entra .46s var(--sal) both; }
/* ⚠️ Con reduced-motion se ATENÚA, no se apaga: la PC del owner la tiene
   activa y apagarla le dejaría la ficha cambiando de golpe, que es justo el
   defecto que se está corrigiendo. Mismo criterio que los contadores. */
@media (prefers-reduced-motion: reduce) {
  #fc-sn .fc-sn-tarj [data-entra] { animation-duration: .2s !important; }
}
#fc-sn .fc-sn-tarj-top {
  padding: 20px 24px 16px; border-bottom: 1px solid var(--filete2);
  background: linear-gradient(180deg, #fff, var(--papel3));
}
#fc-sn#fc-sn .fc-sn-tarj-url {
  font-size: 12px !important; color: var(--tenue) !important; letter-spacing: .02em;
  margin-bottom: 9px !important; word-break: break-all;
}
#fc-sn .fc-sn-tarj-url b { color: var(--tinta); font-weight: 600; }
#fc-sn .fc-sn-tarj-nom {
  font-size: clamp(26px, 1.5vw + 20px, 34px); font-weight: 300;
  letter-spacing: -.02em; line-height: 1.1; color: var(--tinta);
}
#fc-sn#fc-sn .fc-sn-tarj-sig { margin-top: 7px !important; font-size: var(--f-cap) !important; }
#fc-sn .fc-sn-tarj-sig b { color: var(--oro-osc); font-weight: 600; }
#fc-sn .fc-sn-tarj-cuerpo { padding: 18px 24px 22px; }
#fc-sn .fc-sn-blq { margin-bottom: 20px; }
#fc-sn .fc-sn-blq:last-child { margin-bottom: 0; }
#fc-sn .fc-sn-blq-t {
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tenue); margin-bottom: 11px; display: flex; align-items: center; gap: 10px;
}
#fc-sn .fc-sn-blq-t::after { content: ""; flex: 1; height: 1px; background: var(--filete2); }

#fc-sn .fc-sn-barra { display: grid; grid-template-columns: 74px 1fr auto; align-items: center; gap: 11px; margin-bottom: 8px; }
#fc-sn .fc-sn-barra:last-child { margin-bottom: 0; }
#fc-sn .fc-sn-barra .pn { font-size: 13px; color: var(--prosa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* «Switzerland» no entra en 74 px (salía «Switzerla…»). La columna se ensancha
   SÓLO en la ficha que tiene un país de nombre largo (la marca la pone quien
   dibuja: surnames.js y surname-name.php): las de España/Francia/Polonia/
   Irlanda no cambian ni un píxel. */
#fc-sn .fc-sn-blq--largo .fc-sn-barra { grid-template-columns: 90px 1fr auto; }
#fc-sn .fc-sn-barra .pv { height: 8px; background: var(--papel2); border-radius: var(--pill); overflow: hidden; }
#fc-sn .fc-sn-barra .pv i {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, #E8D08A, var(--oro), var(--oro-osc));
  border-radius: var(--pill); transition: width .7s var(--sal);
}
#fc-sn .fc-sn-barra .pc { font-size: 12.5px; color: var(--tinta); font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; text-align: right; }
#fc-sn .fc-sn-barra .pc s { display: block; text-decoration: none; font-weight: 400; font-size: 10.5px; color: var(--tenue); }

#fc-sn .fc-sn-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#fc-sn .fc-sn-dato { background: var(--gris); border-radius: var(--r); padding: 12px 14px; border-left: 2px solid var(--oro); }
#fc-sn .fc-sn-dato .v { font-size: 21px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; color: var(--tinta); }
#fc-sn .fc-sn-dato .l { font-size: 11px; color: var(--tenue); margin-top: 3px; line-height: 1.35; }

#fc-sn .fc-sn-caras { display: flex; gap: 7px; margin-bottom: 10px; flex-wrap: wrap; }
#fc-sn .fc-sn-caras img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center 28%;
  border: 1px solid var(--filete); background: var(--papel2);
}
#fc-sn .fc-sn-caras .mas {
  width: 46px; height: 46px; border-radius: 50%; border: 1px dashed var(--filete);
  display: grid; place-items: center; font-size: 11.5px; color: var(--tenue);
  font-weight: 600; font-variant-numeric: tabular-nums; flex: none;
}
#fc-sn#fc-sn .fc-sn-fuente {
  font-size: 11px !important; color: var(--tenue) !important; line-height: 1.45;
  margin-top: 12px !important; padding-top: 11px; border-top: 1px solid var(--filete2);
}
#fc-sn#fc-sn .fc-sn-tarj-cuerpo p.cap { font-size: var(--f-cap) !important; }

/* ===========================================================================
   2 · LA ESCALA
   ======================================================================== */
#fc-sn .fc-sn-esc-g {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.6vw, 40px); margin-top: clamp(30px, 3.4vw, 46px);
}
#fc-sn .fc-sn-esc { border-top: 1px solid rgba(201,168,76,.34); padding-top: 16px; }
#fc-sn .fc-sn-esc-n {
  font-size: clamp(30px, 2.5vw + 18px, 46px); font-weight: 300; letter-spacing: -.03em;
  color: var(--oro); font-variant-numeric: tabular-nums; line-height: 1.04;
}
#fc-sn#fc-sn .fc-sn-esc-d { font-size: var(--f-cap) !important; color: #AEB8C0 !important; margin-top: 8px !important; line-height: 1.45; }
#fc-sn#fc-sn .fc-sn-esc-pie {
  margin-top: clamp(28px, 3vw, 42px) !important; padding-top: 18px;
  border-top: 1px solid rgba(201,168,76,.22);
  font-size: var(--f-cap) !important; color: #93A0AA !important; max-width: 78ch;
}

/* ===========================================================================
   3 · LAS CAPAS

   ⚠️ LAS DOS COLUMNAS MIDEN LO MISMO. El pedido del owner: las cuatro fichas
   terminan donde termina el facsímil. Se resuelve al revés de lo obvio: la
   PILA define el alto (su contenido es texto y no se puede recortar) y la
   imagen se estira para alcanzarla. Estirar la foto sólo muestra más página de
   diario; recortar el texto sería un defecto.
   ======================================================================== */
#fc-sn .fc-sn-capas {
  display: grid; grid-template-columns: 7fr 5fr;
  gap: clamp(26px, 3.4vw, 56px); margin-top: clamp(34px, 4vw, 54px);
  align-items: stretch;
}
#fc-sn .fc-sn-diario {
  margin: 0; background: #fff; border: 1px solid var(--filete); border-radius: var(--r);
  box-shadow: var(--sombra); overflow: hidden;
  display: flex; flex-direction: column;
}
/* ⚠️ LA FOTO VA FUERA DEL FLUJO. Con el <img> en flujo, su proporción natural
   manda: el facsímil del diario es vertical (1488×2159), así que a 640 px de
   ancho pedía 930 px de alto y arrastraba a toda la fila a 1.049 px. Absoluta
   dentro de un contenedor con `flex: 1 1 0`, la caja mide lo que le deja la
   fila —la que fijan las cuatro fichas— y la foto la llena. */
#fc-sn .fc-sn-diario-img { position: relative; background: var(--papel2); overflow: hidden; flex: 1 1 0; min-height: 260px; }
#fc-sn .fc-sn-diario-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#fc-sn .fc-sn-diario-pie { padding: 16px 20px 18px; flex: none; }
#fc-sn#fc-sn .fc-sn-diario-t { font-weight: 600; font-size: 15.5px !important; letter-spacing: -.004em; color: var(--tinta) !important; }
#fc-sn#fc-sn .fc-sn-diario-s { font-size: var(--f-cap) !important; color: var(--tenue) !important; margin-top: 5px !important; font-style: italic; }

/* ⚠️ `align-self: start` en la PILA es lo que cierra el asunto. La fila de la
   grilla estira a los dos hijos por igual: si la pila también se estira, las
   fichas quedan arriba y sobra un hueco abajo. Sacándola del estirado, la fila
   mide lo que miden las cuatro fichas y la FOTO se estira hasta ahí. */
#fc-sn .fc-sn-pila { display: flex; flex-direction: column; gap: 14px; align-self: start; }
/* ⚠️ `flex: 0 0 auto` y NO `1 1 0`. Con `1 1 0` las cuatro fichas se estiran
   para llenar la fila y quedan en 252 px cada una —un bloque de 1.049 px de
   alto por tres renglones de texto. Así conservan su alto natural y es la
   FOTO la que se estira para alcanzarlas, que era el pedido: estirar el
   facsímil sólo muestra más página de diario. */
#fc-sn .fc-sn-capa {
  flex: 0 0 auto; background: #fff; border: 1px solid var(--filete); border-radius: var(--r);
  padding: 16px 20px; display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: start;
}
#fc-sn .fc-sn-num {
  font-size: 14px; font-weight: 600; color: var(--oro-osc); font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--filete); padding-right: 15px; line-height: 1.5;
}
#fc-sn .fc-sn-capa h3 { margin-bottom: 5px; }
#fc-sn#fc-sn .fc-sn-capa p { font-size: 14.5px !important; color: var(--prosa) !important; line-height: 1.52; }
#fc-sn .fc-sn-capa .fc-sn-f { display: block; margin-top: 7px; font-size: 11.5px; color: var(--tenue); }

/* ===========================================================================
   EL CARRUSEL DE LAS CUATRO CAPAS — SÓLO EN TELÉFONO

   Portado del carrusel de «How it works» de la portada, con sus correcciones
   ya ganadas. Las clases van con prefijo propio porque las de allá cuelgan de
   `#fc-h3` y esta página cuelga de `#fc-sn`: no hay forma de compartirlas.

   ⚠️ El estado cuelga de [data-carr], que la pone el JS. Sin JS quedan las
   cuatro apiladas y legibles: es la sección que explica qué trae el producto,
   no puede depender de un script.
   ======================================================================== */
#fc-sn .fc-sn-pasos-nav { display: none; }

@media (max-width: 940px) {
  /* el envoltorio recorta; el riel se mueve.
     ⚠️ `min-width: 0` NO ES OPCIONAL. El envoltorio es un ítem de grilla y los
     ítems de grilla nacen con `min-width: auto`: no se dejan achicar por debajo
     del contenido. Con las cuatro fichas en fila el contenido mide la suma de
     las cuatro, así que el envoltorio se plantaba en 657 px dentro de una
     pantalla de 390 y la página ganaba scroll horizontal. Medido. */
  #fc-sn [data-fc-sn-pasos] { overflow-x: clip; overflow-y: visible; min-width: 0; }
  #fc-sn .fc-sn-pila[data-carr] .fc-sn-capa { min-width: 0; }
  #fc-sn .fc-sn-pila[data-carr] {
    display: flex;
    /* ⚠️ `flex-direction: row` EXPLÍCITO. La pila ya era un flex en COLUMNA
       —así se apilan las cuatro fichas en escritorio—, así que poner
       `display:flex` no cambiaba nada: seguían una debajo de la otra y el
       `flex: 0 0 100%` pasaba a significar el 100% del ALTO. En la portada no hace
       falta porque allá el contenedor es una grilla, no una columna. */
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    will-change: transform;
    transition: transform 420ms var(--sal);
    /* deja pasar el scroll vertical y reserva el horizontal; sin esto el
       navegador se queda con el gesto y el arrastre nunca llega */
    touch-action: pan-y;
  }
  /* mientras el dedo arrastra no hay transición: el riel va pegado al dedo */
  #fc-sn .fc-sn-pila[data-carr][data-arrastrando] { transition: none; }
  #fc-sn .fc-sn-pila[data-carr] .fc-sn-capa {
    flex: 0 0 100%; width: 100%; max-width: 100%;
  }
  #fc-sn .fc-sn-pasos-nav { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
}

/* ⚠️ RESET DE BOTÓN OBLIGATORIO. Astra le pone a TODO <button> un
   `box-shadow: rgba(0,0,0,.05) 0 1px 2px` y un `border-radius: 4px`. Sobre los
   puntos eso dibuja un rectángulo gris detrás de cada uno y se ven como cuatro
   casillas, no como cuatro puntos. */
#fc-sn .fc-sn-pasos-b,
#fc-sn .fc-sn-pasos-seg {
  -webkit-appearance: none; appearance: none;
  box-shadow: none; font: inherit; line-height: 1;
}
#fc-sn .fc-sn-pasos-b {
  flex: none; width: 46px; height: 46px; display: grid; place-items: center;
  padding: 0; border: 1px solid var(--filete); border-radius: 50%;
  background: #FFFFFF; color: var(--navy); cursor: pointer;
  transition: background-color 200ms var(--sal), border-color 200ms var(--sal), color 200ms var(--sal), transform 140ms var(--sal);
}
#fc-sn .fc-sn-pasos-b:active { transform: scale(.93); }
@media (hover: hover) and (pointer: fine) {
  #fc-sn .fc-sn-pasos-b:hover { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
}
#fc-sn .fc-sn-pasos-b:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 3px; }

#fc-sn .fc-sn-pasos-riel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
#fc-sn .fc-sn-pasos-seg {
  /* el botón es grande para que el dedo acierte; el punto que se ve es el span */
  width: 26px; height: 46px; display: grid; place-items: center;
  padding: 0; border: 0; background: none; cursor: pointer;
}
#fc-sn .fc-sn-pasos-seg span {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--filete);
  transition: background-color 300ms var(--sal), transform 300ms var(--sal);
}
/* --oro sobre gris claro da poco contraste; el oscuro pasa AA y se sigue
   leyendo dorado. */
#fc-sn .fc-sn-pasos-seg[aria-selected="true"] span { background: var(--oro-osc); transform: scale(1.3); }
#fc-sn .fc-sn-pasos-seg:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  #fc-sn .fc-sn-pila[data-carr] { transition-duration: 240ms; }
}

#fc-sn#fc-sn .fc-sn-nota {
  margin-top: clamp(32px, 3.4vw, 46px) !important; padding: 16px 20px;
  border-left: 2px solid var(--oro); background: rgba(201,168,76,.07);
  font-size: var(--f-cap) !important; color: var(--prosa) !important;
  border-radius: 0 var(--r) var(--r) 0; max-width: 92ch;
}
#fc-sn .fc-sn-nota strong { color: var(--tinta); font-weight: 600; }

/* ===========================================================================
   5 · EL CIERRE
   ======================================================================== */
#fc-sn .fc-sn-cierre-g { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(26px, 4vw, 64px); align-items: center; }
#fc-sn .fc-sn-cierre-b { display: flex; justify-content: flex-start; }

/* ===========================================================================
   APARICIÓN

   ⚠️ POR DEFECTO TODO ESTÁ VISIBLE. La clase que esconde la agrega el JS:
   si el JS no corre, la página se lee igual. Y con reduced-motion —que es lo
   que tiene puesto la PC del owner— no se esconde nada nunca.
   ======================================================================== */
#fc-sn.js .fc-sn-rev { opacity: 0; transform: translateY(16px); }
#fc-sn.js .fc-sn-rev.vis { opacity: 1; transform: none; transition: opacity .66s var(--sal), transform .66s var(--sal); }
/* ⚠️ La guarda de reduced-motion NO usa el selector universal. Antes decía
   `#fc-sn * { animation-duration: .01ms }` y eso apagaba también la entrada de
   la ficha, que el owner quiere ver. Se apaga lo decorativo —las apariciones
   por scroll— y se atenúa lo que comunica. */
@media (prefers-reduced-motion: reduce) {
  #fc-sn.js .fc-sn-rev { opacity: 1 !important; transform: none !important; transition: none !important; }
  #fc-sn .fc-sn-barra .pv i { transition-duration: .01ms !important; }
}

/* ===========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1080px) {
  #fc-sn .fc-sn-capas { grid-template-columns: 1fr; }
  #fc-sn .fc-sn-diario-img { aspect-ratio: 1.5; min-height: 0; flex: none; }
  #fc-sn .fc-sn-capa { flex: none; }
}
@media (max-width: 940px) {
  #fc-sn .fc-sn-hero-g { grid-template-columns: 1fr; gap: 34px; }

  /* 🔴 LAS DOS ACCIONES, DESPUÉS DE LA INFORMACIÓN.
     Acá la ficha va debajo del texto, así que arriba el botón ofrecía «ver a X
     en el mapa» ANTES de que se supiera quién es X, y los iconos ofrecían
     compartir algo todavía no leído. Los mueve surnames.js en este mismo punto
     de corte (940 px): compartir adentro de la ficha al final, y el botón justo
     debajo. Esto sólo los viste. */
  #fc-sn#fc-sn .fc-sn-mapa-btn {
    margin-top: -16px; width: 100%; justify-content: center; height: 52px;
  }

  /* compartir, ya adentro de la ficha: sobre papel blanco, debajo de la línea
     de fuentes y separado por el mismo filete que usa la ficha */
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp {
    margin: 16px 0 2px; padding-top: 16px; border-top: 1px solid var(--filete2);
  }
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp__b { background: var(--gris); border-color: transparent; }
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp__b:hover { background: var(--navy); border-color: var(--navy); }

  /* 🔴 EL PANEL DEL «…» PASA A SER UNA HOJA FIJA ABAJO.
     Adentro de la ficha no puede ser `position:absolute`: el cuerpo de la ficha
     tiene `overflow-y:auto`, así que el panel quedaría RECORTADO por el borde y
     la mitad de las opciones no se verían. Anclado a la pantalla no lo recorta
     nada y además es la forma en que se ven las hojas de compartir en teléfono. */
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp__panel {
    position: fixed; left: 14px; right: 14px; bottom: 14px; top: auto;
    min-width: 0; transform: translateY(10px); z-index: 120;
    box-shadow: 0 -8px 40px rgba(20, 35, 46, .22);
  }
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp__mas.is-abierto .fc-ba-comp__panel { transform: none; }
  #fc-sn .fc-sn-tarj-cuerpo .fc-ba-comp__i { padding: 13px 12px; font-size: 15px; }
  #fc-sn .fc-sn-cierre-g { grid-template-columns: 1fr; gap: 28px; }
  #fc-sn .fc-sn-busca { max-width: none; }
  /* Las píldoras de ejemplo se van en el teléfono: ocupan dos renglones entre
     el campo y la ficha, que es justo lo que el visitante quiere ver. En
     escritorio se quedan, ahí no estorban. */
  #fc-sn .fc-sn-probar { display: none; }
  /* ── EL FONDO DEL TELÉFONO SON DOS FOTOS ───────────────────────────────
     🔴 POR QUÉ. Medido: la sección mide 390 × 1.751 px. La foto es 1696 × 2528.
     Con `cover` en una caja tan alta y angosta se recorta el **67% del ancho**:
     queda un zoom enorme sobre la parte menos interesante. Y encima el tercio
     superior de esa foto es papel casi en blanco —se aclaró en su momento para
     que el logo tuviera fondo limpio—, así que la primera pantalla entera
     quedaba sin imagen. Lo marcó el owner: «al inicio de la sección no se ve
     ninguna imagen».

     LA SOLUCIÓN. Dos fotos de la misma mesa, la de arriba es la continuación
     hacia arriba. Cada una cubre el 56% del alto, se solapan un 12% y la de
     arriba se desvanece dentro de ese solape con una máscara. Así ninguna
     necesita recortarse tanto y no hay costura dura.

     ⚠️ El fundido arranca en el 80% de la capa de arriba A PROPÓSITO: es donde
     empieza la de abajo. Si arrancara antes, entre las dos quedaría una franja
     donde la de arriba ya se fue y la de abajo todavía no llegó, y se vería el
     color liso de la sección. */
  #fc-sn .fc-sn-foto > .fc-sn-fondo {
    background-image: var(--img-fondo-movil);
    background-position: center bottom;
    background-size: auto 56%;
  }
  #fc-sn .fc-sn-foto > .fc-sn-fondo::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 56%;
    background-image: var(--img-fondo-movil-alto, var(--img-fondo-movil));
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
  }

  /* ── EL VELO, ABIERTO ARRIBA ───────────────────────────────────────────
     ⚠️ ESTO ES LA MITAD DEL ARREGLO. Estaba al **93% de opacidad** en el
     arranque: aunque la foto tuviera dibujo, quedaba tapada igual. Ahora baja a
     .72 justo donde va el titular, que es donde el owner quería ver la foto.

     🔴 Salvo en los primeros ~90 px, que son los del header: ahí el velo se
     queda fuerte para que el logo se lea. Medido: el borde de arriba de la foto
     nueva tiene brillo 152 —bastante oscuro—, y con el velo al .86 queda en
     ~230, que es lo que necesita un logo en navy. */
  #fc-sn .fc-sn-foto > .fc-sn-velo {
    background:
      radial-gradient(520px 170px at 50% 0%, rgba(253,251,247,.72), rgba(253,251,247,0) 78%),
      linear-gradient(180deg,
        rgba(244,239,230,.86) 0%,
        rgba(244,239,230,.86) 5%,
        rgba(244,239,230,.72) 15%,
        rgba(244,239,230,.74) 30%,
        rgba(244,239,230,.80) 55%,
        rgba(244,239,230,.62) 100%);
  }
}
@media (max-width: 860px) {
  #fc-sn .fc-sn-esc-g { grid-template-columns: 1fr 1fr; gap: 26px; }
}
@media (max-width: 560px) {
  #fc-sn .fc-sn-campo { padding: 6px 7px 6px 18px; gap: 9px; }
  #fc-sn#fc-sn .fc-sn-btn { padding: 0 18px; height: 46px; line-height: 46px; }
  #fc-sn .fc-sn-duo { grid-template-columns: 1fr; }
  #fc-sn .fc-sn-tarj-cuerpo,
  #fc-sn .fc-sn-tarj-top { padding-inline: 18px; }
  #fc-sn .fc-sn-sug .dt { font-size: 12px; }
  #fc-sn .fc-sn-cierre-b { justify-content: stretch; }
  #fc-sn#fc-sn .fc-sn-btn--oro { width: 100%; }
}
@media (max-width: 420px) {
  #fc-sn .fc-sn-esc-g { grid-template-columns: 1fr; gap: 22px; }
  #fc-sn .fc-sn-barra { grid-template-columns: 62px 1fr auto; gap: 9px; }
}