/* ============================================================
   ANTUWALUNG — Sistema editorial (V1)
   Direccion de arte derivada del catalogo grafico AW.
   Paper / Ink / Secondary / Blood / Earth.
   ============================================================ */

/* ---------- Reset minimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }   /* respetar el atributo aunque el componente use display:flex */

/* ---------- Tokens ---------- */
:root{
  /* Color */
  --paper:      #f4f1ea;   /* blanco ligeramente calido */
  --paper-warm: #efeae0;   /* variante para paneles */
  --paper-lite: #f8f6f1;   /* aún más claro — fondo sutil de Campaña */
  --panel:      #e7e1d6;   /* placeholder / superficies suaves */
  --ink:        #211f1c;   /* tinta ~88% */
  --ink-soft:   #35322d;   /* display grande, un punto mas suave */
  --ink-2:      #7c7568;   /* secondary ink ~50% */
  --line:       #d9d3c6;   /* hairlines */
  --charcoal:   #272624;   /* negro carbón — única gran superficie de color (acción) */
  --gold:       #9d7e44;   /* dorado/bronce apagado — premios (texto) */
  --gold-btn:   #a98d55;   /* dorado/bronce del botón SELECCIONAR (único botón dorado) */
  --earth:      #9a8c74;   /* taupe / tierra */
  /* Rojo/colorado ELIMINADO como color de marca. El token se conserva
     apuntando a INK para compatibilidad; el énfasis ahora es por peso. */
  --blood:      #211f1c;

  /* Medida */
  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 72px);

  /* Tipografia */
  --font: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .7s;
}

/* ---------- Base ---------- */
html, body { background: var(--paper); }
body{
  font-family: var(--font);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.wrap{ max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.wrap--narrow{ max-width: 760px; }

/* ---------- Tipografia editorial ---------- */
.eyebrow{
  font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-2); font-weight: 500;
}
.display{
  font-weight: 400; line-height: .98; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-soft);
}
.meta{ font-size: 15.5px; line-height:1.5; color: var(--ink-2); letter-spacing: .01em; }

/* Convencion de nombre AW: prefijo/abreviacion liviano + NOMBRE PROPIO con mayor peso.
   El contraste vive en el sistema (.pfx=secundario / .nm=principal); una sola identidad. */
.awn{ text-transform: uppercase; }
.awn .pfx{ font-weight: 400; letter-spacing: .12em; }
.awn .nm{ font-weight: 600; letter-spacing: .08em; }
.awn--display .pfx{ letter-spacing: .16em; opacity: .92; }

/* Enlace editorial con flecha */
.arrow{ font-weight: 400; }

/* ---------- Header discreto ---------- */
.site-header{
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 18px var(--gutter);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(120%) blur(2px);
  transform: translateY(-101%);
  transition: transform .55s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-visible{ transform: translateY(0); border-bottom-color: var(--line); }
.site-header .h-back{ justify-self: start; font-size: 20px; line-height: 1; color: var(--ink); opacity: .7; transition: opacity .3s; }
.site-header .h-back:hover{ opacity: 1; }
.site-header .h-home{
  justify-self: center; font-size: 12.5px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink); font-weight: 500;
}
.site-header .h-menu{ justify-self: end; display:flex; flex-direction:column; gap:4px; padding:6px; opacity:.8; transition:opacity .3s;}
.site-header .h-menu:hover{ opacity:1; }
.site-header .h-menu span{ display:block; width:22px; height:1.4px; background: var(--ink); }
/* Navegación desktop: oculta en mobile (se usa la hamburguesa) */
.h-nav, .h-util{ display:none; }

/* ---------- Navegación DESKTOP visible (no hamburguesa) ----------
   El umbral NO es un "mobile = X px" arbitrario: sale del ancho que realmente necesitan
   marca + navegación + utilidades + gaps + márgenes para convivir sin acercarse. Medido en el
   header actual: ~1137px. Por debajo de 1180px se pasa a hamburguesa ANTES de que el menú se
   comprima contra el logotipo. No se quita ningún destino para hacerlo entrar. */
@media (min-width: 1180px){
  .site-header{
    display:flex; align-items:center; gap: clamp(22px,3vw,48px);
    transform:none;                                  /* siempre visible en desktop */
    /* El FONDO sigue ocupando todo el ancho, pero el CONTENIDO se alinea con el mismo sistema
       horizontal que .wrap (max-width + gutter): la marca y la navegación quedan sobre la misma
       grilla que el contenido editorial, en lugar de irse a los bordes del viewport.
       El max() resuelve el caso en que el viewport es más angosto que --maxw. */
    padding-block: 19px;
    padding-inline: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
  }
  .site-header .h-back, .site-header .h-menu{ display:none; }
  .site-header .h-home{ justify-self:auto; margin-right:auto; }   /* marca a la izquierda */

  /* Primarias: jerarquía principal, con subrayado editorial en hover/current */
  .h-nav{ display:flex; align-items:center; gap: clamp(18px,2.1vw,34px); }
  .h-nav a{ position:relative; padding:4px 0; font-size:12px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink); font-weight:500; opacity:.82;
    transition: opacity .3s var(--ease), color .3s var(--ease); }
  .h-nav a::after{ content:""; position:absolute; left:0; right:100%; bottom:-1px; height:1px;
    background: var(--ink); opacity:.45; transition: right .38s var(--ease); }
  .h-nav a:hover{ opacity:1; }
  .h-nav a:hover::after{ right:0; }
  .h-nav a[aria-current="page"]{ opacity:1; }
  .h-nav a[aria-current="page"]::after{ right:0; opacity:.3; }
  .h-nav a[data-soon]{ opacity:.4; }
  .h-nav a[data-soon]:hover::after{ right:100%; }    /* sin subrayado si no está lista */

  /* Utilitarias: peso secundario, más discretas */
  .h-util{ display:flex; align-items:center; gap: clamp(14px,1.5vw,22px); }
  .h-util a{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
    transition: color .3s var(--ease); }
  .h-util a:hover{ color:var(--ink); }
  .h-util a[data-soon]{ opacity:.5; }

  /* Idioma: control cerrado = sólo "LANG"; al click, dropdown sobrio (bandera + nombre) */
  .h-lang{ position:relative; margin-left: clamp(2px,.4vw,8px);
    padding-left: clamp(12px,1.3vw,20px); border-left:1px solid var(--line); }
  .h-lang__btn{ display:inline-flex; align-items:center; gap:5px; font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ink-2); cursor:pointer; transition: color .3s var(--ease); }
  .h-lang__btn:hover{ color:var(--ink); }
  .h-lang__chev{ display:inline-block; transform:rotate(90deg); font-size:13px; transition:transform .3s var(--ease); }
  .h-lang.is-open .h-lang__btn{ color:var(--ink); }
  .h-lang.is-open .h-lang__chev{ transform:rotate(-90deg); }
  .h-lang__list{ display:none; list-style:none; margin:0; padding:8px 0; position:absolute; top:calc(100% + 12px); right:0; min-width:170px; background:var(--paper); border:1px solid var(--line); z-index:70; }
  .h-lang.is-open .h-lang__list{ display:block; }
  .h-lang__list button{ display:flex; align-items:center; gap:10px; width:100%; text-align:left;
    padding:9px 18px; font-size:13.5px; color:var(--ink-2); transition:color .25s, background .25s; }
  .h-lang__list button:hover{ color:var(--ink); background:var(--paper-lite); }
  .h-lang__list .is-current{ color:var(--ink); }
  .h-lang__flag{ font-size:15px; line-height:1; }

  /* Páginas sin hero full-bleed: reservar el alto del header fijo */
  body:not([data-page="home"]):not([data-page="ficha"]){ padding-top: 72px; }
}

/* ---------- Menu overlay ---------- */
.menu{
  position: fixed; inset: 0; z-index: 70; background: var(--paper);
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s;
  display: flex; flex-direction: column; justify-content: center;
}
.menu.is-open{ opacity: 1; visibility: visible; }
.menu__close{ position: absolute; top: 16px; right: var(--gutter); font-size: 26px; line-height:1; color: var(--ink-2); }
.menu__inner{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding: clamp(70px,13vh,130px) var(--gutter) clamp(120px,22vh,220px); }
/* Navegación principal (editorial) */
.menu__primary{ list-style:none; margin:0; padding:0; }
.menu__pi{ overflow:hidden; }
.menu__primary a{ display:inline-block; padding: clamp(2px,.55vh,7px) 0;
  font-size: clamp(26px,4.2vw,48px); font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft);
  transform: translateY(108%); transition: transform .6s var(--ease), color .3s; }
.menu.is-open .menu__pi a{ transform: translateY(0); }
.menu__primary a:hover{ color: var(--blood); }
.menu__primary a[data-soon]{ color: var(--ink-2); }
.menu__pi:nth-child(1) a{ transition-delay:.05s; } .menu__pi:nth-child(2) a{ transition-delay:.10s; }
.menu__pi:nth-child(3) a{ transition-delay:.15s; } .menu__pi:nth-child(4) a{ transition-delay:.20s; }
.menu__pi:nth-child(5) a{ transition-delay:.25s; }

/* Tira utilitaria (servicio) — no protagonista */
.menu__meta{ position:absolute; left:var(--gutter); right:var(--gutter); bottom: clamp(26px,5vh,48px);
  display:flex; align-items:flex-end; justify-content:space-between; gap: clamp(16px,3vw,40px); flex-wrap:wrap; }
.menu__util{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: clamp(16px,2.4vw,34px); }
.menu__util a{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); opacity:.82; transition:.3s; }
.menu__util a:hover{ opacity:1; color:var(--blood); }
.menu__util a[data-soon]{ opacity:.4; }

/* Selector de idioma */
.menu__lang{ position:relative; }
.menu__lang-btn{ display:inline-flex; align-items:center; gap:7px; font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); }
.mlang__chev{ display:inline-block; transform:rotate(90deg); font-size:14px; color:var(--ink-2); transition:transform .3s var(--ease); }
.menu__lang.is-open .mlang__chev{ transform:rotate(-90deg); }
.menu__lang-list{ list-style:none; margin:0; padding:12px 0 4px; position:absolute; bottom:100%; left:0;
  display:none; flex-direction:column; gap:10px; }
.menu__lang.is-open .menu__lang-list{ display:flex; }
.menu__lang-list button{ display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink-2); transition:color .25s; }
.menu__lang-list button:hover{ color:var(--ink); }
.menu__lang-list .is-current{ color:var(--ink); }
.mlang__flag{ font-size:16px; line-height:1; }
.menu__ig{ font-size:12px; letter-spacing:.12em; color:var(--ink-2); transition:color .3s; }
.menu__ig:hover{ color:var(--blood); }

