/* ─────────────────────────────  BASE  ───────────────────────────── */
:root{
  --negro:#FFFFFF;
  --negro-2:#F7F4EE;
  --negro-3:#EFEAE1;
  --oro:#7D1D2E;
  --oro-claro:#A03246;
  --oro-tenue:rgba(var(--oro-rgb),.28);
  --hueso:#000000;
  --hueso-tenue:rgba(var(--hueso-rgb),.86);
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Montserrat',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --pad:clamp(1.5rem,5vw,6rem);
  --cab-alto:60px;      /* alto de la barra fija; lo usa la cabecera de ficha */
  --blanco:#fff;        /* el blanco de la cortina de carga */
  --hueso-rgb:0,0,0;
  --negro-rgb:255,255,255;
  --oro-rgb:125,29,46;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--negro);color:var(--hueso);
  font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.75;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

::selection{background:var(--oro);color:var(--negro)}

/* tipografía de sistema */
.kicker{
  font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--oro);font-weight:400;
}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05;letter-spacing:-.015em}
.display{font-size:clamp(2.6rem,7.5vw,7rem);font-style:italic}
.h2{font-size:clamp(2rem,4.6vw,4rem)}
p{max-width:62ch}
.lead{font-size:clamp(1.05rem,1.5vw,1.35rem);line-height:1.85;color:rgba(var(--hueso-rgb),1)}
.tenue{color:var(--hueso-tenue)}

/* regla dorada */
.regla{height:1px;background:linear-gradient(90deg,var(--oro-tenue),transparent);border:0}

/* ─────────────────────  REVELADO AL SCROLL  ───────────────────── */
[data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
[data-rv].vis{opacity:1;transform:none}
[data-rv="wipe"]{opacity:1;transform:none;clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--ease)}
[data-rv="wipe"].vis{clip-path:inset(0 0 0 0)}
[data-rv="fig"] img{transform:scale(1.14);transition:transform 1.6s var(--ease)}
[data-rv="fig"].vis img{transform:scale(1)}
@media (prefers-reduced-motion:reduce){
  [data-rv],[data-rv="wipe"],[data-rv="fig"] img{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  html{scroll-behavior:auto}
  /* el escudo de la cabecera aparece, pero sin entrada animada */
  .fh-escudo{animation:none!important;opacity:.92!important}
}

/* ───────────────────────────  NAV  ─────────────────────────── */
header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.3rem var(--pad);
  transition:background .6s var(--ease),padding .6s var(--ease),border-color .6s var(--ease);
  border-bottom:1px solid transparent;
}
header.solid{
  background:rgba(var(--negro-rgb),.86);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(var(--oro-rgb),.16);padding:.85rem var(--pad);
}
.marca{display:flex;align-items:center;gap:.85rem}
/* Escudo y rótulo juntos, recompuestos: el escudo mide 1,24 alturas de
   rótulo y el hueco entre ambos 0,32 anchos de escudo. En el logotipo
   original ese hueco era de 0,11 y el escudo rozaba el rasgo de la R.
   Los dos van alineados por su centro óptico —el centroide de la
   tinta—, no por la caja: el rótulo tiene astas y un descendente que
   descuadran la caja pero no el peso visual. */
.marca img{height:40px;width:auto;transition:height .6s var(--ease)}
header.solid .marca img{height:32px}
nav{display:flex;gap:2.3rem;align-items:center}
nav a{
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--hueso-tenue);
  position:relative;padding:.4rem 0;transition:color .45s var(--ease);
}
nav a::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--oro);transition:width .55s var(--ease);
}
nav a:hover{color:var(--hueso)}
nav a:hover::after{width:100%}

/* ── grupos con desplegable (Ejemplares · En venta) ──────────────
   El título es un enlace de verdad: clic lleva a la página completa
   y el panel sólo aparece al posarse o al navegar con teclado
   (focus-within). El panel nace pegado al título, sin hueco entre
   medias, para que el puntero no lo "suelte" al bajar. */
nav .grupo{position:relative}
nav .grupo .caret{
  display:inline-block;width:5px;height:5px;margin-left:.55rem;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;
  transition:transform .4s var(--ease);
}
nav .grupo:hover .caret{transform:translateY(1px) rotate(45deg)}
nav .sub{
  position:absolute;top:100%;left:50%;
  transform:translate(-50%,10px);
  min-width:172px;padding:1.05rem 1.5rem 1.15rem;
  display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;
  background:rgba(var(--negro-rgb),.96);backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(var(--oro-rgb),.18);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s .4s;
}
nav .sub::before{ /* puente invisible sobre el panel */
  content:'';position:absolute;left:0;right:0;bottom:100%;height:14px;
}
nav .grupo:hover .sub,nav .grupo:focus-within .sub{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translate(-50%,4px);transition-delay:0s;
}
nav .sub a{font-size:.6rem;letter-spacing:.24em;padding:.42rem 0;white-space:nowrap}
.lang{display:flex;gap:.5rem;align-items:center;font-size:.66rem;letter-spacing:.2em}
.lang button{
  background:none;border:0;color:var(--hueso-tenue);cursor:pointer;
  font-family:var(--sans);font-size:.66rem;letter-spacing:.2em;padding:.3rem .1rem;
  transition:color .4s var(--ease);
}
.lang button.on{color:var(--oro)}
.lang span{color:rgba(var(--hueso-rgb),.22)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.5rem;width:38px}
.burger i{display:block;height:1px;background:var(--hueso);margin:6px 0;transition:.45s var(--ease)}

/* ───────────────────────────  HERO  ─────────────────────────── */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;display:flex;align-items:flex-end}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:58% 50%;
  transform:scale(1.1);animation:deriva 22s var(--ease) forwards}
@keyframes deriva{to{transform:scale(1)}}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(var(--negro-rgb),.34) 0%,rgba(var(--negro-rgb),.05) 30%,rgba(var(--negro-rgb),.26) 72%,var(--negro) 100%),
    radial-gradient(120% 80% at 70% 40%,transparent 58%,rgba(var(--negro-rgb),.20) 100%);
}
.hero-txt{position:relative;z-index:2;padding:0 var(--pad) clamp(3.5rem,9vh,7rem);width:100%}
.hero-txt .kicker{display:block;margin-bottom:1.4rem;
  opacity:0;animation:sube 1.2s var(--ease) .5s forwards}
.hero-txt h1{margin-bottom:1.6rem;max-width:16ch;
  opacity:0;animation:sube 1.3s var(--ease) .72s forwards}
.hero-txt .lead{max-width:46ch;
  opacity:0;animation:sube 1.3s var(--ease) .95s forwards}
@keyframes sube{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
.scroll-cue{
  position:absolute;right:var(--pad);bottom:clamp(3.5rem,9vh,7rem);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;
  font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--hueso-tenue);
  opacity:0;animation:sube 1.2s var(--ease) 1.4s forwards;
}
.scroll-cue::after{content:'';width:1px;height:56px;background:linear-gradient(var(--oro),transparent);
  animation:cae 2.6s var(--ease) infinite}
@keyframes cae{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}
  55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* ───────────────────────  SECCIONES  ─────────────────────── */
section{padding:clamp(5rem,13vh,10rem) var(--pad);position:relative}
/* Rótulo dorado y regla, sin numeral. Los romanos venían de cuando
   el sitio era una sola página larga y se leía como un índice; en un
   sitio de siete páginas no numeraban nada. */
.sec-cab{display:flex;align-items:baseline;gap:1.6rem;margin-bottom:clamp(2.5rem,6vh,4.5rem)}
.sec-cab .linea{flex:1;height:1px;background:var(--oro-tenue);margin-bottom:.4rem}

/* manifiesto */
.manif{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,7rem);align-items:start}
.manif .firma{font-family:var(--serif);font-style:italic;font-size:1.15rem;color:var(--oro);margin-top:2.2rem}

/* franja de cifras */
.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(var(--oro-rgb),.18);border-bottom:1px solid rgba(var(--oro-rgb),.18);
  background:var(--negro-2);
}
.cifra{padding:clamp(2rem,4vw,3rem) clamp(1rem,2.5vw,2rem);border-right:1px solid rgba(var(--oro-rgb),.12);text-align:center}
.cifra:last-child{border-right:0}
.cifra b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.4vw,3.2rem);color:var(--oro-claro);font-weight:400;line-height:1;margin-bottom:.7rem}
.cifra small{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--hueso-tenue)}

/* ─────────────────────  REJILLA DE CABALLOS  ───────────────────── */
.caballos{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.4vw,2.2rem)}
.card{position:relative;display:block;background:var(--negro-2);overflow:hidden;isolation:isolate}
/* Marco cuadrado y la foto ENTERA dentro, con su margen.
   Antes el marco era 4/5 y recortaba a cara: la mayoría de los
   retratos son apaisados de 1.50, así que se perdía hasta el 47 % del
   ancho — a un caballo fotografiado de perfil le desaparecía medio
   cuerpo. Un cuadrado con object-fit:contain enseña la foto completa;
   el aire que sobra a los lados es margen, no un fallo. */
.card .marco{
  position:relative;overflow:hidden;aspect-ratio:1/1;
  background:var(--negro);padding:clamp(.5rem,1.2vw,1rem)
}
.card .marco img{width:100%;height:100%;object-fit:contain;
  transition:transform 1.5s var(--ease),filter 1.1s var(--ease);filter:saturate(.92) contrast(1.03)}
.card:hover .marco img{transform:scale(1.04);filter:saturate(1.05) contrast(1.06)}
/* El rótulo va DEBAJO del cuadro, no encima.
   Superpuesto tenía sentido cuando la foto llenaba el marco a cara: el
   degradado caía sobre fondo, no sobre el caballo. Con la foto entera
   dentro del cuadrado, el nombre y el linaje se comían el 39 % de la
   imagen — justo la parte de abajo, que es donde están los aplomos. */
.card .info{padding:clamp(.9rem,1.8vw,1.4rem);position:relative;z-index:2}
.card h3{font-size:clamp(1.15rem,1.7vw,1.6rem);margin-bottom:.35rem}
/* dos líneas reservadas: hay linajes de una línea («Remache XIII ×
   Tesoro XI») y de dos («Jordán de Centurión × Guadiana de Marengo»),
   y sin reservarlas las tarjetas de la rejilla no casaban en altura */
