/* ============================================================================
   FamilyCrests — main page v3
   ---------------------------------------------------------------------------
   SISTEMA (las reglas se cumplen, no se decoran):

   1. UN SOLO ACENTO DE ACCIÓN. --lacre aparece SOLO en el fondo de botones.
      Nunca en un ícono, un borde o un link. El oro es para filetes, numerales
      y el sello: nunca es pulsable. Así el ojo siempre sabe dónde tocar.
   2. UNA SOLA FAMILIA: Montserrat. Lo que cambia entre display y cuerpo es el
      PESO y el tracking, no la fuente. Display en 300 con tracking negativo
      (una sans geométrica a 400 en 48px se ve maciza); títulos chicos en 600,
      porque al revés que la serif, en chico la sans necesita más peso o se
      pierde contra el cuerpo. Es lo que hace MyHeritage y es lo que la vuelve
      moderna: si hay dos familias, hay dos voces.
   3. TRES RADIOS Y SE ACABÓ. --pill pulsable · --r 3px papel · 50% círculo.
      Un documento no tiene esquinas blandas.
   4. UNA SOLA FAMILIA DE SOMBRA, y solo en lo que está físicamente apoyado
      sobre la mesa (placas de papel). El resto separa por color de fondo.
   5. RITMO ASIMÉTRICO. El default es split 7/5, no centrado. Centrar es la
      decisión, no la inercia.
   ========================================================================== */

#fc-h3 {
  /* -- tinta y papel ---------------------------------------------------- */
  /* Tres papeles que se distinguen a un metro de la pantalla. Antes eran
     tres cremas casi iguales y las bandas no se separaban. */
  --papel:   #F4EFE6;
  --papel2:  #E7DCC7;
  --papel3:  #FDFBF7;
  /* Gris neutro, elegido por el owner desde el inspector de la referencia.
     Es frio y los otros tres papeles son calidos: se usa SOLO como fondo de
     seccion, nunca como papel de una pieza, o se nota el desacuerdo de tono. */
  --gris:    #F7F7F7;
  --navy:    #112B3D;
  --noche:   #0A1922;
  --oro:     #C9A84C;
  --oro-osc: #8A6E20;
  --lacre:   #A81400;
  --lacre2:  #8C1000;

  --tinta:  #14232E;
  --prosa:  #3D4C58;
  /* Medido sobre los píxeles pintados: #66727C daba 4.19 sobre el velo del
     hero (falla AA). #55606A da 5.47 ahí y 4.73 sobre --papel2. */
  --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);
  --mov: cubic-bezier(.77, 0, .175, 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-h2b:  clamp(25px, 1.6vw + 19px, 36px);
  --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);

  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 del viewport aunque el tema la meta
   dentro de un contenedor con max-width.
   ⚠️ El recorte va en el BODY, no acá: un overflow-x:clip en #fc-h3 crea un
   bloque contenedor y aplasta el full-bleed de sus propios hijos. */
#fc-h3 .fc-h3-ancho {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
body.fc-h3-page { overflow-x: clip; }
#fc-h3 .fc-h3-wrap {
  width: min(100% - 2 * clamp(20px, 5vw, 56px), var(--wrap));
  margin-inline: auto;
}

/* ---------------------------------------------------------------------------
   TIPOGRAFÍA — 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.
   Se declara por defecto + excepciones: una sección nueva nunca se cae
   de la escala por no estar enumerada.
   ------------------------------------------------------------------------ */
#fc-h3#fc-h3 h1,
#fc-h3#fc-h3 h2,
#fc-h3#fc-h3 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-h3#fc-h3 h1 { font-size: var(--f-h1) !important; line-height: 1.06 !important; font-weight: 300 !important; letter-spacing: -.022em !important; }
/* 300 y no 400: es el peso al que MyHeritage pone sus titulares de 48px.
   Una sans geométrica a 400 en display se ve maciza. */
#fc-h3#fc-h3 h2 { font-size: var(--f-h2) !important; line-height: 1.14 !important; font-weight: 300 !important; letter-spacing: -.018em !important; }
/* Al revés que el display: en chico la sans necesita MÁS peso o se pierde
   contra el cuerpo, que ya es Montserrat 400. */
#fc-h3#fc-h3 h3 { font-size: var(--f-h3) !important; line-height: 1.3 !important; font-weight: 600 !important; letter-spacing: -.004em !important; }

#fc-h3#fc-h3 p,
#fc-h3#fc-h3 li,
#fc-h3#fc-h3 dd,
#fc-h3#fc-h3 dt {
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: var(--f-body) !important;
  line-height: 1.62 !important;
  color: var(--prosa) !important;
  margin: 0;
}
#fc-h3#fc-h3 .fc-h3-lede {
  font-size: var(--f-lede) !important;
  line-height: 1.48 !important;
  color: var(--prosa) !important;
}
#fc-h3#fc-h3 .fc-h3-cap {
  font-size: var(--f-cap) !important;
  line-height: 1.5 !important;
  color: var(--tenue) !important;
}

/* Sobre fondo oscuro el tema también pisa el color: bloque propio. */
#fc-h3#fc-h3 .fc-h3-oscuro h1,
#fc-h3#fc-h3 .fc-h3-oscuro h2,
#fc-h3#fc-h3 .fc-h3-oscuro h3 { color: var(--papel3) !important; }
#fc-h3#fc-h3 .fc-h3-oscuro p,
#fc-h3#fc-h3 .fc-h3-oscuro li,
#fc-h3#fc-h3 .fc-h3-oscuro dt,
#fc-h3#fc-h3 .fc-h3-oscuro dd { color: #D6CDBE !important; }
#fc-h3#fc-h3 .fc-h3-oscuro .fc-h3-cap { color: #A9A192 !important; }

/* Rótulo de sección. Regla dura: máximo 3 en toda la página. */
#fc-h3 .fc-h3-eye {
  font-family: Montserrat, sans-serif;
  font-size: var(--f-eye);
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro-osc);
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
#fc-h3 .fc-h3-eye::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--filete);
  max-width: 96px;
}
#fc-h3 .fc-h3-oscuro .fc-h3-eye { color: var(--oro); }
#fc-h3 .fc-h3-oscuro .fc-h3-eye::after { background: rgba(201, 168, 76, .34); }

/* Cifra: tabular. Los números se alinean en columna, así que van con
   font-variant-numeric aunque la familia sea la misma que el resto. */
#fc-h3 .fc-h3-cifra {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* ---------------------------------------------------------------------------
   BOTONES — el único lugar donde vive --lacre
   ------------------------------------------------------------------------ */
#fc-h3 .fc-h3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 15px 34px;
  border: 0;
  border-radius: var(--pill);
  background: var(--lacre);
  color: #fff;
  font-family: Montserrat, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .005em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms var(--sal), transform 140ms var(--sal);
}
#fc-h3 .fc-h3-btn:active { transform: scale(.975); }
#fc-h3 .fc-h3-btn--fantasma {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}
#fc-h3 .fc-h3-oscuro .fc-h3-btn--fantasma {
  color: var(--papel3);
  box-shadow: inset 0 0 0 1.5px rgba(244, 239, 230, .5);
}
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-btn:hover { background: var(--lacre2); }
  #fc-h3 .fc-h3-btn--fantasma:hover { background: rgba(20, 35, 46, .06); }
  #fc-h3 .fc-h3-oscuro .fc-h3-btn--fantasma:hover { background: rgba(244, 239, 230, .1); }
}

#fc-h3 a { color: inherit; }
#fc-h3 .fc-h3-link {
  color: var(--oro-osc);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--f-cap);
  border-bottom: 1px solid rgba(138, 110, 32, .34);
  padding-bottom: 1px;
  transition: border-color 180ms var(--sal);
}
#fc-h3 .fc-h3-oscuro .fc-h3-link { color: var(--oro); border-bottom-color: rgba(201, 168, 76, .4); }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-link:hover { border-bottom-color: currentColor; }
}

#fc-h3 :focus-visible {
  outline: 2px solid #1E6F8C;
  outline-offset: 3px;
  border-radius: var(--r);
}

/* Filete de oro: el gesto que se repite. Un libro mayor tiene reglas. */
#fc-h3 .fc-h3-regla {
  width: 54px;
  height: 2px;
  background: var(--oro);
  border: 0;
  margin: 0 0 22px;
}

/* ---------------------------------------------------------------------------
   SECCIONES — base
   ------------------------------------------------------------------------ */
#fc-h3 .fc-h3-sec { padding-block: var(--aire); position: relative; }
#fc-h3 .fc-h3-sec--papel2 { background: var(--papel2); }
#fc-h3 .fc-h3-sec--blanco { background: var(--papel3); }
#fc-h3 .fc-h3-sec--gris   { background: var(--gris); }
#fc-h3 .fc-h3-sec--navy   { background: var(--navy); }
#fc-h3 .fc-h3-sec--noche  { background: var(--noche); }

/* Split asimétrico: el ritmo por defecto de la página. */
#fc-h3 .fc-h3-split {
  display: grid;
  gap: clamp(34px, 4.5vw, 76px);
  align-items: center;
}
@media (min-width: 900px) {
  #fc-h3 .fc-h3-split        { grid-template-columns: 1.06fr .94fr; }
  #fc-h3 .fc-h3-split--texto { grid-template-columns: .82fr 1.18fr; }
  #fc-h3 .fc-h3-split--ancho { grid-template-columns: 1.24fr .76fr; }
  #fc-h3 .fc-h3-split--invertido > :first-child { order: 2; }
}
#fc-h3 .fc-h3-medida { max-width: 60ch; }

/* Fondo a sangre con velo. El velo se calibra contra la foto, no a ojo. */
#fc-h3 .fc-h3-foto { position: relative; isolation: isolate; }
#fc-h3 .fc-h3-foto > .fc-h3-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#fc-h3 .fc-h3-foto > .fc-h3-velo { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
#fc-h3 .fc-h3-foto > .fc-h3-wrap,
#fc-h3 .fc-h3-foto > .fc-h3-contenido { position: relative; z-index: 2; }

/* ===========================================================================
   1 · HERO — la mesa del archivo
   ======================================================================== */
#fc-h3 .fc-h3-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 la franja blanca— el hero se SUBE ese
     mismo alto con un margen negativo y se lo devuelve como relleno.

     ⚠️ Se sube el HERO, no se toca el padding del body. Sacándolo, TODA la
     página quedaría por debajo del header y cada vez que reaparece al scrollear
     hacia arriba taparía 71px de contenido. Así, en cambio, la cuenta cierra en
     cero: el hero estaba en y=71 midiendo 829 y ahora está en y=0 midiendo 900
     — termina en el mismo lugar y nada de lo que sigue se mueve.

     --fc-h3-cab la mide el JS sobre el header real (cambia entre desktop y
     mobile, y con la barra de admin de WP).
     svh y no vh: en iOS, vh cuenta la barra del navegador que después se
     esconde, y el hero terminaba más alto que la pantalla. */
  margin-top: calc(var(--fc-h3-cab, 71px) * -1);
  padding-block: calc(clamp(56px, 6vw, 104px) + var(--fc-h3-cab, 71px)) clamp(64px, 7vw, 116px);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
}

/* --- HEADER TRANSPARENTE SOBRE EL HERO ------------------------------------
   Mientras el visitante está en la primera sección el header no dibuja su
   franja blanca; en cuanto la segunda sección llega a esa altura, vuelve a ser
   el de siempre.

   ⚠️ NO toca la lógica de mostrar/ocultar del tema (.fc-header--hidden /
   .fc-header--at-top). Sólo pinta: si el visitante baja, el header se esconde
   como siempre; si sube estando todavía en el hero, reaparece transparente.

   ⚠️ Va con !important y con el selector del body de esta página: el fondo
   blanco lo pone el tema para TODO el sitio y esto no puede escaparse de
   /home-v2/.

   ⚠️⚠️ LA TRANSPARENCIA VA CON `.fc-header--hero` A SECAS, NO CON
   `.fc-header--at-top`. El 2026-08-21 se probó atarla a "sólo la posición
   inicial" y trajo el defecto que reportó el owner: al scrollear un milímetro
   el tema saca `.fc-header--at-top`, la regla deja de matchear y **aparece la
   franja blanca por un segundo** hasta que el header termina de esconderse.
   Si se vuelve a tocar esto, es exactamente el bug que se va a reproducir.

   ⚠️ LOS SELECTORES CON `html.fc-h3-arriba` SON LOS QUE MATAN EL PARPADEO DE
   CARGA. El header lo pinta el tema blanco, y `.fc-header--hero` se la agrega
   el JS de la página, que va en el footer: o sea DESPUÉS del primer pintado.
   Medido en vivo: un cuadro blanco a los 263 ms, transparente recién a los
   326 ms. La clase del <html> la escribe un script inline en el <head>
   (mu-plugin familycrests-home-v2.php) antes de que se pinte nada. */
html.fc-h3-arriba body.fc-h3-page header.site-header,
html.fc-h3-arriba body.fc-h3-page header.site-header .ast-main-header-wrap,
html.fc-h3-arriba body.fc-h3-page header.site-header .main-header-bar,
body.fc-h3-page header.site-header.fc-header--hero,
body.fc-h3-page header.site-header.fc-header--hero .ast-main-header-wrap,
body.fc-h3-page header.site-header.fc-header--hero .main-header-bar {
  background: transparent !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
}

/* ⚠️ DENTRO DEL HERO EL HEADER SÓLO SE VE ARRIBA DE TODO.
   Sin esto, al subir dentro de la primera sección el header reaparece
   —transparente, sin franja— y el logo, la hamburguesa y el carrito se
   superponen con el titular y el buscador: un header transparente no tapa el
   fondo, así que no hay nada que separe sus íconos del texto de abajo.

   Comportamiento buscado, y es el que pidió el owner: viniendo de abajo el
   header blanco se ve mientras se sube, y al entrar en la primera sección se
   va con su animación; en el hero sólo queda el transparente, arriba de todo.

   ⚠️ Hace falta el #masthead en el selector. El tema fija
   `#masthead.site-header { transform: translateY(0) !important }`, y entre dos
   declaraciones !important gana la que tiene ID: sin él, esta regla pierde por
   más clases que le agregue.

   ⚠️ `fc-menu-open` la ponen DOS lugares distintos: el drawer se la pone al
   BODY (`functions.php`, openDrawer) y el sticky del tema se la pone al HEADER
   (su MutationObserver sobre #fc-menu-drawer). Cualquiera de las dos sirve;
   acá se usa la del body. */
body.fc-h3-page:not(.fc-menu-open) #masthead.site-header.fc-header--hero:not(.fc-header--at-top) {
  transform: translateY(-100%) !important;
}


/* --- EL CAJÓN DEL MENÚ PASA POR ENCIMA DEL HEADER ------------------------
   El panel navy entra de izquierda a derecha y va TAPANDO el logo y el carrito
   a medida que avanza, como una cortina. Antes no podía: se lo veían por
   encima del azul.

   ⚠️ EL DIAGNÓSTICO REAL, medido en vivo (no era opacidad, era ORDEN DE
   PINTADO): `#fc-menu-drawer` cuelga del <body> con z-index 10000, y
   `#masthead` es `position: fixed` con z-index 10100 y un transform — arma su
   propio contexto de apilado y se dibuja SIEMPRE por encima del cajón. Por eso
   ninguna regla de visibilidad tocaba el fondo del problema. Se sube el cajón
   por arriba del header y se acabó: la cortina los tapa sola.

   ⚠️ Va scopeado a esta página. En el resto del sitio el header es opaco y
   nada de esto hace falta; el cajón es el canónico de functions.php y no se
   toca para todos lados. */
body.fc-h3-page #fc-menu-drawer { z-index: 10200; }

/* ⚠️ EN EL HEADER MÓVIL LA CORTINA OCUPA TODA LA PANTALLA.
   El panel viene con `max-width: 400px`: a 390px ya cubre todo, pero entre 400
   y el breakpoint del header móvil dejaba a la vista justo el carrito de
   arriba a la derecha. Con el header móvil activo, el menú es pantalla
   completa. En escritorio se queda en 400 y el resto lo apaga el backdrop. */
@media (max-width: 921px) {
  body.fc-h3-page .fc-menu-drawer__panel { max-width: none; }
}

/* ⚠️ LA X ES LA DEL CAJÓN, Y ATERRIZA DONDE ESTÁ LA HAMBURGUESA.
   La hamburguesa es descendiente del header: NO puede escaparse del contexto
   de apilado de su padre para quedar por encima de la cortina (y bajarle el
   z-index al header tampoco sirve — `position: fixed` arma contexto igual).
   Así que la X que se ve con el menú abierto tiene que salir del panel.

   Para que se lea como parte del menú y no como una segunda X —que fue el
   problema la vez pasada, cuando la del cajón vivía arriba a la DERECHA— se la
   dibuja con dos barras iguales a las líneas de la hamburguesa, a la altura de
   la hamburguesa y ALINEADA CON LOS TEXTOS del menú. Las medidas las escribe
   el JS (bloque 0b) midiendo los elementos reales; los valores de reserva son
   los del escritorio.

   ⚠️ El `left` no es el del botón: las barras van centradas dentro de la caja
   de 44px, así que para que su borde izquierdo caiga sobre el texto hay que
   descontar el aire que queda a los costados. */
body.fc-h3-page .fc-menu-drawer__close {
  top: var(--fc-x-arr, 14px);
  left: calc(var(--fc-x-texto, 24px) - (var(--fc-x-lado, 44px) - var(--fc-x-ancho, 26px)) / 2);
  right: auto;
  width: var(--fc-x-lado, 44px);
  height: var(--fc-x-lado, 44px);
  padding: 0;
  color: #F4EFE6;
}
body.fc-h3-page .fc-menu-drawer__close svg { display: none; }
body.fc-h3-page .fc-menu-drawer__close::before,
body.fc-h3-page .fc-menu-drawer__close::after {
  content: "";
  position: absolute;
  width: var(--fc-x-ancho, 26px);
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
body.fc-h3-page .fc-menu-drawer__close::before { transform: rotate(45deg); }
body.fc-h3-page .fc-menu-drawer__close::after { transform: rotate(-45deg); }

/* ⚠️ EL FONDO SE APAGA EN TODOS LOS ESTADOS, COMO EN LA X DEL CARRITO.
   El tema pinta los `<button>` al pasar el mouse y quedaba un cuadrado celeste
   sobre el navy. `.fc-cart-drawer__close` ya pelea exactamente esta misma
   pelea (background / background-color / background-image / border / shadow):
   se replica acá para que las dos X se comporten igual.

   El feedback de hover es el del resto del sitio: la X crece un poco. */
body.fc-h3-page .fc-menu-drawer__close,
body.fc-h3-page .fc-menu-drawer__close:hover,
body.fc-h3-page .fc-menu-drawer__close:focus,
body.fc-h3-page .fc-menu-drawer__close:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  color: #F4EFE6 !important;
}
/* el foco por teclado sí se ve; el de mouse no */
body.fc-h3-page .fc-menu-drawer__close:focus:not(:focus-visible) { outline: none !important; }
body.fc-h3-page .fc-menu-drawer__close::before,
body.fc-h3-page .fc-menu-drawer__close::after { transition: transform 0.2s ease; }
body.fc-h3-page .fc-menu-drawer__close:hover::before { transform: rotate(45deg) scale(1.12); }
body.fc-h3-page .fc-menu-drawer__close:hover::after { transform: rotate(-45deg) scale(1.12); }
/* ⚠️ Se ATENÚA, no se apaga: la PC del owner pide menos animación y dejarlo
   quieto le saca el feedback de que la X es clickeable. */
@media (prefers-reduced-motion: reduce) {
  body.fc-h3-page .fc-menu-drawer__close::before,
  body.fc-h3-page .fc-menu-drawer__close::after { transition-duration: 120ms; }
  body.fc-h3-page .fc-menu-drawer__close:hover::before { transform: rotate(45deg) scale(1.07); }
  body.fc-h3-page .fc-menu-drawer__close:hover::after { transform: rotate(-45deg) scale(1.07); }
}

/* ⚠️ ESTA REGLA PIERDE Y SE DEJA A PROPÓSITO ASÍ. El tema declara
   `#masthead { transition: transform .25s ease-out, box-shadow .2s ease-out }`
   y entre dos reglas gana la que tiene ID: medido en vivo, la computada del
   header es la del tema y el fondo cambia de golpe, sin fundido.

   NO se le suma `#masthead` para ganarle: `transition` es una abreviatura, y
   pisarla borraría el `transform .25s` del tema — que es el deslizamiento del
   header, justo la animación que el owner quiere ver al entrar en el hero.
   Para forzar el fundido habría que repetir el transform acá y quedar atado a
   su tiempo. No vale la pena: cuando el fondo cambia, el header está
   deslizándose fuera de pantalla y el fundido no se ve. */