@media (max-width: 640px){
  .menu__inner{ justify-content:flex-start; padding-top: clamp(96px,16vh,150px); }
  .menu__meta{ flex-direction:column; align-items:flex-start; gap:18px; }
}

/* ---------- Reveal (microanimacion discreta) ---------- */
.reveal{ opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.reveal.is-in{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .site-header{ transition:none; }
  .menu, .menu__list a{ transition:none; }
}

/* ============================================================
   PORTADA / HOME
   ============================================================ */
.cover{ min-height: 100svh; display: grid; grid-template-rows: 1fr auto 1fr; }
.cover__mark{ align-self: end; justify-self: center; text-align: center; padding-top: 12vh; }
.cover__mark img{ width: clamp(150px, 22vw, 280px); height: auto; margin: 0 auto 26px; }
.cover__word{ font-size: clamp(15px, 2.4vw, 22px); letter-spacing: .5em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; padding-left: .5em; }
.cover__sub{ margin-top: 12px; font-size: 11px; letter-spacing: .42em; text-transform: uppercase; color: var(--ink-2); }
.cover__foot{ align-self: end; justify-self: center; padding-bottom: 66px; text-align:center; }
.cover__tag{ font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--ink-2); }
/* El rótulo de portada y el título del hero salen del ADM; cuando tienen destino son enlaces y
   deben leerse como tales, sin romper la tipografía del sistema. */
.cover__tag-link{ color: inherit; }
.cover__tag-link:hover{ color: var(--ink); }
.hero-link{ text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px;
  text-decoration-color: var(--line); }
.hero-link:hover{ text-decoration-color: currentColor; }
/* Indicador de scroll: doble chevron finísimo, editorial, sin cápsula ni botón pesado.
   Flotación lenta y silenciosa; se detiene con prefers-reduced-motion. Clickeable (smooth scroll). */
.cover__scroll{ margin-top: 18px; display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:38px; padding:0; border:0; background:none; cursor:pointer; color: var(--ink-2);
  opacity:.62; -webkit-tap-highlight-color: transparent; transition: opacity .5s var(--ease);
  animation: scrollfloat 2.8s var(--ease) infinite; }
.cover__scroll:hover{ opacity:1; }
.cover__scroll:focus-visible{ outline:1px solid var(--line); outline-offset:6px; border-radius:2px; }
.cover__scroll svg{ display:block; }
@keyframes scrollfloat{ 0%,100%{ transform: translateY(0); opacity:.5; } 50%{ transform: translateY(5px); opacity:.85; } }
@media (prefers-reduced-motion: reduce){ .cover__scroll{ animation: none; opacity:.62; } }
@keyframes scrollpulse{ 0%,100%{ transform: scaleY(.5); opacity:.25; } 50%{ transform: scaleY(1); opacity:.6; } }

/* Fotografia protagonista */
.plate{ padding: clamp(40px,10vh,140px) 0; }
.plate__img{ width: 100%; max-width: 640px; margin-inline: auto; }
.plate__img img{ width: 100%; height: auto; }
.plate__cap{ max-width: 34ch; margin-inline: auto; }
/* Texto introductorio — legible en iPhone, elegante, ancho de lectura controlado */
.plate__cap{ margin-top: 28px; text-align: center; font-size: clamp(17px,2vw,20px); line-height: 1.55; color: var(--ink-soft); letter-spacing:.005em; }
.plate--bleed{ padding: 0; }

/* EMBRIONES A LA CARTA — sección editorial del Home (foto + título + institucional + modalidad + acceso) */
#embriones{ scroll-margin-top: clamp(64px,10vh,96px); }   /* offset del header fijo al saltar al ancla */
.plate__body{ max-width: 46ch; margin-inline:auto; text-align:center; margin-top: clamp(26px,4.5vh,44px); }
.plate__title{ font-size: clamp(23px,3.2vw,38px); font-weight:400; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-soft); }
.plate__lead{ margin-top: clamp(18px,3vh,28px); font-size: clamp(16px,1.9vw,19px); line-height:1.6; color:var(--ink-soft); letter-spacing:.005em; }
.plate__mode{ max-width: 42ch; margin: clamp(22px,3.4vh,32px) auto 0; font-size:15px; line-height:1.72; color:var(--ink-2); }
.plate__access{ margin-top: clamp(18px,2.6vh,28px); font-size:13px; line-height:1.62; color:var(--ink-2); }
/* Placa Embriones — accesos: DONANTES | PADRILLOS y, debajo centrado, CREAR CUENTA (según sesión).
   Botones subordinados y contenidos; en mobile se apilan sin desbordar. */
.plate__actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top: clamp(28px,4.5vh,40px); }
.plate__actions .btn-line{ min-height:0; padding:14px 30px; font-size:12px; }
.plate__cta{ margin-top:16px; display:flex; justify-content:center; }
.plate__cta .btn-gold{ margin-top:0; }
@media(max-width:520px){ .plate__actions{ flex-direction:column; align-items:stretch; } .plate__actions .btn-line{ width:100%; } .plate__cta .btn-gold{ width:100%; } }
/* Link editorial en línea — subrayado fino + peso sutil, hover sobrio; nunca botón/CTA */
.ed-link{ color:var(--ink); font-weight:500; text-decoration:none; border-bottom:1px solid var(--line);
  padding-bottom:1px; transition: border-color .3s var(--ease), color .3s var(--ease); }
.ed-link:hover{ color:var(--ink); border-color:var(--ink); }

/* Accesos (indice editorial) */
.access{ padding: clamp(56px,10vh,120px) 0; }
.access__label{ margin-bottom: clamp(26px,5vh,52px); }
.access__list{ display: flex; flex-direction: column; }
.access__item{
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding: clamp(18px,3.4vh,34px) 0; border-top: 1px solid var(--line);
  color: var(--ink-soft);
}
.access__item:last-child{ border-bottom: 1px solid var(--line); }
.access__name{ font-size: clamp(26px, 4vw, 42px); font-weight: 400; letter-spacing: .06em; text-transform: uppercase; line-height:1; }
.access__arrow{ font-size: clamp(20px,3vw,30px); color: var(--ink-2); transition: transform .45s var(--ease), color .3s; }
.access__item:hover .access__arrow{ transform: translateX(10px); color: var(--blood); }
.access__item:hover .access__name{ color: var(--ink); }

/* ============================================================
   DONANTES — indice fotografico editorial
   ============================================================ */
.section-head{ padding: clamp(90px,12vh,140px) 0 clamp(28px,5vh,52px); }
.section-head__title{ font-size: clamp(34px,5vw,58px); }
.section-head__note{ margin-top: 18px; max-width: 46ch; }