.card .padres{
  font-size:.72rem;letter-spacing:.06em;color:var(--oro);font-style:italic;
  font-family:var(--serif);margin-bottom:.7rem;
  line-height:1.5;min-height:calc(.72rem * 1.5 * 2)
}
.card .meta{
  display:flex;flex-wrap:wrap;gap:.35rem .9rem;font-size:.6rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--hueso-tenue);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height 1s var(--ease),opacity .8s var(--ease),margin .8s var(--ease);
}
.card:hover .meta,.card:focus-visible .meta{max-height:80px;opacity:1;margin-top:.2rem}
.card .distintivo{
  position:absolute;top:1rem;left:1rem;z-index:3;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.42rem .8rem;background:rgba(var(--negro-rgb),.7);backdrop-filter:blur(6px);
  border:1px solid var(--oro-tenue);color:var(--oro-claro);
}
.card .distintivo.vendido{border-color:rgba(var(--hueso-rgb),.2);color:var(--hueso-tenue)}
.card::after{content:'';position:absolute;inset:0;border:1px solid transparent;
  transition:border-color .8s var(--ease);pointer-events:none;z-index:4}
.card:hover::after{border-color:var(--oro-tenue)}

/* ───────────────────────  FICHA DESTACADA  ─────────────────────── */
.ficha{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,5.5rem);align-items:center}
.ficha figure{position:relative;overflow:hidden}
.ficha figure img{width:100%;aspect-ratio:3/4;object-fit:cover}
.ficha .escudo-marca{position:absolute;right:1.3rem;bottom:1.3rem;width:44px;opacity:.85}
.datos{list-style:none;margin:2.2rem 0}
.datos li{display:flex;justify-content:space-between;gap:2rem;padding:.95rem 0;
  border-bottom:1px solid rgba(var(--hueso-rgb),.09);font-size:.86rem}
.datos li:first-child{border-top:1px solid rgba(var(--hueso-rgb),.09)}
.datos dt,.datos .k{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--hueso-tenue);flex:0 0 auto}
.datos .v{text-align:right;color:var(--hueso)}
.datos .v em{font-family:var(--serif);color:var(--oro-claro);font-style:italic}
.aptitudes{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.aptitudes span{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.5rem .9rem;border:1px solid rgba(var(--oro-rgb),.3);color:var(--oro-claro)}

/* pedigrí — árbol de dos generaciones */
.pedigri{margin:0 0 2.4rem}
.ped-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem 1.6rem}
.ped-col{display:grid;gap:.5rem;align-content:center}
.ped-box{
  position:relative;padding:.7rem .9rem;font-size:.78rem;
  background:rgba(255,255,255,.02);border-left:2px solid var(--oro-tenue);
  transition:border-color .6s var(--ease),background .6s var(--ease);
}
/* conector horizontal hacia la columna anterior */
.ped-col+.ped-col .ped-box::before{
  content:'';position:absolute;right:100%;top:50%;
  width:1.6rem;height:1px;background:rgba(var(--oro-rgb),.22);
}
.ped-box:hover{border-left-color:var(--oro);background:rgba(var(--oro-rgb),.06)}
.ped-box i{display:block;font-style:normal;font-size:.6rem;letter-spacing:.2em;color:var(--hueso-tenue);margin-top:.25rem}
.ped-box.madre{border-left-color:rgba(214,194,152,.18)}
/* dato destacado: real, no pendiente */
.datos .v .fuerte{font-family:var(--serif);font-style:normal;color:var(--oro-claro);font-size:1.15rem;letter-spacing:.02em}

/* botones */
.btn{
  display:inline-flex;align-items:center;gap:1rem;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  padding:1.1rem 2rem;border:1px solid var(--oro);color:var(--oro-claro);
  position:relative;overflow:hidden;transition:color .6s var(--ease);
}
.btn span{position:relative;z-index:2}
.btn::before{content:'';position:absolute;inset:0;background:var(--oro);
  transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:1}
.btn:hover{color:var(--negro)}
.btn:hover::before{transform:scaleX(1)}
.btn.solido{background:var(--oro);color:var(--negro);border-color:var(--oro)}
.btn.solido::before{background:var(--hueso)}
/* el mismo botón sobre <button> (limpiar búsqueda): hereda la letra
   y pierde el fondo del agente de usuario */
button.btn{background:none;cursor:pointer;font-family:var(--sans);font-weight:300}

/* ───────────────────────  YEGUADAS  ─────────────────────── */
.yeguadas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(var(--oro-rgb),.16);border:1px solid rgba(var(--oro-rgb),.16)}
.yeguada{background:var(--negro);padding:clamp(1.8rem,3vw,2.8rem);transition:background .7s var(--ease)}
.yeguada:hover{background:var(--negro-3)}
.yeguada .num{font-family:var(--serif);font-style:italic;color:var(--oro-tenue);font-size:.85rem;margin-bottom:1rem}
.yeguada h3{font-size:1.2rem;margin-bottom:.6rem}
.yeguada p{font-size:.82rem;color:var(--hueso-tenue);line-height:1.7}

/* ── quiénes somos (portada) ── */
/* Un escalón por debajo del h2, para que los apartados de dentro de
   la sección no compitan con su titular. */
.h3{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.25;color:var(--hueso)
}
/* la aérea del rancho nuevo en la portada, dentro de «Quiénes somos».
   En La Casa la misma foto va a sangre, como primera banda. */
/* overflow:hidden no es cosmético: la entrada de [data-rv="fig"]
   arranca la imagen a scale(1.14), y sin recortarla esos 14 % se
   salían del ancho de la ventana y dejaban la portada con barra de
   desplazamiento horizontal. Recortada, el zoom se lee dentro de su
   marco, que es como está pensado. */
.rancho-foto{margin:0;overflow:hidden}
.rancho-foto img{width:100%;height:auto;display:block}
.rancho-foto figcaption{
  margin-top:.8rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.65)
}

/* ── instalaciones: bandas a sangre ──────────────────────────────
   Media pantalla de fotografía y media de texto, alternando el lado.
   Van fuera de <section> a propósito: la foto llega al borde del
   navegador, sin el margen lateral que respeta el resto de la
   página. Es lo que hace que se lean como un recorrido y no como
   una lista de tarjetas. */
.bandas{background:var(--negro-2)}
.banda{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border-top:1px solid rgba(var(--oro-rgb),.12);
}
.banda-foto{position:relative;overflow:hidden;min-height:clamp(280px,48vh,540px)}
.banda-foto img{width:100%;height:100%;object-fit:cover;display:block}
/* banda viva: el vídeo llena igual que la foto. position:absolute
   para que un vídeo vertical no estire la banda a su altura natural. */
.banda-foto video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.banda-txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(2.4rem,6vh,4.5rem) var(--pad);
}
.banda-txt .h3{margin-bottom:1.1rem}
.banda-txt .lead{max-width:46ch}
/* alterna el lado sin duplicar el marcado: el orden visual cambia,
   el del documento se queda como está para quien navega con teclado */
.banda.invertida .banda-foto{order:2}
.banda.invertida .banda-txt{order:1}
/* apiladas: la foto siempre arriba, también en las invertidas, para
   que el recorrido se lea foto-texto, foto-texto y no dé tumbos */
@media(max-width:900px){
  .banda,.banda.invertida{grid-template-columns:1fr}
  .banda-foto,.banda.invertida .banda-foto{order:1;min-height:clamp(220px,38vh,340px)}
  .banda-txt,.banda.invertida .banda-txt{order:2}
}

/* Hueco de fotografía pendiente. Es deliberado y lleva escrito qué
   falta: un placeholder rotulado dice más que una foto del rancho
   antiguo, que es justo lo que no se quiere enseñar. */
.banda-foto.falta{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.4rem;background:
    repeating-linear-gradient(135deg,rgba(var(--oro-rgb),.035) 0 12px,transparent 12px 24px),
    var(--negro);
  border-left:1px solid rgba(var(--oro-rgb),.12);
  border-right:1px solid rgba(var(--oro-rgb),.12);
  padding:2rem;
}
.placa-escudo{
  display:block;height:clamp(52px,7vh,86px);
  width:calc(clamp(52px,7vh,86px) * 232 / 260);
  background-color:var(--oro);opacity:.5;
  -webkit-mask:url(/img/marca-escudo.png) center/contain no-repeat;
          mask:url(/img/marca-escudo.png) center/contain no-repeat;
}
.placa-pide{
  max-width:30ch;text-align:center;
  font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;line-height:2;
  color:rgba(var(--hueso-rgb),.7);
}
.placa-pide::before{content:'Falta la foto · ';color:var(--oro);opacity:.75}
html[lang="en"] .placa-pide::before{content:'Photo pending · '}

/* ── preguntas frecuentes ───────────────────────────────────────
   <details> nativo: se abre sin JavaScript, lo lee un lector de
   pantalla de serie y funciona aunque falle todo lo demás. */
.faq{max-width:70ch;border-top:1px solid rgba(var(--oro-rgb),.14)}
.faq-i{border-bottom:1px solid rgba(var(--oro-rgb),.14)}
.faq-i summary{
  list-style:none;cursor:pointer;padding:1.3rem 2.4rem 1.3rem 0;position:relative;
  font-family:var(--serif);font-size:clamp(1rem,1.5vw,1.15rem);
  color:var(--hueso);transition:color .45s var(--ease);
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i summary:hover{color:var(--oro)}
.faq-i summary::after{
  content:'';position:absolute;right:.3rem;top:50%;
  width:11px;height:11px;margin-top:-7px;
  border-right:1px solid var(--oro);border-bottom:1px solid var(--oro);
  transform:rotate(45deg);transition:transform .45s var(--ease);
}
.faq-i[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq-i p{
  padding:0 2.4rem 1.6rem 0;max-width:62ch;
  color:var(--hueso-tenue);line-height:1.9;font-size:.94rem;
}

/* ── instalaciones y equipo (La Casa) ── */
/* El vídeo del rancho nuevo se sirve desde aquí, no incrustado de
   Instagram: la página no llama fuera ni depende de que la
   publicación siga existiendo. Va con preload="none", así que no baja
   un byte hasta que alguien le da al play. */
.rancho-video{margin:0 0 clamp(2.5rem,6vh,4rem)}
.rancho-video video{
  width:100%;height:auto;display:block;background:var(--negro);
  border:1px solid rgba(var(--oro-rgb),.18)
}
.rancho-video figcaption{
  margin-top:.8rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.65)
}
/* la vida en Marengo: dos escenas verticales en bucle, lado a lado.
   Altura contenida: son ambiente, no protagonistas. */
.vida{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1rem,2.5vw,2rem)}
.vida-clip{margin:0}
.vida-clip video{
  width:100%;height:clamp(300px,56vh,560px);object-fit:cover;display:block;
  background:var(--negro);border:1px solid rgba(var(--oro-rgb),.18)
}
.vida-clip figcaption{
  margin-top:.8rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.65)
}
/* con una sola escena, la rejilla no deja media pantalla vacía */
.vida.vida-una{grid-template-columns:1fr;max-width:min(620px,100%)}
@media (max-width:700px){
  .vida{grid-template-columns:1fr}
  .vida-clip video{height:clamp(260px,44vh,420px)}
}
.pano{margin-top:clamp(2.5rem,6vh,4rem)}
.pano img{width:100%;height:auto;display:block}
.pano figcaption{
  font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.66);padding-top:.9rem
}
/* mientras no lleguen nombres y fotos, el equipo se cuenta en prosa;
   la rejilla .equipo/.persona de abajo queda lista para ese día */