body.fc-h3-page header.site-header {
  transition: background-color 240ms var(--sal, ease), box-shadow 240ms var(--sal, ease);
}

/* ⚠️ EL LOGO DE PRODUCCIÓN TRAE EL BLANCO PINTADO. `familycrests-logo.webp`
   es de 500x64 SIN canal alfa: sobre el header transparente aparecía un
   rectángulo blanco alrededor del logo. Acá se reemplaza por una versión
   des-matizada (ver logo.js: se despeja el alfa desde la luminancia y se
   recupera la tinta, para no perder el suavizado de los bordes).

   ⚠️ Se cambia SIEMPRE en esta página, no sólo sobre el hero: sobre blanco se
   ve idéntico, y cambiar la imagen al scrollear daría un parpadeo.

   ⚠️ mix-blend-mode NO era una opción: el header es `position: fixed` con
   z-index, o sea que arma su propio contexto de apilado y la mezcla nunca
   habría llegado a la foto del hero. */
body.fc-h3-page header.site-header .custom-logo {
  content: url("logo-fc.png");
}
@media (prefers-reduced-motion: reduce) {
  body.fc-h3-page header.site-header { transition-duration: 120ms; }
}
#fc-h3 .fc-h3-hero .fc-h3-fondo {
  background-image: var(--img-diario);
  background-position: 74% center;
}
/* ⚠️ EL VELO BAJÓ DE .78 A .16 CUANDO ENTRÓ LA IMAGEN DE DIARIO.
   El velo existía para levantar una foto oscura: la anterior (mesa.jpg) medía
   81/255 en la zona del texto y el cuerpo daba 2,03:1 de contraste, por debajo
   del mínimo accesible de 4,5. La de diario mide 230/255, o sea que el velo ya
   no hace falta — y encima estaba tapando justo lo que hace buena a la imagen.

   Medido sobre el archivo real, en la zona donde cae el texto:

     velo   brillo    textura   titular   bajada
       0%   230/255     11,1     11,82     6,52
      15%   232/255      9,5     12,13     6,70   <- elegido
      30%   233/255      7,8     12,45     6,87
      78%   237/255      2,4     13,50     7,45   <- el de antes

   O sea: el velo viejo compraba 1,7 puntos de contraste que no hacían falta a
   cambio del 80% de la textura del papel. Al 16% queda el papel a la vista, con
   la trama del reverso, y los dos textos muy por encima del mínimo. */
#fc-h3 .fc-h3-hero .fc-h3-velo {
  background:
    linear-gradient(100deg,
      rgba(244, 239, 230, .16) 0%,
      rgba(244, 239, 230, .15) 28%,
      rgba(244, 239, 230, .12) 44%,
      rgba(244, 239, 230, .06) 62%,
      rgba(244, 239, 230, .02) 84%,
      rgba(244, 239, 230, 0) 100%);
}
@media (max-width: 899px) {
  /* ⚠️ EN MÓVIL VA OTRA IMAGEN, VERTICAL.
     La de escritorio es 3:2 y en una pantalla angosta sólo se ve el 31% del
     ancho: todas las fotos de familia viven en el 45% derecho y no hay encuadre
     que las traiga sin ponerlas debajo del texto (medido: el contraste caía a
     1,68:1). La vertical resuelve el problema por composición — papel abierto
     arriba, donde va el texto, y la banda de fotos abajo. */
  #fc-h3 .fc-h3-hero .fc-h3-fondo { background-image: var(--img-diario-movil); }

  /* ⚠️ Y EL TEXTO SUBE PARA DEJARLE LA BANDA A LAS FOTOS.
     En un teléfono la imagen se ve entera de alto (el recorte es sólo lateral),
     así que las fotos caen siempre en el último 30% de la pantalla. El bloque
     de texto estaba centrado y terminaba en y=675 de 844: la línea del ejemplo
     quedaba encima de las fotos con 1,43:1 de contraste, ilegible.

     Reservando abajo el alto de esa banda, el bloque se centra en lo que queda
     y termina antes de que empiecen las fotos. Medido: el texto pasa a terminar
     en ~573 y las fotos arrancan en ~590.

     ⚠️ `vh` primero y `svh` después: en iOS viejo no existe svh, y con `vh` la
     barra de direcciones puede agrandar la cuenta — pero de más, nunca de
     menos, así que el texto queda más arriba, no encima de las fotos. */
  #fc-h3 .fc-h3-hero { padding-bottom: 30vh; }
  #fc-h3 .fc-h3-hero { padding-bottom: 31svh; }

  /* Centrada y a tamaño exacto, como estaba: la vertical se compuso para verse
     así — la familia a la izquierda, el matrimonio en el medio, los chicos a la
     derecha. Se recorta el 31% del ancho repartido entre los dos bordes.

     ⚠️ Se probó anclarla arriba y agrandarla al 120% para bajar la banda de
     fotos; el owner lo revirtió. Si se vuelve a intentar, tener presente que el
     encuadre NO era la causa del problema que estaba reportando. */
  #fc-h3 .fc-h3-hero .fc-h3-fondo { background-position: 50% center; }
}

/* ⚠️ TELÉFONOS MUY BAJOS: VUELVE LA IMAGEN APAISADA.
   Ni con el acercamiento entra el texto arriba de la banda de fotos en una
   pantalla muy corta. Ahí va la apaisada pegada al borde izquierdo, que es
   papel abierto en todo el alto y no tiene banda que esquivar: se pierden las
   fotos, se gana el texto legible, que no se negocia.

   ⚠️⚠️ EL CORTE ES 660px Y ESE NÚMERO IMPORTA. La primera versión lo puso en
   780 y fue un error caro: 780 se calibró contra los **844 px de la pantalla**
   de un iPhone 14 Pro, pero Safari deja de viewport **~754** por sus barras.
   Resultado: TODOS los teléfonos reales caían en esta rama y nunca se veía la
   imagen vertical — el owner lo cazó mirando su propio celular. Medido en
   Chromium: 390x754 (Safari con barras) · 393x759 (iPhone 15) · 390x714 (barra
   grande). El número tiene que compararse con el VIEWPORT, no con la pantalla. */
@media (max-width: 899px) and (max-height: 660px) {
  #fc-h3 .fc-h3-hero .fc-h3-fondo {
    background-image: var(--img-diario);
    background-position: 0% center;
  }
  #fc-h3 .fc-h3-hero { padding-bottom: clamp(64px, 7vw, 116px); }
  #fc-h3 .fc-h3-hero .fc-h3-velo {
    background:
      linear-gradient(180deg,
        rgba(244, 239, 230, .24) 0%,
        rgba(244, 239, 230, .22) 52%,
        rgba(244, 239, 230, .16) 74%,
        rgba(244, 239, 230, .08) 100%);
  }
}
#fc-h3 .fc-h3-hero-caja { max-width: 640px; }
#fc-h3#fc-h3 .fc-h3-hero h1 { margin-bottom: 20px; }
#fc-h3 .fc-h3-hero-nombre {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-style: italic;
  color: var(--lacre);
  position: relative;
  white-space: nowrap;
}
#fc-h3#fc-h3 .fc-h3-hero .fc-h3-lede { max-width: 46ch; margin-bottom: 30px; }

/* El buscador: un solo campo, el dato que el 100% sabe de memoria. */
#fc-h3 .fc-h3-busca { max-width: 520px; }
#fc-h3 .fc-h3-campo {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--papel3);
  border: 1.5px solid var(--filete);
  border-radius: var(--pill);
  padding: 6px 6px 6px 4px;
  transition: border-color 200ms var(--sal), box-shadow 200ms var(--sal);
}
#fc-h3 .fc-h3-campo:focus-within {
  border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .16);
}
#fc-h3#fc-h3 .fc-h3-campo input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 8px 0 22px;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(19px, .5vw + 17px, 23px);
  color: var(--tinta);
  letter-spacing: .004em;
}
/* Es el único rótulo VISIBLE del campo: el <label> está oculto para lectores.
   #9AA3AA daba 2,56. */
#fc-h3#fc-h3 .fc-h3-campo input::placeholder { color: #6B7681; font-style: italic; }
#fc-h3 .fc-h3-campo .fc-h3-btn { min-height: 50px; padding: 13px 26px; white-space: nowrap; }

/* La línea viva: el censo real, resuelto mientras escribe. Este es el
   momento que ninguno de los tres competidores puede copiar sin el motor. */
/* Se reserva el alto para que la línea del censo no empuje el layout al
   aparecer (CLS). 40px es lo que ocupan dos renglones a este cuerpo. */
/* ⚠️ Bloque, no flex: el punto dorado que iba adelante se sacó (pedido del
   owner), y con `display: flex` + gap el texto quedaba corrido respecto del
   titular, la bajada y el campo. Así arranca exactamente a ras de todos. */
#fc-h3 .fc-h3-vivo {
  min-height: 40px;
  margin-top: 15px;
  display: block;
}
#fc-h3#fc-h3 .fc-h3-vivo-txt {
  font-size: var(--f-cap) !important;
  color: var(--prosa) !important;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 340ms var(--sal), transform 340ms var(--sal);
}
/* Doble id: la regla base también lo tiene, y (2,1,0) le ganaba a (1,3,0).
   Es la MISMA trampa de especificidad que ya apareció dos veces en esta página. */
#fc-h3#fc-h3 .fc-h3-vivo[data-lleno="1"] .fc-h3-vivo-txt { opacity: 1; transform: none; }
#fc-h3 .fc-h3-vivo-txt b {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
/* El mismo buscador vive en el cierre, que va sobre foto oscura. Sin esto la
   línea del censo quedaba tinta sobre tinta: contraste 1.1, invisible.
   .fc-h3-vivo-txt es un <span>, así que la regla .fc-h3-oscuro p no lo alcanza. */
#fc-h3#fc-h3 .fc-h3-oscuro .fc-h3-vivo-txt { color: #D6CDBE !important; }
#fc-h3 .fc-h3-oscuro .fc-h3-vivo-txt b { color: var(--oro); }

/* ===========================================================================
   2 · EL RECORTE — la prueba. Documento real, cita verificable.
   ======================================================================== */
/* clip y NO hidden: hidden convierte la sección en contenedor de scroll y
   eso congela cualquier animación atada al scroll de adentro. */
#fc-h3 .fc-h3-recorte-sec { background: var(--navy); overflow: clip; }
#fc-h3 .fc-h3-recorte-sec::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 78% 0%, rgba(201, 168, 76, .1) 0%, rgba(201, 168, 76, 0) 62%);
  pointer-events: none;
}
#fc-h3 .fc-h3-recorte-sec > * { position: relative; }

#fc-h3 .fc-h3-placa {
  position: relative;
  background: #EDE7DA;
  border-radius: var(--r);
  padding: 14px;
  box-shadow: 0 26px 60px -28px rgba(0, 0, 0, .72), 0 3px 10px -4px rgba(0, 0, 0, .38);
  transform: rotate(-.5deg);
}
/* Bloque contenedor sin padding: los % de la marca son de la imagen y de
   nada más, en cualquier ancho. */
#fc-h3 .fc-h3-placa-img { position: relative; display: block; }
#fc-h3 .fc-h3-placa img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(1.06) saturate(.9);
}
/* La marca del archivista: encierra el apellido tal como salió impreso.
   La posición está medida contra el recorte real (recorte-clark.jpg,
   titular "Sale of Clark, Davenport & Co."), no estimada a ojo.
   La leyenda va en el pie, nunca encima del papel: sobre tipografía de
   diario cualquier texto superpuesto se vuelve ilegible. */
#fc-h3 .fc-h3-marca {
  position: absolute;
  left: 24.2%;
  top: 38.2%;
  width: 18.6%;
  height: 10.4%;
  border: 2px solid var(--lacre);
  box-shadow: 0 0 0 3px rgba(168, 20, 0, .12);
  pointer-events: none;
}
#fc-h3 .fc-h3-marca-leyenda {
  display: inline-block;
  margin-right: 7px;
  padding: 2px 8px;
  border: 1px solid var(--lacre);
  color: #E8836F;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 1px;
}
#fc-h3 .fc-h3-cita {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid rgba(201, 168, 76, .3);
}
#fc-h3#fc-h3 .fc-h3-cita p { font-size: var(--f-cap) !important; color: #C3BAAA !important; }
#fc-h3 .fc-h3-cita cite { font-style: normal; color: var(--papel3); font-weight: 600; }

/* Las tres afirmaciones al lado del recorte.
   Van numeradas como cláusulas (i · ii · iii), no colgadas de un riel de
   acento a la izquierda: ese riel es un tic de página generada y además no
   dice nada. Un numeral romano sí dice "esto es un documento". */
#fc-h3 .fc-h3-tres { display: grid; gap: 26px; margin-top: 34px; counter-reset: fc-h3-c; }
#fc-h3 .fc-h3-tres > li {
  list-style: none;
  counter-increment: fc-h3-c;
  display: grid;
  grid-template-columns: 34px 1fr;
  column-gap: 14px;
}
#fc-h3 .fc-h3-tres > li::before {
  content: counter(fc-h3-c, lower-roman);
  grid-row: 1 / span 2;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  color: var(--oro);
  text-align: right;
  padding-top: 2px;
}
#fc-h3#fc-h3 .fc-h3-tres h3 { margin-bottom: 5px; }

/* ===========================================================================
   3 · LOS DOS CAPÍTULOS
   ======================================================================== */
#fc-h3 .fc-h3-caps { display: grid; gap: clamp(28px, 3.2vw, 44px); margin-top: 52px; }
@media (min-width: 860px) { #fc-h3 .fc-h3-caps { grid-template-columns: 1fr 1fr; } }

#fc-h3 .fc-h3-cap-plato {
  display: flex;
  flex-direction: column;
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  overflow: hidden;
}
#fc-h3 .fc-h3-cap-fig {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--papel2);
  border-bottom: 1px solid var(--filete);
  overflow: hidden;
}
#fc-h3 .fc-h3-cap-fig svg { display: block; width: 100%; height: 100%; }
#fc-h3 .fc-h3-cap-cuerpo { padding: clamp(24px, 2.4vw, 34px); display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; }
#fc-h3 .fc-h3-cap-num {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro-osc);
  display: flex;
  align-items: center;
  gap: 10px;
}
#fc-h3 .fc-h3-cap-num::after { content: ""; flex: 1; height: 1px; background: var(--filete); }
#fc-h3 .fc-h3-cap-cuerpo .fc-h3-btn { align-self: flex-start; margin-top: auto; }

/* ===========================================================================
   4 · EL ÍNDICE DEL VOLUMEN — tipografía como gráfico
   ======================================================================== */
#fc-h3 .fc-h3-indice {
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  padding: clamp(26px, 3.4vw, 52px);
  box-shadow: 0 22px 48px -34px rgba(20, 35, 46, .34);
}
#fc-h3 .fc-h3-indice-tit {
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--filete);
}
#fc-h3#fc-h3 .fc-h3-indice-tit .fc-h3-cap { letter-spacing: .2em; text-transform: uppercase; }
#fc-h3 .fc-h3-fila {
  display: grid;
  grid-template-columns: 2.4em 1fr auto;
  align-items: baseline;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--filete2);
}
#fc-h3 .fc-h3-fila:last-child { border-bottom: 0; }
#fc-h3 .fc-h3-fila-n {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--tenue);
  font-variant-numeric: tabular-nums;
}
#fc-h3#fc-h3 .fc-h3-fila-t {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(17px, .4vw + 15.6px, 21px) !important;
  line-height: 1.3 !important;
  color: var(--tinta) !important;
  position: relative;
  padding-right: 10px;
}
/* Los puntos guía del índice, hechos con el borde inferior de un pseudo. */
#fc-h3 .fc-h3-fila-t::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .22em;
  border-bottom: 1.5px dotted var(--filete);
  z-index: 0;
}
#fc-h3 .fc-h3-fila-t span {
  position: relative;
  z-index: 1;
  background: var(--papel3);
  padding-right: .55em;
}
#fc-h3 .fc-h3-fila-e {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 92px;
  justify-content: flex-end;
  font-family: Montserrat, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
#fc-h3 .fc-h3-fila[data-estado="abierto"] .fc-h3-fila-e { color: var(--oro-osc); }
#fc-h3 .fc-h3-fila[data-estado="sellado"] .fc-h3-fila-e { color: var(--tenue); }
#fc-h3 .fc-h3-fila[data-estado="sellado"] .fc-h3-fila-t,
#fc-h3#fc-h3 .fc-h3-fila[data-estado="sellado"] .fc-h3-fila-t { color: var(--tenue) !important; }
#fc-h3 .fc-h3-sello-svg { flex: 0 0 auto; display: block; }
#fc-h3 .fc-h3-indice-pie {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

/* ===========================================================================
   5 · MÉTODO — la cinta de archivos + el determinismo
   ======================================================================== */
#fc-h3 .fc-h3-cinta {
  border-block: 1px solid var(--filete);
  background: var(--papel2);
  padding-block: 20px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
#fc-h3 .fc-h3-cinta-pista { display: flex; width: max-content; animation: fc-h3-desliza 46s linear infinite; }
#fc-h3 .fc-h3-cinta-grupo { display: flex; align-items: center; flex: 0 0 auto; }
#fc-h3 .fc-h3-cinta-item {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(15px, .3vw + 14px, 18px);
  color: var(--prosa);
  white-space: nowrap;
  padding-inline: clamp(20px, 2.4vw, 38px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.4vw, 38px);
}
#fc-h3 .fc-h3-cinta-item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--oro); opacity: .62; }
@keyframes fc-h3-desliza { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
#fc-h3 .fc-h3-cinta:hover .fc-h3-cinta-pista,
#fc-h3 .fc-h3-cinta:focus-within .fc-h3-cinta-pista { animation-play-state: paused; }

/* El único momento humano. Se apoya sobre la mesa como las demás placas de
   papel: misma familia de sombra, mismo radio. */
#fc-h3 .fc-h3-metodo-foto {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 26px 54px -32px rgba(20, 35, 46, .55);
}
#fc-h3 .fc-h3-metodo-foto img { display: block; width: 100%; height: auto; }

/* Sin riel de acento a la izquierda: el énfasis lo da el mismo filete de oro
   que abre las demás secciones, arriba del título. Un gesto, no dos. */
#fc-h3 .fc-h3-metodo-caja {
  margin-top: clamp(24px, 2.6vw, 34px);
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  padding: clamp(22px, 2.4vw, 32px);
}
#fc-h3 .fc-h3-metodo-caja::before {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--oro);
  margin-bottom: 18px;
}

/* ===========================================================================
   6 · FORMATOS — los objetos
   ======================================================================== */
#fc-h3 .fc-h3-objs { display: grid; gap: clamp(22px, 2.4vw, 32px); margin-top: 48px; }
@media (min-width: 760px)  { #fc-h3 .fc-h3-objs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { #fc-h3 .fc-h3-objs { grid-template-columns: repeat(3, 1fr); } }
#fc-h3 .fc-h3-obj {
  display: flex;
  flex-direction: column;
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform 320ms var(--sal), box-shadow 320ms var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-obj:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(20, 35, 46, .44); }
}
/* Cuadrada: dos de los tres productos son verticales y uno horizontal. En 4:3
   el marco quedaba chico y el anillo enorme, y la fila no leía como un juego.
   La foto ya viene compuesta sobre --papel2, así que no hay costura visible. */
#fc-h3 .fc-h3-obj-fig {
  display: block;
  aspect-ratio: 1 / 1;
  background: var(--papel2);
  border-bottom: 1px solid var(--filete);
  overflow: hidden;
}
#fc-h3 .fc-h3-obj-fig img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 520ms var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-obj:hover .fc-h3-obj-fig img { transform: scale(1.028); }
}
@media (prefers-reduced-motion: reduce) {
  #fc-h3 .fc-h3-obj:hover .fc-h3-obj-fig img { transform: none; }
}
#fc-h3 .fc-h3-obj-link { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-obj-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
#fc-h3 .fc-h3-obj-cuerpo { padding: clamp(20px, 2vw, 28px); display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; }
#fc-h3 .fc-h3-obj-precio {
  margin-top: auto;
  padding-top: 14px;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
}
#fc-h3 .fc-h3-obj-precio small { font-family: Montserrat, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--tenue); display: block; letter-spacing: .02em; }

/* Hueco de imagen pendiente: honesto, no un cuadro gris cualquiera. */
#fc-h3 .fc-h3-hueco {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  gap: 8px;
  background:
    repeating-linear-gradient(-45deg, rgba(201, 168, 76, .07) 0 12px, transparent 12px 24px),
    var(--papel2);
  color: var(--tenue);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 18px;
}

/* ===========================================================================
   7 · EL REGISTRO — suscripción, banda oscura sobre los papeles
   ======================================================================== */