.index-grid{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: clamp(18px,3vw,46px); row-gap: clamp(40px,7vh,84px);
  padding-bottom: clamp(80px,16vh,200px);
}
.dnt{ display: block; }
.dnt__frame{ position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--panel); }
.dnt__frame img{ width:100%; height:100%; object-fit: cover; transition: transform 1.1s var(--ease), filter .6s; filter: saturate(.96); }
.dnt:hover .dnt__frame img{ transform: scale(1.035); }
.dnt__num{ position:absolute; top:12px; left:13px; font-size:11px; letter-spacing:.2em; color: rgba(255,255,255,.82); mix-blend-mode: difference; }
.dnt__body{ padding-top: 16px; display:flex; flex-direction:column; gap:6px; }
.dnt__name{ font-size: clamp(19px,1.7vw,24px); }
.dnt__gen{ font-size: 14.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); }
.dnt__gen .x{ color: var(--earth); padding: 0 .35em; }
/* Disponibilidad comercial de la donante: discreta, sobria. Dorado puntual; cero en tono sobrio. */
.dnt__avail{ font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold,#a98d55); margin-top:2px; }
.dnt__avail--tbd{ color:var(--ink-2); }
.dnt__avail--none{ color:#8a4b3b; }

/* Placeholder editorial cuando la foto esta pendiente (no se sustituye por otro caballo) */
.dnt__frame--pending{ display:grid; place-items:center; background:
  repeating-linear-gradient(135deg, var(--panel) 0 18px, #e2dccf 18px 36px); }
.dnt__pending{ text-align:center; color: var(--ink-2); }
.dnt__pending .emblem{ width: 74px; opacity:.28; margin: 0 auto 12px; }
.dnt__pending .t{ font-size: 10.5px; letter-spacing:.24em; text-transform: uppercase; }

/* Nota de revision (flag de integridad) */
.flag{ display:inline-block; margin-top:2px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color: var(--blood); opacity:.9; }

/* ============================================================
   Pie
   ============================================================ */
.site-foot{ padding: clamp(48px,9vh,110px) 0; border-top: 1px solid var(--line); text-align:center; }
.site-foot .m{ font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--ink-2); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 700px){
  .index-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 16px; row-gap: clamp(30px,5vh,48px); }
  .dnt__frame{ aspect-ratio: 3/4; }
}
/* En teléfono, dos columnas dejaban tarjetas de 160px: miniaturas de desktop encogidas. Una sola
   columna a ancho completo, con proporción fotográfica editorial (4/5) y jerarquía clara
   foto → nombre → dato secundario. */
@media (max-width: 560px){
  .index-grid{ grid-template-columns: 1fr; row-gap: clamp(34px,5vh,52px); }
  .dnt__frame{ aspect-ratio: 4/5; }
  .dnt__name{ font-size: 22px; }
  .dnt__gen{ font-size: 12.5px; }
}
@media (max-width: 700px){
  .access__item{ padding: 22px 0; }
}
@media (max-width: 460px){
  body{ font-size: 16px; }
  .cover__word{ letter-spacing: .38em; }
}

/* ============================================================
   FICHA DE EJEMPLAR
   Impacto (hero) → Evidencia (destacada) → Profundidad (progenie)
   ============================================================ */

/* ---- Hero ---- */
.fhero{ position: relative; height: 84svh; max-height: 800px; min-height: 480px; overflow: hidden; }
.fhero__img{ position: absolute; inset: 0; }
.fhero__img img{ width: 100%; height: 100%; object-fit: cover; }
/* VELO DE LEGIBILIDAD. El texto del hero va sobre una fotografía que no elegimos: puede ser un
   cielo claro o un pelaje oscuro, y con una sola de las dos hipótesis el nombre desaparece. En vez
   de corregir foto por foto, el degradado se concentra DONDE está el texto —el tercio inferior—
   y deja la parte alta de la imagen casi intacta.
   Son dos paradas y no una: la de abajo asegura el contraste del pedigree, la del medio suaviza el
   corte para que no se lea como una caja negra apoyada sobre la foto. */
.fhero::after{ content:""; position:absolute; inset:auto 0 0 0; height:58%;
  background: linear-gradient(to bottom,
    rgba(24,20,16,0) 0%,
    rgba(24,20,16,.28) 46%,
    rgba(24,20,16,.62) 100%);
  pointer-events:none; }
.fhero__cap{ position:absolute; left:0; right:0; bottom: clamp(30px,7vh,70px); text-align:center; color:#fff; z-index:1; }
/* Portada: ANTUWALUNG + NOMBRE + PADRE × MADRE se leen como UN bloque, no como tres secciones.
   El problema era el espaciado, no la escala: no se toca el tamaño del nombre ni del hero.
   Además del margen, se ajusta el interlineado del nombre, porque en mayúsculas de 74px el
   line-height:1 dejaba un aire óptico que ningún margen chico compensaba. */
/* Las sombras acompañan al velo en vez de reemplazarlo: el degradado resuelve el fondo y la sombra
   despega la letra de los detalles finos de la fotografía (una crin, un alambre) que el degradado
   no puede aplanar. Son suaves a propósito — una sombra dura se vería como texto pegado encima. */
.fhero__kicker{ font-size:12px; letter-spacing:.42em; text-transform:uppercase; color:rgba(255,255,255,.92); margin-bottom:8px; padding-left:.42em;
  text-shadow: 0 1px 12px rgba(0,0,0,.55); }
/* margin:0 — el h1 traía el margen por defecto del navegador (~0.67em ≈ 50px a 74px), que era
   la causa real del aire entre ANTUWALUNG, el nombre y el pedigree corto. */
.fhero__name{ margin:0; font-size: clamp(40px,6.4vw,74px); font-weight:700; letter-spacing:.06em; line-height:.94;
  text-transform:uppercase; color:#fff; text-shadow: 0 2px 30px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.35); }
/* Blanco cálido, no blanco puro: sobre una fotografía de campo el blanco frío se despega del
   conjunto. Sube de .9 a .95 porque el pedigree es el texto más chico del hero y era el primero
   en perderse. */
.fhero__sub{ margin-top:10px; font-size: clamp(13px,1.5vw,15px); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,252,246,.95); text-shadow:0 1px 14px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.35); }
.fhero__sub .x{ color:rgba(255,252,246,.7); padding:0 .35em; }
/* Hero sin portada: placeholder FOTO PENDIENTE (fondo claro, isotipo base clara, nombre en tinta) */
.fhero--pending{ background: var(--paper-lite); }
.fhero--pending::after{ display:none; }
.fhero--pending .fhero__kicker{ color: var(--ink-2); }
.fhero--pending .fhero__name{ color: var(--ink); text-shadow:none; }
.fhero--pending .fhero__sub{ color: var(--ink-2); text-shadow:none; }
.fhero--pending .fhero__sub .x{ color: var(--earth); }
.fhero__pending{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; }
.fhero__emblem{ width:clamp(88px,15vw,140px); height:auto; opacity:.88; }
.fhero__pending-t{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--ink-2); }

/* ---- Intro / highlight ---- */
.fintro{ border-top:1px solid var(--line); padding: clamp(44px,9vh,100px) 0; text-align:center; }
.fintro__lead{ font-size: clamp(21px,2.6vw,30px); line-height:1.34; font-weight:400; color:var(--ink-soft); }
/* Nota clave (p.ej. "Clonada por su alto valor genético") — BLOOD, con peso y presencia */
/* Nota genética — presente pero secundaria, sin rojo, claramente separada */
.fintro__nota{ margin-top: clamp(28px,5vh,40px); font-size: clamp(14px,1.5vw,16px); line-height:1.45; font-weight:500; color:var(--ink-2); letter-spacing:.01em; }

/* ---- Producción ---- */
.fprod{ border-top:1px solid var(--line); padding: clamp(38px,7vh,68px) 0 clamp(18px,4vh,54px); }
.fprod__label{ margin-bottom: clamp(26px,5vh,52px); }
/* SISTEMA DE PRODUCTOS — cada producto es un BLOQUE COMPLETO con separador.
   Espaciado reusable (no caballo por caballo):
   nombre→genética: corto · genética→campaña: medio · premios→foto: aire · producto→separador: aire */
/* ============================================================
   COMPONENTE DE PRODUCTOS (ProductGrid / ProductRail) — reusable ficha + Lote 2026
   Mobile: rail horizontal con peek (~1,3 productos) + scroll-snap.
   Desktop: grilla de 3 columnas. Fondos alternados A/B/C (mismo crema). Sin cards SaaS.
   ============================================================ */
/* En pantallas chicas la producción es un RAIL horizontal (no una columna): la separación entre
   productos es lateral. Se duplica para que no se mezclen al desplazar. */
.prod-list{ display:flex; gap:28px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 16px;
  scroll-padding-inline: var(--gutter); }
.prod-list::-webkit-scrollbar{ height:2px; } .prod-list::-webkit-scrollbar-thumb{ background:var(--line); }
.prod{ flex:0 0 70vw; max-width:70vw; scroll-snap-align:start;
  display:flex; flex-direction:column; border:1px solid var(--line);
  padding: clamp(20px,4.6vw,28px); }
/* Fondos alternados por POSICIÓN: 3 graduaciones sutiles del mismo crema (no por caballo) */
.prod--v1{ background: var(--paper); }
.prod--v2{ background: var(--paper-warm); }
.prod--v3{ background: var(--paper-lite); }
/* Variante EDITORIAL abierta (Producción Destacada): columnas tipográficas sobre el mismo fondo de
   sección. NO son cards: sin borde, sin fondo propio, sin sombra, sin padding de tarjeta y sin
   alternancia de fondos. La separación la produce el aire, no un rectángulo. El !important es
   deliberado: neutraliza las variantes de fondo por posición (.prod--v1/2/3) sin duplicar reglas. */
.prod-list--open .prod{ border:0 !important; background:none !important; box-shadow:none !important; padding:0 !important; }
.prod-list--open .prod + .prod{ border-top:0; }

/* Corte inicial SÓLO en pantallas chicas: desktop muestra toda la producción. */
@media (max-width: 899px){
  .prod-list--open.is-collapsed .prod--extra{ display:none; }

  /* Progenie, líneas materna/paterna y hermanas: UNA columna en mobile, no carrusel lateral.
     Viven dentro de "Ver más de {nombre}", que ya es una lectura elegida por el usuario: hacerle
     además arrastrar cada bloque de costado esconde ejemplares detrás de un gesto. La Producción
     Destacada conserva su rail —es la vista principal, aprobada así— y por eso la regla excluye
     explícitamente a `--featured`. */
  .prod-list--open:not(.prod-list--featured){
    display:flex; flex-direction:column; gap: clamp(30px,5vh,44px);
    overflow:visible; scroll-snap-type:none; margin-inline:0; padding:0;
  }
  .prod-list--open:not(.prod-list--featured) .prod{ flex:initial; width:auto; max-width:none; scroll-snap-align:none; }
}
/* Control de expansión: existe únicamente donde el corte aplica (mobile/tablet angosto). */
.prodmore{ display:none; }
@media (max-width: 899px){
  .prodmore{ display:flex; align-items:baseline; justify-content:center; gap:8px; flex-wrap:wrap;
    width:100%; margin-top: clamp(26px,4vh,36px); padding:14px 2px; background:none; cursor:pointer;
    border:0; border-top:1px solid var(--line); font:inherit; color:var(--ink-2); }
  .prodmore__k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; }
  .prodmore__name{ font-size:13px; letter-spacing:.06em; color:var(--ink); }
  .prodmore__ar{ transition: transform .3s var(--ease); }
  .prodmore.is-open .prodmore__ar{ transform: rotate(180deg); }
}
.prod__name{ margin:0; font-size: clamp(21px,2.4vw,29px); font-weight:400; line-height:1.06; }
.prod__name .pfx{ letter-spacing:.1em; } .prod__name .nm{ font-weight:600; letter-spacing:.06em; }
.prod__ped{ margin-top:6px; font-size:13.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); }
.prod__ped .x{ color:var(--earth); padding:0 .4em; }
.prod__desc{ margin-top:16px; font-size:15.5px; line-height:1.58; color:var(--ink); }
.prod__nota{ margin-top:10px; font-size:14px; font-style:italic; color:var(--ink-2); }
/* Fotografía 4:3 con object-position data-driven (encuadre por foto, listo para backend) */
.prod__media{ margin: clamp(18px,3vh,24px) 0 0; }
.prod__frame{ aspect-ratio:4/3; overflow:hidden; background:var(--panel); }
.prod__frame img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }
.prod__cap{ margin-top:9px; text-align:right; font-size:12.5px; font-style:italic; font-weight:400; letter-spacing:.05em; color:var(--ink-2); }
.prod__cap .pfx{ letter-spacing:.1em; } .prod__cap .nm{ font-weight:600; }
/* Acción comercial por producto: dorado sobrio, al pie, alineada entre columnas. Silenciosa. */
.prod__action{ margin-top:auto; padding-top: clamp(14px,2vh,20px); display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
/* Disponibilidad de la donante: información objetiva y discreta, encima de la acción.
   Sin badge, sin semáforo, sin color de alerta — sólo texto sobrio. */
.prod__avail{ font-size:12px; letter-spacing:.02em; color:var(--ink-2); }
/* Acción editorial pequeña al pie del producto: dorado discreto, hug-content (no full-width),
   más chica que el módulo charcoal de las fichas; se ve, pero no domina la tarjeta. */
.prod__select{ display:inline-flex; align-items:center; justify-content:center; padding:8px 16px;
  background:none; border:1px solid var(--gold-btn); color:var(--gold-btn); cursor:pointer;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; line-height:1;
  transition:background .3s var(--ease), color .3s var(--ease); }
.prod__select:hover{ background:var(--gold-btn); color:#f4f1ea; }
.prod--sm .prod__name{ font-size: clamp(18px,1.8vw,21px); }
.prod--sm .prod__desc{ font-size:14.5px; }

/* Premios en BLOOD, uno por línea */
.premios{ list-style:none; margin:18px 0 0; padding:0; }
.premios li{ position:relative; padding:6px 0 6px 22px; font-size:15px; line-height:1.42; color:var(--gold); font-weight:600; letter-spacing:.005em; }
.premios li::before{ content:""; position:absolute; left:0; top:.78em; width:12px; height:2px; background:var(--gold); }

/* Segunda generación: [Produjo] itálica, secondary ink */
.produjo{ margin-top:16px; padding-left:16px; border-left:1px solid var(--line); }
.produjo__line{ margin:7px 0; font-style:italic; font-size:14px; line-height:1.5; color:var(--ink-2); }
.produjo__tag{ font-style:normal; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--earth); margin-right:8px; }
.produjo__name .nm{ font-weight:500; }
.produjo__ped .x{ color:var(--earth); padding:0 .35em; }

/* Ver toda la progenie */
.prog-toggle{ margin: clamp(44px,8vh,76px) auto 0; display:flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); padding:14px 6px; }
.prog-toggle:hover{ color:var(--blood); }
.prog-toggle__n{ color:var(--ink-2); }
.prog-toggle__ar{ transition: transform .45s var(--ease); }
.prog-toggle.is-open .prog-toggle__ar{ transform: rotate(180deg); }
.prog-extra{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .6s var(--ease); }
.prog-extra.is-open{ grid-template-rows:1fr; }
.prog-extra__inner{ overflow:hidden; min-height:0; }
.prod-grid{ padding-top: clamp(30px,6vh,58px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap: clamp(30px,4vh,52px) clamp(30px,5vw,76px); align-items:start; }
.prod-grid .prod__desc{ font-size:15px; }

/* ---- Galería / carrusel ---- */
.fgal{ padding: clamp(56px,12vh,140px) 0; border-top:1px solid var(--line); }
.fgal__label{ margin-bottom: clamp(22px,4vh,40px); }
.gal-track{ display:flex; gap: clamp(14px,2vw,28px); overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:16px; }
.gal-track::-webkit-scrollbar{ height:2px; }
.gal-track::-webkit-scrollbar-thumb{ background:var(--line); }
.gal-item{ flex:0 0 auto; width: clamp(240px,32vw,376px); margin:0; scroll-snap-align:start; cursor:pointer; }
.gal-item__img{ aspect-ratio:4/5; overflow:hidden; background:var(--panel); }
.gal-item__img img{ width:100%; height:100%; object-fit:cover; transition: transform 1s var(--ease); }
.gal-item:hover .gal-item__img img{ transform:scale(1.04); }
.gal-item__cap{ padding-top:13px; display:flex; flex-direction:column; gap:3px; }
.gal-item__cap .awn{ font-size:16px; } .gal-item__cap .pfx{ letter-spacing:.1em; } .gal-item__cap .nm{ font-weight:600; }
.gal-item__sub{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-2); }
.fgal__note{ margin-top:24px; font-size:11.5px; color:var(--ink-2); font-style:italic; }

