/* ============================================================================
   /surnames/{apellido}/ — la ficha de un apellido.

   SE APOYA ENTERA EN surnames.css: tokens, bandas, hero con foto, tarjeta,
   botón al mapa y cierre son LAS MISMAS PIEZAS de /surnames/, con las mismas
   clases. Acá va sólo lo que la ficha tiene y el índice no.
   🔴 No copiar reglas de surnames.css acá: si se corrige allá, se corrige acá
   solo. Mismo criterio que el header, que es el de la portada.

   Las cinco reglas del sistema siguen valiendo (una sola familia, un solo
   acento de acción, tres radios, una sombra, ritmo 7/5).
   ========================================================================= */

/* --- la miga de pan: arriba del titular, discreta --- */
#fc-sn .fc-snm-miga {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
  font-size: var(--f-cap); color: var(--tenue); letter-spacing: .01em;
}
#fc-sn#fc-sn .fc-snm-miga a {
  color: var(--prosa); border-bottom: 1px solid var(--filete);
  transition: color .18s var(--sal), border-color .18s var(--sal);
}
#fc-sn#fc-sn .fc-snm-miga a:hover { color: var(--tinta); border-color: var(--navy); }
#fc-sn .fc-snm-miga [aria-current] { color: var(--tinta); font-weight: 600; }

/* --- el titular: un apellido largo no puede desbordar en teléfono --- */
#fc-sn#fc-sn.fc-snm h1 { overflow-wrap: anywhere; }

/* --- las acciones del hero --- */
#fc-sn .fc-snm-acc {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  margin-top: clamp(24px, 2.6vw, 34px);
}
/* ⚠️ surnames.css le da `margin-top:16px` (y en teléfono `-16px`, porque allá
   el JS lo baja debajo de la tarjeta). Acá no se mueve: va en su fila. */
#fc-sn#fc-sn.fc-snm .fc-snm-acc .fc-sn-mapa-btn { margin-top: 0; }
#fc-sn#fc-sn .fc-snm-otro {
  font-size: var(--f-cap); color: var(--prosa); font-weight: 500;
  border-bottom: 1px solid var(--filete); padding-bottom: 1px;
  transition: color .18s var(--sal), border-color .18s var(--sal);
}
#fc-sn#fc-sn .fc-snm-otro:hover { color: var(--tinta); border-color: var(--navy); }

/* --- la tarjeta ---
   🔴 ACÁ NO LLEVA ALTO FIJO. En /surnames/ el marco no se mueve porque cambia
   de apellido en el lugar (decisión del owner, para que la página no salte).
   Acá hay UN apellido y la mayoría son flacos: con los 830 px del índice
   quedaba media tarjeta en blanco. */
#fc-sn.fc-snm .fc-sn-tarj { height: auto; min-height: 0; }
#fc-sn.fc-snm .fc-sn-tarj-cuerpo { overflow: visible; }

/* --- partido 5/7: el texto a la izquierda, la lista a la derecha --- */
#fc-sn .fc-snm-split {
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(30px, 4.4vw, 72px); align-items: start;
}
#fc-sn#fc-sn .fc-snm-split .fc-sn-lede { max-width: 40ch; }
#fc-sn#fc-sn .fc-snm-mapa-2 { margin-top: clamp(22px, 2.4vw, 30px); }
#fc-sn#fc-sn .fc-snm-nota {
  margin-top: 20px !important; font-size: var(--f-cap) !important;
  color: var(--tenue) !important; max-width: 42ch;
}

/* --- el registro francés, departamento por departamento ---
   Reusa `.fc-sn-barra` de la tarjeta, con la columna del nombre más ancha: acá
   van «Bouches-du-Rhône» y «Born outside France», que en 74 px se cortaban. */
#fc-sn .fc-snm-deps .fc-sn-blq-t { margin-bottom: 16px; }
#fc-sn .fc-snm-deps .fc-sn-barra {
  grid-template-columns: minmax(0, 13.5em) 1fr 4.2em; gap: 14px; margin-bottom: 12px;
}
#fc-sn .fc-snm-deps .fc-sn-barra .pn { font-size: 14.5px; color: var(--tinta); }
#fc-sn .fc-snm-deps .fc-sn-barra .pc { font-size: 14px; }
#fc-sn .fc-snm-deps .fc-sn-barra .pv { height: 9px; }
/* los nacidos afuera no son un departamento más: navy, no oro, y separados */
#fc-sn .fc-snm-deps .fc-sn-barra.fuera {
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid var(--filete2);
}
#fc-sn .fc-snm-deps .fc-sn-barra.fuera .pn { font-weight: 600; }
#fc-sn .fc-snm-deps .fc-sn-barra.fuera .pv i { background: var(--navy); }