#fc-h3 .fc-h3-registro { padding-block: clamp(72px, 7.4vw, 128px); }
#fc-h3 .fc-h3-registro .fc-h3-fondo { background-image: var(--img-papeles); }
#fc-h3 .fc-h3-registro .fc-h3-velo {
  background:
    linear-gradient(255deg, rgba(10, 25, 34, .8) 0%, rgba(10, 25, 34, .93) 42%, rgba(10, 25, 34, .975) 100%);
}
#fc-h3 .fc-h3-reg-caja {
  border: 1px solid rgba(201, 168, 76, .34);
  border-radius: var(--r);
  padding: clamp(26px, 3vw, 42px);
  background: rgba(10, 25, 34, .5);
}
#fc-h3 .fc-h3-reg-lista { display: grid; gap: 14px; margin: 26px 0 30px; }
#fc-h3 .fc-h3-reg-lista li { list-style: none; display: flex; gap: 13px; align-items: flex-start; }
#fc-h3 .fc-h3-reg-lista svg { flex: 0 0 auto; margin-top: 3px; }
#fc-h3 .fc-h3-reg-precio {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(201, 168, 76, .26);
}
#fc-h3 .fc-h3-reg-precio b {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  font-size: clamp(34px, 2.4vw + 24px, 52px);
  color: var(--oro);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ===========================================================================
   8 · RESEÑAS — construida e inerte hasta que haya reales
   ======================================================================== */
/* (la CSS de reseñas vieja se quitó: su grid de 3 columnas chocaba con el carrusel) */

/* ===========================================================================
   9 · FAQ
   ======================================================================== */
#fc-h3 .fc-h3-faq-lista { border-top: 1px solid var(--filete); margin-top: 40px; }
#fc-h3 .fc-h3-faq-item { border-bottom: 1px solid var(--filete); }
#fc-h3 .fc-h3-faq-b {
  width: 100%;
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(17.5px, .4vw + 16px, 21px);
  line-height: 1.3;
  color: var(--tinta);
}
#fc-h3 .fc-h3-faq-cruz { flex: 0 0 auto; width: 18px; height: 18px; position: relative; }
#fc-h3 .fc-h3-faq-cruz::before,
#fc-h3 .fc-h3-faq-cruz::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--oro-osc);
  transition: transform 260ms var(--sal);
}
#fc-h3 .fc-h3-faq-cruz::after { transform: rotate(90deg); }
#fc-h3 .fc-h3-faq-b[aria-expanded="true"] .fc-h3-faq-cruz::after { transform: rotate(0deg); }
#fc-h3 .fc-h3-faq-r { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--mov); }
#fc-h3 .fc-h3-faq-item[data-abierto="1"] .fc-h3-faq-r { grid-template-rows: 1fr; }
#fc-h3 .fc-h3-faq-r > div { overflow: hidden; }
#fc-h3#fc-h3 .fc-h3-faq-r p { padding: 0 44px 22px 4px; max-width: 66ch; }

/* ===========================================================================
   10 · CIERRE — el escritorio
   ======================================================================== */
#fc-h3 .fc-h3-cierre { padding-block: clamp(84px, 9vw, 150px); text-align: center; }
#fc-h3 .fc-h3-cierre .fc-h3-fondo { background-image: var(--img-escritorio); }
#fc-h3 .fc-h3-cierre .fc-h3-velo {
  background: radial-gradient(78% 92% at 50% 50%, rgba(10, 25, 34, .93) 0%, rgba(10, 25, 34, .84) 54%, rgba(10, 25, 34, .74) 100%);
}
/* --- EL CIERRE: la cifra, el botón y la fila de generaciones -------------
   ⚠️ Ya NO lleva foto de fondo: es navy plano, el mismo de la sección del
   archivo. Por eso el marcado perdió los divs .fc-h3-fondo y .fc-h3-velo.

   ⚠️ Esta sección y la de reseñas miden lo mismo y entran juntas en una
   pantalla. Por eso el relleno de las dos está recortado acá y no en la regla
   general de .fc-h3-sec. Si se agranda el contenido de cualquiera de las dos,
   se rompe el 50/50. */
/* ⚠️ La línea de abajo es la MISMA que separa las dos bandas del footer
   (`1px solid rgb(209,213,219)` en .site-below-footer-wrap del tema), repetida
   acá para que la sección y el footer queden separados por el mismo trazo y no
   por dos distintos. Va atenuada porque la del tema corre sobre un fondo más
   claro; a opacidad plena sobre este navy sería una raya blanca.
   Además es el piso por el que se deslizan los grupos: si se saca, las figuras
   quedan flotando sobre nada. */
#fc-h3 .fc-h3-cierre {
  background: var(--navy);
  border-bottom: 1px solid rgba(209, 213, 219, .22);
}

/* ⚠️ !important en el margen. Una regla del tema con !important sobre los <p>
   de las páginas pisaba el `margin-inline: auto` y la bajada quedaba pegada a
   la izquierda mientras el titular iba centrado. Es la trampa ya documentada
   de esta página: el tema pisa tamaño, color Y márgenes. */
#fc-h3#fc-h3 .fc-h3-cierre .fc-h3-lede {
  margin-inline: auto !important;
  max-width: 46ch;
}

/* La cifra, chica. Grande competía con el titular y gritaba un número que
   además no está respaldado (ver el comentario del marcado). */
#fc-h3#fc-h3 .fc-h3-com-cifra {
  margin: clamp(12px, 1.5vw, 18px) 0 clamp(11px, 1.4vw, 16px);
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  line-height: 1 !important;
}
#fc-h3#fc-h3 .fc-h3-com-cifra b {
  font-size: clamp(19px, 1.3vw, 24px) !important;
  font-weight: 700 !important;
  color: var(--oro) !important;
  font-variant-numeric: tabular-nums;
}
#fc-h3#fc-h3 .fc-h3-com-cifra span {
  font-size: clamp(14px, 1vw, 17px) !important;
  color: var(--papel3) !important;
  opacity: .8;
}

/* Botón en oro: el rojo de la marca es el del buscador y acá gritaba de más
   sobre el navy. */
#fc-h3 .fc-h3-btn--oro { background: var(--oro); color: var(--noche); }
@media (hover: hover) {
  #fc-h3 .fc-h3-btn--oro:hover { background: #DCBC63; }
}

/* La ilustración cierra la página: pegada al borde inferior de la sección.
   ⚠️ Los grupos son FIJOS. Hubo dos versiones animadas (subían desde abajo y
   después entraban desde la izquierda) y el owner las descartó: la sección
   cierra mejor quieta. Si alguna vez se reanima, el <g> que hay que mover es
   `.fc-h3-grupo` y NUNCA el de cada figura — ése lleva su posición en un
   atributo transform y escribirle encima la manda a la esquina. */
#fc-h3 .fc-h3-gente {
  margin: clamp(10px, 1.4vw, 18px) 0 0;
  overflow: clip;
}
#fc-h3 .fc-h3-gente-svg { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  /* El 50/50 que pidió el owner: las dos secciones miden media pantalla y
     entran juntas. El contenido se centra en lo que sobra. */
  #fc-h3 .fc-h3-apolo,
  #fc-h3 .fc-h3-cierre {
    min-height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  #fc-h3 .fc-h3-apolo { padding-block: clamp(10px, 1.2vw, 18px); }
  #fc-h3 .fc-h3-cierre { padding-top: clamp(12px, 1.5vw, 22px); padding-bottom: 0; }
  #fc-h3#fc-h3 .fc-h3-apolo .fc-h3-centro .fc-h3-lede { margin-bottom: 0; }
}

@media (max-width: 699px) {
  /* A 350px de ancho las figuras medirían 6px. Se dibuja más ancho que la
     pantalla y se recorta centrado: se ven menos grupos, pero se ven. */
  #fc-h3 .fc-h3-gente-svg {
    width: 820px;
    max-width: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ===========================================================================
   MOVIMIENTO — cuatro momentos, no una lluvia de efectos
   ======================================================================== */
#fc-h3 [data-rev] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 640ms var(--sal), transform 640ms var(--sal);
  transition-delay: var(--rev-d, 0ms);
}
#fc-h3 [data-rev].fc-h3-visto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Menos y más suave, no cero: se conserva lo que ayuda a comprender. */
  #fc-h3 [data-rev] { transform: none; transition: opacity 300ms ease; }
  #fc-h3 .fc-h3-cinta-pista { animation: none; transform: none; }
  #fc-h3 .fc-h3-obj:hover { transform: none; }
  #fc-h3 .fc-h3-btn:active { transform: none; }
  #fc-h3 .fc-h3-vivo-txt { transform: none; }
}

/* ===========================================================================
   MOBILE — el owner mide en 390px
   ======================================================================== */
@media (max-width: 640px) {
  /* En vertical no hay contenedor: dos píldoras apiladas. Así no aparece un
     cuarto radio sólo para mobile y los dos táctiles crecen a lo ancho. */
  #fc-h3 .fc-h3-campo {
    flex-direction: column;
    gap: 10px;
    background: none;
    border: 0;
    padding: 0;
  }
  #fc-h3 .fc-h3-campo:focus-within { box-shadow: none; }
  #fc-h3#fc-h3 .fc-h3-campo input {
    min-height: 56px;
    padding: 0 22px;
    text-align: center;
    background: var(--papel3);
    border: 1.5px solid var(--filete);
    border-radius: var(--pill);
    transition: border-color 200ms var(--sal), box-shadow 200ms var(--sal);
  }
  #fc-h3#fc-h3 .fc-h3-campo input:focus {
    border-color: var(--oro);
    box-shadow: 0 0 0 4px rgba(201, 168, 76, .16);
  }
  #fc-h3 .fc-h3-campo .fc-h3-btn { width: 100%; min-height: 56px; }
  #fc-h3 .fc-h3-hero-nombre { white-space: normal; }
  /* La marca NO se reposiciona por viewport: sus % son de la imagen, así que
     caen sobre el apellido en cualquier ancho. Solo se afina el trazo, que a
     tamaño chico se empasta sobre el gris del diario. */
  #fc-h3 .fc-h3-marca { border-width: 1.5px; box-shadow: 0 0 0 2px rgba(168, 20, 0, .12); }
  #fc-h3 .fc-h3-fila { grid-template-columns: 1.9em 1fr; row-gap: 3px; }
  #fc-h3 .fc-h3-fila-e { grid-column: 2; }
  #fc-h3 .fc-h3-fila-t::after { display: none; }
  #fc-h3 .fc-h3-fila-t span { background: none; padding-right: 0; }
  #fc-h3#fc-h3 .fc-h3-faq-r p { padding-right: 8px; }
}

/* ===========================================================================
   CAPACIDADES Y PASOS — el esqueleto de main page
   ---------------------------------------------------------------------------
   Cuatro tarjetas de capacidad (la forma de "What you get with a membership"
   de Ancestry) y cuatro pasos numerados (su "How to get started"). Ni acá ni
   en ningún otro lado de esta página hay precio, nombre de pack ni botón de
   compra: eso vive en las secciones de producto, que son otras URLs.
   ======================================================================== */
@media (min-width: 720px)  { #fc-h3 .fc-h3-caps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { #fc-h3 .fc-h3-caps { grid-template-columns: repeat(4, 1fr); } }

/* contain, no cover: la foto es cuadrada y la ficha 16:10, así que cover le
   comía el marco y la medalla. El fondo de la foto YA es --papel2, así que
   las bandas laterales son invisibles. */
#fc-h3 .fc-h3-cap-fig img { display: block; width: 100%; height: 100%; object-fit: contain; }
#fc-h3#fc-h3 .fc-h3-cap-lista { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; }
#fc-h3#fc-h3 .fc-h3-cap-lista li {
  list-style: none;
  position: relative;
  padding-left: 17px;
  font-size: var(--f-cap) !important;
  line-height: 1.5 !important;
  color: var(--prosa) !important;
}
#fc-h3 .fc-h3-cap-lista li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--oro);
}
#fc-h3 .fc-h3-cap-mas { align-self: flex-start; margin-top: auto; padding-top: 16px; border-bottom: 0; }
#fc-h3 .fc-h3-cap-mas::after { content: " \2192"; }

/* Los pasos. El numeral va en oro y grande, del tamaño de un folio: la página
   ya usa numerales romanos en las cláusulas, acá van arábigos porque esto SÍ
   es una secuencia y el orden importa. */
#fc-h3 .fc-h3-pasos {
  display: grid;
  gap: clamp(28px, 3vw, 44px);
  margin: clamp(36px, 4vw, 56px) 0 0;
  padding: 0;
  counter-reset: none;
}
@media (min-width: 700px)  { #fc-h3 .fc-h3-pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { #fc-h3 .fc-h3-pasos { grid-template-columns: repeat(4, 1fr); } }
/* La tarjeta. Radio var(--r) = 3px, el de toda la página: el redondeo grande de
   las tarjetas de referencia es de producto de software y acá desentona con el
   registro de lámina de archivo.
   El margen superior deja lugar al disco del numeral, que monta sobre el borde. */
#fc-h3 .fc-h3-paso {
  list-style: none;
  position: relative;
  margin-top: 26px;
  padding: 42px 22px 0;
  background: #FFFFFF;   /* ver el comentario del marcado: neutro, no papel */
  border: 1px solid var(--filete2);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
}

/* El disco del numeral, montado sobre el borde de arriba. */
#fc-h3 .fc-h3-paso-n {
  position: absolute;
  top: -25px;
  left: 22px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--oro);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  /* separa el disco del borde de la tarjeta sin dibujar un anillo: sobre el
     gris de la sección un stroke se vería sucio */
  box-shadow: 0 0 0 5px #FFFFFF;
}

#fc-h3#fc-h3 .fc-h3-paso h3 { margin-bottom: 8px; }
#fc-h3#fc-h3 .fc-h3-paso p { font-size: var(--f-cap) !important; line-height: 1.55 !important; }

/* El dibujo. `margin-top: auto` lo empuja al pie: así los cuatro quedan
   alineados entre sí aunque los textos midan distinto, que es lo que hace que
   la fila se lea como una serie. */
#fc-h3 .fc-h3-paso-fig {
  display: block;
  margin-top: auto;      /* al pie de la tarjeta */
  margin-inline: -22px;  /* recupera el padding lateral: el dibujo va más ancho */
  padding: 22px 14px 14px;
}
#fc-h3 .fc-h3-paso-fig svg { display: block; width: 100%; height: auto; }

/* --- EL CARRUSEL DE PASOS (sólo teléfono) --------------------------------
   En escritorio los cuatro se ven a la vez y esto entero no existe. En el
   teléfono, cuatro tarjetas con dibujo obligan a scrollear media pantalla por
   paso y el visitante se cansa antes del 3.

   ⚠️ ES UN RIEL QUE SE DESPLAZA, no un fundido. La primera versión apilaba las
   cuatro en la misma celda y cambiaba opacidad: al deslizar no se veía moverse
   nada, aparecía la siguiente y listo. Ahora las cuatro van en fila y lo que se
   mueve es la fila entera con translateX, que es lo que el dedo espera.

   ⚠️ El recorte va en el ENVOLTORIO y con `clip`, no en el riel y no con
   `hidden`. Dos motivos: el que translada tiene que ser el riel y el que
   recorta su padre; y `hidden` crea contenedor de scroll (ya congeló una
   animación de esta misma página). Además `overflow-x: clip` con
   `overflow-y: visible` es la única combinación que deja al disco del numeral
   asomar por arriba de la tarjeta sin que se lo corte.

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

@media (max-width: 699px) {
  /* el envoltorio recorta; el riel se mueve */
  #fc-h3 [data-fc-h3-pasos] { overflow-x: clip; overflow-y: visible; }
  #fc-h3 .fc-h3-pasos[data-carr] {
    display: flex;
    grid-template-columns: none;
    gap: 0;
    will-change: transform;
    transition: transform 420ms var(--sal);
    /* deja pasar el scroll vertical y nos 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 tiene que ir pegado al
     dedo, no persiguiéndolo */
  #fc-h3 .fc-h3-pasos[data-carr][data-arrastrando] { transition: none; }
  #fc-h3 .fc-h3-pasos[data-carr] .fc-h3-paso {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  #fc-h3 .fc-h3-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 dibujaba un rectángulo gris claro detrás de cada uno — se veía
   como cuatro casillas y no como cuatro puntos. El fondo sí lo ganábamos por
   especificidad; la sombra y el radio no los estábamos declarando, así que
   pasaban derecho. */
#fc-h3 .fc-h3-pasos-b,
#fc-h3 .fc-h3-pasos-seg {
  -webkit-appearance: none;
  appearance: none;
  box-shadow: none;
  font: inherit;
  line-height: 1;
}

#fc-h3 .fc-h3-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-h3 .fc-h3-pasos-b:active { transform: scale(.93); }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-pasos-b:hover { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
}
#fc-h3 .fc-h3-pasos-b:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 3px; }

/* Los puntos, centrados entre las dos flechas. */
#fc-h3 .fc-h3-pasos-riel { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }
#fc-h3 .fc-h3-pasos-seg {
  /* El botón es grande para que el dedo acierte (46px); el punto que se ve es
     el span. Sin esto el blanco de toque quedaría de 9px. */
  width: 26px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;   /* Astra pone 4px en todo button; acá dibujaba una casilla */
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#fc-h3 .fc-h3-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-h3 .fc-h3-pasos-seg[aria-selected="true"] span { background: var(--oro-osc); transform: scale(1.3); }
#fc-h3 .fc-h3-pasos-seg:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: -6px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  /* Se acorta, no se apaga: sin el punto que se agranda el mando deja de avisar
     dónde está parado. */
  #fc-h3 .fc-h3-pasos-seg span { transition-duration: 140ms; }
  /* El riel sigue desplazándose — es lo que el owner pidió ver — sólo que más
     corto. Apagarlo devolvería el salto seco que había que arreglar. */
  #fc-h3 .fc-h3-pasos[data-carr] { transition-duration: 240ms; }
}

/* ===========================================================================
   LAS RESEÑAS — el carrusel de la main page vieja, dentro de la home v3
   ---------------------------------------------------------------------------
   El marcado usa las MISMAS clases que el bloque de la home vieja y las fichas
   de producto (.testimonial-section-apolo, .carousel, .testimonial-card, .dot),
   así que lo estiliza el style.css del tema, que carga en todas las páginas.
   Acá va SÓLO lo que hay que ajustar para que entre en esta página. Nada de
   re-estilar el carrusel: si se toca de más, esta página y las otras dos dejan
   de verse iguales, que era el punto de reusarlo.
   ======================================================================== */

/* El bloque original trae el fondo en degradé blanco→gris por estilo inline;
   nuestro marcado no lo emite. Esto sólo asegura que se vea el gris de la
   sección si el tema alguna vez le pone uno. */
#fc-h3 .fc-h3-apolo .testimonial-section-apolo {
  background: transparent;
  padding: clamp(20px, 2.4vw, 34px) 0 0;
}
#fc-h3 .fc-h3-apolo .testimonial-section-apolo .container { max-width: none; }

/* El disco de la inicial. El renderer lo trae en azul (#3b82f6) por estilo
   inline, que no es un color de la marca. Va crema con la inicial en oro
   oscuro, igual que el resto de la página.
   ⚠️ Se usa el disco y NO la foto a propósito: los avatares del bloque original
   son de stock y no coinciden con los nombres (Margaret V. usaba
   john-stark.jpg) y uno apuntaba a un banco de imágenes. Por eso el renderer
   recibe 'image' vacío. */
#fc-h3 .fc-h3-apolo .placeholder-avatar {
  background-color: var(--papel2) !important;
  color: var(--oro-osc) !important;
  border-color: #FFFFFF;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ===========================================================================
   EL ARCHIVO — carrusel de láminas reales
   ---------------------------------------------------------------------------
   Mecánica tomada de Ancestry (láminas + flechas + puntos, sin autoplay: el
   usuario manda el ritmo). Lo que cambia es el contenido: cada lámina es una
   página real con su cita y su enlace al archivo, no una foto de stock.
   Se anima sólo transform y opacity; las flechas y los puntos son táctiles
   de 44px reales aunque el punto visible mida 9.
   ======================================================================== */
#fc-h3 .fc-h3-arch-cab { max-width: 46ch; margin-bottom: clamp(34px, 3.6vw, 52px); }
#fc-h3#fc-h3 .fc-h3-arch-cab .fc-h3-lede { margin-top: 16px; }

#fc-h3 .fc-h3-carr { position: relative; }
#fc-h3 .fc-h3-carr-pista { display: grid; }
/* La lámina es un bloque simple. Antes era una grilla de 2 columnas porque
   contenía la cita adentro; ahora la cita vive afuera y esa grilla le comía
   un tercio del ancho a la imagen (404px en una columna de 691). */
#fc-h3 .fc-h3-lamina { margin: 0; display: block; }