/* ---- Lightbox ---- */
.lbox{ position:fixed; inset:0; z-index:90; background:rgba(22,19,16,.93);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden;
  transition: opacity .4s var(--ease), visibility .4s; }
.lbox.is-open{ opacity:1; visibility:visible; }
.lbox__stage{ margin:0; display:flex; flex-direction:column; align-items:center; gap:16px; }
.lbox__img{ max-width:88vw; max-height:74vh; width:auto; height:auto; object-fit:contain; }
.lbox__cap{ color:#fff; font-size:14px; text-align:center; }
.lbox__sub{ color:rgba(255,255,255,.6); text-transform:uppercase; letter-spacing:.06em; font-size:11.5px; margin-left:8px; }
.lbox__close{ position:absolute; top:16px; right:26px; font-size:30px; line-height:1; color:rgba(255,255,255,.8); }
.lbox__nav{ position:absolute; top:50%; transform:translateY(-50%); font-size:26px; color:rgba(255,255,255,.7); padding:22px; }
.lbox__prev{ left:8px; } .lbox__next{ right:8px; }
.lbox__nav:hover, .lbox__close:hover{ color:#fff; }

@media (max-width: 760px){
  .prod--feat{ grid-template-columns:1fr; gap:20px; }
  .prod--feat .prod__media{ order:-1; }
  .prod-grid{ grid-template-columns:1fr; gap: clamp(30px,5vh,44px); }
  .gal-item{ width: 74vw; }
  .lbox__nav{ padding:12px; }
}
/* MOBILE — foto más arriba, más compacto, textos algo más chicos */
@media (max-width: 560px){
  /* La portada de ficha ocupaba 76% de la pantalla del teléfono: se veía imponente pero obligaba a
     desplazar antes de leer nada. Se compacta a ~74% de esa altura (≈56svh) sin deformar la foto
     —sigue con object-fit:cover— ni bajar la escala del nombre. */
  .fhero{ height: 56svh; min-height: 340px; max-height: 480px; }
  .fhero__kicker{ font-size:11px; letter-spacing:.36em; margin-bottom:6px; }
  .fhero__name{ font-size: 36px; letter-spacing:.04em; }
  .fid{ padding: 22px 0 4px; }
  .fintro{ padding: 36px 0; }
  .fcamp{ padding: 34px 0 8px; }
  .fprod{ padding-bottom: 6px; }
  .fgeneal{ padding: 10px 0 42px; }
  .fgal{ padding: 42px 0; }
  .embryo{ padding: 28px 0; }
  .fintro__lead{ font-size: 20px; }
  .fcamp__text{ font-size: 18px; }
  .dato__v{ font-size: 17px; }
  .ped__pname{ font-size: 18px; }
}

/* ============================================================
   ACCIÓN PRINCIPAL — Elegir como madre (paso 1 del flujo genético)
   Diferenciada de las acciones editoriales por el acento BLOOD.
   No es un botón de tienda: sin relleno, sin carrito, sin precio.
   ============================================================ */
.faction{ padding: 0 0 clamp(50px,10vh,110px); }
.faction .wrap{ border-top:1px solid var(--line); padding-top: clamp(40px,7vh,74px); }
.faction__eyebrow{ color: var(--blood); margin-bottom: clamp(16px,3vh,26px); }
.faction__main{ display:flex; align-items:center; gap: clamp(14px,2vw,28px); padding:4px 0; text-align:left; }
.faction__label{ font-size: clamp(29px,5vw,54px); font-weight:400; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-soft); transition:color .3s; }
.faction__arrow{ font-size: clamp(24px,3vw,34px); color:var(--blood); transition: transform .45s var(--ease); }
.faction__main:hover .faction__arrow{ transform: translateX(12px); }
.faction__main:hover .faction__label{ color:var(--ink); }
.faction__main.is-selected .faction__label{ color:var(--blood); }
.faction__sub{ margin-top:12px; font-size: clamp(14px,1.4vw,16px); color:var(--ink-2); letter-spacing:.02em; }
.faction__next{ margin-top:24px; display:flex; flex-direction:column; gap:8px; }
.faction__done{ font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--blood); }
.faction__nextlink{ font-size:15px; color:var(--ink); transition:color .3s; }
.faction__nextlink:hover{ color:var(--blood); }

/* Sticky de acción (solo mobile) — alcance de pulgar */
.stick{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:none;
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(120%) blur(6px);
  border-top:1px solid var(--blood); transform: translateY(112%); transition: transform .45s var(--ease); }