/* --- LAS BARRAS SE LLENAN ---
   Pedido del owner, 2026-09-30: «mientras la persona scrollea hacia abajo, esos
   gráficos se llenen con animación».

   ⚠️ El keyframe tiene SÓLO `from`: el final es el ancho que ya escribió el PHP
   en línea, así que el dato no se repite en ningún lado.

   · La TARJETA de arriba, en computadora, se llena sola al cargar (está a la
     vista desde el primer cuadro) — sólo CSS, no depende del JS. Medido: la
     animación arranca ~45 ms antes del primer pintado y empieza a llenar
     ~250 ms después, así que se VE.
   · Las SECCIONES por país —y la tarjeta en teléfono, donde queda debajo del
     texto y fuera de pantalla— las maneja surname-name.js: marca
     `fc-snm-espera` en las que todavía no se ven (barras en 0) y las cambia a
     `fc-snm-llena` cuando entran a la pantalla. UNA sola vez: llenarse tiene dirección, y
     vaciarse al subir se leería como un error (mismo criterio que los
     contadores de /surnames/).
   · SIN JS no se marca nada y las barras quedan llenas y quietas: nunca vacías.

   ⚠️ DOS keyframes con el mismo contenido y NOMBRE DISTINTO, a propósito: si
     la tarjeta pasara de la animación de carga a la de llegada con el mismo
     nombre, el navegador no la reinicia y la barra aparece de golpe.
   ⚠️ `fc-snm-llena` va con doble id para ganarle a la regla de la tarjeta.

   🔴 REDUCED-MOTION ATENÚA, NO APAGA. La PC del owner la tiene activa; apagarla
   le dejaría las barras quietas, que es justo lo que pidió cambiar. */
@keyframes fc-snm-llenar { from { width: 0; } }   /* al cargar */
@keyframes fc-snm-llegar { from { width: 0; } }   /* al llegar scrolleando */
#fc-sn .fc-snm-espera .fc-sn-barra .pv i { width: 0 !important; }
/* ⚠️ sin la transición de ancho de la tarjeta del índice (surnames.css): acá
   se mezclaba con la animación — al ponerse en espera la barra se ENCOGÍA
   animada en vez de quedar en 0, y al llenarse competían las dos. */
#fc-sn .fc-snm-espera .fc-sn-barra .pv i,
#fc-sn .fc-snm-llena .fc-sn-barra .pv i { transition: none; }
#fc-sn#fc-sn .fc-snm-llena .fc-sn-barra .pv i { animation: fc-snm-llegar 1.1s var(--sal) both; }
@media (min-width: 941px) {
  #fc-sn.fc-snm .fc-sn-hero .fc-sn-barra .pv i { animation: fc-snm-llenar 1.1s var(--sal) .3s both; }
  #fc-sn.fc-snm .fc-sn-hero .fc-sn-barra:nth-child(3) .pv i { animation-delay: .38s; }
  #fc-sn.fc-snm .fc-sn-hero .fc-sn-barra:nth-child(4) .pv i { animation-delay: .46s; }
  #fc-sn.fc-snm .fc-sn-hero .fc-sn-barra:nth-child(5) .pv i { animation-delay: .54s; }
}
@media (prefers-reduced-motion: reduce) {
  #fc-sn#fc-sn .fc-snm-llena .fc-sn-barra .pv i,
  #fc-sn#fc-sn.fc-snm .fc-sn-hero .fc-sn-barra .pv i { animation-duration: .6s; }
}

/* --- el enlace de atribución dentro de la línea de fuentes ---
   Suiza lo EXIGE por licencia. Sin esto salía con el azul por defecto del tema
   (rgb 4,107,210, medido): va del mismo gris que la fuente, subrayado con el
   filete, igual que la miga de pan. */
#fc-sn#fc-sn .fc-sn-fuente a {
  color: inherit; border-bottom: 1px solid var(--filete); text-decoration: none;
  transition: color .18s var(--sal), border-color .18s var(--sal);
}
#fc-sn#fc-sn .fc-sn-fuente a:hover { color: var(--tinta); border-color: var(--navy); }

/* --- en el papel: hasta tres facsímiles --- */
#fc-sn .fc-snm-recortes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 28px); margin-top: clamp(28px, 3vw, 42px);
  align-items: start;
}
#fc-sn .fc-snm-recortes figure {
  margin: 0; background: #fff; border: 1px solid var(--filete);
  border-radius: var(--r); box-shadow: var(--sombra); overflow: hidden;
}
/* ⚠️ ALTO FIJO, RECORTE DESDE ARRIBA. Las páginas son verticales (≈1255×1810):
   con su proporción, tres apiladas medían 1.333 px en teléfono (medido). Arriba
   está la cabecera del diario, que es lo que dice qué diario es. */