#fc-h3 .fc-h3-lamina-papel {
  background: #EDE7DA;
  border-radius: var(--r);
  padding: 12px;
  box-shadow: 0 30px 64px -30px rgba(0, 0, 0, .74), 0 3px 10px -4px rgba(0, 0, 0, .34);
}
#fc-h3 .fc-h3-lamina-papel img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: cover;
  object-position: top;
  filter: contrast(1.05) saturate(.92);
}
/* Doble id + !important: es un <p> y el tema lo aplasta a 15px y le pisa el
   color. Es la misma trampa que ya me comí dos veces en esta página. */
/* .fc-h3-oscuro p suma un selector de TIPO y gana por especificidad, así que
   acá hace falta clase+clase+tipo para superarlo. */
#fc-h3#fc-h3 .fc-h3-oscuro p.fc-h3-lamina-nombre {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(30px, 2vw + 22px, 44px) !important;
  line-height: 1 !important;
  color: var(--oro) !important;
  margin-bottom: 14px;
}
#fc-h3#fc-h3 .fc-h3-oscuro p.fc-h3-lamina-tit {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(18px, .5vw + 16px, 22px) !important;
  line-height: 1.34 !important;
  color: var(--papel3) !important;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 168, 76, .3);
}

#fc-h3 .fc-h3-carr-mando {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: clamp(24px, 2.6vw, 36px);
}
#fc-h3 .fc-h3-carr-b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244, 239, 230, .3);
  border-radius: 50%;
  background: none;
  color: var(--papel3);
  cursor: pointer;
  transition: background-color 200ms var(--sal), border-color 200ms var(--sal), transform 140ms var(--sal);
}
#fc-h3 .fc-h3-carr-b:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-carr-b:hover { background: rgba(244, 239, 230, .12); border-color: rgba(244, 239, 230, .55); }
}
#fc-h3 .fc-h3-carr-puntos { display: flex; align-items: center; }
#fc-h3 .fc-h3-carr-p {
  width: 34px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  cursor: pointer;
}
#fc-h3 .fc-h3-carr-p span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(244, 239, 230, .32);
  transition: background-color 260ms var(--sal), transform 260ms var(--sal);
}
#fc-h3 .fc-h3-carr-p[aria-selected="true"] span { background: var(--oro); transform: scale(1.25); }

@media (prefers-reduced-motion: reduce) {
  #fc-h3 .fc-h3-lamina { transition: opacity 220ms ease, visibility 0s linear 220ms; transform: none; }
  #fc-h3 .fc-h3-lamina[data-activa] { transform: none; }
  #fc-h3 .fc-h3-carr-b:active { transform: none; }
}

/* ===========================================================================
   SECCIONES NUEVAS — formatos, fuentes, cifras, familia, reseñas
   ---------------------------------------------------------------------------
   Ritmo de fondos tomado de la mecánica de MyHeritage: nunca se repite un
   fondo adyacente. Ninguna de estas secciones lleva precio ni nombre de pack.
   ======================================================================== */
#fc-h3 .fc-h3-centro { max-width: 46ch; margin-inline: auto; text-align: center; }
#fc-h3 .fc-h3-centro .fc-h3-eye { justify-content: center; }
#fc-h3 .fc-h3-centro .fc-h3-eye::after { display: none; }

/* -- qué recibís ------------------------------------------------------- */
#fc-h3 .fc-h3-foto-placa {
  margin: 0;
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 28px 58px -34px rgba(20, 35, 46, .5);
}
#fc-h3 .fc-h3-foto-placa img { display: block; width: 100%; height: auto; }
#fc-h3#fc-h3 .fc-h3-formatos { display: grid; gap: 20px; margin: 30px 0 0; padding: 0; }
#fc-h3#fc-h3 .fc-h3-formatos li {
  list-style: none;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 15px;
  align-items: start;
}
#fc-h3 .fc-h3-formato-ico { color: var(--oro-osc); display: block; margin-top: 2px; }
#fc-h3#fc-h3 .fc-h3-formatos strong {
  display: block;
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(18px, .4vw + 16.6px, 21px);
  font-weight: 400;
  color: var(--tinta);
  margin-bottom: 3px;
}
#fc-h3#fc-h3 .fc-h3-formatos .fc-h3-cap { display: block; }

/* -- las cifras del acervo (nunca de usuarios) ------------------------- */
#fc-h3 .fc-h3-cifras {
  display: grid;
  gap: clamp(28px, 3.4vw, 56px);
  margin: 0;
  padding: 0;
  text-align: center;
}
@media (min-width: 720px) { #fc-h3 .fc-h3-cifras { grid-template-columns: repeat(3, 1fr); } }
#fc-h3#fc-h3 .fc-h3-cifras li { list-style: none; display: flex; flex-direction: column; gap: 6px; }
/* tabular-nums: mientras cuenta, los dígitos cambian y con anchos distintos
   el número tiembla de izquierda a derecha. */
#fc-h3 .fc-h3-cifras b {
  font-variant-numeric: tabular-nums;
  font-size: clamp(36px, 3.2vw + 22px, 62px);
  line-height: 1;
  color: var(--tinta);
}
#fc-h3#fc-h3 .fc-h3-cifras li > span:nth-of-type(1) {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: clamp(17px, .4vw + 15.6px, 20px);
  color: var(--prosa);
}

/* -- la familia (banda oscura sobre la textura de papeles) ------------- */
#fc-h3 .fc-h3-familia { padding-block: clamp(76px, 8vw, 132px); }
#fc-h3 .fc-h3-familia .fc-h3-fondo { background-image: var(--img-familia); }
#fc-h3 .fc-h3-familia .fc-h3-velo {
  background: radial-gradient(80% 96% at 50% 50%, rgba(10, 25, 34, .93) 0%, rgba(10, 25, 34, .88) 56%, rgba(10, 25, 34, .8) 100%);
}
#fc-h3 .fc-h3-familia .fc-h3-centro { max-width: 54ch; }

/* -- reseñas ----------------------------------------------------------- */
#fc-h3 .fc-h3-resenas { position: relative; margin-top: clamp(34px, 3.6vw, 52px); }
#fc-h3 .fc-h3-res-pista { display: grid; }
#fc-h3 .fc-h3-resena {
  grid-area: 1 / 1;
  margin: 0;
  max-width: 62ch;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0);
  transition: opacity 440ms var(--sal), transform 440ms var(--sal), visibility 0s linear 440ms;
}
#fc-h3 .fc-h3-resena[data-activa] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 440ms var(--sal), transform 440ms var(--sal), visibility 0s;
}
/* Inicial tipografiada en vez de foto: los avatares del original eran de
   stock y no coincidían con los nombres. */
#fc-h3 .fc-h3-res-ini {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--papel2);
  border: 1px solid var(--filete);
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 25px;
  color: var(--oro-osc);
}
#fc-h3 .fc-h3-res-est { display: flex; gap: 3px; font-size: 15px; line-height: 1; }
#fc-h3 .fc-h3-res-est i { color: var(--filete); font-style: normal; }
/* --oro sobre crema da 2,21 (falla). --oro-osc pasa AA y sigue leyendo dorado. */
#fc-h3 .fc-h3-res-est i[data-on] { color: var(--oro-osc); }
#fc-h3#fc-h3 .fc-h3-resena blockquote {
  font-family: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif !important;
  font-size: clamp(19px, .9vw + 16px, 27px) !important;
  line-height: 1.38 !important;
  color: var(--tinta) !important;
  margin: 0;
  border: 0;
  padding: 0;
  text-wrap: balance;
}
#fc-h3 .fc-h3-resenas .fc-h3-carr-mando { justify-content: center; margin-top: clamp(26px, 2.8vw, 40px); }
#fc-h3 .fc-h3-sec--blanco .fc-h3-carr-b { border-color: var(--filete); color: var(--tinta); }
#fc-h3 .fc-h3-sec--blanco .fc-h3-carr-p span { background: var(--filete); }
#fc-h3 .fc-h3-sec--blanco .fc-h3-carr-p[aria-selected="true"] span { background: var(--oro-osc); }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-sec--blanco .fc-h3-carr-b:hover { background: rgba(20, 35, 46, .05); border-color: var(--tinta); }
}
@media (prefers-reduced-motion: reduce) {
  #fc-h3 .fc-h3-resena { transition: opacity 220ms ease, visibility 0s linear 220ms; transform: none; }
  #fc-h3 .fc-h3-resena[data-activa] { transform: none; }
}


/* [12] A 390px la fila de controles medía 400px y las flechas se cortaban.
   [16] El foco visible se declaraba dentro de #fc-h3, así que el logo y el
        carrito del tema quedaban sin indicador: se saca a nivel de página. */
@media (max-width: 420px) {
  #fc-h3 .fc-h3-carr-b { width: 44px; height: 44px; }
  #fc-h3 .fc-h3-carr-p { width: 26px; }
  #fc-h3 .fc-h3-carr-mando { gap: 2px; }
}
body.fc-h3-page :focus-visible {
  outline: 2px solid #1E6F8C;
  outline-offset: 3px;
  border-radius: var(--r, 3px);
}

/* ===========================================================================
   HERO — la versión que eligió el owner
   ---------------------------------------------------------------------------
   El titular contrasta PESO, no tamaño. Es la única ruptura de peso de la
   página: MyHeritage hace lo mismo (bold una sola vez en toda su home) y por
   eso funciona — si todo grita, nada grita.
   ======================================================================== */
#fc-h3#fc-h3 .fc-h3-hero h1 { font-weight: 300 !important; letter-spacing: -.018em !important; }
#fc-h3#fc-h3 .fc-h3-hero h1 strong { font-weight: 700 !important; }
#fc-h3#fc-h3 .fc-h3-hero .fc-h3-lede { max-width: 30ch; }

/* Campo y botón apilados: el botón entero es táctil y el campo respira.
   La píldora con el botón adentro apretaba los dos a la vez. */
#fc-h3 .fc-h3-campo--apilado {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  background: none;
  border: 0;
  padding: 0;
  max-width: 440px;
}
#fc-h3 .fc-h3-campo--apilado:focus-within { box-shadow: none; }
#fc-h3#fc-h3 .fc-h3-campo--apilado input {
  min-height: 60px;
  padding: 0 26px;
  text-align: left;
  background: var(--papel3);
  border: 1.5px solid var(--filete);
  border-radius: var(--pill);
  transition: border-color 200ms var(--sal), box-shadow 200ms var(--sal);
}
#fc-h3#fc-h3 .fc-h3-campo--apilado input:focus {
  border-color: var(--oro);
  box-shadow: 0 0 0 4px rgba(201, 168, 76, .16);
}
/* Botón navy, no lacre: en el hero compite con la foto y el navy la ancla.
   El lacre sigue reservado para los CTA de más abajo. */
#fc-h3 .fc-h3-campo--apilado .fc-h3-btn {
  align-self: flex-start;
  min-height: 60px;
  padding: 17px 38px;
  background: var(--navy);
}
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-campo--apilado .fc-h3-btn:hover { background: var(--noche); }
}
@media (max-width: 640px) {
  #fc-h3 .fc-h3-campo--apilado .fc-h3-btn { align-self: stretch; }
  #fc-h3#fc-h3 .fc-h3-campo--apilado input { text-align: left; }
}

/* ===========================================================================
   PEGAR EL HERO AL HEADER
   ---------------------------------------------------------------------------
   Medido en vivo: el hueco eran 36px de padding-top en div.entry-content, el
   envoltorio de Astra. La foto del hero tiene que arrancar donde termina el
   header, sin franja blanca en el medio.
   Va acotado a body.fc-h3-page para no tocar ninguna otra página del sitio.
   ======================================================================== */
body.fc-h3-page .entry-content,
body.fc-h3-page .site-content > .ast-container,
body.fc-h3-page #primary {
  padding-top: 0 !important;
  margin-top: 0 !important;
}
/* Y lo mismo abajo: el cierre también va a sangre contra el footer. */
body.fc-h3-page .entry-content,
body.fc-h3-page #primary { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* Con el velo al 78% la foto asoma más y --tenue quedó en 4,27 sobre ella.
   --prosa da 5,88 en el mismo punto y sigue leyéndose como nota secundaria. */

/* ===========================================================================
   EL ARCHIVO — la lámina se posa sobre la mesa
   ---------------------------------------------------------------------------
   Animación ATADA AL SCROLL con animation-timeline: view(). No es un reveal
   que se dispara una vez: la posición del scroll ES el tiempo de la animación,
   así que bajando se acomoda y subiendo vuelve sola. Y corre fuera del hilo
   principal, así que no traba el scroll ni en un teléfono viejo.

   El gesto: la lámina entra levemente girada, más grande y desplazada, como un
   papel que alguien todavía tiene en la mano, y termina apoyada y derecha. El
   texto sube detrás, un poco después, como quien lee después de mirar.
   ======================================================================== */


/* Con una sola lámina no hay carrusel: se muestra siempre y no depende del JS. */
#fc-h3 .fc-h3-lamina {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}


/* ===========================================================================
   LA PILA DE DIARIOS
   ---------------------------------------------------------------------------
   Tres páginas reales entran desordenadas, como quien deja unos papeles sobre
   la mesa, y a medida que la sección se centra se acomodan: la de Clark queda
   al frente y derecha, las otras dos se deslizan hacia abajo y detrás.
   El progreso lo maneja el JS contra la posición de scroll, así que es
   reversible: subiendo, la pila se vuelve a desordenar.
   ======================================================================== */
#fc-h3 .fc-h3-pila { position: relative; }
#fc-h3 .fc-h3-pila .fc-h3-lamina {
  margin: 0;
  will-change: transform;
  transform-origin: 50% 40%;
}
/* Las dos de atrás se salen del flujo: la de Clark es la que da el alto. */
#fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="1"],
#fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="2"] {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="0"] { position: relative; z-index: 2; }
#fc-h3 .fc-h3-lamina-pie { will-change: transform; }

/* ⚠️ Acá NO va una guarda de prefers-reduced-motion con transform:none.
   La tenia, y con !important le ganaba al transform en linea del JS: en la PC
   del owner (que pide menos animacion) la seccion quedaba congelada. Ahora el
   JS atenua al 60% en vez de apagar, asi que el CSS no debe pisarlo. */


/* La pila y su pie, lado a lado. El pie se alinea arriba, no al centro:
   con la pila cambiando de alto durante la animación, centrarlo lo hacía
   saltar. */
#fc-h3 .fc-h3-arch-cuerpo { align-items: start; }
#fc-h3 .fc-h3-lamina-pie { padding-top: clamp(8px, 2vw, 34px); }
@media (max-width: 899px) {
  #fc-h3 .fc-h3-lamina-pie { padding-top: 0; }
}

/* Las láminas de atrás bajan hasta y+68, así que la pila necesita ese aire
   abajo o el overflow:clip de la sección se las come. */
#fc-h3 .fc-h3-pila { padding-bottom: 86px; }
@media (max-width: 899px) { #fc-h3 .fc-h3-pila { padding-bottom: 70px; } }

/* ===========================================================================
   ESCRITORIO: una sola lámina
   ---------------------------------------------------------------------------
   Decisión del owner: en desktop se ve SOLO la de Clark, y a tamaño completo.
   Las otras dos existen únicamente para la pila de mobile, así que acá se
   sacan del render (display:none, no opacity: no deben ocupar lugar ni que el
   lector de pantalla las recorra) y la pila recupera el ancho entero.
   ======================================================================== */
@media (min-width: 900px) {
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="1"],
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="2"] { display: none; }
  #fc-h3 .fc-h3-pila { padding-bottom: 0; }
  /* sin la pila detrás, la de Clark se lleva la columna completa.
     ⚠️ Nada de transform:none acá: es la propiedad que anima la entrada desde
     la izquierda, y con !important le ganaba al valor en linea del JS. */
}

/* ===========================================================================
   SECCIÓN 3 — composición en capas sobre BLANCO
   ---------------------------------------------------------------------------
   Mecánica de la sección de ADN de MyHeritage: fondo plano y claro, titular y
   bajada centrados, un CTA, y debajo un gráfico de capas con una tarjeta de
   interfaz flotando sobre un mapa.
   Fondo BLANCO PURO por decisión del owner: el crema quedaba pesado acá.
   ======================================================================== */
#fc-h3 .fc-h3-sec--blanca { background: #FFFFFF; }
#fc-h3#fc-h3 .fc-h3-sec--blanca .fc-h3-centro .fc-h3-lede { margin: 18px auto 30px; max-width: 58ch; }
#fc-h3 .fc-h3-sec--blanca .fc-h3-centro { max-width: 62ch; }

/* El CTA de esta sección va en un tono propio, como el morado que ellos usan
   solo para la línea de ADN: marca que lleva a otra parte del sitio y no a la
   acción principal, que sigue siendo el buscador. */
#fc-h3 .fc-h3-btn--morado { background: var(--navy); }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-btn--morado:hover { background: var(--noche); }
}

/* flow-root: sin esto el margin-top de la tarjeta COLAPSA hacia afuera y
   arrastra al contenedor entero, con lo cual el badge (que se posiciona
   contra el contenedor) baja igual y nunca se separa de la tarjeta. */
#fc-h3 .fc-h3-comp {
  display: flow-root;
  position: relative;
  margin-top: 0;
  min-height: 420px;
}
#fc-h3 .fc-h3-comp-mapa {
  position: absolute;
  right: -4%;
  bottom: 28px;
  width: min(64%, 620px);
  z-index: 0;
  pointer-events: none;
}
#fc-h3 .fc-h3-comp-mapa svg { display: block; width: 100%; height: auto; }

/* La tarjeta: sombra amplia y difusa, el único lugar de la página donde algo
   flota de verdad. */
/* LA FICHA DEL APELLIDO
   ---------------------------------------------------------------------------
   El owner la queria "mas linda", manteniendo lo minimalista y los puntos de
   color. Lo que hace que la tarjeta de la referencia se lea mejor, y que se
   adopta aca, son cuatro cosas concretas:

    1. Sin borde. El filete de 1 px la volvia una caja; ahora la separa del
       fondo una sombra difusa en tres capas (contacto, cuerpo y ambiente).
    2. Esquinas generosas. 3 px la hacian rigida; 16 px la hacen un objeto.
    3. Sin lineas entre filas. El aire separa mejor que un filete, y era lo que
       mas ensuciaba: seis divisorias en una tarjeta de cinco items.
    4. La fuente pasa a una COLUMNA A LA DERECHA. Es el cambio que mas hace:
       una lista con la fuente colgando abajo se lee como enumeracion; con la
       fuente alineada a la derecha se lee como cuadro de datos, que es lo que
       la referencia consigue con sus porcentajes.

   ⚠️ Lo que NO se copia: ellos ponen un numero a la derecha (50%, 20%…) y sus
   porcentajes son una maqueta que suma 100 exacto. Nosotros no tenemos un
   numero real por fila — solo el puesto del censo, y solo para una — asi que
   la columna derecha lleva la FUENTE, que es verificable. Inventar cifras en
   una marca que vende rigor documental es justo lo que no podemos hacer. */
#fc-h3 .fc-h3-comp-ficha {
  position: relative;
  z-index: 2;
  /* Al pasar la fuente a la derecha, cada fila dejo de tener dos renglones y la
     tarjeta perdio la mitad del alto: al lado del abanico quedaba chica. Se le
     devuelve cuerpo con ancho, aire entre filas y respiro interior, no metiendo
     contenido de relleno. */
  width: min(100%, 460px);
  margin: 112px 0 0 26px;
  background: #FFFFFF;
  border: 0;
  border-radius: 16px;
  padding: clamp(22px, 2.1vw, 30px) clamp(22px, 2vw, 28px) clamp(20px, 1.9vw, 26px);
  box-shadow:
    0 1px 2px rgba(20, 35, 46, .05),
    0 10px 24px -10px rgba(20, 35, 46, .12),
    0 34px 64px -28px rgba(20, 35, 46, .2);
}

/* El apellido. Sin filete debajo: separaba como encabezado de tabla y lo que
   se busca es que se lea como el titulo de una pieza. */
#fc-h3#fc-h3 .fc-h3-comp-ape {
  font-size: clamp(26px, 1.5vw + 20px, 34px) !important;
  font-weight: 300 !important;
  letter-spacing: -.025em;
  color: var(--tinta) !important;
  padding-bottom: 0;
  margin-bottom: clamp(18px, 1.7vw, 24px);
  border-bottom: 0;
}

#fc-h3#fc-h3 .fc-h3-comp-ficha ul { margin: 0; padding: 0; }

/* Tres columnas: punto · capitulo · fuente. La del medio con minmax(0,1fr)
   para que pueda encogerse; sin eso, un titulo largo empuja la fuente afuera. */
#fc-h3#fc-h3 .fc-h3-comp-ficha li {
  list-style: none;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: start;
  padding: 0;
  border-bottom: 0;
}
#fc-h3#fc-h3 .fc-h3-comp-ficha li + li { margin-top: clamp(19px, 1.8vw, 26px); }