.stick.is-vis{ transform: translateY(0); }
.stick__btn{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px var(--gutter) calc(13px + env(safe-area-inset-bottom)); }
.stick__text{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.stick__label{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.stick__sub{ font-size:11px; color:var(--ink-2); }
.stick__ar{ font-size:20px; color:var(--blood); }
.stick.is-selected .stick__label{ color:var(--blood); }
@media (max-width: 760px){ .stick{ display:block; } }

/* ============================================================
   FOOTER + CONTACTO
   ============================================================ */
.site-foot{ padding: clamp(50px,9vh,100px) 0 clamp(28px,5vh,46px); border-top:1px solid var(--line); text-align:left; }
.foot{ display:grid; grid-template-columns: 1.5fr 1fr 1.1fr; gap: clamp(26px,4vw,64px); align-items:start; }
.foot__brand .foot__mark{ font-size: clamp(20px,2.3vw,30px); letter-spacing:.26em; color:var(--ink-soft); }
.foot__word{ margin-top:7px; font-size:11px; letter-spacing:.4em; text-transform:uppercase; color:var(--ink-2); }
.foot__col{ display:flex; flex-direction:column; gap:10px; }
.foot__ct{ margin-bottom:6px; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); }
.foot__col a{ font-size:14px; color:var(--ink); transition:color .3s; }
.foot__col a:hover{ color:var(--blood); }
.foot__col a[data-soon]{ color:var(--ink-2); }
.foot__pending{ font-size:13px; color:var(--ink-2); font-style:italic; }
.foot__base{ display:flex; justify-content:space-between; align-items:center; margin-top: clamp(38px,7vh,66px); padding-top:20px;
  border-top:1px solid var(--line); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
@media (max-width: 760px){ .foot{ grid-template-columns:1fr 1fr; } .foot__brand{ grid-column:1/-1; margin-bottom:6px; } }
@media (max-width: 460px){ .foot{ grid-template-columns:1fr; gap:26px; } }

/* ============================================================
   PLACEHOLDERS — Precios / Login (coherentes con el sistema)
   ============================================================ */
.placeholder{ min-height: 72svh; display:flex; flex-direction:column; justify-content:center; padding: clamp(90px,14vh,150px) 0; }
.placeholder__title{ font-size: clamp(36px,5.5vw,62px); }
.placeholder__note{ margin-top:22px; font-size:16px; color:var(--ink-2); max-width:46ch; }
.placeholder__body{ margin-top:10px; font-size:15px; color:var(--ink-2); max-width:52ch; }

.login{ max-width:400px; }
.login__field{ margin-top:22px; }
.login__field label{ display:block; margin-bottom:9px; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.login__field input{ width:100%; border:0; border-bottom:1px solid var(--ink-2); background:transparent; padding:9px 0; font:inherit; font-size:16px; color:var(--ink); }
.login__field input:focus{ outline:none; border-bottom-color:var(--blood); }
.login__btn{ margin-top:32px; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); border-bottom:1px solid var(--blood); padding:9px 2px; }
.login__note{ margin-top:26px; font-size:12.5px; font-style:italic; color:var(--ink-2); max-width:40ch; }
.login__alt{ margin-top:22px; font-size:13px; color:var(--ink-2); }
.login__alt a{ color:var(--ink); border-bottom:1px solid var(--gold-btn); padding-bottom:1px; }

/* ---------- Registro / Solicitud de acceso ---------- */
/* Cápsula claramente separada del fondo, lenguaje del login. Mobile + desktop. */
.reg{ max-width:460px; margin-top: clamp(28px,5vh,40px); background:var(--paper-warm);
  border:1px solid var(--line); padding: clamp(26px,4.5vw,40px); }
.reg__field{ margin-top:22px; }
.reg__field:first-child{ margin-top:0; }
.reg__field label, .reg__qlabel{ display:block; margin-bottom:9px; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-2); }
.reg__field input[type="text"], .reg__field input[type="email"],
.reg__field input[type="password"], .reg__field input[type="tel"]{
  width:100%; border:0; border-bottom:1px solid var(--ink-2); background:transparent; padding:9px 0;
  font:inherit; font-size:16px; color:var(--ink); }
.reg__field input:focus{ outline:none; border-bottom-color:var(--gold-btn); }
.reg--error input:required:invalid{ border-bottom-color:var(--earth); }
.reg__hint{ display:block; margin-top:8px; font-size:12px; font-style:italic; color:var(--ink-2); }
.reg__choices{ display:flex; gap:28px; }
.reg__radio, .reg__check{ display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  font-size:15px; color:var(--ink); }
.reg__radio input, .reg__check input{ accent-color:var(--charcoal); width:16px; height:16px; }
.reg__check{ margin-top:26px; }
.reg__btn{ margin-top:30px; width:100%; background:var(--charcoal); color:#f4f1ea; border:0; cursor:pointer;
  padding:15px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; transition:opacity .3s var(--ease); }
.reg__btn:hover{ opacity:.9; }
.reg__alt{ margin-top:22px; font-size:13px; color:var(--ink-2); }
.reg__alt a{ color:var(--ink); border-bottom:1px solid var(--gold-btn); padding-bottom:1px; }

/* Estado enviado (pending) — confirmación editorial: sin icono, sin pasos, sólo tipografía y aire */
.reg-done{ max-width:460px; margin-top: clamp(28px,5vh,40px); background:var(--paper-warm);
  border:1px solid var(--line); padding: clamp(34px,6vw,54px); }
.reg-done__title{ font-size: clamp(24px,3.2vw,34px); font-weight:600; letter-spacing:.005em; line-height:1.18; color:var(--ink); }
.reg-done__body{ margin-top:18px; font-size:16px; line-height:1.64; color:var(--ink-2); max-width:46ch; }

/* Layout de la página de registro: apilado en mobile; 2 columnas editoriales en desktop */
.reg-layout{ display:flex; flex-direction:column; gap: clamp(24px,5vh,40px); }
.reg-intro__title{ margin-top: clamp(8px,2vh,14px); }
.reg-intro__lead{ margin-top:18px; font-size:16px; line-height:1.6; color:var(--ink-2); max-width:44ch; }
.reg-layout.is-done .reg-intro{ display:none; }         /* la confirmación toma protagonismo */
@media (min-width: 1180px){
  .reg-layout{ flex-direction:row; align-items:center; gap: clamp(56px,7vw,120px); }
  .reg-intro{ flex:1 1 0; }
  .reg-intro__lead{ font-size: clamp(16px,1.35vw,19px); max-width:32ch; }
  .reg-col{ flex:0 0 clamp(420px,40%,500px); }
  .reg, .reg-done{ max-width:none; margin-top:0; }
  .reg-layout.is-done{ justify-content:center; }
  .reg-layout.is-done .reg-col{ flex:0 0 auto; max-width:600px; }
}

/* ============================================================
   COMBINACIÓN GENÉTICA — flujo: elegir → preferencia → resumen → confirmar
   Editorial. Charcoal = acción genética (selección en fichas). Dorado = acción
   principal (confirmar). Sin carrito, sin checkout, sin iconografía innecesaria.
   ============================================================ */
.combo{ margin-top: clamp(16px,3vh,26px); max-width:620px; }
.combo__title{ font-size: clamp(28px,4.4vw,46px); font-weight:400; letter-spacing:.04em; text-transform:uppercase; line-height:1.06; }
.combo__hint{ margin-top:22px; font-size:14px; font-style:italic; color:var(--ink-2); }

/* Slots (madre / padrillo) — fase incompleta */
.combo-slots{ margin-top: clamp(24px,5vh,42px); }
.combo-slot{ padding: clamp(22px,4vh,30px) 0; border-top:1px solid var(--line); }
.combo-slot:last-child{ border-bottom:1px solid var(--line); }
.combo-slot__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); margin-bottom:12px; }
.combo-slot__name{ font-size: clamp(24px,3.4vw,34px); text-transform:uppercase; }
.combo-slot__name .nm{ font-weight:600; }
.combo-slot__change{ display:inline-block; margin-top:12px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); border-bottom:1px solid var(--line); }
.combo-slot__change:hover{ color:var(--ink); }

/* Pareja madre × padrillo (encabezado de preferencia) */
.combo-pair{ display:flex; align-items:center; gap: clamp(16px,3vw,32px); flex-wrap:wrap; }
.combo-pair__side{ display:flex; flex-direction:column; gap:6px; }
.combo-pair__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.combo-pair__name{ font-size: clamp(20px,2.6vw,28px); text-transform:uppercase; }
.combo-pair__name .nm{ font-weight:600; }
.combo-pair__x{ font-size:20px; color:var(--earth); }

/* Paso preferencia de sexo */
.combo-step{ margin-top: clamp(30px,6vh,54px); border-top:1px solid var(--line); padding-top: clamp(26px,5vh,42px); }
.combo-step__q{ margin-top:12px; font-size: clamp(19px,2.4vw,26px); font-weight:400; line-height:1.3; max-width:26ch; }
.combo-choices{ margin-top: clamp(22px,4vh,32px); display:flex; flex-direction:column; gap:14px; }
.combo-choice{ text-align:left; padding:20px 26px; border:1px solid var(--line); background:var(--paper-warm);
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:border-color .3s var(--ease), background .3s var(--ease); }
.combo-choice:hover{ border-color:var(--charcoal); }