/* La foto del equipo es vertical y al lado de dos párrafos se dispara
   de alto: la columna crecía un tercio más que el texto. Se le da una
   altura de caja y la foto la cubre, mirando algo hacia arriba para no
   perder ni las orejas del caballo ni la cara. */
#equipo .dos-col figure{height:clamp(360px,52vh,620px)}
#equipo .dos-col figure img{height:100%;object-fit:cover;object-position:50% 30%}
@media(max-width:900px){
  #equipo .dos-col figure{height:clamp(320px,62vw,480px)}
}
.equipo-txt{max-width:60ch}
.equipo-txt p{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(1.15rem,1.6vw,1.4rem);line-height:1.9;
  color:var(--hueso-tenue);margin-bottom:1.6rem
}
.equipo-txt p::first-letter{color:var(--oro)}
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(var(--oro-rgb),.16);border:1px solid rgba(var(--oro-rgb),.16)}
.persona{background:var(--negro);padding:clamp(1.8rem,3vw,2.8rem);
  transition:background .7s var(--ease)}
.persona:hover{background:var(--negro-3)}
/* el escudo de la marca como retrato provisional: cuando lleguen las
   fotos del equipo, aquí va un <img> y este avatar desaparece */
.persona .avatar{
  display:block;width:56px;height:63px;margin-bottom:1.4rem;
  background-color:var(--oro-tenue);
  -webkit-mask:url(/img/marca-escudo.png) center/contain no-repeat;
  mask:url(/img/marca-escudo.png) center/contain no-repeat;
}
.persona h3{font-size:1.15rem;margin-bottom:.3rem}
.persona .cargo{
  font-family:var(--serif);font-style:italic;color:var(--oro);
  font-size:.9rem;margin-bottom:.8rem
}
.persona p{font-size:.82rem;color:var(--hueso-tenue);line-height:1.7}
@media(max-width:1024px){.equipo{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.equipo{grid-template-columns:1fr}}

/* ───────────────────────  CONTACTO  ─────────────────────── */
.contacto{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.vias{list-style:none;margin-top:2.5rem}
.vias li{padding:1.5rem 0;border-bottom:1px solid rgba(var(--hueso-rgb),.09)}
.vias li:first-child{border-top:1px solid rgba(var(--hueso-rgb),.09)}
.vias .k{display:block;font-size:.6rem;letter-spacing:.28em;text-transform:uppercase;color:var(--oro);margin-bottom:.5rem}
.vias .v{font-family:var(--serif);font-size:1.3rem}
.vias a.v{transition:color .5s var(--ease)}
.vias a.v:hover{color:var(--oro-claro)}
form{display:grid;gap:1.1rem}
.campo{position:relative}
.campo input,.campo textarea,.campo select{
  width:100%;background:transparent;border:0;border-bottom:1px solid rgba(var(--hueso-rgb),.18);
  color:var(--hueso);font-family:var(--sans);font-weight:300;font-size:.95rem;
  padding:1rem 0 .7rem;transition:border-color .6s var(--ease);
}
.campo select{cursor:pointer}
.campo select option{background:var(--negro-2);color:var(--hueso)}
.campo textarea{resize:vertical;min-height:110px}
.campo input:focus,.campo textarea:focus,.campo select:focus{outline:0;border-bottom-color:var(--oro)}
.campo label{
  position:absolute;left:0;top:1rem;font-size:.95rem;color:rgba(var(--hueso-rgb),.7);
  pointer-events:none;transition:.5s var(--ease);
}
.campo input:focus+label,.campo input:not(:placeholder-shown)+label,
.campo textarea:focus+label,.campo textarea:not(:placeholder-shown)+label{
  top:-.5rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
.campo.sel label{position:static;display:block;margin-bottom:-.3rem;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oro)}
form .btn{margin-top:1rem;justify-self:start;background:none;cursor:pointer;font-family:var(--sans)}

/* ───────────────────────  PIE  ─────────────────────── */
footer{padding:clamp(3rem,7vh,5rem) var(--pad) 2.5rem;border-top:1px solid rgba(var(--oro-rgb),.16);background:var(--negro-2)}
.pie-top{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:3rem}
.pie-top img{height:46px;opacity:.9}
.redes{display:flex;gap:1.6rem}
.redes a{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--hueso-tenue);
  border-bottom:1px solid transparent;padding-bottom:.3rem;transition:.5s var(--ease)}
.redes a:hover{color:var(--oro);border-bottom-color:var(--oro-tenue)}
.pie-bot{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;
  font-size:.66rem;color:rgba(var(--hueso-rgb),.65);letter-spacing:.06em}

/* nota de demo */
.nota-demo{
  position:fixed;left:var(--pad);bottom:1.2rem;z-index:70;
  font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.65);background:rgba(var(--negro-rgb),.7);backdrop-filter:blur(8px);
  padding:.5rem .9rem;border:1px solid rgba(var(--oro-rgb),.16);
}