#fc-h3 .fc-h3-comp-pt { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; }
#fc-h3 .fc-h3-comp-pt[data-c="a"] { background: #8FBF5A; }
#fc-h3 .fc-h3-comp-pt[data-c="b"] { background: #4FC3D2; }
#fc-h3 .fc-h3-comp-pt[data-c="c"] { background: #E8B44A; }
#fc-h3 .fc-h3-comp-pt[data-c="d"] { background: #E8836F; }
#fc-h3 .fc-h3-comp-pt[data-c="e"] { background: #A9B2C4; }

#fc-h3#fc-h3 .fc-h3-comp-t {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: var(--tinta) !important;
  line-height: 1.35 !important;
}
/* La fuente, a la derecha. Alineada al mismo renglon que el capitulo: si cae
   mas abajo se lee como nota al pie y se pierde el efecto de cuadro. */
#fc-h3#fc-h3 .fc-h3-comp-f {
  grid-column: 3;
  justify-self: end;
  text-align: right;
  /* 12.5 y no 11.5: el comprador es 55+ y el dato de la fuente es justo lo que
     sostiene la credibilidad de la seccion. No es letra chica de contrato. */
  font-size: 12.5px !important;
  font-weight: 400 !important;
  letter-spacing: .01em;
  color: var(--tenue) !important;
  line-height: 1.35 !important;
  margin-top: 3px;
  white-space: nowrap;
}

/* En pantallas angostas no entran las dos columnas: la fuente vuelve abajo del
   capitulo, que es donde estaba antes y ahi si funciona. */
@media (max-width: 460px) {
  #fc-h3#fc-h3 .fc-h3-comp-ficha li { grid-template-columns: 9px minmax(0, 1fr); }
  #fc-h3#fc-h3 .fc-h3-comp-f {
    grid-column: 2;
    justify-self: start;
    text-align: left;
    margin-top: 2px;
    white-space: normal;
  }
}

/* El badge, montado sobre la esquina de la tarjeta, como en la referencia. */
#fc-h3 .fc-h3-comp-badge {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 34px -12px rgba(20, 35, 46, .2);
  display: grid;
  place-content: center;
  text-align: center;
  gap: 2px;
}
#fc-h3 .fc-h3-comp-badge b { font-size: 22px; color: var(--oro-osc); line-height: 1; }
#fc-h3 .fc-h3-comp-badge span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-osc);
  line-height: 1.35;
}

@media (max-width: 899px) {
  #fc-h3 .fc-h3-comp { min-height: 0; display: flex; flex-direction: column; }
  #fc-h3 .fc-h3-comp-mapa { position: relative; right: auto; width: 100%; order: 1; margin-top: -30px; }
  /* Orden en el teléfono: abanico → ficha → globo.
     El globo estaba arriba de todo, suelto abajo del botón, y no se relacionaba
     con nada. Ahora cae en diagonal desde la esquina inferior izquierda de la
     ficha, que es como lo resuelve la referencia: el número se apoya en la
     tarjeta en vez de flotar. El margen negativo es el que lo mete bajo la
     esquina; alineado a la izquierda y no centrado, para que sea diagonal. */
  #fc-h3 .fc-h3-abanico { order: 1; }
  #fc-h3 .fc-h3-comp-ficha { order: 2; margin: -70px auto 0; }
  #fc-h3 .fc-h3-comp-badge {
    position: relative;
    order: 3;
    align-self: flex-start;
    /* Solo -14: con -34 el globo se comía la última línea de la ficha
       ("Passenger lists"). El solape tiene que caber en el padding inferior de
       la tarjeta, que en el teléfono es ~20 px. */
    margin: -14px 0 0 8px;
    width: 112px;
    height: 112px;
    z-index: 3;              /* por encima de la ficha, que lleva z-index 2 */
  }
}


/* ===========================================================================
   EL ABANICO DE DOCUMENTOS
   ---------------------------------------------------------------------------
   Diez documentos reales del archivo publico que se abren con el scroll, sobre
   una aguada de acuarela.

   Reemplaza al mapa de manchas y a la version de tres fotos con garabatos. El
   mapa era decoracion disfrazada de dato (el globo de MyHeritage es literal
   porque su producto habla de regiones; el nuestro no) y los garabatos los
   saco el owner.

   GEOMETRIA — el primer intento giraba cada pieza sobre un pivote por debajo,
   y salia un abanico de cartas: radial, simetrico, de casino. La referencia es
   otra cosa: documentos APOYADOS, casi derechos, corridos en horizontal, con
   los de los extremos apenas mas abajo. Asi que el movimiento principal es el
   desplazamiento lateral y el giro es minimo (±8° en las puntas).

   Las unidades son porcentaje del ANCHO DE LA PIEZA, no del contenedor: es lo
   unico que mantiene la separacion proporcional cuando el abanico se achica en
   mobile, sin recalcular nada.
   ======================================================================== */
/* El clip va en la SECCION, no en el body: overflow-x:clip puesto en body no
   se propaga al viewport de forma confiable y el abanico dejaba scroll lateral
   en 390 px. clip y no hidden — hidden crea un contenedor de scroll y eso ya
   congelo una animacion antes. */
#fc-h3 .fc-h3-sec--blanca { overflow-x: clip; }

#fc-h3 .fc-h3-abanico {
  /* La apertura vive en el CSS y el JS la lee de aca. Asi el estado abierto se
     define UNA vez y mobile puede achicarlo sin tocar el JS ni desincronizarse. */
  --sep: 40;    /* separacion por paso, en % del ancho de la pieza */
  --arc: 0.62;  /* caida de las puntas, en % del alto, por k² */
  --ang: 1.75;  /* giro por paso, en grados */
  position: absolute;
  right: -3%;
  bottom: 4%;
  width: min(62%, 640px);
  aspect-ratio: 74 / 46;
  z-index: 1;
  pointer-events: none;
}

/* La aguada. Detras de todo y desbordando la caja: si queda del tamano del
   mazo, las piezas la tapan entera y no se lee la pintura. */
#fc-h3 .fc-h3-aguada {
  position: absolute;
  /* mas ancha que el mazo a proposito: si mide lo mismo, las piezas la tapan
     entera y la pintura solo asoma arriba, como una franja suelta. */
  left: -9%;
  top: 13%;
  width: 118%;
  z-index: 0;
  opacity: .62;
  display: block;
  height: auto;
}


#fc-h3 .fc-h3-mazo { position: absolute; inset: 0; z-index: 1; }

/* Cada documento: marco de papel blanco, como una copia apoyada sobre la mesa.
   Es lo que las hace leer como piezas y no como imagenes pegadas al fondo. */
#fc-h3 .fc-h3-doc {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: var(--z, 1);
  display: block;
  width: 23%;
  padding: 5px 5px 6px;
  background: #FFFFFF;
  border-radius: 1px;
  box-shadow: 0 16px 30px -18px rgba(20, 35, 46, .4), 0 2px 6px -3px rgba(20, 35, 46, .18);
  transform-origin: 50% 50%;
  /* estado ABIERTO como base: sin JS se ve el abanico armado, no una pila cruda */
  transform:
    translate(-50%, -50%)
    translate(calc(var(--k) * var(--sep) * 1%), calc(var(--k) * var(--k) * var(--arc) * 1%))
    rotate(calc(var(--k) * var(--ang) * 1deg));
  will-change: transform;
}
#fc-h3 .fc-h3-doc img { display: block; width: 100%; height: auto; border-radius: 0; }

@media (max-width: 899px) {
  #fc-h3 .fc-h3-abanico {
    /* mas junto en el telefono: con la separacion de escritorio el mazo mide
       479 px sobre una pantalla de 390 y se corta por los dos lados */
    --sep: 29;
    --arc: 0.5;
    --ang: 1.45;
    position: relative;
    right: auto;
    bottom: auto;
    width: 112%;
    margin: 6px -6% 0;
    aspect-ratio: 76 / 46;
  }
  #fc-h3 .fc-h3-aguada { left: -2%; top: 6%; width: 104%; }
  /* Los documentos se corren hacia arriba dentro de la caja y la ficha deja de
     solaparse: con los valores de escritorio la tarjeta le comia 38 px al mazo. */
  #fc-h3 .fc-h3-doc { width: 28%; top: 40%; }
  #fc-h3 .fc-h3-comp .fc-h3-comp-ficha { margin-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #fc-h3 .fc-h3-doc { will-change: auto; }
}

/* ===========================================================================
   LA ESQUINA DE LA BANDA AZUL
   ---------------------------------------------------------------------------
   Tres diarios apilados en diagonal que se asoman por el borde superior
   derecho. Pura decoración: la única página que afirma algo es la de Clark, que
   lleva su cita — estas van aria-hidden.

   El recorte lo hace la propia sección (overflow: clip), así que las piezas se
   posicionan a propósito FUERA del borde y el navegador se encarga del corte.
   Es lo que da el efecto de asomarse en vez de estar apoyadas.

   Dos cosas que salieron mal en el primer intento y por eso están así:
    · A 45° y con el mazo entero girado, no se leían como diarios sino como
      rectángulos abstractos. El giro bajó a 14-40° y va POR PIEZA.
    · Con opacidad .2-.34 sobre navy quedaban fantasmas que parecían un error de
      render. Suben, y llevan sombra para apoyarse como objetos.
   ======================================================================== */
#fc-h3 .fc-h3-recorte-sec { position: relative; }

#fc-h3#fc-h3 .fc-h3-esquina {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(210px, 27vw, 400px);
  height: clamp(190px, 24vw, 340px);
  z-index: 0;            /* por detrás del contenido, que va en z-index 1 */
  pointer-events: none;
}
#fc-h3 .fc-h3-esq-pz {
  position: absolute;
  display: block;
  width: clamp(112px, 13.5vw, 196px);
  padding: 5px 5px 6px;
  background: #FFFFFF;
  border-radius: 1px;
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .55);
  will-change: transform;
  /* el giro lo escribe el JS junto con el desplazamiento: si estuviera acá, el
     transform en línea lo pisaría y las piezas quedarían derechas */
}
#fc-h3 .fc-h3-esq-pz img { display: block; width: 100%; height: auto; }

#fc-h3 .fc-h3-esq-pz[data-i="0"] { right: -2%;  top: -20%; z-index: 3; opacity: .58; }
#fc-h3 .fc-h3-esq-pz[data-i="1"] { right: 26%;  top: -34%; z-index: 2; opacity: .46; }
#fc-h3 .fc-h3-esq-pz[data-i="2"] { right: -20%; top: -2%;  z-index: 1; opacity: .38; }

@media (max-width: 899px) {
  /* En el teléfono la banda es angosta y el titular ocupa casi todo el ancho:
     la esquina se achica y baja la presencia para no meterse en el texto. */
  #fc-h3#fc-h3 .fc-h3-esquina { width: 58vw; height: 46vw; }
  #fc-h3 .fc-h3-esq-pz { width: 30vw; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .5); }
  #fc-h3 .fc-h3-esq-pz[data-i="0"] { opacity: .34; }
  #fc-h3 .fc-h3-esq-pz[data-i="1"] { opacity: .26; }
  #fc-h3 .fc-h3-esq-pz[data-i="2"] { opacity: .2; }
}

/* ---------------------------------------------------------------------------
   MOBILE · las láminas de atrás, a la misma altura que la de adelante.
   Los tres recortes tienen proporciones muy distintas (1200×621 · 1200×471 ·
   1200×1079). Con la altura natural, la de Smith rendereaba más del doble de
   alto que la de Clark, se estiraba muy por debajo de la pila y se metía abajo
   del titular y de la cita: el "Clark" en dorado quedaba escrito ENCIMA de un
   diario. Recortadas a la proporción de la de adelante, las de atrás sólo
   asoman los 16 y 30 px del desplazamiento, que es el efecto de pila buscado.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="1"] .fc-h3-lamina-papel,
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="2"] .fc-h3-lamina-papel {
    aspect-ratio: 1200 / 621;   /* la de Clark */
    overflow: hidden;
  }
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="1"] .fc-h3-lamina-papel img,
  #fc-h3 .fc-h3-pila .fc-h3-lamina[data-i="2"] .fc-h3-lamina-papel img {
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;     /* desde arriba: ahí está el encabezado */
  }
}

/* ===========================================================================
   LA LÍNEA DE LECTURA
   ---------------------------------------------------------------------------
   Una cinta de documentos ordenada por año sube y cruza una línea de oro fija.
   Al cruzarla, cada hoja pasa de papel pálido a página nítida y aparece su
   etiqueta. Después de 1912 cruzan dos hojas en blanco que NO se revelan.

   Es la única sección de la página que se PINEA (position: sticky). Se justifica
   porque la mecánica ES el recorrido: sin fijar la escena, la línea se iría de
   pantalla y no habría contra qué cruzar. La pista mide 230vh, no 300: más que
   eso se siente secuestro del scroll.

   ⚠️ El eje es VERTICAL y continuo, distinto a propósito de las otras dos
   animaciones de la página — la entrada lateral del diario (sección 2) y el
   abanico horizontal (sección 3). Tres animaciones sobre el mismo eje volverían
   la página monótona.
   ======================================================================== */
#fc-h3 .fc-h3-linea-sec { background: #FFFFFF; }

/* La pista: el alto de scroll que dura la escena. */
#fc-h3 .fc-h3-linea-pista { position: relative; height: 230vh; }

/* La escena, fija mientras dura la pista. svh y no vh: en Safari móvil, vh
   incluye la barra que se retrae y la escena quedaba cortada abajo. */
#fc-h3 .fc-h3-linea-escena {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: clip;
}

#fc-h3 .fc-h3-linea-grilla {
  display: grid;
  grid-template-columns: minmax(0, 38%) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
  /* ⚠️ NADA de width acá. .fc-h3-wrap define WIDTH (no max-width) con la misma
     especificidad, y como este bloque va después del suyo, un width:100% se lo
     pisaba: la sección perdía el ancho máximo y el padding lateral, y el texto
     quedaba pegado al borde de la pantalla. */
}

#fc-h3 .fc-h3-linea-txt { position: relative; z-index: 2; }

/* El año. Corta seco al año de la hoja que toca la línea: nada de odómetro
   girando, que es efecto de app y no de archivo. */
#fc-h3#fc-h3 .fc-h3-linea-ano {
  margin: clamp(18px, 2.4vw, 34px) 0 0;
  font-size: clamp(46px, 6vw, 92px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: -.03em;
  color: var(--oro-osc) !important;
  font-variant-numeric: tabular-nums;   /* sin esto el número salta de ancho */
  min-height: 1em;
}

/* La ventana de lectura. El recorte va acá y no en la sección: la cinta tiene
   que poder entrar y salir por arriba y por abajo. */
#fc-h3 .fc-h3-linea-ventana {
  position: relative;
  /* Acotada: la columna mide ~690 px y la hoja 212, asi que centrada dejaba
     240 px de aire muerto a la izquierda. Y no puede ser mas angosta que
     hoja + etiqueta, porque el recorte de la ventana se comeria la etiqueta. */
  /* 630 y no 545: con 545 la etiqueta mas larga ("Declaration of intention")
     se pasaba del borde y el recorte de la ventana se la comia. */
  width: min(100%, 630px);
  margin-inline: auto;
  height: min(74svh, 620px);
  overflow: clip;
}

#fc-h3 .fc-h3-lcinta {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 6vh, 84px);
  will-change: transform;
}

#fc-h3#fc-h3 .fc-h3-hoja {
  position: relative;
  margin: 0;
  width: clamp(148px, 15.5vw, 212px);
  flex: none;
}
#fc-h3 .fc-h3-hoja img {
  display: block;
  width: 100%;
  height: auto;
  background: #FFFFFF;
  padding: 5px 5px 6px;
  box-shadow: 0 14px 30px -16px rgba(20, 35, 46, .34);
  /* estado de partida: papel pálido, NO gris ni translúcido. Con opacidad baja
     o escala de grises se leía como "imagen rota / todavía cargando" en vez de
     "todavía no leída". El JS lo lleva a 0 al cruzar la línea. */
  filter: sepia(.34) contrast(.82) brightness(1.14);
}

/* La etiqueta. Regla que se traza + tipo + año. */
#fc-h3 .fc-h3-hoja figcaption {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 42vw;
  display: grid;
  row-gap: 2px;
  opacity: 0;
  will-change: opacity, transform;
}
/* ⚠️ ANCHO FIJO Y SE ESTIRA CON `transform`, NO CON `width`.
   El JS animaba `width` de 0 a 120px en cada hoja, y `width` dispara MAQUETADO:
   medido, 29 maquetados en 50 pasos de scroll sólo por esta rayita. `scaleX`
   lo resuelve el compositor y no cuesta nada. Se ve exactamente igual porque la
   raya es de color plano. El origen a la izquierda es lo que hace que crezca
   hacia la derecha, como antes. */
#fc-h3 .fc-h3-hoja-r {
  display: block;
  width: 120px;
  height: 1px;
  margin-bottom: 6px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
}
#fc-h3#fc-h3 .fc-h3-hoja-t {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--tinta) !important;
  line-height: 1.3 !important;
}
#fc-h3#fc-h3 .fc-h3-hoja-a {
  font-size: 12px !important;
  color: var(--tenue) !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.3 !important;
}

/* El cierre de la cinta: el botón que sube después de la última página.
   Va DENTRO de la cinta, así que sube con ella y entra en cuadro como una hoja
   más. Ancho propio (no el de las hojas) para que el botón respire. */
#fc-h3 .fc-h3-lcierre {
  flex: none;
  display: grid;
  justify-items: center;
  text-align: center;
  padding-top: clamp(6px, 2vh, 20px);
  opacity: 0;
  will-change: opacity, transform;
}

/* La altura del revelado. INVISIBLE: acá había una barra de oro cruzando la
   ventana y el owner la sacó — era pesada y partía el documento al medio. El
   elemento se conserva porque el JS lee su offsetTop para saber a qué altura
   revelar; si se borra, hay que pasar ese 46% al JS a mano. */
#fc-h3 .fc-h3-linea-regla {
  position: absolute;
  left: 0;
  right: 0;
  top: 46%;
  height: 0;
  pointer-events: none;
}