/* Resumen (cápsula) + filas clave/valor */
.combo-summary{ margin-top: clamp(24px,4vh,36px); background:var(--paper-warm); border:1px solid var(--line); padding: 4px clamp(22px,4vw,34px); }
.combo-row{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; padding: clamp(15px,2.4vh,20px) 0; border-top:1px solid var(--line); }
.combo-row:first-child{ border-top:0; }
.combo-row__k{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); flex:0 0 auto; }
.combo-row__v{ text-align:right; font-size:16px; color:var(--ink); }
.combo-row__v.awn{ text-transform:uppercase; font-size:18px; }
.combo-row__v.awn .nm{ font-weight:600; }
.combo-row.is-none .combo-row__v{ color:var(--earth); font-style:italic; text-transform:uppercase; letter-spacing:.1em; font-size:13px; }
/* Pantalla de éxito (Solicitud confirmada): genética prominente + aviso de email + dos acciones. */
.done-gen{ margin-top: clamp(18px,3vh,26px); font-size: clamp(22px,3vw,30px); text-transform:uppercase; letter-spacing:.01em; }
.done-gen .nm{ font-weight:600; } .done-gen .pfx{ color:var(--gold,#a98d55); margin-right:.25em; }
.done-email{ margin-top: clamp(20px,3vh,28px); font-size:13px; letter-spacing:.02em; color:var(--ink); }
.done-actions{ margin-top: clamp(26px,4vh,38px); display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.done-actions .btn-gold{ margin-top:0; }
@media(max-width:560px){ .done-actions{ flex-direction:column; align-items:stretch; } .done-actions .btn-gold, .done-actions .btn-line{ width:100%; } }

/* Acción principal (dorado) + gates de estado de usuario */
.btn-gold{ display:inline-flex; align-items:center; justify-content:center; margin-top: clamp(24px,4vh,34px);
  background:var(--gold-btn); color:#f4f1ea; border:0; cursor:pointer; min-height:56px; padding:17px 52px;
  font-size:13px; letter-spacing:.22em; text-transform:uppercase; transition:opacity .3s var(--ease); }
.btn-gold:hover{ opacity:.9; }
.combo-confirm{ width:100%; }
.combo-gate{ margin-top: clamp(24px,4vh,34px); }
.combo-gate p{ font-size:15px; color:var(--ink-2); margin-bottom:16px; max-width:42ch; }
.combo-gate--none{ font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--earth); font-style:italic;
  border:1px solid var(--line); padding:18px 22px; background:var(--paper-warm); }
/* Selector de edición en la propia pantalla de revisión: lista editorial abierta, sin modal ni
   <select>. Filete fino por fila, dos acciones distintas (Seleccionar / Ver ficha). */
.pick{ margin-top: clamp(18px,3vh,26px); border-top:1px solid var(--line); }
.pick__t{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  padding: clamp(16px,2.4vh,20px) 0 4px; }
.pick__row{ display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding: 13px 0; border-top:1px solid var(--line); }
.pick__row.is-blocked{ opacity:.5; }
.pick__id{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pick__name{ font-size:16px; letter-spacing:.04em; }
.pick__avail{ font-size:11.5px; color:var(--ink-2); }
.pick__avail.is-none{ color:var(--earth); font-style:italic; }
.pick__acts{ display:flex; align-items:center; gap:16px; flex:0 0 auto; }
.pick__sel{ background:none; border:0; border-bottom:1px solid var(--gold); cursor:pointer;
  font:inherit; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  padding:3px 1px; }
.pick__sel:hover{ color:var(--ink); border-bottom-color:var(--ink); }
.pick__ficha{ font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding:3px 1px; }
.pick__ficha:hover{ color:var(--ink); }
.pick__blocked{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-style:italic; }
@media (max-width:640px){
  .pick__row{ flex-direction:column; align-items:flex-start; gap:9px; }
}

/* Segunda puerta del gate (ya tenés cuenta → Ingresar): discreta, sin competir con el CTA dorado. */
.combo-gate__alt{ margin:14px 0 0; font-size:13px; color:var(--ink-2); }
.combo-gate__alt a{ color:var(--gold); border-bottom:1px solid var(--line); padding-bottom:1px; }
.combo-new{ margin-top: clamp(26px,4vh,36px); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-2); border-bottom:1px solid var(--line); padding:8px 2px; background:none; cursor:pointer; }
.combo-new:hover{ color:var(--ink); }

@media (min-width: 900px){
  .combo{ max-width:640px; }
  .combo-choices{ flex-direction:row; }
  .combo-choice{ flex:1 1 0; text-align:center; }
  .combo-confirm{ width:auto; min-width:300px; }
}

/* ============================================================
   V2 — Refinamientos desktop + componentes nuevos
   ============================================================ */

/* Menú desktop: escala considerablemente menor y proporcional */
@media (min-width: 900px){
  .menu__inner{ padding-left: clamp(64px,8vw,150px); }
  .menu__primary a{ font-size: 30px; padding: 6px 0; }
  .menu__util a{ font-size: 12.5px; }
  .menu__lang-btn{ font-size: 12.5px; }
}

/* Navegación interna entre fichas (nombre clickeable) */
.xlink{ color: inherit; border-bottom: 1px solid var(--line); padding-bottom: 1px; transition: color .25s, border-color .25s; }
.xlink:hover{ color: var(--blood); border-color: var(--blood); }

/* CAMPAÑA — sección nueva: fondo muy sutilmente más claro + separador + aire */
.fcamp{ background: var(--paper-lite); border-top:1px solid var(--line); padding: clamp(40px,8vh,82px) 0 clamp(32px,5vh,56px); text-align:center; }
.fcamp__label{ margin-bottom: clamp(16px,3vh,24px); }
.fcamp__text{ font-size: clamp(18px,2.1vw,24px); line-height:1.4; color:var(--ink-soft); }
.cpremios{ margin-top: clamp(22px,4vh,32px); }
.cpremio{ margin: 0 auto clamp(14px,2.5vh,20px); max-width:52ch; }
.cpremio__t{ display:block; font-size: clamp(15px,1.7vw,18px); font-weight:700; font-style:italic; color:var(--gold); letter-spacing:.01em; }
.cpremio__d{ display:block; margin-top:3px; font-size: clamp(13px,1.4vw,15px); font-style:italic; color:var(--gold); opacity:.85; }
.msec--center .fintro__nota::after{ content:''; display:block; width:56px; height:1px; background:var(--line); margin: clamp(18px,3vh,26px) auto 0; }

/* ============================================================
   MÓDULO EDITORIAL reutilizable — separador + aire + fondo sutil (sin cards)
   ============================================================ */
.msec{ border-top:1px solid var(--line); padding: clamp(40px,7vh,74px) 0; }
.msec--tint{ background: var(--paper-lite); }         /* diferenciación muy sutil */
.msec--center{ text-align:center; }
.msec__label{ margin-bottom: clamp(20px,4vh,34px); }

/* IDENTIDAD */
.fid{ padding: clamp(22px,4vh,48px) 0 clamp(10px,2vh,22px); }
/* Datos: 3 columnas centradas — Nacimiento | Sexo | Pelaje */
.datos{ margin:0; display:grid; grid-template-columns: repeat(var(--n,3), minmax(0,1fr)); gap: clamp(12px,3vw,30px); }
.dato{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; margin:0; }
.dato__k{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-style:italic; font-weight:400; }
.dato__v{ margin:0; font-size: clamp(17px,1.9vw,21px); font-weight:700; letter-spacing:.05em; color:var(--ink); }

/* JERARQUÍA CONDICIONAL de los datos básicos.
   Sin pedigree tabulado, Nacimiento/Sexo/Pelaje SON el contenido de la sección y conservan el
   tratamiento de arriba. Cuando hay pedigree debajo, pasan a metadata: si mantienen el mismo peso,
   al estar centrados y pegados al árbol se leen como parte del propio pedigree.
   La condición no está hardcodeada por caballo ni resuelta por JS: el renderer sólo envuelve los
   datos en .fid-facts cuando existe pedigree (ver hasPedigree en ficha.js), así que ese contenedor
   ES la condición. Se resuelve sólo con tipografía y color — sin cajas, filetes ni separadores. */
.fid-facts .dato__v{
  color: color-mix(in srgb, var(--ink) 60%, var(--paper));
  font-weight: 500;
  font-size: clamp(15px,1.6vw,18px);
}

/* Separador de sección — línea fina (INK secundario), mucho aire */
.fid__rule{ height:1px; background:var(--line); margin: clamp(22px,4vh,38px) 0; }

/* PEDIGREE — pie de grulla: 3 columnas reales (producto | padres | abuelos) */
.fid__ped{ overflow-x:auto; }
.pedi{ --CONN: clamp(12px,3vw,42px); --G: 6px; --PY: clamp(7px,1.4vh,12px);
  display:inline-grid; grid-template-columns: max-content max-content max-content;
  column-gap:0; row-gap:0; align-items:center; }
.pcell{ position:relative; }
.pcell--product{ grid-column:1; grid-row:1 / span 4; display:flex; align-items:center; }
.pcell--sire{ grid-column:2; grid-row:1 / span 2; }
.pcell--dam{  grid-column:2; grid-row:3 / span 2; }
.pcell--sire, .pcell--dam{ display:flex; align-items:center; padding-left: var(--CONN); }
.pcell--g{ grid-column:3; padding: var(--PY) 0 var(--PY) var(--CONN); }
.pcell--g1{ grid-row:1; } .pcell--g2{ grid-row:2; } .pcell--g3{ grid-row:3; } .pcell--g4{ grid-row:4; }

/* Nombres — sin subrayados */
/* .pblock: el kicker flota arriba para que la línea remate en el CENTRO de ANY CHICA */
.pblock{ position:relative; display:flex; flex-direction:column; }
.pedi__kick{ position:absolute; left:0; bottom:100%; margin-bottom:4px; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; }
.pname{ white-space:nowrap; font-size: clamp(14.5px,1.7vw,18px); font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.pname .pfx{ font-weight:400; letter-spacing:.06em; } .pname .nm{ font-weight:700; }
.pname--product{ font-size: clamp(14px,1.7vw,20px); }
.pgname{ white-space:nowrap; font-size: clamp(11px,1.25vw,14px); font-weight:500; letter-spacing:.03em; text-transform:uppercase; color:var(--ink); }
.pgterm{ white-space:nowrap; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); }

/* Líneas horizontales — rematan en el nombre con margen óptico (no tocan letras) */
.pcell--product::after, .pcell--sire::after, .pcell--dam::after{
  content:''; flex:1 0 var(--CONN); align-self:center; height:1px; background:var(--line); margin-left: var(--G); }
.pcell--sire::before, .pcell--dam::before, .pcell--g::before{
  content:''; position:absolute; left:0; width: calc(var(--CONN) - var(--G)); top:50%; border-top:1px solid var(--line); }

/* Líneas verticales (llaves) — centros geométricos correctos */
.pcell--product::before{ content:''; position:absolute; left:100%; top:25%; bottom:25%; border-left:1px solid var(--line); }
.pcell--g::after{ content:''; position:absolute; left:0; border-left:1px solid var(--line); }
.pcell--g1::after, .pcell--g3::after{ top:50%; bottom:0; }
.pcell--g2::after, .pcell--g4::after{ top:0; bottom:50%; }

@media (min-width: 760px){
  .fid{ padding: clamp(40px,7vh,80px) 0 clamp(20px,4vh,40px); }
  .datos{ max-width:640px; margin-inline:auto; gap: clamp(20px,4vw,44px); }
  .fid__rule{ max-width:640px; margin-inline:auto; }
  .fid__ped{ display:flex; justify-content:center; }
  .pedi{ --CONN: clamp(36px,4.6vw,80px); --PY: clamp(10px,1.9vh,18px); }
  .pname{ font-size: clamp(16px,1.5vw,20px); }
  .pname--product{ font-size: clamp(17px,1.6vw,21px); }
  .pgname, .pgterm{ font-size: clamp(13px,1.1vw,15px); }
}

/* Familia de acciones informativas (misma escala, estilo y comportamiento) */
.fgeneal{ padding: clamp(16px,4vh,44px) 0 clamp(56px,10vh,110px); }
.infolist{ display:flex; flex-direction:column; }
.infoblock{ border-top:1px solid var(--line); }
.infoblock:last-child{ border-bottom:1px solid var(--line); }
.info-act{ width:100%; display:flex; align-items:center; gap:12px; padding: clamp(16px,2.6vh,24px) 0;
  font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); text-align:left; }
.info-act:hover{ color:var(--blood); }
.info-act__n{ color:var(--ink-2); }
.info-act__ar{ margin-left:auto; color:var(--ink-2); transition: transform .4s var(--ease), color .3s; }
.info-act:hover .info-act__ar{ transform: translateX(8px); color:var(--blood); }
.info-act.is-open .info-act__ar{ transform: rotate(90deg); }
.info-extra{ display:grid; grid-template-rows:0fr; transition: grid-template-rows .55s var(--ease); }
.info-extra.is-open{ grid-template-rows:1fr; }
.info-extra__inner{ overflow:hidden; min-height:0; }
.info-extra__inner > *{ padding-bottom: clamp(24px,5vh,44px); }

/* Bloques de línea (materna / paterna / hermanas) */
.line__head{ font-size: clamp(20px,2vw,24px); padding-top: clamp(6px,1.5vh,14px); }
.line__head .nm{ font-weight:500; }
.line__campana{ margin-top:10px; font-size:15.5px; line-height:1.5; color:var(--ink); max-width:60ch; }
.line__nota{ margin-top:8px; font-size:14px; font-weight:600; color:var(--blood); }
.line__prods{ margin-top: clamp(20px,4vh,34px); display:grid; grid-template-columns:1fr; gap: clamp(22px,4vh,34px); }
@media (min-width: 760px){ .line__prods{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap: clamp(26px,3vw,48px); } }

/* Datos + Pedigree: apilados en mobile; conviven horizontalmente en desktop (misma geometría) */
.fid-facts{ display:flex; flex-direction:column; align-items:center; gap: clamp(30px,5vh,50px); }
/* Ancho contenido: los tres datos no deben barrer todo el ancho de pantalla. */
.fid-facts__datos{ width:100%; }
.fid-facts__datos .datos{ max-width: 540px; margin-inline:auto; }
.fid-facts__ped{ width:100%; display:flex; justify-content:center; }
/* El esquema apilado que funcionaba en mobile (tres datos compactos ARRIBA del pedigree) se
   adopta también en desktop: se leía mejor que la columna lateral izquierda. Un solo componente
   responsive — desktop y tablet sólo ajustan el ancho contenido, no la estructura. */
@media (min-width: 900px){
  .fid-facts{ gap: clamp(34px,4.5vh,54px); }
  .fid-facts__datos .datos{ max-width: 620px; }
}

/* ============================================================
   FICHA — jerarquía en dos velocidades (decisión → profundidad) + composición desktop
   ============================================================ */
/* Separador editorial fuerte: "VER MÁS PROGENIE DE {NOMBRE}" (toggle, sin card) */
.msec--deep{ border-top:2px solid var(--line); }
.moreprog{ display:block; width:100%; text-align:center; background:none; border:0; cursor:pointer; padding:2px 0 clamp(22px,4vh,38px); }
.moreprog__k{ display:block; font-size:12px; letter-spacing:.28em; text-transform:uppercase; color:var(--ink-2); }
.moreprog__name{ display:block; margin-top:12px; font-size: clamp(26px,3.6vw,44px); text-transform:uppercase; letter-spacing:.03em; line-height:1.05; color:var(--ink); }
.moreprog__name .pfx{ font-weight:400; } .moreprog__name .nm{ font-weight:600; }
.moreprog__ar{ display:inline-block; margin-top:16px; font-size:18px; color:var(--ink-2); transition: transform .4s var(--ease), color .3s; }
.moreprog.is-open .moreprog__ar{ transform: rotate(180deg); }
.moreprog:hover .moreprog__k, .moreprog:hover .moreprog__ar{ color:var(--ink); }
.deep-sub{ margin-top: clamp(34px,6vh,56px); }
.deep-sub__k{ margin-bottom: clamp(16px,3vh,26px); }

@media (min-width: 900px){
  /* Productos: grilla de 3 columnas reales (todas las filas). Fondos alternados A/B/C,
     borde fino, sin sombras ni radios. El rail mobile se anula acá. */
  .prod-list{ --prod-row-gap: clamp(56px,6vh,92px);
    display:grid; grid-template-columns: repeat(3, minmax(0,1fr));
    /* Calle horizontal ~2x respecto del gap anterior (era clamp(20px,2vw,32px) → 26px a 1280).
       Las columnas se angostan un poco a cambio: preferimos aire entre productos antes que
       columnas anchas pegadas. La separación vertical entre filas es bastante mayor que la
       horizontal para que se lea "terminó un producto → aire → empieza otro", sin filetes. */
    column-gap: clamp(40px,4.2vw,72px);
    row-gap: var(--prod-row-gap);
    overflow:visible; scroll-snap-type:none;
    margin-inline:0; padding:0; }
  .prod{ flex:initial; max-width:none; width:auto; padding: clamp(24px,2vw,34px); }
  /* PRODUCCIÓN DESTACADA en columnas independientes. La grilla alinea por filas y el bloque más
     alto estiraba a sus vecinos, dejando huecos muertos debajo de los cortos. Acá cada columna
     avanza según su propio contenido. Las calles y el aire vertical son los MISMOS: la separación
     horizontal la sigue dando column-gap y la vertical, --prod-row-gap. El bloque no se toca. */
  .prod-list--cols{ display:flex; align-items:flex-start; }
  .prod-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column;
    row-gap: var(--prod-row-gap); }
  /* En 3 columnas el filete de separación no corresponde (los vecinos son laterales, no verticales). */
  .prod-list--open .prod{ padding:0 !important; }
  .prod__desc{ font-size:16px; }
  /* Galería en damero (no carrusel touch en desktop): todas las fotos visibles */
  .gal-track{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(16px,2vw,30px); overflow:visible; padding-bottom:0; }
  .gal-item{ width:auto; flex:none; scroll-snap-align:none; }
}
.prod--line .prod__name{ font-size: clamp(18px,1.8vw,21px); }