#fc-sn .fc-snm-recortes .img { position: relative; height: clamp(230px, 24vw, 340px); background: var(--papel2); overflow: hidden; }
#fc-sn .fc-snm-recortes img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
#fc-sn .fc-snm-recortes figcaption { padding: 13px 16px 15px; border-top: 1px solid var(--filete2); }
#fc-sn .fc-snm-recortes figcaption b { display: block; font-size: 14.5px; font-weight: 600; color: var(--tinta); line-height: 1.35; }
#fc-sn .fc-snm-recortes figcaption span { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* --- quién lo llevó --- */
#fc-sn .fc-snm-gente {
  list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px;
}
#fc-sn .fc-snm-gente li {
  display: flex; align-items: center; gap: 14px; margin: 0;
  padding: 12px 14px; background: #fff; border: 1px solid var(--filete2); border-radius: var(--r);
}
#fc-sn .fc-snm-gente img {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  object-fit: cover; object-position: center 28%;
  border: 1px solid var(--filete); background: var(--papel2);
}
/* sin retrato de licencia libre: las iniciales en el mismo círculo (misma
   medida, mismo filete) — nunca una silueta genérica ni una foto ajena */
#fc-sn .fc-snm-gente .ini {
  width: 56px; height: 56px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--filete); background: var(--papel2);
  font-size: 17px; font-weight: 300; letter-spacing: .04em; color: var(--navy);
}
#fc-sn .fc-snm-gente b { display: block; font-size: 15px; font-weight: 600; color: var(--tinta); line-height: 1.3; }
#fc-sn .fc-snm-gente span { display: block; font-size: 12.5px; color: var(--tenue); margin-top: 2px; line-height: 1.4; }

/* --- vecinos en el índice: el enlazado interno --- */
#fc-sn .fc-snm-vecinos {
  list-style: none; margin: clamp(26px, 3vw, 40px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
#fc-sn .fc-snm-vecinos li { margin: 0; }
#fc-sn#fc-sn .fc-snm-vecinos a {
  display: block; height: 100%; padding: 14px 16px 13px;
  background: #fff; border: 1px solid var(--filete2); border-radius: var(--r);
  transition: border-color .18s var(--sal), box-shadow .18s var(--sal);
}
#fc-sn#fc-sn .fc-snm-vecinos a:hover { border-color: var(--navy); box-shadow: var(--sombra); }
#fc-sn .fc-snm-vecinos .n { display: block; font-size: 16px; font-weight: 600; color: var(--tinta); letter-spacing: -.004em; overflow-wrap: anywhere; }
#fc-sn .fc-snm-vecinos .d { display: block; font-size: 12px; color: var(--tenue); margin-top: 3px; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   RESPONSIVE — los mismos cortes que surnames.css
   ======================================================================== */
@media (max-width: 1080px) {
  #fc-sn .fc-snm-vecinos { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 940px) {
  #fc-sn .fc-snm-split { grid-template-columns: 1fr; gap: 30px; }
  /* surnames.css lo estira a todo el ancho en teléfono: se respeta, sin el -16px */
  #fc-sn#fc-sn.fc-snm .fc-snm-acc .fc-sn-mapa-btn,
  #fc-sn#fc-sn.fc-snm .fc-snm-mapa-2 { margin-top: 0; }
  #fc-sn#fc-sn.fc-snm .fc-snm-mapa-2 { margin-top: 22px; }
  #fc-sn .fc-snm-recortes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  #fc-sn .fc-snm-recortes { grid-template-columns: 1fr; }
  #fc-sn .fc-snm-recortes .img { height: 190px; }
  #fc-sn .fc-snm-vecinos { grid-template-columns: 1fr 1fr; }
  #fc-sn .fc-snm-deps .fc-sn-barra { grid-template-columns: minmax(0, 9.5em) 1fr 3.6em; gap: 10px; }
  #fc-sn .fc-snm-deps .fc-sn-barra .pn { font-size: 13.5px; }
  #fc-sn .fc-snm-acc { gap: 16px; }
}

/* --- 1b · el significado (Wiktionary): una columna de lectura, no partida --- */
#fc-sn#fc-sn .fc-snm-sig .fc-sn-lede { max-width: 60ch; }
#fc-sn#fc-sn .fc-snm-sig .fc-snm-sig-et {
  font-size: calc(var(--f-lede) * .88) !important; color: var(--prosa) !important;
  line-height: 1.6; max-width: 66ch; margin-top: 14px !important;
}
#fc-sn#fc-sn .fc-snm-sig .fc-sn-fuente { max-width: 78ch; margin-top: clamp(20px, 2.4vw, 28px) !important; }