@media (max-width: 899px) {
  /* =========================================================================
     EN EL TELÉFONO LA CINTA SE DESLIZA DE COSTADO, NO CON EL SCROLL
     -------------------------------------------------------------------------
     ⚠️⚠️ ESTE ES EL ARREGLO DEL TEMBLOR. LEER ANTES DE VOLVER AL MODO VERTICAL.

     Antes esta sección "clavaba" la pantalla: una pista de 340svh con la escena
     fija adentro, y el dedo movía la cinta en vez de la página. El problema no
     era de ajuste sino de naturaleza: en el teléfono el scroll lo maneja el
     compositor y el dibujo lo hace el JS en el hilo principal, así que cualquier
     cuadro que el teléfono no llegue a dibujar se ve como un tirón — y con el
     fondo quieto se lee como que TIEMBLA la pantalla. Se bajó el costo por
     cuadro de ~50 escrituras a ~1 y el temblor siguió: no se arregla optimizando.

     La solución la propuso el owner y es la correcta: **que la cinta se deslice
     sola, de costado.** El scroll de la página no se toca nunca —nada se clava,
     nada compite— y el desplazamiento horizontal lo hace el navegador de forma
     nativa, o sea en el compositor, que es exactamente lo que no se puede
     trabar. El revelado deja de calcularse cuadro a cuadro: cada hoja se enciende
     con una transición de CSS cuando llega al centro.

     El mecanismo se conserva: las hojas pasan una por una, se revelan al llegar
     al punto de lectura y el año grande sigue el que está pasando.
     ========================================================================= */

  /* La pista deja de ser un riel de scroll: es una sección normal. */
  #fc-h3 .fc-h3-linea-pista { height: auto; }
  #fc-h3 .fc-h3-linea-escena {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding-block: clamp(48px, 9vw, 76px);
  }
  #fc-h3 .fc-h3-linea-grilla {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-content: center;
  }
  #fc-h3#fc-h3 .fc-h3-linea-ano { margin-top: 10px; font-size: clamp(38px, 12vw, 58px) !important; }

  /* La ventana pasa a ser el carril: se desliza con el dedo, de costado.
     ⚠️ `overscroll-behavior-x: contain` es lo que evita que al llegar al final
     del carril el gesto se lo lleve el navegador (gesto de "atrás" en iOS). */
  /* ⚠️ EL CARRIL VA DE BORDE A BORDE DE LA PANTALLA.
     `margin-inline: calc(50% - 50vw)` es el truco de sangrado completo: el 50%
     es del ancho del PADRE y el 50vw del de la pantalla, así que la diferencia
     es exactamente el margen que hay que compensar, sin depender de cuánto
     valga ese margen en cada ancho.

     ⚠️ Y `width: auto`, NO `width: 100%`. Con 100% el carril se corría a la
     izquierda pero no se ensanchaba: quedaba de 0 a 350 en una pantalla de 390
     y dejaba una franja blanca a la derecha. Con `auto` el ancho se calcula
     como padre + los dos márgenes negativos, o sea la pantalla entera. */
  #fc-h3 .fc-h3-linea-ventana {
    width: auto;
    max-width: none;
    height: auto;
    margin-inline: calc(50% - 50vw);
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: 0;
  }
  #fc-h3 .fc-h3-linea-ventana::-webkit-scrollbar { display: none; }

  /* La cinta: en fila, y con relleno a los costados para que la PRIMERA y la
     ÚLTIMA hoja puedan quedar centradas en el punto de lectura. */
  #fc-h3 .fc-h3-lcinta {
    position: static;
    width: max-content;
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(22px, 6vw, 40px);
    padding-inline: calc(50vw - clamp(120px, 34vw, 168px) / 2);
    padding-block: 0 clamp(52px, 12vw, 76px);
    transform: none !important;   /* el JS del modo vertical no manda acá */
    will-change: auto;
  }
  #fc-h3#fc-h3 .fc-h3-hoja {
    width: clamp(120px, 34vw, 168px);
    flex: 0 0 auto;
    scroll-snap-align: center;
  }

  /* La etiqueta va DEBAJO de la hoja. Al costado no entra. */
  #fc-h3#fc-h3 .fc-h3-hoja figcaption {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none !important;
    width: 100%;
    max-width: none;
    justify-items: start;
    margin-top: 10px;
  }
  #fc-h3 .fc-h3-hoja-r { margin-bottom: 5px; }

  /* ⚠️ EL REVELADO ES UNA TRANSICIÓN DE CSS, NO UN CÁLCULO POR CUADRO.
     El JS sólo agrega la clase cuando la hoja llega al centro del carril; el
     resto lo hace el navegador. Ese es el motivo por el que esto no puede
     temblar: no hay nada que dibujar en cada cuadro.

     ⚠️ Los `!important` son necesarios: el modo vertical deja estilos en línea
     si el visitante gira el teléfono desde escritorio, y sin esto ganarían. */
  /* ⚠️⚠️ ACÁ SE ILUMINABA LA HOJA EQUIVOCADA, Y NO ERA UN PROBLEMA DE
     DETECCIÓN. Medido en vivo: la hoja del centro tenía `filter: none` y la de
     la derecha —la que TODAVÍA NO se leyó— tenía
     `sepia(.34) contrast(.82) brightness(1.14)`.

     O sea que el estado "sin leer" era **14% MÁS BRILLANTE** que el leído. En
     escritorio eso funciona porque la hoja pasa de pálida a nítida en el MISMO
     lugar y se lee como que entra en foco. En el teléfono, con las tres una al
     lado de la otra, la pálida se lleva el ojo: parece la destacada.

     Acá se invierte el énfasis. La del centro va a foco pleno y las demás
     retroceden: menos contraste, menos opacidad y un punto más chicas. La
     escala es lo que lo vuelve inequívoco — no depende de si el papel de una
     foto es más claro que el de otra. */
  #fc-h3 .fc-h3-hoja img {
    filter: sepia(.30) contrast(.80) brightness(1.04) !important;
    opacity: .62;
    transition: filter 420ms cubic-bezier(.23, 1, .32, 1),
                opacity 420ms cubic-bezier(.23, 1, .32, 1);
  }
  #fc-h3 .fc-h3-hoja.fc-h3-leida img { filter: none !important; opacity: 1; }
  /* La escala va en la figura, no en la imagen: así se achica con su sombra y
     no se corre el punto de enganche, que se calcula sobre la caja sin
     transformar. */
  #fc-h3#fc-h3 .fc-h3-hoja {
    transform: scale(.9);
    transform-origin: center center;
    transition: transform 420ms cubic-bezier(.23, 1, .32, 1);
  }
  #fc-h3#fc-h3 .fc-h3-hoja.fc-h3-leida { transform: scale(1); }
  #fc-h3#fc-h3 .fc-h3-hoja figcaption {
    opacity: 0 !important;
    transition: opacity 380ms cubic-bezier(.23, 1, .32, 1);
  }
  #fc-h3#fc-h3 .fc-h3-hoja.fc-h3-leida figcaption { opacity: 1 !important; }
  #fc-h3 .fc-h3-hoja-r {
    transform: scaleX(0) !important;
    transition: transform 480ms cubic-bezier(.23, 1, .32, 1);
  }
  #fc-h3 .fc-h3-hoja.fc-h3-leida .fc-h3-hoja-r { transform: scaleX(1) !important; }

  /* ⚠️ Se ATENÚA con reduced-motion, no se apaga: la PC del owner lo pide y
     dejarlo quieto haría que las hojas nunca se revelen. */
  @media (prefers-reduced-motion: reduce) {
    #fc-h3 .fc-h3-hoja img,
    #fc-h3#fc-h3 .fc-h3-hoja figcaption,
    #fc-h3 .fc-h3-hoja-r { transition-duration: 200ms; }
  }

  /* El cierre queda como una parada más del carril, al final. */
  #fc-h3 .fc-h3-lcierre {
    position: static;
    flex: 0 0 auto;
    align-self: center;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    scroll-snap-align: center;
  }

  /* Pista de que se desliza: la última hoja asoma cortada por el borde. Con
     `mandatory` y el relleno calculado, siempre queda algo a la derecha salvo
     en la última parada. */
  #fc-h3 .fc-h3-linea-regla { display: none; }
}

/* ===========================================================================
   LA RUTA DE LOS OBJETOS
   ---------------------------------------------------------------------------
   Un hilo de oro baja la sección en codos rectos, se detiene en cada objeto y
   termina en la puerta de la colección. Se dibuja solo mientras se scrollea.

   ⚠️ La mecánica es DISTINTA a propósito de las otras cuatro de la página: acá
   no entra nada de costado (sección 2), no se abre un abanico (3), no sube una
   cinta (5) y no cuenta un número (7) — se TRAZA un recorrido. Cinco secciones
   con movimiento y ninguna repite el gesto.

   ⚠️ El trazo no se anima con CSS: el `d` del path lo escribe el JS con las
   posiciones medidas, porque el zigzag tiene que caer sobre los objetos reales
   en cualquier viewport. Acá va sólo el aspecto.
   ======================================================================== */

/* La pista. max-width propio: a todo el ancho del wrap el zigzag se estira
   tanto que los tramos horizontales se leen como reglas sueltas. */
#fc-h3 .fc-h3-ruta {
  --amp: 17%;   /* cuánto se corre cada objeto del eje. La distancia vive acá y
                   no en el marcado justamente para que la media query la pueda
                   pisar; un valor inline le ganaría. */
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: clamp(34px, 5vh, 68px) auto 0;
  /* ⚠️ CARRERA DE ENTRADA, no aire decorativo. El hilo arranca en el borde
     superior de la pista; sin este hueco la primera pieza empieza en y=0 y su
     marca de recorrido cae en 0, así que el anillo nacía ya revelado. Además
     es lo que hace que la línea se vea BAJAR desde el texto antes de tocar el
     primer objeto. Si se toca, revisar la marca 0 en el JS. */
  padding-top: clamp(76px, 11vh, 138px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(80px, 11vh, 148px);
}

#fc-h3 .fc-h3-ruta-hilo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: visible;
  pointer-events: none;
}
#fc-h3 .fc-h3-ruta-hilo path {
  fill: none;
  stroke: var(--oro);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* El punto de partida. Sin opacity acá: la escribe el JS. */
#fc-h3 .fc-h3-ruta-hilo circle { fill: var(--oro); }

/* Cada parada. El blanco es FUNCIONAL: tapa el hilo por detrás para que la
   línea entre por arriba del objeto y salga por abajo sin cruzarle la foto.
   `left` con calc() sobre un signo inline: relative, así que corre el objeto
   sin sacarlo del flujo ni descentrar la columna. */
#fc-h3 .fc-h3-pieza,
#fc-h3 .fc-h3-ruta-fin {
  position: relative;
  left: calc(var(--s, 0) * var(--amp));
  z-index: 1;
}
/* Sólo las piezas llevan fondo. Ver arriba: es la máscara del hilo. */
#fc-h3 .fc-h3-pieza { background: #FFFFFF; }

/* ⚠️ El cierre NO lleva fondo blanco NI relleno, y las dos cosas son a
   propósito.
   · Fondo: el botón es opaco y el hilo termina en su borde superior, así que no
     hay nada que tapar. Y una capa blanca sobre fondo blanco — que es lo que
     arma el will-change al promover el elemento a capa propia — deja una
     COSTURA GRIS visible en los bordes cuando caen en medio píxel. Eso era la
     "línea gris arriba del botón" y la que aparecía abajo al pasar el mouse
     (el hover repinta y arma otra capa).
   · Relleno: sin él la caja del cierre coincide con la del botón, y el hilo
     aterriza tocándolo en vez de cortarse 10px antes. */
#fc-h3 .fc-h3-ruta-fin { padding: 0; }

#fc-h3 .fc-h3-pieza {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* ⚠️ Un escalón más grande que el resto de la página. El comprador es 55+
     (89% de las ventas) y esta es la única sección donde el texto chico decide
     una compra. La foto sube en la misma proporción para no romper el equilibrio
     entre objeto y etiqueta. */
  width: clamp(196px, 27vw, 300px);
  padding: 12px 6px 8px;
  text-decoration: none;
  color: inherit;
}

#fc-h3 .fc-h3-pieza-foto { display: block; }
#fc-h3 .fc-h3-pieza-txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* la opacidad la escribe el JS, con retardo respecto de la foto */
}
#fc-h3 .fc-h3-pieza-foto img {
  display: block;
  height: var(--alto);
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  transition: transform 320ms var(--sal, ease);
}
/* Sólo el cuadro. Ver el comentario de 'sombra' en fc_h3_objetos(). */
#fc-h3 .fc-h3-pieza-foto--sombra img {
  box-shadow: 0 18px 34px -20px rgba(20, 35, 46, .55);
}

#fc-h3#fc-h3 .fc-h3-pieza-n {
  margin-top: 18px;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  line-height: 1.3 !important;
  color: var(--tinta) !important;
  transition: color 200ms ease;
}
#fc-h3#fc-h3 .fc-h3-pieza-t {
  margin-top: 7px;
  max-width: 27ch;
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--tenue) !important;
}


/* El objeto crece al pasarle el mouse. No es adorno: en una sección sin precios
   ni botones, la foto es lo único que se puede clickear y nada lo delataba.
   El escalado dice "esto responde" antes de que el visitante lea el cursor. */
@media (hover: hover) {
  #fc-h3 .fc-h3-pieza:hover .fc-h3-pieza-foto img { transform: scale(1.06) translateY(-5px); }
  #fc-h3 .fc-h3-pieza:hover .fc-h3-pieza-foto--sombra img { box-shadow: 0 26px 44px -22px rgba(20, 35, 46, .6); }
  #fc-h3#fc-h3 .fc-h3-pieza:hover .fc-h3-pieza-n { color: var(--oro-osc) !important; }
}
#fc-h3 .fc-h3-pieza:focus-visible { outline: 2px solid var(--oro-osc); outline-offset: 6px; border-radius: 2px; }

/* ⚠️ El estado de partida va SÓLO bajo --viva, que la pone el JS. Sin JS (o si
   el bloque se cae por lo que sea) los objetos quedan visibles: es la única
   sección de la página que lleva a comprar, no puede depender de un script para
   existir. Y sin !important, que le ganaría al inline que escribe el JS. */
#fc-h3 .fc-h3-ruta--viva .fc-h3-pieza,
#fc-h3 .fc-h3-ruta--viva .fc-h3-ruta-fin {
  opacity: 0;
  will-change: opacity, transform;
}

@media (prefers-reduced-motion: reduce) {
  /* Se ATENÚA, no se apaga. El trazo ES la sección, y el crecer al pasar el
     mouse es lo que avisa que la foto se puede clickear: apagarlo le sacaría al
     owner —que tiene la preferencia activa— justo la señal de que hay un link.
     Queda más chico y más corto, no en cero. */
  #fc-h3 .fc-h3-pieza-foto img { transition: transform 160ms ease; }
  #fc-h3 .fc-h3-pieza:hover .fc-h3-pieza-foto img { transform: scale(1.025); }
}

@media (max-width: 899px) {
  /* Amplitud más chica: a 350px de pista, ±17% saca la pieza fuera del wrap y
     la corta el overflow-x de la sección. */
  #fc-h3 .fc-h3-ruta { --amp: 13%; gap: clamp(64px, 9vh, 104px); }
  #fc-h3 .fc-h3-pieza { width: clamp(180px, 50vw, 232px); }
  #fc-h3#fc-h3 .fc-h3-pieza-t { font-size: 14px !important; }
}

/* ===========================================================================
   PRICE LIST — lo propio de /pricing/
   ---------------------------------------------------------------------------
   Vive DENTRO de #fc-h3 y usa sus tokens. Tres piezas que la portada no tenía:
   la grilla de láminas, las tarjetas de nivel y la tabla del Registro.
   ======================================================================== */

/* ── Láminas: qué trae el volumen ─────────────────────────────────────── */
/* El dibujo va en trazo fino sobre papel, sin relleno y sin círculo de color.
   Un ícono redondo y coloreado se ve igual en cualquier sitio del mundo; este
   producto vende exactamente lo contrario, así que el registro es el de una
   lámina grabada de catálogo de archivo. */
#fc-h3 .fc-h3-pr-laminas {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2.2vw, 34px);
  margin-top: clamp(38px, 4vw, 62px);
}
@media (max-width: 1000px) { #fc-h3 .fc-h3-pr-laminas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { #fc-h3 .fc-h3-pr-laminas { grid-template-columns: 1fr; gap: 22px; } }

#fc-h3 .fc-h3-pr-lamina {
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  padding: clamp(20px, 2vw, 28px);
  display: flex;
  flex-direction: column;
  transition: transform 320ms var(--sal), box-shadow 320ms var(--sal), border-color 320ms var(--sal);
}
#fc-h3 .fc-h3-pr-lamina:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 168, 76, .55);
  box-shadow: 0 20px 40px -26px rgba(20, 35, 46, .4);
}
#fc-h3 .fc-h3-pr-lamina-fig {
  display: block;
  width: clamp(42px, 4vw, 52px);
  height: clamp(42px, 4vw, 52px);
  color: var(--oro-osc);
  margin-bottom: 16px;
}
#fc-h3 .fc-h3-pr-lamina-fig svg {
  display: block; width: 100%; height: 100%;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform 420ms var(--sal);
}
#fc-h3 .fc-h3-pr-lamina:hover .fc-h3-pr-lamina-fig svg { transform: scale(1.07); }
#fc-h3#fc-h3 .fc-h3-pr-lamina-n {
  font-size: 16.5px !important; font-weight: 600 !important;
  color: var(--tinta) !important; line-height: 1.32 !important; margin-bottom: 7px;
}
#fc-h3#fc-h3 .fc-h3-pr-lamina-t {
  font-size: 14.5px !important; line-height: 1.5 !important; color: var(--tenue) !important;
}

/* ── Tarjetas de nivel ────────────────────────────────────────────────── */
#fc-h3 .fc-h3-pr-niveles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(34px, 3.6vw, 54px);
}
@media (max-width: 800px) { #fc-h3 .fc-h3-pr-niveles { grid-template-columns: 1fr; } }

#fc-h3 .fc-h3-pr-nivel {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--papel3);
  border: 1px solid var(--filete);
  border-radius: var(--r);
  padding: clamp(26px, 2.4vw, 36px) clamp(20px, 2vw, 28px);
  transition: transform 320ms var(--sal), box-shadow 320ms var(--sal);
}
/* Blanco puro y no papel: las fotos de pack vienen recortadas sobre blanco, y
   sobre crema se ven como un rectangulo pegado encima en vez de embebidas. */
#fc-h3 .fc-h3-pr-nivel { background: #FFFFFF; }
#fc-h3 .fc-h3-pr-nivel:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(20, 35, 46, .44); }
/* El destacado se marca SOLO con el filete dorado y el sello. Si ademas se
   tine el fondo, la foto deja de fundirse. */
#fc-h3 .fc-h3-pr-nivel--dest { background: #FFFFFF; border-color: rgba(201, 168, 76, .62); box-shadow: 0 0 0 1px rgba(201, 168, 76, .26); }

/* El sello del destacado: mismo recurso gráfico que usa el índice de la portada. */
#fc-h3 .fc-h3-pr-sello { position: absolute; top: 18px; right: 18px; width: 40px; height: 40px; }
#fc-h3 .fc-h3-pr-sello svg { display: block; width: 100%; height: 100%; }

#fc-h3 .fc-h3-pr-cinta {
  align-self: flex-start;
  font-size: var(--f-eye); font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--oro-osc); margin-bottom: 10px;
}
#fc-h3#fc-h3 .fc-h3-pr-que {
  font-size: var(--f-cap) !important; color: var(--tenue) !important;
  margin: 8px 0 0 !important; min-height: 3.2em;
}
#fc-h3 .fc-h3-pr-precio {
  display: flex; align-items: baseline; gap: 3px;
  margin: 18px 0 0 !important; padding-top: 18px; border-top: 1px solid var(--filete2);
}
#fc-h3 .fc-h3-pr-precio b {
  font-family: Montserrat, system-ui, sans-serif; font-weight: 500;
  font-size: clamp(32px, 2vw + 22px, 46px); line-height: 1; color: var(--tinta);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
#fc-h3 .fc-h3-pr-moneda { font-size: clamp(17px, .6vw + 14px, 22px); color: var(--tenue); font-weight: 500; }
#fc-h3 .fc-h3-pr-u {
  display: block; font-size: var(--f-eye); letter-spacing: .08em;
  text-transform: uppercase; color: var(--tenue); margin: 6px 0 22px;
}
/* Navy, no lacre. Es el mismo criterio que la portada usa en el hero
   (--campo--apilado): el rojo es el acento del buscador, y tres botones rojos
   uno al lado del otro en una tabla de precios gritan de mas y compiten entre si.
   El navy ancla y deja que el precio sea lo que resalta. */
#fc-h3 .fc-h3-pr-nivel .fc-h3-btn {
  margin-top: auto; width: 100%;
  background: var(--navy);
}

#fc-h3#fc-h3 .fc-h3-pr-pie { margin-top: clamp(22px, 2.4vw, 32px) !important; max-width: 74ch; }
/* El pie de seccion se centra de verdad: necesita margin-inline auto Y el
   text-align, y el doble id para ganarle al tema. */
#fc-h3#fc-h3 .fc-h3-centro.fc-h3-pr-pie { margin-inline: auto !important; text-align: center !important; }

/* Precio de cada pieza, dentro de la ruta de objetos. */
#fc-h3#fc-h3 .fc-h3-pr-pieza-p {
  margin-top: 9px; font-size: 15px !important; font-weight: 600 !important;
  color: var(--tinta) !important; font-variant-numeric: tabular-nums;
}

/* ── Aviso de sección en borrador ─────────────────────────────────────── */
#fc-h3 .fc-h3-pr-aviso {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px dashed rgba(201, 168, 76, .5); border-radius: var(--r);
  padding: 14px 18px; margin: clamp(26px, 2.8vw, 38px) auto 0; max-width: 68ch;
}
#fc-h3 .fc-h3-pr-aviso svg { flex: 0 0 auto; margin-top: 3px; }
#fc-h3#fc-h3 .fc-h3-pr-aviso p { margin: 0 !important; font-size: var(--f-cap) !important; }

/* ── Tabla comparativa ────────────────────────────────────────────────── */
/* Scrollea dentro de su contenedor: el body no se mueve nunca. Achicar la letra
   para meter cuatro columnas en un teléfono deja el precio ilegible para el
   comprador de 55+, que es el 89% de las ventas. */
#fc-h3 .fc-h3-pr-tabla-env { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: clamp(26px, 2.8vw, 40px); }
#fc-h3 .fc-h3-pr-tabla { width: 100%; min-width: 660px; border-collapse: collapse; }
#fc-h3 .fc-h3-pr-tabla th,
#fc-h3 .fc-h3-pr-tabla td {
  padding: 14px 16px; text-align: center; vertical-align: middle;
  border-bottom: 1px solid rgba(201, 168, 76, .18);
}
#fc-h3 .fc-h3-pr-tabla thead th { border-bottom-color: rgba(201, 168, 76, .38); padding-bottom: 18px; }
#fc-h3 .fc-h3-pr-tabla tbody tr:last-child td { border-bottom: 0; }
#fc-h3 .fc-h3-pr-tabla .fc-h3-pr-fila {
  position: sticky; left: 0; text-align: left; min-width: 220px;
  background: var(--noche); color: var(--papel3); font-size: var(--f-cap);
  box-shadow: 1px 0 0 rgba(201, 168, 76, .18);
}
#fc-h3 .fc-h3-pr-col--dest { background: rgba(201, 168, 76, .07); }
#fc-h3 .fc-h3-pr-plan {
  display: block; font-family: Montserrat, system-ui, sans-serif;
  font-size: clamp(17px, .5vw + 15px, 21px); font-weight: 600;
  color: var(--papel3); letter-spacing: -.004em;
}
#fc-h3 .fc-h3-pr-plan-p { display: block; font-size: var(--f-body); color: var(--oro); margin-top: 4px; font-variant-numeric: tabular-nums; }
#fc-h3 .fc-h3-pr-cinta--osc { color: var(--oro); display: block; margin-bottom: 6px; }
#fc-h3 .fc-h3-pr-txt { font-size: var(--f-cap); color: var(--papel3); }
#fc-h3 .fc-h3-pr-tabla td svg { display: inline-block; vertical-align: middle; color: var(--papel3); }