/* BLOQUE ACCIÓN — "acá termina la lectura y aparece una acción" */
.embryo{ border-top:1px solid var(--line); padding: clamp(40px,7vh,74px) 0; }
/* Estado A — tarjeta CHARCOAL (texto · SELECCIONAR) */
.embryo__offer{ background: var(--charcoal); color:#f4f1ea;
  padding: clamp(28px,4vh,44px) clamp(24px,4vw,52px);
  display:flex; flex-direction:column; gap: clamp(22px,3vh,30px); }
.embryo__kick{ font-size:12px; letter-spacing:.28em; text-transform:uppercase; color: rgba(244,241,234,.62); margin-bottom:12px; }
.embryo__lead{ font-size: clamp(18px,2vw,22px); line-height:1.38; color:#f4f1ea; max-width:40ch; }
/* Único botón dorado/bronce del sitio — señal funcional */
.btn-select{ align-self:flex-start; display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:17px 56px;
  background:var(--gold-btn); color:#f7f5f0; border:0;
  font-size:14px; letter-spacing:.24em; text-transform:uppercase; font-weight:600;
  transition: background .3s var(--ease), color .3s var(--ease); }
.btn-select:hover{ background:#f4f1ea; color:var(--charcoal); }
.btn-select:active{ transform: translateY(1px); }
/* Estado B — tarjeta CLARA de confirmación */
.embryo__done{ background: var(--paper-warm); border:1px solid var(--line);
  padding: clamp(24px,4vh,40px) clamp(24px,4vw,52px);
  display:flex; flex-direction:column; gap: clamp(24px,4vh,34px); }
.embryo__done-l{ display:flex; align-items:center; gap:16px; }
.embryo__check{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--ink-2); border-radius:50%; color:var(--ink); font-size:16px; }
.embryo__done-k{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.embryo__done-name{ font-size: clamp(24px,3vw,34px); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ink); margin-top:4px; }
.embryo__next{ display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.embryo__next-k{ font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); }
.btn-cta{ display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:15px 42px;
  background:transparent; color:var(--charcoal); border:1px solid var(--charcoal);
  font-size:13.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600;
  transition: background .3s var(--ease), color .3s var(--ease); }
.btn-cta:hover{ background:var(--charcoal); color:#f4f1ea; }
@media (min-width: 720px){
  .embryo__offer{ flex-direction:row; align-items:center; justify-content:space-between; gap:44px; padding: clamp(30px,4vh,46px) clamp(34px,4vw,56px); }
  .btn-select{ align-self:auto; flex:0 0 auto; }
  .embryo__done{ flex-direction:row; align-items:center; justify-content:space-between; gap:44px; }
  .embryo__next{ align-items:flex-end; text-align:right; }
}

/* FOOTER — firma editorial: sólo la marca, centrada, mucho aire */
.site-foot{ padding: clamp(56px,11vh,112px) 0; }
.site-foot .foot{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px; grid-template-columns:none; }
.foot__brand{ font-size: clamp(20px,2.4vw,28px); letter-spacing:.36em; text-transform:uppercase; color:var(--ink-soft); padding-left:.36em; }
.foot__polo{ font-size:11px; letter-spacing:.46em; text-transform:uppercase; color:var(--ink-2); padding-left:.46em; }

/* ============================================================
   PRODUCTO SIN FOTO — placeholder FOTO PENDIENTE (reusa lenguaje del índice)
   ============================================================ */
.prod__frame--pending{ display:grid; place-items:center;
  background: repeating-linear-gradient(135deg, var(--panel) 0 18px, #e2dccf 18px 36px); }
.prod__pending{ text-align:center; color: var(--ink-2); }
.prod__pending .emblem{ width: 62px; opacity:.28; margin: 0 auto 10px; display:block; }
.prod__pending .t{ font-size: 10px; letter-spacing:.24em; text-transform: uppercase; }

/* ============================================================
   LOTE ARGENTINA 2026 — acceso desde Donantes + estado vacío del contenedor
   ============================================================ */
.lote-entry{ display:block; margin-top: clamp(40px,7vh,84px); padding: clamp(28px,4vh,44px) 0;
  border-top:1px solid var(--line); }
.lote-entry__eyebrow{ display:block; font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-2); }
.lote-entry__title{ display:block; margin-top:12px; font-size: clamp(24px,3.4vw,40px); font-weight:400;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); }
.lote-entry__lead{ display:block; max-width:56ch; margin-top:14px; font-size:15.5px; line-height:1.55; color:var(--ink-2); }
.lote-entry__cta{ display:inline-flex; align-items:center; gap:10px; margin-top:20px;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink);
  border-bottom:1px solid var(--ink); padding-bottom:4px; transition: gap .3s var(--ease); }
.lote-entry:hover .lote-entry__cta{ gap:16px; }
.lote-empty{ padding: clamp(36px,6vh,64px) 0; text-align:center; }

/* LOTE ARGENTINA 2026 desplegado dentro de Donantes — separación editorial clara
   (más aire + hairline), sin card ni cambio de estética. */
.lote-section{ margin-top: clamp(60px,11vh,128px); padding-top: clamp(44px,7vh,84px); border-top:1px solid var(--line); }
.lote-head{ text-align:center; max-width: 52ch; margin: 0 auto clamp(30px,5vh,54px); }
.lote-head__title{ font-size: clamp(28px,4.2vw,48px); }
.lote-head__note{ margin-top: 16px; }

/* ============================================================
   MI CUENTA — guest / pending / approved (editorial, sin dashboard SaaS)
   ============================================================ */
.cuenta-page .wrap{ max-width: 640px; }
.cuenta{ padding: clamp(40px,9vh,96px) 0; }
.cuenta__title{ margin-top:14px; }
.cuenta__lead{ margin-top:16px; font-size:16px; line-height:1.55; color:var(--ink-2); }
.cuenta-actions{ display:flex; flex-wrap:wrap; gap:16px; margin-top: clamp(26px,4vh,36px); }
.cuenta-actions .btn-gold{ margin-top:0; }
.btn-line{ display:inline-flex; align-items:center; justify-content:center; min-height:56px; padding:17px 40px;
  background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer;
  font-size:13px; letter-spacing:.18em; text-transform:uppercase; transition: border-color .3s, color .3s; }
.btn-line:hover{ border-color:var(--ink); }
.cuenta-note{ margin-top: clamp(34px,6vh,56px); padding-top: clamp(24px,4vh,34px); border-top:1px solid var(--line); }
.cuenta-note p{ font-size:14.5px; line-height:1.65; color:var(--ink-2); }
.cuenta-note__ref{ margin-top:14px; color:var(--ink-soft); }
.cuenta-status{ margin-top: clamp(20px,4vh,32px); }
.cuenta-status__title{ font-size: clamp(20px,2.6vw,26px); font-weight:400; letter-spacing:.02em; color:var(--ink-soft); }
.cuenta-status__body{ margin-top:14px; font-size:15.5px; line-height:1.6; color:var(--ink-2); }
.cuenta-enabled{ display:inline-block; margin-top:16px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold-btn); }
.cuenta-card{ margin-top: clamp(22px,4vh,32px); border-top:1px solid var(--line); }
.cuenta-row{ display:flex; justify-content:space-between; gap:24px; padding:16px 0; border-bottom:1px solid var(--line); }
.cuenta-row__k{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2); }
.cuenta-row__v{ font-size:15.5px; color:var(--ink); text-align:right; }
.cuenta-logout{ margin-top: clamp(28px,5vh,42px); background:transparent; border:0; cursor:pointer;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-2);
  border-bottom:1px solid var(--line); padding-bottom:4px; transition: color .3s, border-color .3s; }
.cuenta-logout:hover{ color:var(--ink); border-color:var(--ink); }