/* ───────────────────────  RESPONSIVE  ─────────────────────── */
@media(max-width:1024px){
  .caballos{grid-template-columns:repeat(2,1fr)}
  .yeguadas{grid-template-columns:repeat(2,1fr)}
  .ficha,.manif,.contacto{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(-n+2){border-bottom:1px solid rgba(var(--oro-rgb),.12)}
}
/* Con seis módulos la fila ya no cabe en pantallas medianas: entre
   1081 y 1350 se aprieta la letra, y de 1080 para abajo manda el
   menú de hamburguesa (antes entraba a 720). */
@media(max-width:1350px){
  nav{gap:1.5rem}
  nav a{font-size:.62rem;letter-spacing:.2em}
}
@media(max-width:1080px){
  nav{
    position:fixed;inset:0;background:rgb(var(--negro-rgb));
    flex-direction:column;justify-content:center;gap:2.2rem;
    clip-path:circle(0 at calc(100% - 3rem) 2.5rem);
    transition:clip-path .85s var(--ease);
  }
  /* El panel era `.97` con `blur(20px)`, y con la paleta en blanco eso
     no daba un cristal esmerilado: dejaba pasar un 3 % del héroe
     desenfocado y el menú se veía con manchas. Opaco y sin filtro —
     que además es medio megapíxel menos de desenfoque por fotograma
     en un teléfono. */
  nav.abierto{clip-path:circle(150% at calc(100% - 3rem) 2.5rem)}
  /* El logotipo tiene que sobrevivir al panel. El `header` abre
     contexto de apilado (z-index:60) y dentro de él la marca iba sin
     z-index: el panel, que viene después en el HTML, la tapaba. La
     hamburguesa y el idioma ya estaban levantados (65 y 66); a la
     marca se le olvidó. */
  .marca{position:relative;z-index:65}
  /* Y la trampa gorda: `backdrop-filter` en la cabecera la convierte en
     el bloque contenedor de todo lo `position:fixed` que lleve dentro,
     y el panel del menú es hijo suyo. Con la página desplazada
     —cuando entra `header.solid`, que es quien trae el filtro— el
     panel dejaba de medir la pantalla y pasaba a medir la franja de la
     cabecera: 375x70 en vez de 375x667. Resultado: los enlaces caían
     sobre el contenido de la página, sin fondo detrás. Mientras el menú
     está abierto la cabecera renuncia al filtro y el panel recupera la
     pantalla entera. */
  header.menu{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
  nav a{font-size:.95rem;letter-spacing:.3em}
  /* sin puntero que posar: el título del grupo funciona como enlace
     normal y las categorías se eligen ya en la página */
  nav .grupo{position:static;display:contents}
  nav .sub,nav .grupo .caret{display:none}
  .burger{display:block;z-index:65;position:relative}
  .burger.x i:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.x i:nth-child(2){opacity:0}
  .burger.x i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .lang{position:fixed;bottom:2.5rem;left:50%;transform:translateX(-50%);z-index:66;opacity:0;pointer-events:none;transition:opacity .6s var(--ease)}
  .lang.vis{opacity:1;pointer-events:auto}
}
@media(max-width:720px){
  .caballos,.yeguadas{grid-template-columns:1fr}
  .scroll-cue{display:none}
  .nota-demo{display:none}
  .hero-txt{padding-bottom:clamp(3rem,12vh,5rem)}
  .datos li{flex-direction:column;gap:.35rem}
  .datos .v{text-align:left}
  .hero-txt .kicker{font-size:.58rem;letter-spacing:.24em}
  .display{font-size:clamp(2.8rem,13vw,4rem)}
}

/* ═════════════════════════════════════════════════════════════
   CATÁLOGO  ·  /caballos.html
   Réplica de la taxonomía original: All / Mares / Stallions,
   más Vendidos, que en el sitio viejo vivía en otra página.
   ═════════════════════════════════════════════════════════════ */
.cat-cab{padding:calc(clamp(2.5rem,7vh,4.5rem) + 74px) var(--pad) 0}
.filtros{
  display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;align-items:center;
  padding:0 var(--pad) 1.1rem;
}
/* segunda fila de herramientas: el buscador. El borde inferior que
   cerraba .filtros vive aquí, bajo el conjunto. */
.herr{
  display:flex;flex-wrap:wrap;gap:1rem 2.6rem;align-items:center;
  padding:0 var(--pad) 1.7rem;
  border-bottom:1px solid rgba(var(--oro-rgb),.14);
  margin-bottom:clamp(2.5rem,6vh,4rem);
}
.buscador{flex:1 1 220px;max-width:330px}
.buscador input{
  width:100%;background:none;border:0;border-radius:0;
  border-bottom:1px solid rgba(var(--oro-rgb),.28);
  color:var(--hueso);font-family:var(--sans);font-weight:300;
  font-size:.8rem;letter-spacing:.05em;padding:.5rem 0;
  transition:border-color .45s var(--ease);
  -webkit-appearance:none;appearance:none;
}
.buscador input:focus{outline:none;border-bottom-color:var(--oro)}
.buscador input::placeholder{color:rgba(var(--hueso-rgb),.65);letter-spacing:.14em;font-size:.72rem;text-transform:uppercase}
.buscador input::-webkit-search-cancel-button{-webkit-appearance:none}
/* sin resultados: cría en camino o filtro sin coincidencias */
.vacio{padding:0 var(--pad) clamp(5rem,13vh,10rem);max-width:620px}
.vacio p{
  font-family:var(--serif);font-style:italic;font-size:1.2rem;
  color:var(--hueso-tenue);line-height:1.85;margin-bottom:1.8rem
}

/* ═════════════════════════════════════════════════════════════
   EN VENTA  ·  /venta.html
   Seis recuadros (los cuatro sexos + embriones y cubriciones) y
   debajo las dos secciones que no son animales con ficha.
   ═════════════════════════════════════════════════════════════ */
.venta6{margin:0 var(--pad) clamp(4rem,10vh,7rem)}
a.yeguada{display:block}
a.yeguada .flecha{
  display:inline-block;margin-top:1.1rem;font-size:.62rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--oro);opacity:0;transform:translateX(-6px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}
a.yeguada:hover .flecha{opacity:1;transform:none}
.venta-sec{scroll-margin-top:86px;padding-top:clamp(2.5rem,7vh,4.5rem)}
.venta-sec .sec-cab,.venta-sec .h2,.venta-sec .lead{margin-left:var(--pad);margin-right:var(--pad)}
.venta-sec .lead{max-width:640px;margin-bottom:clamp(2.2rem,5vh,3.4rem)}
.venta-txt{
  margin:0 var(--pad) clamp(5rem,13vh,9rem);max-width:640px;
}
.venta-txt p{color:var(--hueso-tenue);line-height:1.9;font-size:.92rem;margin-bottom:1.4rem}

/* ═════════════════════════════════════════════════════════════
   COMPETICIONES  ·  /competiciones.html
   Próximas salidas (vacío honesto mientras no haya anuncio) y el
   historial agrupado por años, filtrable por disciplina.
   ═════════════════════════════════════════════════════════════ */
.comp-prox,.comp-hist{padding:0 var(--pad) clamp(3.5rem,8vh,6rem)}
.sin-salidas{
  font-family:var(--serif);font-style:italic;font-size:1.2rem;
  color:var(--hueso-tenue);line-height:1.85;max-width:56ch;
  margin-bottom:1.8rem
}
.salida{
  display:flex;gap:2.5rem;align-items:baseline;
  padding:1.4rem 0;border-bottom:1px solid rgba(var(--oro-rgb),.14)
}
.salida .cuando{
  font-family:var(--serif);font-style:italic;color:var(--oro);
  min-width:11ch;font-size:1rem
}
.salida h3{font-size:1.15rem;margin-bottom:.2rem}
.salida .donde{font-size:.78rem;color:var(--hueso-tenue);letter-spacing:.06em}
.comp-hist .filtros{border-bottom:1px solid rgba(var(--oro-rgb),.14);
  margin-bottom:clamp(2rem,5vh,3rem)}
.anio-g{
  display:grid;grid-template-columns:130px 1fr;gap:clamp(1.5rem,4vw,3.5rem);
  padding:clamp(1.8rem,4vh,2.8rem) 0;
  border-bottom:1px solid rgba(var(--oro-rgb),.1)
}
.anio-g .anio{
  font-family:var(--serif);font-style:italic;color:var(--oro);
  font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1
}
.evento{padding:.9rem 0}
.evento+.evento{border-top:1px solid rgba(var(--oro-rgb),.08)}
.evento .tag{
  display:inline-block;font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--oro);font-weight:500;margin-bottom:.45rem
}
.evento h3{font-size:1.05rem;margin-bottom:.35rem}
.evento p{font-size:.85rem;color:var(--hueso-tenue);line-height:1.7}
.evento .quien{margin-top:.4rem;font-size:.78rem}
.evento .quien a{color:var(--oro);transition:color .4s var(--ease)}
.evento .quien a:hover{color:var(--oro-claro)}
/* Los títulos del mundo llevan filete de oro. Son cuatro en catorce
   años: si se marcara cualquier campeonato de sección el filete
   dejaría de significar nada. */
.evento.destacado{
  border-left:1px solid var(--oro);padding-left:1.15rem;
  margin-left:-1px
}
/* segundo resultado del mismo concurso: va pegado al anterior y sin
   filete, porque no es un evento nuevo sino la continuación */
.evento.sigue{padding-top:0;margin-top:-.35rem}
.evento.sigue+.evento,.evento+.evento.sigue{border-top:0}
.evento.destacado h3{color:var(--hueso)}
.evento.destacado>p:not(.quien){color:var(--hueso);font-size:.92rem}
.nota-casas{
  font-size:.72rem;letter-spacing:.05em;line-height:1.95;
  color:rgba(var(--hueso-rgb),.65);max-width:78ch;
  margin-bottom:clamp(1.8rem,4vh,2.6rem)
}
.sin-hist{
  font-family:var(--serif);font-style:italic;font-size:1.15rem;
  color:var(--hueso-tenue);line-height:1.85;max-width:56ch
}
/* Vídeo de las competiciones. No se incrusta el reproductor de salida:
   cada iframe de YouTube arrastra cerca de un mega de JavaScript ajeno y
   aquí hay varios en la misma página. Se pinta una carátula propia —
   imagen servida desde nuestro dominio — y el reproductor entra sólo al
   pulsar. Hasta ese momento la página no habla con YouTube. */
.comp-vid{padding:0 var(--pad) clamp(3.5rem,8vh,6rem);background:var(--negro-2)}
.vid-rej{
  display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr))
}
.vid{display:flex;flex-direction:column}
.vid .lienzo{
  position:relative;padding-top:56.25%;background:var(--negro);
  overflow:hidden;cursor:pointer;border:0;padding-left:0;padding-right:0;
  width:100%;display:block
}
.vid .lienzo img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.72) brightness(.82);
  transition:filter .7s var(--ease),transform .9s var(--ease)
}
.vid .lienzo:hover img{filter:saturate(.95) brightness(.95);transform:scale(1.03)}
.vid .lienzo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid .play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;
  border:1px solid rgba(var(--oro-rgb),.78);background:rgba(var(--negro-rgb),.42);
  display:grid;place-items:center;pointer-events:none;
  transition:background .5s var(--ease),border-color .5s var(--ease)
}
.vid .lienzo:hover .play{background:rgba(var(--negro-rgb),.66);border-color:var(--oro)}
.vid .play::after{
  content:'';width:0;height:0;margin-left:4px;
  border-left:15px solid var(--oro);
  border-top:9px solid transparent;border-bottom:9px solid transparent
}
.vid .dur{
  position:absolute;right:.7rem;bottom:.7rem;
  font-size:.6rem;letter-spacing:.16em;color:var(--hueso);
  background:rgba(var(--negro-rgb),.72);padding:.25rem .5rem
}
.vid .tag{
  display:inline-block;font-size:.56rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--oro);font-weight:500;margin:.9rem 0 .35rem
}
.vid h3{font-size:1rem;line-height:1.45;margin-bottom:.3rem}
.vid p{font-size:.8rem;color:var(--hueso-tenue);line-height:1.65}
.vid .quien{margin-top:.35rem;font-size:.76rem}
.vid .quien a{color:var(--oro);transition:color .4s var(--ease)}
.vid .quien a:hover{color:var(--oro-claro)}
.vid-nota{
  margin-top:clamp(1.8rem,4vh,2.6rem);font-size:.68rem;letter-spacing:.1em;
  color:rgba(var(--hueso-rgb),.62);line-height:1.8;max-width:70ch
}
@media(max-width:720px){
  .anio-g{grid-template-columns:1fr;gap:.6rem}
  .salida{flex-direction:column;gap:.5rem}
  .vid-rej{grid-template-columns:1fr}
}
.filtros button{
  background:none;border:0;cursor:pointer;color:var(--hueso-tenue);
  font-family:var(--sans);font-weight:300;
  font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;
  padding:.6rem 0;position:relative;transition:color .5s var(--ease);
}
.filtros button::after{
  content:'';position:absolute;left:0;bottom:0;width:0;height:1px;
  background:var(--oro);transition:width .6s var(--ease);
}
.filtros button:hover{color:var(--hueso)}
.filtros button.on{color:var(--oro)}
.filtros button.on::after{width:100%}
.filtros .cuenta{
  margin-left:auto;font-size:.62rem;letter-spacing:.2em;
  color:rgba(var(--hueso-rgb),.62);text-transform:uppercase
}
/* la rejilla del catálogo: 4 columnas como el original */
.rejilla{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:clamp(1rem,2vw,1.8rem);padding:0 var(--pad) clamp(5rem,13vh,10rem)
}
.rejilla .card{opacity:1;transform:none}
/* salida y entrada al filtrar */
.card.oculto{
  opacity:0;transform:scale(.96) translateY(12px);
  pointer-events:none;position:absolute;visibility:hidden
}
.card.filtrando{transition:opacity .55s var(--ease),transform .55s var(--ease)}

/* ═════════════════════════════════════════════════════════════
   FICHA DEDICADA  ·  /caballo/<slug>.html
   ═════════════════════════════════════════════════════════════ */
.fh{position:relative;height:82svh;min-height:520px;overflow:hidden;display:flex;align-items:flex-end}
.fh-img{position:absolute;inset:0}
.fh-img img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;
  transform:scale(1.08);animation:deriva 20s var(--ease) forwards}
/* el vídeo del rancho en la misma cabecera: sin esto queda anclado
   arriba-izquierda y recortado a un lado según el ancho de pantalla */
.fh-img video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
/* Cabecera de ficha de caballo: el retrato entero, sin recortar.
   El caballo ocupa la foto de punta a punta, así que un cover a lo
   ancho siempre le corta algo. La foto va contenida y el ancho lo
   llena la misma imagen ampliada y desenfocada por detrás. */