/* Subtitulo interno de The Heritage Volume: las laminas viven DENTRO de esa
   seccion, no en una aparte. Separadas, el lector veia tres precios sin saber
   que compraba y despues una lista sin precio al lado. */
#fc-h3 .fc-h3-pr-sub { margin-top: clamp(52px, 5.4vw, 84px); margin-inline: auto; max-width: 66ch; }
#fc-h3#fc-h3 .fc-h3-pr-sub-t {
  font-size: clamp(20px, .8vw + 17px, 26px) !important;
  font-weight: 600 !important; color: var(--tinta) !important;
  letter-spacing: -.01em; margin-bottom: 8px !important;
}
#fc-h3#fc-h3 .fc-h3-pr-sub .fc-h3-cap { margin: 0 !important; }
#fc-h3 .fc-h3-pr-sub + .fc-h3-pr-laminas { margin-top: clamp(26px, 2.8vw, 40px); }

/* Foto del pack arriba de cada nivel + el desplegable de contenido. */
#fc-h3 .fc-h3-pr-nivel-fig { display:block; margin:-6px auto 14px; width:100%; max-width:190px; }
#fc-h3 .fc-h3-pr-nivel-fig img { display:block; width:100%; height:auto; object-fit:contain; transition:transform 420ms var(--sal); }
#fc-h3 .fc-h3-pr-nivel:hover .fc-h3-pr-nivel-fig img { transform:translateY(-4px) scale(1.03); }
/* El desplegable hereda el acordeon del sistema; solo se le saca el borde de
   arriba, que ahi adentro cortaba la tarjeta en dos. */
#fc-h3 .fc-h3-pr-incluye { border-top:1px solid var(--filete2); border-bottom:0; margin-top:18px; }
#fc-h3#fc-h3 .fc-h3-pr-incluye .fc-h3-faq-b { min-height:48px; padding:12px 0; font-size:14.5px !important; }
#fc-h3 .fc-h3-pr-inc-lista { list-style:none; margin:0 0 14px; padding:0; display:grid; gap:9px; }
#fc-h3#fc-h3 .fc-h3-pr-inc-lista li { display:flex; align-items:flex-start; gap:9px; font-size:14px !important; line-height:1.45 !important; margin:0 !important; }
#fc-h3 .fc-h3-pr-inc-lista li svg { flex:0 0 auto; margin-top:2px; }
#fc-h3#fc-h3 .fc-h3-pr-inc-lista li.no span { color:var(--tenue) !important; opacity:.7; }

/* ── Packs en carrusel (solo telefono) ─────────────────────────────────── */
#fc-h3 .fc-h3-pr-niveles[data-carr] {
  display: flex; grid-template-columns: none; gap: 0;
  will-change: transform; transition: transform 420ms var(--sal);
  touch-action: pan-y;
}
#fc-h3 .fc-h3-pr-niveles[data-carr] .fc-h3-pr-nivel { flex: 0 0 100%; width: 100%; max-width: 100%; }
/* El envase recorta: sin esto las tres tarjetas se ven una al lado de la otra
   y el riel desplazado deja media tarjeta asomando. */
#fc-h3 .fc-h3-pr-carr { overflow: hidden; }
@media (min-width: 800px) { #fc-h3 .fc-h3-pasos-nav.fc-h3-pr-nav { display: none; } }

/* ⚠️ HOVER SOLO DONDE HAY PUNTERO DE VERDAD. En pantalla tactil el :hover se
   queda pegado despues de tocar, y el boton del pack que tocaste queda mas
   oscuro que los otros dos hasta que toques otra cosa. Se ve como un bug de
   color y en realidad es el estado del navegador. */
@media (hover: hover) {
  #fc-h3 .fc-h3-pr-nivel .fc-h3-btn:hover { background: var(--noche); }
}

/* Cabeza de /pricing/ alineada a la izquierda, igual que el hero de la portada.
   Va DENTRO de .fc-h3-wrap sin tocar su ancho: asi el borde izquierdo del texto
   cae exactamente en la misma coordenada que el de la portada, sin numeros
   magicos que se despeguen cuando cambie el ancho del contenedor.
   La mitad derecha queda libre para la imagen. */
#fc-h3 .fc-h3-pr-cab { max-width: 52%; }
#fc-h3#fc-h3 .fc-h3-pr-cab .fc-h3-lede { margin-left: 0; margin-right: 0; max-width: 46ch; }
@media (max-width: 900px) { #fc-h3 .fc-h3-pr-cab { max-width: none; } }

/* ── El collage de la cabeza de /pricing/ ─────────────────────────────── */
/* La caja del texto ocupa la mitad izquierda; esto ocupa la derecha. Se
   posiciona absoluto respecto del wrap para poder desbordar hacia afuera sin
   empujar el titulo. */
#fc-h3 .fc-h3-wrap { position: relative; }
/* ⚠️ EL COLLAGE SE ANCLA A LA SECCION, NO AL WRAP. El wrap lleva adentro el
   padding vertical de la seccion, asi que un bottom:0 ahi deja la figura
   flotando ~95px por encima del borde. Colgado de la seccion, apoya exacto en
   la linea donde termina el blanco y empieza el gris — que es el efecto de
   "sale de la interseccion".
   Se selecciona por el aria-labelledby para no agregar una clase al marcado. */
#fc-h3 section[aria-labelledby="fc-pr-h"] { position: relative; overflow: hidden; }

/* Reserva el alto: sin esto la seccion la define el texto y la figura la pisa. */
#fc-h3 .fc-h3-pr-cabezal { min-height: clamp(300px, 26vw, 400px); }

#fc-h3 .fc-h3-pr-collage {
  position: absolute; right: 2%; bottom: 0;
  width: 44%; max-width: 560px; pointer-events: none;
  display: flex; align-items: flex-end; justify-content: center;
}
#fc-h3 .fc-h3-pr-collage img { display: block; }

/* La aguada, detras y desbordando: si mide lo mismo que la figura, la persona
   la tapa entera y la pintura solo asoma como una franja suelta. */
#fc-h3 .fc-h3-pr-aguada {
  position: absolute; left: -8%; bottom: 30%; width: 108%; height: auto;
  z-index: 0; opacity: .8;
}
#fc-h3 .fc-h3-pr-persona {
  position: relative; z-index: 2;
  width: 100%; height: auto;
  margin-bottom: -2px;   /* apoya al ras, sin linea de fondo asomando */
}
/* En pantallas angostas el collage pasa a ser una banda debajo del texto: al
   lado, la caja del titulo quedaria de 40 caracteres y el collage ilegible.

   ⚠️ Y ACA VA LO QUE FALTABA: al volverse static, la figura entra en el flujo y
   el padding inferior de la seccion le agrega una franja blanca debajo. Se
   anula ese padding para que la base de la imagen SEA el borde de la seccion,
   igual que en escritorio. */
@media (max-width: 900px) {
  #fc-h3 section[aria-labelledby="fc-pr-h"] { padding-bottom: 0; }
  #fc-h3 .fc-h3-pr-cabezal { min-height: 0; }
  #fc-h3 .fc-h3-pr-collage {
    position: static; transform: none; width: 100%;
    max-width: 420px; margin: 26px auto 0;
  }
  #fc-h3 .fc-h3-pr-persona { margin-bottom: 0; }
}

/* ── Documentos y marcas del collage ──────────────────────────────────── */
/* Marco de papel blanco + sombra: el mismo tratamiento que la portada le da a
   sus escaneos, para que se lean como copias apoyadas sobre la mesa y no como
   recortes pegados. */
#fc-h3 .fc-h3-pr-doc {
  position: absolute; z-index: 3; display: block;
  padding: 5px 5px 6px; background: #FFFFFF; border-radius: 1px;
  box-shadow: 0 16px 34px -16px rgba(20, 35, 46, .5);
}
#fc-h3 .fc-h3-pr-doc img { display: block; width: 100%; height: auto; }
/* Posiciones: alrededor de la figura, sin tocarle la cara ni el telefono —
   que son los dos puntos donde va el ojo. */
#fc-h3 .fc-h3-pr-doc[data-d="acta"]   { width: 30%; left: -6%;  top: 6%;  transform: rotate(-5deg); }
#fc-h3 .fc-h3-pr-doc[data-d="censo"]  { width: 25%; left: -2%;  bottom: 12%; transform: rotate(3deg); }
#fc-h3 .fc-h3-pr-doc[data-d="diario"] { width: 22%; right: -3%; top: 20%; transform: rotate(6deg); }

/* Marcas: sobrias y en oro. El oro nunca es pulsable en este sistema, asi que
   no se confunden con un control. */
#fc-h3 .fc-h3-pr-marca { position: absolute; z-index: 4; display: block; }
#fc-h3 .fc-h3-pr-marca[data-m="sello"] { width: 8%; right: 6%;  bottom: 24%; }
#fc-h3 .fc-h3-pr-marca[data-m="cruz"]  { width: 4%; left: 16%;  top: 40%; }
#fc-h3 .fc-h3-pr-marca[data-m="punto"] { width: 3.4%; right: 20%; top: 8%; }

/* En telefono el collage es angosto: los documentos se comen la figura. */
@media (max-width: 900px) {
  #fc-h3 .fc-h3-pr-doc[data-d="diario"], #fc-h3 .fc-h3-pr-marca[data-m="cruz"] { display: none; }
  #fc-h3 .fc-h3-pr-doc { width: 26%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT US  (/about/)  ·  fc-ab-*
   ═══════════════════════════════════════════════════════════════════════════
   Mismo criterio que el bloque fc-h3-pr-* de /pricing/: acá sólo vive lo que
   esta página no puede heredar. Bandas, tipografía, botones, acordeón, eyebrow,
   lede y revelado por scroll vienen del sistema y NO se redefinen.

   ⚠️ Doble id (#fc-h3#fc-h3) donde hace falta ganarle a un !important del tema.
   ⚠️ El movimiento se ATENÚA con prefers-reduced-motion, nunca se apaga: el
   equipo del owner pide menos movimiento y una guarda que corte del todo le
   deja la página quieta. Ver la nota al pie de este bloque.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · CABEZA + COLLAGE ────────────────────────────────────────────────── */
/* Texto a la izquierda y la imagen pegada al borde inferior de la sección,
   igual que en /pricing/: la persona nace justo en la costura entre el blanco
   de esta sección y el gris de la siguiente. */
#fc-h3 .fc-h3-sec--blanca:has(> .fc-ab-cabezal) { position: relative; overflow: hidden; }
#fc-h3 .fc-ab-cabezal { position: relative; z-index: 2; }
#fc-h3 .fc-ab-cab { max-width: 660px; }
#fc-h3 .fc-ab-cab .fc-h3-lede { margin-top: 18px; }

#fc-h3 .fc-ab-collage {
  position: absolute;
  right: max(2vw, calc((100vw - var(--wrap)) / 2 - 30px));
  top: 50%;
  transform: translateY(-50%);
  width: min(34vw, 395px);
  z-index: 1;
  pointer-events: none;
}
#fc-h3 .fc-ab-collage img { width: 100%; height: auto; display: block; }
/* Bajo 1000px el globo compite con el texto por el ancho y gana el texto: la
   cabeza pasa a una columna y el globo se centra debajo.
   ⚠️ Acá NO va pegado al borde inferior de la sección como la persona recortada
   de /pricing/. Aquella "nacía" de la costura entre bandas; un círculo cortado
   por la mitad se lee como un error de maquetado. */
@media (max-width: 1000px) {
  #fc-h3 .fc-ab-collage {
    position: static;
    transform: none;
    width: min(62vw, 290px);
    margin: 30px auto 4px;
  }
  #fc-h3 .fc-ab-cab { max-width: none; }
}

/* ── 2 · LAS DOS FORMAS ──────────────────────────────────────────────────── */
#fc-h3 .fc-ab-dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(30px, 3.4vw, 48px);
}
#fc-h3 .fc-ab-caja {
  background: #fff;
  border: 1px solid var(--filete2);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 38px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#fc-h3 .fc-ab-caja h3 { font-size: var(--f-h3); font-weight: 600; margin: 0; color: var(--tinta); }
#fc-h3 .fc-ab-caja p  { margin: 0; color: var(--prosa); font-size: var(--f-body); line-height: 1.62; }
#fc-h3 .fc-ab-caja .fc-h3-link { margin-top: auto; align-self: flex-start; }
@media (max-width: 760px) { #fc-h3 .fc-ab-dos { grid-template-columns: 1fr; } }

/* ── 3 · MISMO NOMBRE, MISMO VOLUMEN ─────────────────────────────────────── */
/* La banda navy sólo pinta el fondo: el color del texto se declara acá,
   explícito, en vez de confiar en herencia. */
#fc-h3 .fc-ab-det h2 { color: var(--papel3); }
#fc-h3 .fc-ab-det .fc-h3-lede,
#fc-h3 .fc-ab-det p  { color: rgba(244, 239, 230, .82); }
#fc-h3 .fc-ab-det h3 { color: var(--papel3); }

/* Cabecera partida: argumento a la izquierda, sello a la derecha.
   ⚠️ La columna de texto va con measure propia (~560px). Sin tope, a 1180px de
   ancho el lede se estira a renglones de 110 caracteres y se vuelve ilegible. */
#fc-h3 .fc-ab-det-cab {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(28px, 5vw, 78px);
  align-items: center;
}
#fc-h3 .fc-ab-det-txt { max-width: 560px; }
#fc-h3 .fc-ab-det-txt .fc-h3-lede { margin-top: 16px; }

#fc-h3 .fc-ab-sello {
  width: min(100%, 390px);
  margin-inline: auto;
  color: rgba(201, 168, 76, .92);
}
#fc-h3 .fc-ab-sello svg { width: 100%; height: auto; display: block; }
/* Los dos volúmenes se trazan al entrar; el igual aparece después, que es el
   momento en el que la idea se cierra. */
#fc-h3 .fc-ab-sello-a, #fc-h3 .fc-ab-sello-b {
  stroke-dasharray: 460;
  stroke-dashoffset: 460;
}
#fc-h3 .fc-ab-sello-eq { opacity: 0; }
#fc-h3 .fc-ab-sello.fc-h3-visto .fc-ab-sello-a { animation: fc-ab-traza 900ms var(--sal) forwards; }
#fc-h3 .fc-ab-sello.fc-h3-visto .fc-ab-sello-b { animation: fc-ab-traza 900ms var(--sal) 180ms forwards; }
#fc-h3 .fc-ab-sello.fc-h3-visto .fc-ab-sello-eq { animation: fc-ab-aparece 500ms var(--sal) 900ms forwards; }
@keyframes fc-ab-traza   { to { stroke-dashoffset: 0; } }
@keyframes fc-ab-aparece { to { opacity: 1; } }

@media (max-width: 900px) {
  #fc-h3 .fc-ab-det-cab { grid-template-columns: 1fr; gap: 32px; }
  #fc-h3 .fc-ab-det-txt { max-width: none; }
  #fc-h3 .fc-ab-sello { width: min(76%, 300px); }
}

/* La frontera: dos columnas a ancho completo.
   ⚠️ NADA de cruces rojas en la columna derecha: la ausencia se muestra como un
   renglón que no está, no como un rechazo. La jerarquía la da el oro —la
   columna de la izquierda es la que afirma— y la derecha queda recesiva. */
#fc-h3 .fc-ab-frontera {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(46px, 5.2vw, 82px);
}
#fc-h3 .fc-ab-col {
  border: 1px solid rgba(219, 208, 188, .15);
  border-radius: var(--r);
  padding: clamp(26px, 2.9vw, 42px);
  background: rgba(255, 255, 255, .028);
}
#fc-h3 .fc-ab-col--si {
  border-color: rgba(201, 168, 76, .3);
  background: rgba(201, 168, 76, .055);
}
#fc-h3 .fc-ab-col h3 {
  font-size: var(--f-h3);
  font-weight: 600;
  margin: 0 0 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(219, 208, 188, .14);
}
#fc-h3 .fc-ab-col--si h3 { border-bottom-color: rgba(201, 168, 76, .28); }
#fc-h3 .fc-ab-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 15px; }
#fc-h3 .fc-ab-col li {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 13px;
  align-items: start;
  color: rgba(244, 239, 230, .8);
  font-size: var(--f-body);
  line-height: 1.6;
}
#fc-h3 .fc-ab-col--no li { color: rgba(244, 239, 230, .66); }
#fc-h3 .fc-ab-mk { width: 16px; height: 16px; margin-top: 4px; }
#fc-h3 .fc-ab-col--no .fc-ab-mk { color: rgba(244, 239, 230, .5); }
@media (max-width: 760px) { #fc-h3 .fc-ab-frontera { grid-template-columns: 1fr; } }

/* ── 4 · QUIÉN CONTESTA ──────────────────────────────────────────────────── */
#fc-h3#fc-h3 .fc-ab-quien {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
#fc-h3 .fc-ab-quien-txt p { color: var(--prosa); font-size: var(--f-body); line-height: 1.66; margin: 0 0 14px; }
#fc-h3 .fc-ab-quien-txt h2 { margin-bottom: 18px; }
#fc-h3 .fc-ab-mail {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
#fc-h3 .fc-ab-mail span { font-size: var(--f-cap); color: var(--tenue); }

/* El hueco de la marca en relieve. Recorta 1:1 con cover, así que la imagen
   TIENE que venir cuadrada y con la hoja llenando el encuadre. */
#fc-h3 .fc-ab-quien-fig {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r);
}
#fc-h3 .fc-ab-quien-fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 860px) {
  #fc-h3#fc-h3 .fc-ab-quien { grid-template-columns: 1fr; }
  #fc-h3 .fc-ab-quien-fig { max-width: 280px; margin-inline: auto; }
}

/* ── 5 · CIERRE ──────────────────────────────────────────────────────────── */
#fc-h3 .fc-ab-cta { margin-top: clamp(22px, 2.4vw, 32px); }
#fc-h3 .fc-ab-redes {
  margin-top: clamp(26px, 3vw, 38px);
  display: flex;
  justify-content: center;
  gap: 16px;
}
#fc-h3 .fc-ab-redes a {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--filete);
  border-radius: 50%;
  color: var(--navy);
  transition: border-color 200ms var(--sal), color 200ms var(--sal);
}
#fc-h3 .fc-ab-redes svg { width: 19px; height: 19px; }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-ab-redes a:hover { border-color: var(--navy); }
}

/* ── MOVIMIENTO REDUCIDO ─────────────────────────────────────────────────
   ⚠️ SE ATENÚA, NO SE APAGA. El trazo del sello ES la idea de la sección: si
   se corta, queda un dibujo quieto que no dice nada. Se acorta y se le quita
   el escalonado, que es lo que molesta. */
@media (prefers-reduced-motion: reduce) {
  #fc-h3 .fc-ab-sello-a,
  #fc-h3 .fc-ab-sello-b  { animation-duration: 260ms; animation-delay: 0ms; }
  #fc-h3 .fc-ab-sello-eq { animation-duration: 200ms; animation-delay: 260ms; }
  #fc-h3 .fc-ab-redes a  { transition-duration: 120ms; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS  (/how-it-works/)  ·  fc-hw-*
   ═══════════════════════════════════════════════════════════════════════════
   Mismo criterio que fc-h3-pr-* y fc-ab-*: acá sólo vive lo que la página no
   puede heredar. Bandas, tipografía, botones, eyebrow, lede y revelado por
   scroll vienen del sistema y NO se redefinen.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LOS TRES PASOS ──────────────────────────────────────────────────────── */
/* <ol> de verdad: el orden es información. El contador se dibuja aparte para
   poder maquetarlo sobre el disco. */
#fc-h3 .fc-hw-pasos {
  list-style: none;
  counter-reset: fchw;
  margin: clamp(32px, 3.6vw, 52px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 2.8vw, 44px);
}
#fc-h3 .fc-hw-paso {
  counter-increment: fchw;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