/* Estado comercial dentro del bloque EMBRIONES A LA CARTA (fondo charcoal): precio y
   disponibilidad reales para el cliente habilitado; invitación sobria para el visitante. */
.embryo__com{ margin: 14px 0 4px; }
.embryo__price{ font-size: clamp(20px,2.2vw,26px); letter-spacing:.02em; color:#f2ede2; }
.embryo__price.muted{ opacity:.45; }
.embryo__avail{ margin-top:6px; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#c9c0ad; }
.embryo__note{ margin:0; font-size:14px; color:#c9c0ad; max-width:46ch; }
.embryo__tbd{ margin:0; font-size:13px; font-style:italic; color:#c9c0ad; }
.embryo__cta{ margin:10px 0 0; display:flex; gap:18px; }
.embryo__cta a{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#c8a86a;
  border-bottom:1px solid rgba(200,168,106,.45); padding-bottom:2px; }
.embryo__cta a:hover{ color:#f2ede2; border-bottom-color:#f2ede2; }

/* Precio en la tarjeta de donante: sobrio, sólo visible para cliente habilitado. */
.dnt__price{ margin-top:8px; font-size:14px; letter-spacing:.02em; color:var(--ink); }

/* ---------- Submenú de navegación (Donantes / Padrillos) ----------
   Sólo navegación: lleva a la ficha de cada ejemplar. Nunca precio, disponibilidad ni cupo.
   Editorial y liviano: sin sombras marcadas, sin cajas pesadas, sin estética de ecommerce. */
.h-drop{ position:relative; display:inline-flex; align-items:center; }
.h-drop__panel{ position:absolute; top:100%; left:50%; transform:translateX(-50%);
  margin-top:14px; min-width:230px; padding:16px 20px 12px;
  background:var(--paper); border:1px solid var(--line); z-index:70; }
/* PUENTE de hover. El panel se separa 14px del trigger por diseño, pero ese hueco no pertenecía
   ni al trigger ni al panel: al bajar el cursor para elegir una donante quedaba sobre el header,
   se disparaba mouseleave y el menú se cerraba antes de llegar. Este pseudo-elemento invisible
   cubre exactamente esa banda y, como es parte del panel (descendiente de .h-drop), mantiene el
   hover de forma continua. Es una corrección de ÁREA, no un delay que disimule el problema.
   Se extiende un poco a los lados para tolerar el recorrido diagonal del mouse. */
.h-drop__panel::before{ content:""; position:absolute; left:-12px; right:-12px; top:-16px; height:18px; }
.h-drop__list{ display:flex; flex-direction:column; }
.h-drop__i{ padding:7px 0; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); opacity:.82; transition:opacity .25s var(--ease), color .25s var(--ease); }
.h-drop__i:hover{ opacity:1; color:var(--gold); }
.h-drop__all{ display:block; margin-top:8px; padding-top:10px; border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.h-drop__all:hover{ color:var(--ink); }

/* Mobile: acordeón dentro del menú hamburguesa (misma fuente de datos, sin hover). */
.menu__pi--drop{ position:relative; }
.menu__acc{ position:absolute; top:2px; right:0; background:none; border:0; cursor:pointer;
  font:inherit; font-size:20px; line-height:1; color:var(--ink-2); padding:4px 8px; }
.menu__sub{ display:flex; flex-direction:column; margin:4px 0 10px; padding-left:2px; }
.menu__si{ padding:7px 0; font-size:13px; letter-spacing:.06em; color:var(--ink-2); }
.menu__si:hover{ color:var(--ink); }

/* ---------- Pedigree en teléfono ----------
   La generación de abuelos caía a 9–11px: seguía siendo un árbol correcto pero costaba leerlo.
   Se sube el piso tipográfico y se recorta el conector horizontal para recuperar ese ancho.
   NO se esconde ninguna generación ni se cambia la estructura: padre arriba / madre abajo intactos. */
@media (max-width: 560px){
  .pedi{ --CONN: 10px; }
  .pname{ font-size: 15px; }
  .pname--product{ font-size: 15px; }
  .pgname{ font-size: 12.5px; }
  .pgterm{ font-size: 12px; }
  .pedi__kick{ font-size: 9.5px; letter-spacing:.18em; }
}

/* Área táctil del acordeón del menú: medía 27×28px, por debajo del mínimo cómodo para el dedo. */
.menu__acc{ min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* La fotografía de una tarjeta de colección es también su enlace. `display:block` evita el hueco
   que deja un <a> en línea debajo de la imagen, y el color se hereda para no teñir el epígrafe. */
.prod__link{ display:block; color:inherit; text-decoration:none; }

/* ---- PORTADA INSTITUCIONAL DEL HOME ----
   Se activa sola cuando el módulo comercial está apagado. A diferencia de la portada comercial,
   que es tipográfica sobre papel, ésta es una FOTOGRAFÍA ENMARCADA: el fondo claro sigue siendo el
   del sitio y la imagen se apoya sobre él con aire, como una lámina. No va a sangre.

   La altura la fija la proporción de la fotografía, no la ventana: por eso `aspect-ratio` en vez de
   `100svh`. Así la imagen nunca se recorta por el alto de la pantalla ni deja franjas muertas. */
.cover--inst{ /* Ocupa la ventana y centra la composición: sin esto, al ocultar el pie quedaba
     una franja muerta debajo de la bajada, que es la misma extensión vacía que había arriba.
     No estira la fotografía —la proporción la fija el marco—; sólo reparte el aire sobrante. */
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding: 0 var(--gutter) clamp(24px,4vh,48px); }
/* El margen superior despeja la navegación fija, que mide ~64px y flota sobre el contenido. */
.cover__marco{ position:relative;
  /* `margin-inline:auto` NO sirve acá: en un contenedor flex un margen automático lateral anula el
     estirado del ítem, el ancho colapsa a 0 y con `aspect-ratio` el alto también — la fotografía
     desaparecía sin dejar rastro en la consola. Se centra con align-self y se fija el ancho. */
  align-self:center; width:100%; margin: clamp(56px,9vh,84px) 0 0; max-width:1240px;
  aspect-ratio: 16 / 9; overflow:hidden; isolation:isolate; }
.cover__marco .cover__bg{ position:absolute; inset:0; z-index:-1; }
/* `cover` recorta sin deformar. El encuadre se corre hacia arriba porque los caballos están sobre
   el alambrado, en la mitad superior: centrado dejaría demasiado pasto y les cortaría las cabezas. */
.cover__marco .cover__bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; }
/* Velo concentrado en la franja BAJA, que es donde se apoya la identidad. La parte alta —donde
   están los animales— queda prácticamente intacta. */
.cover__marco .cover__bg::after{ content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(24,20,16,0) 42%, rgba(24,20,16,.30) 72%, rgba(24,20,16,.58) 100%); }
/* ANTUWALUNG / POLO abajo dentro de la fotografía, no en el centro óptico: arriba competiría con
   las cabezas de los caballos, que son el asunto de la imagen. */
.cover--inst .cover__mark{ position:absolute; left:0; right:0; bottom: clamp(26px,6%,58px);
  padding:0; text-align:center; z-index:1; }
.cover--inst .cover__word{ color:#fff; text-shadow:0 1px 18px rgba(0,0,0,.6); }
.cover--inst .cover__sub{ margin-top:10px; color:rgba(255,252,246,.92); text-shadow:0 1px 12px rgba(0,0,0,.55); }
/* La bajada vive FUERA del marco, sobre el fondo claro: es un pie de lámina, no un rótulo encima
   de la foto. Por eso conserva la tinta del sitio y no lleva sombra. */
.cover--inst .cover__foot{ display:block; padding: clamp(20px,3.4vh,30px) 0 0; text-align:center;
  /* La regla base trae `align-self:end`, pensada para la grilla de tres filas de la portada
     comercial. Acá el contenedor es flex en columna, donde align-self gobierna el eje HORIZONTAL:
     heredarlo empujaba la bajada contra el borde derecho. Se estira para que el centrado del
     texto tenga todo el ancho. */
  align-self: stretch; }
.cover--inst .cover__tag--inst{ color: var(--ink-2); text-shadow:none; }

@media (max-width: 760px){
  /* En vertical, 16:9 dejaría una franja demasiado baja. Se pasa a 4:5 y se sube el encuadre para
     conservar a los caballos completos en vez de una tira de lomos. */
  .cover__marco{ aspect-ratio: 4 / 5; margin-top: clamp(48px,7vh,68px); }
  .cover__marco .cover__bg img{ object-position:50% 38%; }
  .cover--inst{ padding-inline: clamp(14px,4vw,22px); }
}

/* La portada institucional ya dice ANTUWALUNG / POLO sobre la fotografía. El pie del sitio repite
   exactamente esa firma un centímetro más abajo, así que en esta página —y sólo en ésta— se
   oculta. En el resto del sitio el pie sigue igual: allí no hay nada que duplique. */
html.home-institucional .site-foot{ display:none; }

/* ENCABEZADO SIEMPRE VISIBLE EN LA PORTADA INSTITUCIONAL.
   El header se oculta con translateY(-101%) y sólo entra cuando el scroll pasa el 62% de la
   ventana: una regla heredada de la portada anterior, que ocupaba varias pantallas. Esta portada
   mide exactamente una ventana y no tiene pie, así que el scroll máximo es CERO y ese umbral no
   se alcanza nunca: en teléfono no había marca, ni hamburguesa, ni forma de salir del inicio.
   Acá no hay nada debajo que justifique esconderlo, así que se muestra desde el principio. */
html.home-institucional .site-header{ transform:none; border-bottom-color: var(--line); }
/* Zona segura del iPhone: sin esto la marca queda debajo de la muesca en pantalla completa. */
html.home-institucional .site-header{ padding-top: max(18px, env(safe-area-inset-top)); }
/* La portada arranca DEBAJO del encabezado, que es fijo y no ocupa lugar en el flujo. */
html.home-institucional .cover--inst{ padding-top: 64px; }

/* Área táctil de la hamburguesa: las dos barras miden 22×1.4 px y con 6 px de padding el objetivo
   quedaba en ~34×22, por debajo del mínimo cómodo. Se agranda el ÁREA, no el dibujo. */
.site-header .h-menu{ min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* La flecha "volver" no tiene sentido en el inicio: no hay a dónde volver y su href es "#".
   Antes no se notaba porque en el inicio el encabezado nunca llegaba a verse. Se oculta con
   `visibility` y no con `display:none` a propósito: el encabezado es una grilla de tres columnas
   y quitar el primer elemento correría la marca fuera del centro. */
html.home-institucional .site-header .h-back{ visibility:hidden; pointer-events:none; }