.fh-img .fh-fondo{
  object-fit:cover;object-position:50% 45%;
  filter:blur(34px) saturate(.7) brightness(.42);
  transform:scale(1.26);animation:derivaFondo 22s var(--ease) forwards
}
/* El movimiento se lo queda el fondo. La foto de delante no se escala:
   con object-fit:contain, cualquier escala por encima de 1 la saca del
   marco y le recorta el hocico o los cascos, que es justo lo que no
   puede pasar aquí. El fondo nunca baja de 1.14 porque el desenfoque
   difumina los bordes y por debajo de eso asomarían. */
@keyframes derivaFondo{to{transform:scale(1.14)}}
.fh-img .fh-frente{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:50% 50%;
  transform:none;animation:none
}
/* La foto y el nombre se apilan en vez de superponerse.
   Con el rótulo encima, el degradado del pie dejaba las patas y la cola
   medio tapadas: el caballo salía entero pero no se veía entero, que
   para una ficha de venta es el mismo problema.

   La banda NO reparte espacio sobrante: toma su altura de la proporción
   del recorte, que viene en --r-ancho / --r-alto desde los datos. Como
   la foto ya está recortada a esa misma proporción, el `cover` de abajo
   encaja exacto: ni franjas vacías ni un casco fuera. La contrapartida
   es que la cabecera se pasa del alto de pantalla en monitores anchos,
   y es la contrapartida correcta: llenar Y no cortar sólo caben a la
   vez si manda la foto. */
.fh-retrato{
  flex-direction:column;align-items:stretch;
  height:92svh;min-height:560px
}
.fh-retrato .fh-img{position:relative;flex:1 1 auto;min-height:0}
/* La barra fija es transparente y se apoyaría en el lomo. El fondo
   desenfocado sí pasa por debajo —para eso es fondo—, pero la foto se
   baja lo que mide la barra. La altura va calculada porque en una
   imagen posicionada `bottom` se ignora si la altura es automática. */
.fh-retrato .fh-frente{
  top:var(--cab-alto);bottom:auto;
  height:calc(100% - var(--cab-alto))
}

/* ── cabecera con recorte a medida ──
   Sólo cuando el expediente trae un recorte hecho para esta foto. La
   banda NO reparte espacio sobrante: toma su altura de la proporción
   del recorte, que llega en --r-ancho / --r-alto desde los datos. Como
   la foto ya viene recortada a esa misma proporción, el `cover` encaja
   exacto: ni franjas vacías ni un casco fuera.

   La contrapartida es que la cabecera se pasa del alto de pantalla en
   monitores anchos, y es la contrapartida correcta: llenar Y no cortar
   sólo caben a la vez si manda la foto.

   Las fichas sin recorte propio se quedan con lo de arriba —foto
   contenida sobre su propio fondo desenfocado—, que es lo que hay que
   hacer cuando no sabes dónde está el caballo dentro de la imagen. */
.fh-encaje{
  flex:0 0 auto !important;width:100%;
  aspect-ratio:var(--r-ancho);
  margin-top:var(--cab-alto);
  /* Los bordes de la foto se disuelven en la página en vez de cortarse
     en seco. Los topes NO son decorativos: salen de dónde está el
     caballo dentro del recorte.

     Arriba, muy poco —hasta el 6 %— porque las orejas empiezan al 7,9 %
     en el recorte apaisado; pasarse de ahí sería velarle la cabeza.

     Abajo el degradado arranca mucho antes, al 64 %, y baja despacio en
     cinco tramos. Cortando cerca del final quedaba una raya: el suelo
     del picadero es claro y la página es casi negra, así que el canto
     de la foto se veía aunque el último tramo fuese suave. Empezando a
     la altura de la barriga hay recorrido de sobra para que el
     empedrado se apague solo y no haya borde que ver.

     El precio son las patas, que a partir de la rodilla se van velando
     —al llegar a los cascos queda menos de un tercio—. Es a propósito:
     son oscuras sobre un suelo claro, y al apagarse el suelo no se
     aclaran, se pierden en el negro de la página. El caballo sigue
     entero, apoyado en el suelo; lo que desaparece es el recuadro.

     Va como máscara y no como degradado encima: así el borde desaparece
     de verdad contra el fondo de la página, sea cual sea, en vez de
     pintarle un velo negro por encima que sólo cuadra si el fondo es
     exactamente ése. */
  --velo:linear-gradient(to bottom,
     transparent 0, #000 6%, #000 64%,
     rgba(0,0,0,.92) 76%, rgba(0,0,0,.72) 85%,
     rgba(0,0,0,.42) 92%, rgba(0,0,0,.14) 97%, transparent 100%);
  -webkit-mask-image:var(--velo);
          mask-image:var(--velo)
}
.fh-encaje picture{display:block;width:100%;height:100%}
.fh-encaje .fh-frente{
  top:0;height:100%;object-fit:cover;object-position:50% 50%
}
.fh-retrato:has(.fh-encaje){height:auto;min-height:0}
.fh-retrato:has(.fh-encaje)::after{display:none}
.fh-retrato .fh-txt{
  position:relative;flex:0 0 auto;
  padding-top:clamp(1.1rem,2.2vh,1.7rem);
  padding-bottom:clamp(1.6rem,4vh,2.8rem)   /* menos que en las otras
     cabeceras: aquí el texto ya no flota sobre una foto, va debajo, y
     el aire que se le quite es aire que gana el caballo */
}
@media(max-width:900px){
  /* Sin recorte propio: la cabecera se apila y la foto va contenida. */
  .fh-retrato{height:auto;min-height:0}
  .fh-retrato .fh-img{aspect-ratio:1/.88;flex:0 0 auto}
  /* Con recorte propio: se sirve el otro archivo, más alto, y la banda
     cambia de proporción con él. Va con el padre delante a propósito:
     con `.fh-encaje` a secas pierde por especificidad contra la regla
     de arriba y la banda se quedaba en 1,136 recortando un 4,8 % por
     los lados, justo el hocico y la cola. */
  .fh-retrato .fh-encaje{aspect-ratio:var(--r-alto)}
}
.fh::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(var(--negro-rgb),.78) 0%,rgba(var(--negro-rgb),.12) 34%,rgba(var(--negro-rgb),.62) 74%,var(--negro) 100%)}
/* La Casa va SIN velo, a petición del rancho: el vídeo del recorrido
   se ve limpio de borde a borde y la cabecera corta en seco contra la
   página. El velo se queda en las fichas de caballo, donde el texto
   pisa la foto y sin él no se lee. */
.fh-nitido::after{content:none}
/* el escudo, centrado sobre la cabecera. Ya no es la máscara plana:
   es el render 3D de la medalla (guinda y oro, con cuerpo), el mismo
   fotograma en que termina el giro de la cortina — por eso la fusión
   aterriza sin costura. La caja va escalada por 1/0,681 porque el
   escudo ocupa ese alto dentro del lienzo del render. */
.fh-escudo{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;pointer-events:none;
  height:calc(clamp(112px,16.5vh,240px) * 1.47);
  width:calc(clamp(112px,16.5vh,240px) * 1.47);
  background:url(/img/escudo-3d.png) center/contain no-repeat;
  opacity:0;animation:escudoEntra 1.4s var(--ease) .5s forwards;
  filter:drop-shadow(0 2px 18px rgba(var(--negro-rgb),.55));
}
@keyframes escudoEntra{from{opacity:0;transform:translate(-50%,-50%) scale(.94)}
                         to{opacity:.92;transform:translate(-50%,-50%) scale(1)}}
.fh-txt{position:relative;z-index:2;width:100%;padding:0 var(--pad) clamp(3rem,8vh,5.5rem)}
.fh-txt .kicker{display:block;margin-bottom:1rem;opacity:0;animation:sube 1.2s var(--ease) .45s forwards}
.fh-txt h1{font-size:clamp(2.4rem,6.5vw,5.6rem);font-style:italic;margin-bottom:.9rem;
  opacity:0;animation:sube 1.3s var(--ease) .65s forwards}
.fh-txt .padres-g{font-family:var(--serif);font-style:italic;color:var(--oro);
  font-size:clamp(1rem,1.6vw,1.3rem);opacity:0;animation:sube 1.3s var(--ease) .85s forwards}
/* El título de La Casa ya no se pinta: la cabecera es el vídeo y el
   escudo, y nada más. El <h1> sigue en el HTML —una página sin h1 se
   queda coja para el buscador y para quien navega por voz— pero sale
   del cuadro. */
.solo-lectores{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* migas */
.migas{padding:1.4rem var(--pad) 0;font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(var(--hueso-rgb),.65)}
.migas a{transition:color .5s var(--ease)}
.migas a:hover{color:var(--oro)}
.migas span{margin:0 .6rem;color:rgba(var(--hueso-rgb),.18)}

/* cuerpo de la ficha */
.fbody{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.fbody .col-izq{position:sticky;top:90px}
@media(max-width:1024px){.fbody .col-izq{position:static}}

/* Vídeo de presentación en la columna de la ficha.
   El original es vertical, así que se le pone tope de ancho: a los
   644 px que mide la columna en pantalla grande, un 9:16 mediría más
   de mil de alto y se comería la página. */
.col-video{margin:0;max-width:430px;margin-inline:auto}
.cv-marco{
  position:relative;display:block;width:100%;
  /* La proporción viene de los datos (--rv): los clips de Jalisco son
     verticales de móvil y los de concursos ANCCE apaisados de cámara
     fija. Forzar 9/16 a un 4/3 deja al caballo entre dos franjas
     negras del alto de la página. */
  aspect-ratio:var(--rv,9/16);
  overflow:hidden;background:var(--negro);
  border:1px solid rgba(var(--oro-rgb),.18)
}
/* El botón de play y su carátula ya no existen: el vídeo arranca solo
   al llegar a él. Se fue con ellos `.cv-play` y `.cv-tri`. */
.cv-marco video{
  width:100%;height:100%;object-fit:contain;display:block
}
.cv-pie{
  display:block;padding-top:.75rem;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--hueso-rgb),.72);line-height:1.7
}

/* Galería: mismo criterio que las tarjetas — cuadrado y la foto
   entera dentro. Con las oficiales de concurso, todas apaisadas de
   1.33 a 1.51, el marco 4/5 anterior se comía medio caballo. En tres
   columnas los cuadrados quedan del tamaño justo para verlos sin
   tener que abrir el visor. */
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.galeria.una{grid-template-columns:1fr}
.galeria figure{
  margin:0;overflow:hidden;background:var(--negro-2);cursor:zoom-in;position:relative;
  aspect-ratio:1/1;padding:clamp(.45rem,1vw,.85rem);
  border:1px solid rgba(var(--oro-rgb),.1)
}
.galeria figure img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform 1.4s var(--ease),filter 1s var(--ease);filter:saturate(.95)}
.galeria figure:hover img{transform:scale(1.03);filter:saturate(1.05)}
@media(max-width:900px){.galeria{grid-template-columns:repeat(2,1fr)}}