#fc-h3 .fc-hw-paso-fig {
  width: 64px; height: 64px;
  display: grid; place-items: center;
  color: var(--navy);
  border: 1px solid var(--filete);
  border-radius: 50%;
  position: relative;
  background: #fff;
}
#fc-h3 .fc-hw-paso-fig svg { width: 35px; height: 35px; }
/* El número va en el borde del disco, en oro. El oro NUNCA es clickeable en
   este sistema y acá tampoco lo es: es una marca de orden, no un enlace. */
#fc-h3 .fc-hw-paso-fig::after {
  content: counter(fchw);
  position: absolute;
  right: -5px; bottom: -3px;
  width: 23px; height: 23px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--oro);
  color: var(--navy);
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
#fc-h3 .fc-hw-paso-txt { display: block; }
#fc-h3 .fc-hw-paso-txt b {
  display: block;
  font-size: var(--f-h3);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 8px;
}
#fc-h3 .fc-hw-paso-txt span { color: var(--prosa); font-size: var(--f-body); line-height: 1.62; }
@media (max-width: 860px) { #fc-h3 .fc-hw-pasos { grid-template-columns: 1fr; gap: 28px; } }

/* La nota al pie de los pasos: manda a las dos páginas que sí tienen el
   detalle. Es una nota, no una sección, y se ve como tal. */
#fc-h3 .fc-hw-nota {
  margin: clamp(30px, 3.4vw, 46px) 0 0;
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid var(--filete2);
  color: var(--tenue);
  font-size: var(--f-cap);
  line-height: 1.7;
  text-align: center;
}

/* ── QUÉ RECIBÍS Y CUÁNDO ────────────────────────────────────────────────── */
#fc-h3 .fc-hw-dos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  margin-top: clamp(30px, 3.4vw, 48px);
}
#fc-h3 .fc-hw-caja {
  background: var(--papel3);
  border: 1px solid var(--filete2);
  border-radius: var(--r);
  padding: clamp(26px, 2.8vw, 40px);
}
#fc-h3 .fc-hw-caja h3 { font-size: var(--f-h3); font-weight: 600; margin: 0; color: var(--tinta); }
#fc-h3 .fc-hw-caja p { margin: 0; color: var(--prosa); font-size: var(--f-body); line-height: 1.62; }

/* El plazo es el dato que la persona vino a buscar: va grande y solo, no
   escondido en medio del párrafo.

   ⚠️ DOBLE ID + !important EN TAMAÑO Y COLOR, Y NO SE PUEDE EVITAR.
   home-v2.css trae una regla base que fuerza TODO párrafo dentro de #fc-h3:

       #fc-h3#fc-h3 p, #fc-h3#fc-h3 li, … {
         font-size: var(--f-body) !important; color: var(--prosa) !important }

   Está puesta para ganarle a los !important de Astra, y como es !important no
   hay especificidad que la venza — el primer intento de arreglar esto subiendo
   el selector a dos clases falló por eso. Se le gana con la misma arma: doble
   id y !important, y sólo en las dos propiedades que la base pisa. El resto va
   normal.

   Ninguna otra página había chocado con esto porque ninguna había intentado
   agrandar un <p>. */
#fc-h3#fc-h3 .fc-hw-caja .fc-hw-plazo {
  font-size: var(--f-h2b) !important;
  color: var(--oro-osc) !important;
}
#fc-h3 .fc-hw-caja .fc-hw-plazo {
  margin: 6px 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--filete2);
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 1.15;
}
@media (max-width: 760px) { #fc-h3 .fc-hw-dos { grid-template-columns: 1fr; } }

/* ── SI NO ESTÁ BIEN (banda navy) ────────────────────────────────────────── */
/* La banda sólo pinta el fondo: el color del texto se declara acá, explícito,
   en vez de confiar en herencia. */
#fc-h3 .fc-hw-gar h2 { color: var(--papel3); }
#fc-h3 .fc-hw-gar .fc-h3-lede { color: rgba(244, 239, 230, .82); }
#fc-h3 .fc-hw-gar .fc-h3-lede strong { color: var(--papel3); font-weight: 600; }

/* ── CIERRE ──────────────────────────────────────────────────────────────── */
#fc-h3 .fc-hw-cta { margin-top: clamp(22px, 2.4vw, 32px); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA TABLA DEL REGISTER EN TELÉFONO
   ═══════════════════════════════════════════════════════════════════════════
   ⚠️ EL STICKY YA FUNCIONABA. El problema medido a 390px era otro: la columna
   fija ocupaba 271px de los 350 visibles, dejando 79px libres — y la columna de
   datos más angosta mide 105. No entraba NI UNA entera, así que se podía
   desplazar la tabla y aun así no leer qué contenía ninguna columna.

   La solución no es tocar el sticky sino ACHICAR la columna fija: con ~146px se
   liberan ~204px, entra una columna de datos completa y asoma parte de la
   siguiente — que además es la señal de que hay más para el costado.

   Las etiquetas de fila pasan a dos o tres renglones. Es el precio correcto:
   una etiqueta que envuelve se lee; una columna de datos cortada, no.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  /* ⚠️ `table-layout: fixed` NO ES OPCIONAL ACÁ. Con el reparto automático el
     navegador trata `max-width` en una celda como una sugerencia y la ensancha
     igual: medido, la columna fija se iba a 199px con un max-width de 146 y la
     columna «Lifetime» seguía sin entrar por 28px. Con el reparto fijo, los
     anchos de abajo se respetan exactos. */
  #fc-h3 .fc-h3-pr-tabla { min-width: 610px; table-layout: fixed; }

  /* 150 + 3×153 = 609. Visible ~350 − 150 = 200: entra una columna entera de
     153 y asoman 47px de la siguiente, que es la señal de que hay más. */
  #fc-h3 .fc-h3-pr-tabla th:not(.fc-h3-pr-fila),
  #fc-h3 .fc-h3-pr-tabla td:not(.fc-h3-pr-fila) { width: 153px; }

  #fc-h3 .fc-h3-pr-tabla .fc-h3-pr-fila {
    width: 150px;
    min-width: 150px;
    padding-left: 12px;
    padding-right: 10px;
    font-size: 12.5px;
    line-height: 1.34;
  }
  #fc-h3 .fc-h3-pr-tabla th,
  #fc-h3 .fc-h3-pr-tabla td { padding-left: 9px; padding-right: 9px; }

  /* El nombre del plan y su cinta también se aprietan, para que la cabecera no
     fuerce las columnas a ser más anchas que su contenido. */
  #fc-h3 .fc-h3-pr-plan  { font-size: 16px; }
  #fc-h3 .fc-h3-pr-cinta { font-size: 9px; letter-spacing: .06em; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL CUADRO DEL FAMILY REGISTER — precios, grupos y botones
   ═══════════════════════════════════════════════════════════════════════════
   Se agregó sobre el bloque fc-h3-pr-* que ya existía: acá sólo vive lo nuevo
   (precio y nota bajo el nombre del plan, filas de grupo, y el pie con los
   «Learn more»).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── LA CINTA, SIEMPRE EN SU RENGLÓN ─────────────────────────────────────── */
/* Sólo dos de los tres planes llevan cinta. Sin reservar el hueco, la columna
   sin cinta arrancaba un renglón más arriba y los tres nombres y los tres
   precios quedaban desalineados entre sí.

   ⚠️ `visibility:hidden` y NO `display:none`: lo primero deja el cajón ocupado,
   que es justo lo que hace falta; lo segundo lo saca del flujo y devuelve el
   problema.

   ⚠️ `nowrap` tampoco es decorativo: si «LESS THAN ONE VOLUME» envolviera a dos
   renglones y «BEST VALUE» se quedara en uno, volverían a desalinearse por otro
   camino. A 153px de columna en teléfono entra a 8.5px; medido, no a ojo. */
#fc-h3 .fc-h3-pr-tabla thead .fc-h3-pr-cinta {
  display: block;
  white-space: nowrap;
  margin-bottom: 6px;
}
#fc-h3 .fc-h3-pr-tabla thead .fc-h3-pr-cinta--hueco { visibility: hidden; }

/* ⚠️ Y ARRIBA, NO AL MEDIO. Reservar la cinta alinea los tres en escritorio,
   pero en teléfono la columna es de 153px y la nota de The House («$83.25 a
   month, paid once a year») pasa a dos renglones. Con las celdas centradas
   verticalmente ese renglón de más levantaba TODA la columna 7px y volvían a
   quedar desparejos. Anclando arriba, el largo de la nota deja de mover el
   nombre y el precio.
   La primera columna («What you get») queda fuera: ahí el centrado es correcto,
   es una etiqueta sola contra una cabecera alta. */
#fc-h3 .fc-h3-pr-tabla thead th:not(.fc-h3-pr-fila) { vertical-align: top; }
@media (max-width: 700px) {
  #fc-h3 .fc-h3-pr-tabla thead .fc-h3-pr-cinta { font-size: 8.5px; letter-spacing: .04em; }
}

/* ── EL PRECIO EN LA CABECERA ────────────────────────────────────────────── */
/* El precio es lo que la persona vino a mirar: va grande y en oro, y debajo el
   período y la nota, en chico, para que la cifra no compita con nada. */
#fc-h3#fc-h3 .fc-h3-pr-tabla .fc-h3-pr-plan-p {
  display: block;
  font-size: clamp(24px, 1.5vw + 18px, 34px) !important;
  font-weight: 300;
  color: var(--oro) !important;
  letter-spacing: -.015em;
  line-height: 1.1;
  margin-top: 6px;
}
#fc-h3 .fc-h3-pr-plan-per,
#fc-h3 .fc-h3-pr-plan-nota { display: block; line-height: 1.35; }
#fc-h3 .fc-h3-pr-plan-per {
  font-size: 11.5px;
  color: rgba(244, 239, 230, .6);
  margin-top: 3px;
}
#fc-h3 .fc-h3-pr-plan-nota {
  font-size: 11px;
  color: rgba(201, 168, 76, .78);
  margin-top: 7px;
}

/* ── EL PIE CON LOS BOTONES ──────────────────────────────────────────────── */
#fc-h3 .fc-h3-pr-tabla tfoot td {
  padding-top: 22px;
  padding-bottom: 6px;
  border-bottom: 0;
}
#fc-h3 .fc-h3-pr-mas {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--pill);
  border: 1px solid rgba(201, 168, 76, .55);
  color: var(--oro);
  text-decoration: none;
  font-size: var(--f-cap);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: background-color 200ms var(--sal), border-color 200ms var(--sal);
}
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-h3-pr-mas:hover {
    background: rgba(201, 168, 76, .13);
    border-color: var(--oro);
  }
}
/* ⚠️ El oro NUNCA es fondo de botón en este sistema —esa plaza es del lacre— y
   acá tampoco lo es: el botón es un contorno dorado sobre navy. Sobre la banda
   oscura el lacre no contrasta y el contorno sí. */

/* ── TELÉFONO ────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  #fc-h3#fc-h3 .fc-h3-pr-tabla .fc-h3-pr-plan-p { font-size: 21px !important; }
  #fc-h3 .fc-h3-pr-plan-per  { font-size: 10.5px; }
  #fc-h3 .fc-h3-pr-plan-nota { font-size: 10px; }
  #fc-h3 .fc-h3-pr-mas { padding: 9px 12px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PÁGINAS DE PLAN DEL REGISTER  (/family-register/…)  ·  fc-rp-*
   ═══════════════════════════════════════════════════════════════════════════
   UNA SOLA PANTALLA: migaja · título · un párrafo · precio · botón · tildes,
   con la imagen a la derecha. La versión de seis secciones se descartó por
   larga. Si aparece una clase nueva acá que no sea de esa lista, algo se está
   volviendo a alargar.

   Mismo criterio que fc-h3-pr-*, fc-ab-* y fc-hw-*: vive SÓLO lo que la página
   no puede heredar. Bandas, tipografía, botones, eyebrow y revelado por scroll
   vienen del sistema y NO se redefinen.

   ⚠️ LA REGLA BASE QUE HAY QUE VENCER, Y CÓMO. home-v2.css fuerza:

       #fc-h3#fc-h3 p, #fc-h3#fc-h3 li, #fc-h3#fc-h3 dd, #fc-h3#fc-h3 dt {
         font-size: … !important; line-height: … !important; color: … !important }

   Está para ganarle a los !important de Astra, y contra un !important no hay
   especificidad que sirva. Cada vez que acá se cambia tamaño, interlínea o
   color de un p/li hace falta la misma arma: doble id y !important, y sólo en
   esas propiedades. Todo lo demás va normal.

   ⚠️ El oro NUNCA es fondo de botón en este sistema —esa plaza es del lacre— y
   sobre banda clara el oro claro no contrasta: ahí va --oro-osc.
   ══════════════════════════════════════════════════════════════════════════ */

#fc-h3 .fc-rp-cab {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(30px, 4vw, 72px);
  align-items: start;
}

/* ── LA MIGAJA ───────────────────────────────────────────────────────────── */
/* Hace el trabajo que en la primera versión hacía una sección entera al pie:
   volver a los tres planes juntos. Una línea. */
#fc-h3#fc-h3 .fc-rp-miga {
  font-size: var(--f-cap) !important;
  color: var(--tenue) !important;
  margin-bottom: clamp(14px, 1.6vw, 20px) !important;
}
#fc-h3 .fc-rp-miga a { color: var(--oro-osc); text-decoration: none; }
#fc-h3 .fc-rp-miga span { color: var(--filete); margin-left: 3px; }
@media (hover: hover) and (pointer: fine) {
  #fc-h3 .fc-rp-miga a:hover { text-decoration: underline; text-underline-offset: 3px; }
}

/* ── EL PÁRRAFO ──────────────────────────────────────────────────────────── */
/* Un poco mayor que el cuerpo base, porque es el único párrafo de la página.
   Sin `--f-lede` para no competir en peso con el precio, que es lo que manda. */
#fc-h3#fc-h3 .fc-rp-desc {
  font-size: clamp(15.5px, .35vw + 14px, 17.5px) !important;
  line-height: 1.68 !important;
  margin-top: clamp(16px, 1.8vw, 22px) !important;
  max-width: 60ch;
}
#fc-h3 .fc-rp-desc a { color: var(--oro-osc); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ── EL PRECIO ───────────────────────────────────────────────────────────── */
/* La cifra grande y el período al lado, en la línea de base — no debajo. Es la
   forma en la que se lee un precio de suscripción de un vistazo. */
#fc-h3 .fc-rp-precio {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: clamp(26px, 3vw, 40px) !important;
}
#fc-h3 .fc-rp-precio b {
  font-size: clamp(36px, 2.4vw + 25px, 54px);
  line-height: 1.05;
  color: var(--oro-osc);
  font-weight: 300;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
#fc-h3 .fc-rp-precio span { font-size: var(--f-body); color: var(--prosa); }
/* La segunda cifra (el equivalente mensual del anual) va separada por un filete
   vertical: es OTRA lectura del mismo precio, no un precio distinto. */
#fc-h3 .fc-rp-precio i {
  font-style: normal;
  font-size: var(--f-cap);
  color: var(--tenue);
  padding-left: 12px;
  border-left: 1px solid var(--filete2);
  font-variant-numeric: tabular-nums;
}
#fc-h3#fc-h3 .fc-rp-cobro {
  font-size: 12px !important;
  color: var(--tenue) !important;
  margin-top: 6px !important;
}

/* ── EL BOTÓN ────────────────────────────────────────────────────────────── */
/* ⚠️ Puede venir como <a> o como <button> según haya destino o no. El sistema
   estiliza `.fc-h3-btn` para <a>; un <button> arrastra el reset del navegador
   (font heredada no, borde sí, ancho automático distinto), así que las tres
   propiedades que difieren se declaran acá para que se vean idénticos. */
#fc-h3 .fc-rp-cta { margin-top: clamp(20px, 2.2vw, 28px); }
#fc-h3 button.fc-h3-btn {
  font: inherit;
  border: 0;
  cursor: pointer;
  appearance: none;
}

/* ── LAS TILDES ──────────────────────────────────────────────────────────── */
#fc-h3 .fc-rp-lista {
  list-style: none;
  margin: clamp(28px, 3.2vw, 42px) 0 0;
  padding: clamp(24px, 2.6vw, 32px) 0 0;
  border-top: 1px solid var(--filete2);
  display: grid;
  gap: clamp(13px, 1.4vw, 17px);
  max-width: 58ch;
}
#fc-h3 .fc-rp-lista li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
#fc-h3 .fc-rp-lista svg {
  width: 20px; height: 20px;
  color: var(--oro-osc);
  /* El tilde se alinea con la primera línea del texto, no con el bloque: con
     dos renglones quedaba flotando al medio. */
  margin-top: 2px;
}
#fc-h3 .fc-rp-lista b { color: var(--tinta); font-weight: 600; }

/* ── EL PIE ──────────────────────────────────────────────────────────────── */
/* ⚠️ ESTA LÍNEA NO ES RELLENO Y SU REDACCIÓN NO ES LIBRE. El comprador de esta
   categoría está entrenado para desconfiar de un cargo que se repite, y tiene
   que seguir siendo cierta frente a lo que promete /pricing/: un volumen
   comprado es compra única con acceso de por vida, tenga o no tenga abono. */
#fc-h3#fc-h3 .fc-rp-pie {
  margin-top: clamp(24px, 2.6vw, 32px) !important;
  padding-top: clamp(18px, 2vw, 24px);
  border-top: 1px solid var(--filete2);
  font-size: var(--f-cap) !important;
  color: var(--tenue) !important;
  line-height: 1.65 !important;
  max-width: 58ch;
}
#fc-h3 .fc-rp-pie a { color: var(--oro-osc); }

/* ── LA ESCENA DE LA DERECHA: ACUARELA + IMAGEN ──────────────────────────── */
/* ⚠️ NO PONER `position: sticky` ACÁ. Estuvo y el owner lo rechazó: al bajar,
   la imagen viajaba con el scroll y terminaba al lado de la lista de tildes.
   Tiene que quedarse arriba, alineada con el título. Quien la ancla arriba es
   `align-items: start` del grid de .fc-rp-cab, no una regla propia. */
#fc-h3 .fc-rp-fig { position: relative; }

/* La acuarela va ABSOLUTA detrás y la imagen en el flujo: así el alto de la
   escena lo decide la imagen. Al revés, una imagen más alta que el fondo se
   salía por arriba y por abajo. */
/* ⚠️ PROPORCIÓN FIJA, Y NO ES UN DETALLE. Las piezas del collage se colocan en
   % de esta caja: con el alto libre, cada ancho de pantalla daría una caja de
   otra forma y la composición se desarmaría sola. 440/380 es la misma caja del
   viewBox de la pintura, así que las dos escalan juntas. */
#fc-h3 .fc-rp-esc {
  position: relative;
  aspect-ratio: 440 / 380;
}
#fc-h3 .fc-rp-agua {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Detrás de la imagen, y sin capturar el cursor: es fondo, no contenido. */
  z-index: 0;
  pointer-events: none;
}
/* ── LAS PIEZAS DEL COLLAGE ──────────────────────────────────────────────── */
/* ⚠️ SIN z-index: el apilado sale del orden del array en register-data.php. Con
   z-index habría dos listas que mantener coherentes y basta reordenar una para
   que dejen de coincidir.

   ⚠️ `left`/`top` son el CENTRO de la pieza: de ahí el translate(-50%,-50%). El
   giro se aplica DESPUÉS del centrado, en la misma transform, porque una
   rotación sobre una esquina desplaza la pieza además de girarla. */
#fc-h3 .fc-rp-pz {
  position: absolute;
  transform: translate(-50%, -50%) rotate(var(--giro, 0deg));
  height: auto;
  /* La sombra las separa entre sí. Va con `drop-shadow` y no con `box-shadow`:
     las piezas son PNG recortados, y box-shadow le dibujaría un rectángulo a
     una hoja rota. */
  filter: drop-shadow(0 5px 12px rgba(17, 43, 61, .17));
}
/* La capa de atrás: llena el hueco de arriba a la derecha y da profundidad sin
   sumar un objeto más que mirar. Sin sombra — una sombra a esa opacidad se ve
   como suciedad. */
#fc-h3 .fc-rp-pz--fondo { filter: none; }

/* ── TELÉFONO ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  #fc-h3 .fc-rp-cab { grid-template-columns: 1fr; gap: clamp(26px, 5vw, 38px); }
  /* La imagen va DEBAJO del título y el precio, no arriba de todo: en una
     columna, empujar el h1 fuera de la primera pantalla por una foto es perder
     lo único que la persona vino a leer. Se coloca al final. */
  #fc-h3 .fc-rp-cab .fc-rp-txt { order: 1; }
  #fc-h3 .fc-rp-cab .fc-rp-fig { order: 2; }
  /* La sombra se achica con la escena: a 350px de ancho, 12px de difuminado son
     proporcionalmente el triple y ensucian los recortes. */
  #fc-h3 .fc-rp-pz { filter: drop-shadow(0 3px 7px rgba(17, 43, 61, .16)); }
}