/* visor */
.visor{
  position:fixed;inset:0;z-index:90;background:rgba(8,7,6,.96);
  backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;
  padding:clamp(1rem,4vw,3rem);opacity:0;pointer-events:none;
  transition:opacity .5s var(--ease)
}
.visor.abierto{opacity:1;pointer-events:auto}
.visor img{max-width:100%;max-height:88vh;object-fit:contain;
  transform:scale(.96);transition:transform .6s var(--ease)}
.visor.abierto img{transform:scale(1)}
.visor .cerrar{position:absolute;top:1.4rem;right:1.6rem;background:none;border:0;
  color:var(--hueso-tenue);cursor:pointer;font-size:1.6rem;line-height:1;padding:.5rem;
  transition:color .4s var(--ease)}
.visor .cerrar:hover{color:var(--oro)}
.visor .paso{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--hueso-tenue);cursor:pointer;font-size:2rem;padding:1rem;transition:color .4s var(--ease)}
.visor .paso:hover{color:var(--oro)}
.visor .ant{left:.5rem}.visor .sig{right:.5rem}
.visor .cont{position:absolute;bottom:1.4rem;left:50%;transform:translateX(-50%);
  font-size:.62rem;letter-spacing:.24em;color:rgba(var(--hueso-rgb),.7)}

/* palmarés */
.palmares{list-style:none;margin:0}
.palmares li{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;
  padding:1rem 0;border-bottom:1px solid rgba(var(--hueso-rgb),.08);font-size:.85rem}
.palmares li:first-child{border-top:1px solid rgba(var(--hueso-rgb),.08)}
.palmares .anio{font-family:var(--serif);font-style:italic;color:var(--oro);font-size:1.05rem;line-height:1.4}
.palmares .titulo{display:block;font-size:.62rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--oro-claro);margin-bottom:.3rem}
.palmares .donde{color:var(--hueso-tenue);font-size:.82rem;line-height:1.6}

/* navegación entre caballos */
.nav-cab{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:rgba(var(--oro-rgb),.16);border-top:1px solid rgba(var(--oro-rgb),.16)
}
.nav-cab a{
  background:var(--negro);padding:clamp(2rem,4vw,3.4rem) var(--pad);
  transition:background .7s var(--ease);position:relative;overflow:hidden
}
.nav-cab a:hover{background:var(--negro-3)}
.nav-cab a.sig{text-align:right}
.nav-cab .dir{display:block;font-size:.6rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--oro);margin-bottom:.7rem}
.nav-cab .nom{font-family:var(--serif);font-size:clamp(1.2rem,2.2vw,1.9rem);
  transition:color .5s var(--ease)}
.nav-cab a:hover .nom{color:var(--oro-claro)}

/* aviso de dato pendiente */
.pendiente{font-family:var(--serif);font-style:italic;color:rgba(214,194,152,.55)}

@media(max-width:1024px){
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .fbody{grid-template-columns:1fr}
}
@media(max-width:720px){
  .rejilla{grid-template-columns:1fr}
  .filtros{gap:.4rem 1.4rem}
  .filtros .cuenta{width:100%;margin-left:0;padding-top:.6rem}
  .herr{gap:.8rem 1.6rem}
  .buscador{flex-basis:100%;max-width:none}
  /* la galería se queda en dos columnas también en móvil: con marcos
     cuadrados, una sola columna daba un bloque enorme por foto */
  .nav-cab{grid-template-columns:1fr}
  .nav-cab a.sig{text-align:left}
}

/* ═════════════════════════════════════════════════════════════
   NOSOTROS  ·  barras de selección
   En el sitio original estas barras se quedan en «0 %» porque
   la animación nunca arranca. Aquí sí cuentan.
   ═════════════════════════════════════════════════════════════ */
.criterios{display:grid;gap:1.6rem;max-width:760px}
.crit{display:grid;grid-template-columns:1fr auto;gap:.5rem 1rem;align-items:baseline}
.crit .n{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--hueso-tenue)}
.crit .p{font-family:var(--serif);font-style:italic;color:var(--oro-claro);font-size:1.05rem;
  font-variant-numeric:tabular-nums}
.crit .barra{grid-column:1/-1;height:1px;background:rgba(var(--hueso-rgb),.12);position:relative;overflow:hidden}
.crit .barra i{position:absolute;inset:0 auto 0 0;width:0;background:var(--oro);
  transition:width 1.6s var(--ease)}

/* dos columnas editoriales */
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.dos-col figure{margin:0;overflow:hidden}
.dos-col figure img{width:100%;display:block}
@media(max-width:900px){.dos-col{grid-template-columns:1fr}}

/* bloque de rasgos */
.rasgos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(var(--oro-rgb),.16);border:1px solid rgba(var(--oro-rgb),.16)}
.rasgo{background:var(--negro);padding:clamp(1.6rem,3vw,2.6rem);transition:background .7s var(--ease)}
.rasgo:hover{background:var(--negro-3)}
.rasgo h3{font-size:1.05rem;margin-bottom:.7rem;color:var(--oro-claro)}
.rasgo p{font-size:.82rem;color:var(--hueso-tenue);line-height:1.75}
@media(max-width:900px){.rasgos{grid-template-columns:1fr}}

/* ═════════════════════════════════════════════════════════════
   NOTICIAS
   ═════════════════════════════════════════════════════════════ */
.notas{display:grid;gap:1px;background:rgba(var(--oro-rgb),.16);
  border-top:1px solid rgba(var(--oro-rgb),.16);border-bottom:1px solid rgba(var(--oro-rgb),.16)}
.nota{display:grid;grid-template-columns:320px 1fr;gap:0;background:var(--negro);
  transition:background .7s var(--ease)}
.nota:hover{background:var(--negro-2)}
.nota .img{overflow:hidden;aspect-ratio:4/3}
.nota .img img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.4s var(--ease);filter:saturate(.95)}
.nota:hover .img img{transform:scale(1.05)}
.nota .txt{padding:clamp(1.6rem,3.5vw,3rem);align-self:center}
.nota .fecha{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro);
  display:block;margin-bottom:.9rem}
.nota h2{font-size:clamp(1.4rem,2.4vw,2.1rem);margin-bottom:.9rem}
.nota p{font-size:.9rem;color:var(--hueso-tenue);line-height:1.8;max-width:60ch}
.nota .mas{display:inline-block;margin-top:1.2rem;font-size:.62rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--oro-claro);border-bottom:1px solid var(--oro-tenue);
  padding-bottom:.3rem;transition:border-color .5s var(--ease)}
.nota:hover .mas{border-bottom-color:var(--oro)}
@media(max-width:820px){.nota{grid-template-columns:1fr}.nota .img{aspect-ratio:16/9}}

/* artículo */
.art{max-width:760px;margin:0 auto}
.art .fecha{font-size:.62rem;letter-spacing:.26em;text-transform:uppercase;color:var(--oro)}
.art h1{font-size:clamp(2rem,4.6vw,3.6rem);margin:1.1rem 0 2rem}
.art p{font-size:1.05rem;line-height:1.9;color:rgba(var(--hueso-rgb),.95);margin-bottom:1.4rem}
.art figure{margin:2.5rem 0}
.art figure img{width:100%}
.art figcaption{margin-top:.8rem;font-size:.68rem;letter-spacing:.14em;color:rgba(var(--hueso-rgb),.65)}
.art .creditos{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(var(--hueso-rgb),.1);
  font-size:.8rem;color:var(--hueso-tenue)}

/* ═════════════════════════════════════════════════════════════
   CONTACTO
   ═════════════════════════════════════════════════════════════ */
.mapa{width:100%;aspect-ratio:21/9;border:1px solid rgba(var(--oro-rgb),.16);
  filter:grayscale(1) invert(.92) contrast(.9);transition:filter .8s var(--ease)}
.mapa:hover{filter:grayscale(.5) invert(.9) contrast(.95)}
@media(max-width:820px){.mapa{aspect-ratio:4/3}}

/* ═════════════════════════════════════════════════════════════
   PANTALLA DE CARGA
   Silueta de semental PRE generada en vector y limpiada a mano.
   Tres poses —galope, encabritado y reverencia— que se sortean
   en cada carga. Al ser un trazo continuo no se anima miembro a
   miembro: se mueve la figura entera con el ritmo de cada acción.
   ═════════════════════════════════════════════════════════════ */
/* --alto es la altura del caballo y manda sobre todo lo demás: el
   escudo y el rótulo se calculan a partir de ella, así que las tres
   piezas crecen y menguan juntas.

   El 48vw acota la altura en pantallas estrechas. La pose más ancha
   mide 1,45 veces su alto, de modo que 48vw de alto son 70vw de
   ancho y sigue cabiendo en el 86vw del corral. */
.cargando{
  --alto:min(clamp(120px,21vh,190px),48vw);
  position:fixed;inset:0;z-index:200;background:var(--negro);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4rem;
  transition:opacity .8s var(--ease),visibility .8s var(--ease),background-color .55s var(--ease);
  /* red: aunque el JS falle o no llegue a ejecutarse, la cortina
     se retira sola. Una pantalla de carga que atrapa es lo peor
     que le puede pasar a un sitio. */
  animation:cortinaFuera 0s linear 6s forwards;
}
.cargando.fuera{opacity:0;visibility:hidden;pointer-events:none}
@keyframes cortinaFuera{to{opacity:0;visibility:hidden;pointer-events:none}}
body.cargando-activa{overflow:hidden}

/* El escudo y el rótulo salen del logotipo original: son su propio
   alfa, teñidos desde background-color. De ahí que la letra sea
   exactamente la del logo y no una fuente parecida, que con una
   caligráfica como ésta nunca acaba de coincidir.

   Van en blanco, como el caballo: la cortina entera es una sola pieza
   y el oro sólo en las letras dejaba al animal descolgado. El oro
   sigue siendo la marca en el resto del sitio; aquí manda el conjunto. */
.cargando .escudo,.cargando .firma{
  display:block;background-color:var(--oro);
  -webkit-mask-repeat:no-repeat;         mask-repeat:no-repeat;
  -webkit-mask-size:contain;             mask-size:contain;
  -webkit-mask-position:center;          mask-position:center;
  opacity:0
}
.cargando .escudo{
  height:calc(var(--alto) * .34);
  width:calc(var(--alto) * .34 * 232 / 260);
  -webkit-mask-image:url(/img/marca-escudo.png);
  mask-image:url(/img/marca-escudo.png);
  animation:firmaEntra .5s var(--ease) .05s forwards
}
.cargando .firma{
  height:calc(var(--alto) * .25);
  width:calc(var(--alto) * .25 * 1017 / 150);
  -webkit-mask-image:url(/img/marca-rotulo.png);
  mask-image:url(/img/marca-rotulo.png);
  animation:firmaEntra .55s var(--ease) .18s forwards
}
@keyframes firmaEntra{to{opacity:.9}}

/* Versión de emblema — portada y La Casa. En la portada el escudo va
   plano y quieto, como siempre. En La Casa (.medalla) es un VÍDEO:
   el escudo renderizado en 3D de verdad —guinda y oro, con cuerpo—
   dando dos vueltas, generado con Higgsfield desde la propia marca.
   El fondo del vídeo es blanco puro, el mismo de la cortina, así que
   no hay rectángulo que disimular; y encima viaja un PNG transparente
   del mismo fotograma final (escudo-fijo) que toma el relevo justo
   antes de la fusión, para que lo que vuela no lleve fondo.

   El escudo ocupa el 68 % del fotograma del render: las cajas van
   escaladas por 1/0,681 para que el tamaño aparente sea el de siempre. */
.cargando.emblema .escudo{
  height:calc(var(--alto) * .68);
  width:calc(var(--alto) * .68 * 232 / 260)
}
.cargando.emblema{gap:1.1rem}
.cargando.medalla{gap:.4rem}
.cargando.medalla .giro{
  --eh:calc(var(--alto) * 1.14);
  position:relative;display:block;will-change:transform;
  height:var(--eh);width:var(--eh);
}
.cargando.medalla .giro video,
.cargando.medalla .giro .escudo-fijo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;border:0;
}
.cargando.medalla .giro video{
  animation:medallaEntra .5s var(--ease) both;
}
.cargando.medalla .giro .escudo-fijo{opacity:0}
@keyframes medallaEntra{from{opacity:0}to{opacity:1}}
/* La fusión: el fondo de la cortina se retira mientras el escudo vuela
   hasta el del vídeo (el transform lo pone el JS midiendo dónde cae).
   La cortina no pierde opacidad — si la perdiera, el escudo se iría
   con ella en pleno vuelo. */
.cargando.funde{background-color:transparent}

/* Las tres poses viajan en el HTML y el sorteo sólo decide cuál se
   enseña. Las otras dos quedan en display:none, así que el navegador
   no llega a pedir su hoja: cada visita descarga una sola. */
/* Alineadas por abajo, no centradas: cada pose ocupa una altura
   distinta y si se centraran, las pezuñas quedarían a distinta altura
   según la que tocara. Al alinearlas por el pie, el caballo pisa
   siempre la misma línea. */
.corral{display:grid;place-items:end center;
  width:min(86vw,460px);height:var(--alto)}
.corcel{grid-area:1/1;display:none;
  opacity:0;animation:corcelEntra 1s var(--ease) forwards}
.corcel.activa{display:block}
@keyframes corcelEntra{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ── las tres poses, fotograma a fotograma ────────────────────
   Cada hoja sale de un vídeo generado con Higgsfield a partir de un
   mismo retrato de semental PRE, así que las tres son el mismo caballo.
   No son siluetas planas: llevan pelaje, músculo y crin, de modo que
   la hoja tiene que traer medios tonos.

   Las tres se generaron en dorado y se pasaron a blanco: se desatura a
   luminancia y se sube la curva sólo por encima de 26 —el valor del
   fondo—, con la mezcla difuminada en los primeros 55 niveles para que
   el borde funda con la cortina y no se aureole. El original dorado
   está en media/corcel-dorado/ por si hay que volver.

   Tres cosas que costaron encontrar y conviene no deshacer:

   1) El desplazamiento va en PÍXELES, no en porcentaje. Con steps(n)
      el porcentaje reparte sobre n-1 y se acaban viendo dos caballos
      a la vez.
   2) El url() va aquí y en absoluto. Dentro de una variable CSS se
      resolvería contra esta hoja y buscaría en /css/img/.
   2b) Y por eso mismo NO lleva ?v=: el versionado por hash sólo toca
      las rutas del HTML, no las de dentro de esta hoja. Como /img/ se
      sirve immutable un año, cambiar el contenido de una hoja sin
      cambiarle el nombre deja a todo visitante que ya haya pasado con
      la versión vieja. Si se retocan, se renombra el archivo.
   3) El fondo de la cortina va fundido dentro de la propia hoja, así
      que no hay canal alfa. Con alfa la misma imagen pesaba el doble
      y en una pantalla de carga los bytes son el producto: si la hoja
      no ha llegado cuando la página termina, no se ve nada. Si algún
      día cambia --negro, hay que regenerar las tres. */
/* --k iguala el tamaño del caballo entre poses. Cada hoja se recorta a
   la caja de su propia acción, y esas cajas no miden lo mismo: la del
   encabritado abarca desde el suelo hasta la cabeza en alto, que son
   1,548 veces el caballo quieto; la del galope 1,076 y la de la
   reverencia 0,993. Si las tres se dibujaran a la misma altura, el
   caballo saldría más pequeño justo en la pose más alta. Dando a cada
   una una altura proporcional a su caja, el animal mide lo mismo en
   las tres y --alto pasa a ser la altura del encabritado, que es la
   mayor y por tanto la que define el corral. */
.corcel.galope,.corcel.encabritado,.corcel.reverencia{
  --h:calc(var(--alto) * var(--k) / 1.548);
  width:calc(var(--h) * var(--w) / var(--hoja));
  height:var(--h);
  background-repeat:no-repeat;
  background-size:calc(var(--h) * var(--w) / var(--hoja) * var(--n)) 100%;
}
@keyframes tirar{
  to{background-position:calc(-1 * var(--h) * var(--w) / var(--hoja) * var(--n)) 0}
}

/* Las tres van a 30 fotogramas por segundo, no a los 24 del vídeo.
   Con steps() cada fotograma dura un número entero de refrescos: a 30
   son exactamente 2 en una pantalla de 60 Hz, mientras que a 24
   alternan 2 y 3 y eso se percibe como un temblor fino. Los
   intermedios los interpola ffmpeg compensando el movimiento.

   El galope es un ciclo real: 21 fotogramas que enlazan solos — el
   salto del bucle es menor que el que hay entre dos fotogramas
   seguidos, así que no se ve. Las otras dos son un vaivén: la acción
   va de la pose neutra al extremo y vuelve en espejo. Cerrarlas con
   el final del vídeo no servía, porque el caballo termina de pie pero
   con la cola en otro sitio y se veía el salto en cada vuelta.

   --w y --hoja son las medidas del fotograma dentro de la hoja; --k,
   lo alta que es esa caja medida en caballos quietos. */
.corcel.galope{--n:21;--w:231;--hoja:140;--k:1.076;
  background-image:url(/img/corcel-galope-guinda.webp)}
.corcel.galope.activa{animation:corcelEntra 1s var(--ease) forwards,
  tirar .7s steps(21) .3s infinite}

.corcel.encabritado{--n:78;--w:152;--hoja:180;--k:1.548;
  background-image:url(/img/corcel-encabritado-guinda.webp)}
.corcel.encabritado.activa{animation:corcelEntra 1s var(--ease) forwards,
  tirar 2.6s steps(78) .3s infinite}

.corcel.reverencia{--n:58;--w:169;--hoja:130;--k:0.993;
  background-image:url(/img/corcel-reverencia-guinda.webp)}
.corcel.reverencia.activa{animation:corcelEntra 1s var(--ease) forwards,
  tirar 1.933s steps(58) .3s infinite}

@media (prefers-reduced-motion:reduce){
  .corcel.activa{animation:none!important;opacity:1}
  .cargando{animation-delay:.4s}
  .cargando .firma{opacity:.85;animation:none}
  .cargando.medalla .giro video{animation:none;opacity:1}
}

/* La entrada del hero espera a que se levante el telón.
   Si no, el visitante se pierde la animación detrás de la cortina.
   Se cuelga de .cargando-activa, que sólo existe mientras el JS
   sostiene la cortina: sin JS la clase nunca se pone y todo entra
   con normalidad, así que no hay forma de quedarse en negro. */
body.cargando-activa .hero-txt .kicker,
body.cargando-activa .hero-txt h1,
body.cargando-activa .hero-txt .lead,
body.cargando-activa .scroll-cue,
body.cargando-activa .fh-txt .kicker,
body.cargando-activa .fh-txt h1,
body.cargando-activa .fh-txt .padres-g,
body.cargando-activa .hero-img img,
body.cargando-activa .fh-img img{animation-play-state:paused}

/* ═════════════════════════════════════════════════════════════
   FICHA AMPLIADA  ·  palmarés oficial, árbol y vídeos
   Sale cuando el ejemplar tiene expediente en data/<slug>.json.
   ═════════════════════════════════════════════════════════════ */

/* ── resumen de cifras ── */
.palm-cifras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(var(--oro-rgb),.16);border:1px solid rgba(var(--oro-rgb),.16);
  margin-bottom:clamp(2rem,5vh,3rem);
}
.palm-cifras div{background:var(--negro);padding:clamp(1.3rem,3vw,2.1rem) 1rem;text-align:center}
.palm-cifras b{
  display:block;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);color:var(--oro);line-height:1;margin-bottom:.5rem
}
.palm-cifras span{
  display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
  color:rgba(var(--hueso-rgb),.7);line-height:1.7
}
@media(max-width:720px){.palm-cifras{grid-template-columns:repeat(2,1fr)}}

/* ── leyenda de colores del baremo ── */
.palm-leyenda{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;margin-bottom:1.1rem}
.palm-leyenda span{
  display:flex;align-items:center;gap:.5rem;
  font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(var(--hueso-rgb),.7)
}
.sw{display:inline-block;width:16px;height:3px;border-radius:2px}
.sw.m{background:var(--oro)}
.sw.v{background:#8fb4a8}
.sw.f{background:#b98a6f}

/* ── la tabla del acta ── */
.tabla-palm{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-palm table{width:100%;border-collapse:collapse;min-width:640px}
.tabla-palm tr.anio-sep th{
  text-align:left;padding:1.6rem 0 .6rem;
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:1.5rem;color:var(--oro);
  border-bottom:1px solid rgba(var(--oro-rgb),.2)
}
.tabla-palm td{
  padding:.95rem .8rem .95rem 0;vertical-align:top;
  border-bottom:1px solid rgba(var(--hueso-rgb),.07)
}
.tabla-palm tr:hover td{background:rgba(var(--oro-rgb),.035)}
.c-pos{width:52px}
.pos{
  display:inline-block;min-width:34px;text-align:center;
  font-family:var(--serif);font-size:1.05rem;color:var(--hueso-tenue)
}
.pos-1{color:var(--oro);font-size:1.3rem}
.np{font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--hueso-rgb),.62)}
.c-ev{min-width:230px}
.c-ev .ev{display:block;color:var(--hueso);line-height:1.45;font-size:.92rem}
.c-ev .alias{
  display:block;margin-top:.25rem;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(var(--oro-rgb),.78)
}
.c-ev .alias::before{content:'compitió como '}
html[lang="en"] .c-ev .alias::before{content:'competed as '}
.c-sec{
  width:56px;font-size:.62rem;letter-spacing:.16em;
  color:rgba(var(--hueso-rgb),.72);padding-top:1.15rem!important
}
.c-notas{min-width:210px}
.c-notas .total{
  display:block;font-family:var(--serif);font-size:1.15rem;color:var(--hueso);margin-bottom:.45rem
}
.pz-txt{font-size:.62rem;letter-spacing:.1em;color:rgba(var(--hueso-rgb),.68)}
/* barrita proporcional: la nota se lee sin tener que compararla a mano */
.pz{display:flex;align-items:center;gap:.5rem;margin-bottom:.22rem}
.pz i{display:block;height:3px;border-radius:2px;min-width:2px}
.pz b{font-weight:400;font-size:.6rem;letter-spacing:.08em;color:rgba(var(--hueso-rgb),.72);white-space:nowrap}
.pz.m i{background:var(--oro)}
.pz.v i{background:#8fb4a8}
.pz.f i{background:#b98a6f}
.c-dist{width:120px;text-align:right}
.dist{
  display:inline-block;margin:0 0 .3rem .3rem;padding:.22rem .5rem;
  border:1px solid rgba(var(--oro-rgb),.35);
  font-size:.55rem;letter-spacing:.14em;color:var(--oro);cursor:help
}
.pie-fuente{margin-top:1.8rem;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--hueso-rgb),.62)}
.pie-fuente a{color:rgba(var(--oro-rgb),.85);border-bottom:1px solid rgba(var(--oro-rgb),.28);transition:color .45s var(--ease)}
.pie-fuente a:hover{color:var(--oro)}

/* ── árbol genealógico ──
   Cada generación es una columna que reparte su alto a partes iguales
   entre sus casillas, y la casilla se centra dentro de su hueco en vez
   de estirarse a ocuparlo entero: así el nombre del ejemplar no queda
   flotando en medio de una losa de 650 px, que es lo que pasaba antes.
   Las líneas de unión se dibujan con pseudoelementos, para que se lea
   como un árbol y no como cinco listas puestas al lado. */
.arbol{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:.8rem}
.arbol-scroll{display:flex;gap:0;min-width:880px;align-items:stretch}
.gen{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.hueco{
  flex:1 1 0;display:flex;align-items:center;position:relative;
  padding:2px 0 2px 14px;min-height:30px
}
/* brazo horizontal que sale de cada casilla hacia su hijo */
.hueco::before{
  content:'';position:absolute;left:0;top:50%;width:12px;height:1px;
  background:rgba(var(--oro-rgb),.32)
}
.g1 .hueco{padding-left:0}
.g1 .hueco::before{display:none}
/* llave vertical que une cada pareja de padres */
.hueco::after{
  content:'';position:absolute;left:0;width:1px;
  background:rgba(var(--oro-rgb),.32)
}
.hueco.arriba::after{top:50%;height:50%}
.hueco.abajo::after{bottom:50%;height:50%}
.nodo{
  width:100%;padding:.5rem .7rem;background:var(--negro-2);
  border-left:2px solid transparent;
  transition:background .45s var(--ease),border-color .45s var(--ease)
}
.nodo .n{display:block;font-size:.68rem;letter-spacing:.04em;color:var(--hueso);line-height:1.3}
.nodo .a{display:block;font-size:.55rem;letter-spacing:.12em;color:rgba(var(--hueso-rgb),.63);margin-top:.1rem}
.nodo.padre{border-left-color:rgba(var(--oro-rgb),.78)}
.nodo.madre{border-left-color:rgba(168,124,146,.5)}
.nodo:hover{background:rgba(var(--oro-rgb),.09)}
.nodo.yo{background:rgba(var(--oro-rgb),.13);border-left-color:var(--oro);padding:.8rem .9rem}
.nodo.yo .n{font-family:var(--serif);font-size:1.05rem;color:var(--oro);letter-spacing:0;line-height:1.2}
.nodo.yo .a{color:rgba(var(--oro-rgb),.85)}
.g4 .nodo{padding:.4rem .6rem}
.g4 .nodo .n{font-size:.63rem}
.g5 .nodo{padding:.3rem .55rem}
.g5 .nodo .n{font-size:.59rem;line-height:1.25}
.g5 .nodo .a{font-size:.5rem}
/* rótulo de cada generación, para saber qué se está mirando */
.arbol-cab{display:flex;min-width:880px;margin-bottom:.7rem}
.arbol-cab span{
  flex:1 1 0;padding-left:14px;
  font-size:.55rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(var(--hueso-rgb),.62)
}
.arbol-cab span:first-child{padding-left:0}

/* ── los tres aires ──
   Paso, trote y galope en tres paneles. El clip de cada uno se graba
   en casa; mientras no esté, el panel sale con el encargo escrito, no
   con un reproductor roto. */
.aires{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,1.8rem)}
@media(max-width:900px){.aires{grid-template-columns:1fr}}
.aire{margin:0}
/* Los clips vienen del reel, que es vertical 9:16. El marco va en
   vertical para que quepan enteros: recortarlos a 16/9 dejaba al
   caballo fuera de cuadro, que es justo lo que se acaba de arreglar
   en el resto del sitio. */
.aire video{
  width:100%;aspect-ratio:var(--rv,9/16);object-fit:contain;display:block;background:var(--negro);
  border:1px solid rgba(var(--oro-rgb),.18)
}
/* Varias tomas del mismo aire, apiladas: sólo se ve la elegida. El pie
   con la procedencia va dentro de cada toma, así se cambia solo al
   cambiar de clip y no hay que sincronizar nada por JS. */
.aire-clip{display:none}
.aire-clip.on{display:block}
.aire-f{
  display:block;padding-top:.55rem;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:rgba(var(--hueso-rgb),.72)
}
.aire-sel{display:flex;gap:.4rem;padding-top:.6rem}
.aire-sel button{
  width:1.85rem;height:1.85rem;padding:0;cursor:pointer;
  font:inherit;font-size:.76rem;line-height:1;
  color:rgba(var(--hueso-rgb),.78);background:transparent;
  border:1px solid rgba(var(--oro-rgb),.25);
  transition:color .25s,border-color .25s,background-color .25s
}
.aire-sel button:hover{color:var(--oro);border-color:rgba(var(--oro-rgb),.78)}
.aire-sel button.on{
  color:var(--negro);background:var(--oro);border-color:var(--oro)
}
.aire-sel button:focus-visible{outline:2px solid var(--oro);outline-offset:2px}
.aire-falta{
  aspect-ratio:var(--rv,9/16);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1rem;padding:1.4rem;
  background:
    repeating-linear-gradient(135deg,rgba(var(--oro-rgb),.035) 0 12px,transparent 12px 24px),
    var(--negro);
  border:1px solid rgba(var(--oro-rgb),.18)
}
.aire-falta .placa-escudo{height:clamp(40px,5vh,62px);width:calc(clamp(40px,5vh,62px) * 232 / 260)}
.aire figcaption{padding-top:.95rem}
.aire-t{
  display:block;font-family:var(--serif);font-size:1.25rem;color:var(--oro);margin-bottom:.5rem
}

/* ── funcionalidad ──
   El caballo montado, en su propio apartado. El clip es vertical como
   los de los aires, así que se le pone tope de ancho y el texto va al
   lado: a página completa un 9:16 mediría más de mil de alto. */
.func-cuerpo{
  display:grid;grid-template-columns:minmax(0,380px) 1fr;
  gap:clamp(2rem,5vw,4.5rem);align-items:center
}
.func-video{margin:0}
.func-video video{
  width:100%;aspect-ratio:var(--rv,9/16);object-fit:contain;display:block;
  background:var(--negro);border:1px solid rgba(var(--oro-rgb),.18)
}
.func-cuerpo .datos{margin-top:1.8rem}
@media(max-width:900px){
  .func-cuerpo{grid-template-columns:1fr}
  .func-video{max-width:380px;margin-inline:auto}
}
.aire-d{display:block;font-size:.82rem;line-height:1.75;color:rgba(var(--hueso-rgb),.78)}

/* ── despedida ──
   El último concurso del ejemplar. Misma rejilla que la funcionalidad,
   pero aquí el vídeo manda: estos clips son apaisados y a 380 px se
   quedan en viñeta, y una carrera no se cierra con una viñeta. */
.desp-cuerpo{grid-template-columns:minmax(0,620px) 1fr}
@media(max-width:900px){
  .desp-cuerpo .func-video{max-width:620px}
}



/* ────────────  LA PALETA: blanco, guinda y negro  ────────────
   Decisión del dueño (ago 2026): la dorada-sobre-negro se retiró y
   los valores guinda viven arriba, en :root. La letra fina dorada
   funcionaba sobre negro; la guinda sobre blanco pide un punto más
   de cuerpo para leerse igual de bien. */
.kicker,
.vias .k,
.campo label,
.datos dt,
.datos .k,
.lang button.on,
.filtros button.on{font-weight:500}
.btn,button.btn{font-weight:500}

/* ────────────  PORTADA: héroe con el vídeo del rancho  ────────────
   El reel llega recortado a 16:9 —las barras y la marca de agua iban
   cocidas en el lienzo vertical— y reescalado a 1080p, así que va a
   sangre completa: la .hero clásica, con vídeo en vez de foto. */
.hero-img video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}