/* ==========================================================================
   Agropampa — rediseño (Figma "Agropampa – Web")
   Tipografías: Archivo (títulos, texto y UI) y Fraunces Italic (acento).
   Todo el color, espaciado y tipografía sale de los tokens de abajo, que son
   espejo de las variables y los estilos de texto del archivo de Figma.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Color / Base */
  --tierra-900: #1a1614;
  --tierra-800: #241e1b;
  --tierra-600: #3a332c;
  --crema-50: #f4ede2;
  --crema-100: #e9dfd0;
  --crema-200: #d9cfc0;
  --gris-700: #5c524c;
  --gris-300: #c9bfb3;
  --blanco-calido: #f7f2ea;
  --dorado-300: #d8c79f;
  --dorado-700: #6e5426;
  --rojo-500: #e01b24;
  --rojo-700: #b5141c;

  /* Color / Uso */
  --fondo-oscuro: var(--tierra-900);
  --fondo-oscuro-2: var(--tierra-800);
  --fondo-claro: var(--crema-50);
  --fondo-claro-2: var(--crema-100);
  --texto-sobre-claro: var(--tierra-900);
  --texto-sobre-claro-2: var(--gris-700);
  --texto-sobre-oscuro: var(--blanco-calido);
  --texto-sobre-oscuro-2: var(--gris-300);
  --rotulo-sobre-oscuro: var(--dorado-300);
  --rotulo-sobre-claro: var(--dorado-700);
  --accion-fondo: var(--rojo-500);
  --accion-texto: var(--blanco-calido);
  --acento-texto: var(--rojo-700);
  --marca-rojo: var(--rojo-500);
  --borde-sobre-oscuro: var(--gris-700);
  --borde-sobre-claro: var(--crema-200);

  /* Espaciado */
  --esp-4: 4px;
  --esp-8: 8px;
  --esp-12: 12px;
  --esp-16: 16px;
  --esp-24: 24px;
  --esp-32: 32px;
  --esp-48: 48px;
  --esp-64: 64px;
  --esp-96: 96px;
  --esp-128: 128px;

  /* Grilla de página: 1440 con márgenes de 80 → contenido de 1280; mobile 390 con márgenes de 20 */
  --contenedor: 1280px;
  --margen-pagina: clamp(20px, 5.56vw, 80px);
  /* Margen lateral real: en pantallas más anchas que 1440 el contenido de 1280 queda centrado */
  --pad-x: max(var(--margen-pagina), calc((100% - var(--contenedor)) / 2));
  --radio: 4px;

  /* Tipografías */
  --font-titulo: "Archivo", system-ui, sans-serif;
  --font-texto: "Archivo", system-ui, sans-serif;
  --font-acento: "Fraunces", Georgia, serif; /* solo itálica */

  /* Estilos de texto: tamaños (Desktop; los de Mobile se aplican más abajo) */
  --fs-display: clamp(56px, 9vw, 128px);
  --fs-h2: 52px;
  --fs-h3: 28px;
  --fs-acento: 40px;
  --fs-dato: 56px;
  --fs-texto-grande: 20px;
  --fs-texto: 18px;
  --fs-epigrafe: 15px;
  --fs-rotulo: 14px;
  --fs-boton: 16px;
  --fs-nav: 16px;
  --fs-titulo-tarjeta: 22px;
  --fs-destacado: 40px;
  --lh-h2: 1.15;
  --lh-h3: 1.25;
  --lh-acento: 1.2;

  /* Estilos de texto: shorthand `font` (peso tamaño/interlínea familia) */
  --t-display: 800 var(--fs-display)/1.1 var(--font-titulo);
  --t-h2: 700 var(--fs-h2)/var(--lh-h2) var(--font-titulo);
  --t-h3: 600 var(--fs-h3)/var(--lh-h3) var(--font-titulo);
  --t-acento: italic 400 var(--fs-acento)/var(--lh-acento) var(--font-acento);
  --t-dato: 700 var(--fs-dato)/1 var(--font-titulo);
  --t-texto-grande: 400 var(--fs-texto-grande)/1.6 var(--font-texto);
  --t-texto: 400 var(--fs-texto)/1.6 var(--font-texto);
  --t-epigrafe: 400 var(--fs-epigrafe)/1.5 var(--font-texto);
  --t-rotulo: 600 var(--fs-rotulo)/1.3 var(--font-texto);
  --t-boton: 600 var(--fs-boton)/1 var(--font-texto);
  --t-nav: 500 var(--fs-nav)/1.4 var(--font-texto);
  --t-titulo-tarjeta: 600 var(--fs-titulo-tarjeta)/1.3 var(--font-titulo);
  --t-destacado: 700 var(--fs-destacado)/1.1 var(--font-titulo);

  /* Estilos de texto: interletraje */
  --ls-display: -.01em;
  --ls-h2: -.01em;
  --ls-dato: -.01em;
  --ls-destacado: -.01em;
  --ls-rotulo: .1em; /* + text-transform: uppercase */
  --ls-boton: .01em;

  --suave: cubic-bezier(.2, .7, .2, 1);
  --grano: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");

  /* Colores según el fondo donde se apoya cada pieza (claro por defecto) */
  --c-texto: var(--texto-sobre-claro);
  --c-texto-2: var(--texto-sobre-claro-2);
  --c-rotulo: var(--rotulo-sobre-claro);
  --c-borde: var(--borde-sobre-claro);
  --c-acento: var(--acento-texto);
}

/* Estilos de texto de Mobile (frames de 390 px del Figma) */
@media (max-width: 640px) {
  :root {
    --fs-h2: 36px;
    --fs-h3: 24px;
    --fs-acento: 26px;
    --fs-dato: 44px;
    --fs-texto-grande: 18px;
    --fs-texto: 17px;
    --fs-epigrafe: 14px;
    --fs-rotulo: 13px;
    --fs-titulo-tarjeta: 20px;
    --fs-destacado: 34px;
    --lh-h2: 1.2;
    --lh-h3: 1.3;
    --lh-acento: 1.25;
  }
}

/* Piezas sobre fondo oscuro */
.hero, .top, .pie, .banda-remate, .fondo-oscuro, .fondo-oscuro-2, dialog {
  --c-texto: var(--texto-sobre-oscuro);
  --c-texto-2: var(--texto-sobre-oscuro-2);
  --c-rotulo: var(--rotulo-sobre-oscuro);
  --c-borde: var(--borde-sobre-oscuro);
  --c-acento: var(--rotulo-sobre-oscuro);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; font: var(--t-texto); color: var(--texto-sobre-claro); background: var(--fondo-oscuro); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--rojo-500); color: var(--blanco-calido); }
:focus-visible { outline: 2px solid var(--c-rotulo); outline-offset: 3px; }
/* Títulos y textos: sin viudas ni líneas cortas sueltas */
h1, h2, h3, h4, p, li, blockquote, figcaption, dt, dd, summary, small { text-wrap: pretty; }

h2 { font: var(--t-h2); letter-spacing: var(--ls-h2); color: var(--c-texto); }
h3 { font: var(--t-h3); color: var(--c-texto); }
h2 em { font: inherit; color: inherit; }

/* Rótulo / volanta */
.eyebrow, .rotulo { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.hero .eyebrow, .banda-remate .eyebrow { color: var(--rotulo-sobre-oscuro); }

/* ---------- Botones ---------- */
.boton {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--esp-16) var(--esp-24); border: 0; border-radius: var(--radio); cursor: pointer;
  font: var(--t-boton); letter-spacing: var(--ls-boton); white-space: nowrap; text-decoration: none;
  color: var(--accion-texto); background: var(--accion-fondo);
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--suave);
}
/* Destello periódico (ya lo tenían los botones del remate) */
.boton::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  animation: destello 4.5s ease-in-out infinite;
}
.boton:hover { background: var(--rojo-700); transform: translateY(-2px); }
.boton:focus-visible { outline-color: var(--rotulo-sobre-oscuro); }
.boton-chico { padding: 12px 18px; }
.boton-ancho { padding: 16px 28px; }
.boton-grande { padding: 18px 28px; }
.boton-completo { width: 100%; }
.boton-secundario { background: transparent; color: var(--texto-sobre-oscuro); border: 1.5px solid var(--texto-sobre-oscuro); padding: 15px 24px; }
.boton-secundario::after { display: none; }
.boton-secundario:hover { background: var(--texto-sobre-oscuro); color: var(--tierra-900); }
.btn-ig { background: var(--tierra-900); }
@keyframes destello { 0%, 60% { left: -60%; } 100% { left: 130%; } }

/* ---------- Header ---------- */
.top {
  position: fixed; inset: 0 0 auto; z-index: 20;
  display: flex; align-items: center; gap: var(--esp-32);
  height: 88px; padding: var(--esp-32) var(--pad-x) 0;
  color: var(--texto-sobre-oscuro); border-bottom: 1px solid transparent;
  transition: background .35s, height .35s, padding .35s, border-color .35s;
}
.top.solida { height: 72px; padding: var(--esp-8) var(--pad-x); background: rgba(26, 22, 20, .92); backdrop-filter: blur(10px); border-color: var(--borde-sobre-oscuro); }
.marca { display: flex; align-items: center; gap: var(--esp-12); text-decoration: none; color: var(--texto-sobre-oscuro); margin-right: auto; }
.marca span { font: 600 24px/1.25 var(--font-titulo); }
.marca-cabeza { width: 52.8px; height: auto; display: block; }
.top nav { display: flex; align-items: center; gap: var(--esp-32); }
.top nav a:not(.boton) { position: relative; padding: 9px 0; font: var(--t-nav); color: var(--texto-sobre-oscuro); text-decoration: none; white-space: nowrap; }
.top nav a:not(.boton)::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rotulo-sobre-oscuro); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--suave); }
.top nav a:not(.boton):hover::after { transform: scaleX(1); }
.nav-remate b, .nav-remate small { font: inherit; letter-spacing: inherit; }
.boton-consultas .solo-mobile { display: none; }

/* Hamburguesa (tablet y celular) */
.menu-btn {
  display: none; flex-direction: column; justify-content: center; gap: 6px; flex: none;
  width: 44px; height: 46px; padding: 0 10px; background: none; border: 0; cursor: pointer;
}
.menu-btn i { display: block; height: 2px; background: var(--texto-sobre-oscuro); border-radius: 1px; transition: transform .3s var(--suave), opacity .2s, background .25s; }
.menu-btn:hover i { background: var(--rotulo-sobre-oscuro); }
.menu-abierto .menu-btn i:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-abierto .menu-btn i:nth-child(2) { opacity: 0; }
.menu-abierto .menu-btn i:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Portadas ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  padding: 168px var(--pad-x) 96px;
  color: var(--texto-sobre-oscuro); background: var(--fondo-oscuro);
}
.hero.con-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: var(--foto) center / cover no-repeat;
  animation: acercar 24s ease-out both;
}
/* Degradé de la foto (izquierda → derecha) y degradé superior bajo el header */
.hero.con-foto::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 22, 20, .85), rgba(26, 22, 20, 0) 180px),
    linear-gradient(90deg, rgba(26, 22, 20, .95) 0%, rgba(26, 22, 20, .25) 70%);
}
.hero-remate.con-foto::after {
  background:
    linear-gradient(180deg, rgba(26, 22, 20, .85), rgba(26, 22, 20, 0) 180px),
    linear-gradient(90deg, rgba(26, 22, 20, .95) 0%, rgba(26, 22, 20, .3) 75%);
}
@keyframes acercar { from { transform: scale(1.12); } to { transform: scale(1); } }

/* Grano y resplandor: se mantienen, muy sutiles, para no competir con la foto */
.grano { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--grano); opacity: .05; mix-blend-mode: overlay; }
.brillo {
  position: absolute; z-index: -1; width: 70vmax; height: 70vmax; right: -20vmax; top: -30vmax; border-radius: 50%; opacity: .35;
  background: radial-gradient(circle, rgba(224, 27, 36, .55), rgba(224, 27, 36, 0) 65%);
  animation: deriva 18s ease-in-out infinite alternate;
}
@keyframes deriva { to { transform: translate(-12vmax, 14vmax) scale(1.15); } }

.hero-in { position: relative; z-index: 2; width: 100%; max-width: 820px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-24); }
.hero-marca { --gap-titulo: var(--esp-16); }
.hero .eyebrow { margin: 0; }
.titulo-gigante {
  font: var(--t-display); letter-spacing: var(--ls-display); color: var(--texto-sobre-oscuro);
  display: flex; flex-wrap: nowrap;
}
.titulo-gigante .l { display: inline-block; opacity: 0; transform: translateY(60%) rotate(4deg); animation: letra .9s var(--suave) forwards; animation-delay: calc(.25s + var(--i) * .055s); }
@keyframes letra { to { opacity: 1; transform: none; } }
.lema { margin-top: calc(var(--gap-titulo) - var(--esp-24)); font: var(--t-acento); color: var(--texto-sobre-oscuro); max-width: 30ch; }
.lema em { font: inherit; color: inherit; }
.bajada { font: var(--t-texto-grande); color: var(--texto-sobre-oscuro-2); max-width: 560px; }

/* Entrada de la portada */
.entra { opacity: 0; transform: translateY(18px); animation: entra 1s var(--suave) forwards; animation-delay: var(--d, 0s); }
@keyframes entra { to { opacity: 1; transform: none; } }

/* Tarjeta del remate dentro de la portada */
.tarjeta-remate {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 20px var(--esp-32);
  padding: 20px var(--esp-24); width: fit-content; max-width: 100%;
  background: rgba(255, 255, 255, .06); border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio);
}
.tarjeta-remate-datos { display: grid; gap: 6px; grid-area: 1 / 1; }
.tarjeta-remate .boton { grid-area: 1 / 2; }
.tarjeta-remate .cuenta { grid-area: 2 / 1 / 3 / 3; }
.tarjeta-remate-fecha { font: var(--t-h3); color: var(--texto-sobre-oscuro); }
.tarjeta-remate-lugar { font: var(--t-epigrafe); color: var(--texto-sobre-oscuro-2); }


/* ---------- Cuenta regresiva (bloque timer del Figma) ---------- */
.cuenta { display: flex; align-items: flex-start; gap: var(--esp-16); }
.cuenta-caja {
  display: flex; flex-direction: column; align-items: center; gap: var(--esp-4);
  width: 120px; padding: var(--esp-16) 0;
  background: rgba(255, 255, 255, .04); border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio);
}
.cuenta-caja b { display: block; font: var(--t-dato); letter-spacing: var(--ls-dato); color: var(--texto-sobre-oscuro); font-variant-numeric: tabular-nums; }
.cuenta-caja small { display: block; font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--rotulo-sobre-oscuro); }
.cuenta-sep { display: none; }
.cuenta-ya { font: var(--t-h3); color: var(--rotulo-sobre-oscuro); }
.tarjeta-remate .cuenta { width: 100%; gap: var(--esp-8); }
.tarjeta-remate .cuenta-caja { flex: 1; width: auto; min-width: 0; padding: var(--esp-12) 0; }
.tarjeta-remate .cuenta-caja b { font-size: var(--fs-destacado); }

/* ---------- Cinta de razas ---------- */
.cinta { overflow: hidden; background: var(--marca-rojo); }
/* app.js repite el grupo de razas hasta cubrir la pantalla y fija --dur para una velocidad constante */
.cinta-pista { display: flex; width: max-content; animation: cinta var(--dur, 38s) linear infinite; will-change: transform; }
.cinta-pista span {
  display: inline-flex; align-items: center; gap: 28px;
  padding: 21px 28px 21px 0; font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase;
  color: var(--accion-texto); white-space: nowrap;
}
.cinta-pista span::after { content: ""; width: 6px; height: 6px; margin: 0 1.24px; background: var(--accion-texto); transform: rotate(45deg); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Secciones ---------- */
.bloque { position: relative; padding: var(--esp-128) var(--pad-x); color: var(--c-texto); background: var(--fondo-claro); }
.bloque > * { max-width: var(--contenedor); margin-left: auto; margin-right: auto; }
.fondo-claro-2 { background: var(--fondo-claro-2); }
.fondo-oscuro { background: var(--fondo-oscuro); }
.fondo-oscuro-2 { background: var(--fondo-oscuro-2); }
.cabecera { display: flex; flex-direction: column; gap: var(--esp-16); margin-bottom: var(--esp-64); }
.catalogo-ayuda { font: var(--t-texto); color: var(--c-texto-2); max-width: 46ch; }

/* Aparición al hacer scroll (app.js revela todo lo que ya quedó atrás aunque se scrollee rápido) */
.revela { opacity: 0; transform: translateY(36px); transition: opacity 1s var(--suave), transform 1s var(--suave); }
.revela.visible { opacity: 1; transform: none; }

/* ---------- Quiénes somos ---------- */
.nosotros { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 628px); gap: var(--esp-96); align-items: start; }
/* La foto de Pablo va al lado del texto, alineada arriba y en flujo normal (no sticky, no fija al scroll). */
.nosotros-izq { align-self: start; position: static; }
.retrato { display: flex; flex-direction: column; gap: var(--esp-12); }
.retrato img { width: 100%; aspect-ratio: 520 / 640; object-fit: cover; }
.retrato figcaption { font: var(--t-epigrafe); color: var(--c-texto-2); }
.nosotros-der { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-32); }
.cita { font: var(--t-h2); letter-spacing: var(--ls-h2); }
#m-sobre { display: grid; gap: 18px; max-width: 600px; font: var(--t-texto); }
.cifras { display: flex; flex-wrap: wrap; gap: var(--esp-24) var(--esp-48); }
.cifras li { display: flex; flex-direction: column; gap: 6px; }
.cifras b { font: var(--t-dato); letter-spacing: var(--ls-dato); color: var(--acento-texto); }
.cifras span { font: var(--t-epigrafe); color: var(--c-texto-2); max-width: 22ch; }
.fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); width: 100%; max-width: 600px; }
.foto { display: flex; flex-direction: column; gap: 10px; }
.foto-marco { display: block; overflow: hidden; aspect-ratio: 1; background: var(--crema-200); }
.foto-marco img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--suave); }
.foto:hover .foto-marco img { transform: scale(1.05); }
.foto figcaption { font: var(--t-epigrafe); color: var(--c-texto-2); }

/* ---------- Razas ---------- */
.razas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); }
.raza { position: relative; display: flex; flex-direction: column; gap: var(--esp-16); overflow: hidden; background: var(--fondo-claro); transition: background .4s, transform .4s var(--suave); }
.raza::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--marca-rojo); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--suave); }
.raza:hover { background: var(--blanco-calido); }
.raza:hover::after { transform: scaleX(1); }
.raza-foto { position: relative; height: 300px; overflow: hidden; background: var(--crema-200); }
.raza-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.raza:hover .raza-foto img { transform: scale(1.06); }
.raza-sin { position: absolute; inset: 0; display: grid; place-items: center; font: var(--t-h3); color: var(--c-texto-2); }
.raza-cuerpo { display: flex; flex-direction: column; gap: var(--esp-8); padding: 0 var(--esp-24) 28px; }
.raza-num { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.raza h3 { font: var(--t-h3); }
.raza p { font: var(--t-texto); color: var(--c-texto-2); }

/* ---------- Trayectoria ---------- */
.fondo-oscuro#trayectoria { padding-bottom: var(--esp-128); }
.trayectoria { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 120px; align-items: start; }
.trayectoria-col { position: sticky; top: 112px; display: flex; flex-direction: column; gap: var(--esp-32); }
.trayectoria-col .cabecera { margin: 0; }
.trayectoria-foto { display: flex; flex-direction: column; gap: var(--esp-12); }
.trayectoria-foto img { width: 100%; aspect-ratio: 400 / 500; object-fit: cover; }
.trayectoria-foto figcaption { font: var(--t-epigrafe); color: var(--c-texto-2); }

.linea { max-width: 760px; }
.hito { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 53px; }
.hito-anio { font: var(--t-h3); color: var(--rotulo-sobre-oscuro); }
.hito::before { content: ""; position: absolute; left: 97px; top: 8px; width: 11px; height: 11px; border-radius: 50%; background: var(--rotulo-sobre-oscuro); }
.hito::after { content: ""; position: absolute; left: 102px; top: 25px; bottom: 0; width: 1px; background: var(--rotulo-sobre-oscuro); }
.hito:last-child::after { display: none; }
.hito-cuerpo { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-8); margin-bottom: 40px; }
/* Sello de premio: círculo dorado (color de los rótulos) con estrella oscura, en la esquina superior derecha */
.hito-sello { position: absolute; top: -14px; right: 18px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rotulo-sobre-oscuro); color: var(--tierra-900); }
.hito-sello .ico { width: 16px; height: 16px; vertical-align: 0; }
.hito h3 { font: var(--t-titulo-tarjeta); color: var(--texto-sobre-oscuro); }
.hito p { font: var(--t-texto); color: var(--texto-sobre-oscuro-2); }
.hito a { display: inline-flex; align-items: center; gap: 6px; font: var(--t-boton); letter-spacing: var(--ls-boton); color: var(--rotulo-sobre-oscuro); text-decoration: none; transition: color .25s; }
.hito a:hover { color: var(--texto-sobre-oscuro); }
.hito-foto { position: relative; width: 100%; margin-bottom: var(--esp-8); }
.hito-foto img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.hito-foto figcaption { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; font: 500 11px/1.4 var(--font-texto); color: var(--texto-sobre-oscuro); background: rgba(26, 22, 20, .65); }
.hito-premio .hito-anio { color: var(--texto-sobre-oscuro); }
.hito-premio::before { top: 10px; left: 96px; width: 13px; height: 13px; background: var(--rojo-500); box-shadow: 0 0 0 6px rgba(224, 27, 36, .25); }
.hito-premio::after { top: 29px; }
.hito-premio .hito-cuerpo {
  padding: 22px var(--esp-24); margin-bottom: var(--esp-32);
  border: 1px solid var(--rotulo-sobre-oscuro);
  background: linear-gradient(170.6deg, rgba(224, 27, 36, .22) 0%, rgba(216, 199, 159, .08) 71.4%);
}
.hito-etiqueta { display: inline-flex; align-items: center; gap: 8px; font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--rotulo-sobre-oscuro); }

/* ---------- Banda del remate (home) ---------- */
.banda-remate {
  position: relative; overflow: hidden; color: var(--texto-sobre-oscuro); text-align: center;
  padding: clamp(80px, 12vw, 175px) var(--pad-x);
  background:
    linear-gradient(180deg, rgba(26, 22, 20, .35), rgba(26, 22, 20, .75) 50%, rgba(26, 22, 20, .92)),
    url("img/grande-25.jpg") center / cover, var(--fondo-oscuro);
}
.banda-in { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--esp-24); }
.banda-titulo { color: var(--texto-sobre-oscuro); }
.banda-dato { font: var(--t-texto-grande); color: var(--texto-sobre-oscuro-2); }
.banda-in .cuenta { justify-content: center; }

/* ---------- Prensa ---------- */
.prensa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-48) var(--esp-24); align-items: start; }
.prensa-nota { display: flex; flex-direction: column; gap: var(--esp-16); text-decoration: none; color: var(--c-texto); }
.prensa-foto { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--fondo-oscuro-2); }
.prensa-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--suave); }
.prensa-nota:hover .prensa-foto img { transform: scale(1.05); }
.prensa-credito { position: absolute; right: 8px; bottom: 6px; padding: 2px 6px; font: 500 11px/1.4 var(--font-texto); color: var(--texto-sobre-oscuro); background: rgba(26, 22, 20, .65); }
.prensa-sin { display: grid; place-items: center; }
.prensa-sin span { padding: 0 var(--esp-24); text-align: center; font: var(--t-h3); color: var(--rotulo-sobre-oscuro); }
.prensa-medio { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.prensa-nota h3 { font: var(--t-titulo-tarjeta); transition: color .25s; }
.prensa-nota:hover h3 { color: var(--acento-texto); }
.prensa-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-12); font: var(--t-epigrafe); color: var(--c-texto-2); }
.prensa-pie span { display: inline-flex; align-items: center; gap: 6px; font: var(--t-boton); letter-spacing: var(--ls-boton); color: var(--acento-texto); }
.prensa-nota time { text-transform: capitalize; }

/* ---------- Vlog ---------- */
.carril { display: grid; gap: var(--esp-24); grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.episodio { background: var(--fondo-oscuro); border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio); overflow: hidden; transition: border-color .3s, transform .4s var(--suave); }
.episodio:hover { border-color: var(--rotulo-sobre-oscuro); transform: translateY(-4px); }
.episodio > div:last-child { display: flex; flex-direction: column; gap: var(--esp-8); padding: 20px var(--esp-24) var(--esp-24); }
.episodio h3 { font: var(--t-titulo-tarjeta); }
.episodio time { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.episodio p { font: var(--t-epigrafe); color: var(--c-texto-2); }
.vacio { grid-column: 1 / -1; padding: var(--esp-64) var(--esp-24); text-align: center; font: var(--t-acento); color: var(--texto-sobre-oscuro-2); border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio); }
.insta { display: grid; grid-template-columns: 1fr auto; gap: var(--esp-24); align-items: center; margin-top: var(--esp-48); padding: var(--esp-24) 28px; border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio); background: rgba(255, 255, 255, .03); }
.insta p { font: var(--t-epigrafe); color: var(--c-texto-2); }
.insta strong { display: block; font: var(--t-h3); color: var(--c-texto); }

/* ---------- Video: miniatura con play ---------- */
.poster { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; overflow: hidden; background: var(--crema-200); color: inherit; }
.poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--suave); }
.poster:hover img { transform: scale(1.06); }
.play {
  position: absolute; z-index: 1; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%;
  background: var(--accion-fondo); display: grid; place-items: center; pointer-events: none;
  box-shadow: 0 0 0 6px rgba(247, 242, 234, .22);
  transition: transform .3s var(--suave), box-shadow .3s, background .25s;
}
.play::before { content: ""; margin-left: 3px; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--blanco-calido); }
.poster:hover .play, .raza-card:hover .play { transform: scale(1.1); box-shadow: 0 0 0 10px rgba(247, 242, 234, .18); background: var(--rojo-700); }
.poster[disabled] { cursor: default; }
.poster .pronto { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--tierra-600); }
.poster-vacio img { opacity: .35; }

/* ---------- Remate: portada ---------- */
.hero-remate .hero-in { max-width: 1100px; gap: var(--esp-32); }
.remate-titulo { display: flex; flex-direction: column; gap: var(--esp-16); }
.titulo-remate { font: 800 clamp(36px, 9vw, 128px)/1.1 var(--font-titulo); letter-spacing: var(--ls-display); color: var(--texto-sobre-oscuro); }
.remate-linea { display: flex; flex-wrap: wrap; column-gap: .5ch; font: var(--t-h3); color: var(--texto-sobre-oscuro); }
.remate-linea #r-lugar::before { content: "· "; }
.nota { font: var(--t-texto-grande); color: var(--texto-sobre-oscuro-2); }
.acciones { display: flex; flex-wrap: wrap; gap: var(--esp-16); }

/* Oferta */
.oferta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-24); }
.oferta li { display: flex; flex-direction: column; gap: var(--esp-8); padding-top: var(--esp-24); border-top: 1px solid var(--c-borde); }
.oferta b { font: var(--t-dato); letter-spacing: var(--ls-dato); color: var(--acento-texto); }
.oferta strong { font: var(--t-titulo-tarjeta); }
.oferta small { font: var(--t-epigrafe); color: var(--c-texto-2); }

/* Catálogo por razas */
.razas-remate { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); }
.raza-card { display: flex; flex-direction: column; background: var(--fondo-claro); color: var(--c-texto); text-decoration: none; transition: transform .4s var(--suave), box-shadow .4s; }
.raza-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(26, 22, 20, .5); }
.raza-card-foto { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--crema-200); }
.raza-card-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--suave); }
.raza-card:hover .raza-card-foto img { transform: scale(1.07); }
.raza-card-cuerpo { display: flex; flex-direction: column; gap: var(--esp-8); padding: 20px var(--esp-24) var(--esp-24); }
.raza-card-grupo { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.raza-card-fila { display: flex; align-items: baseline; justify-content: space-between; gap: var(--esp-12); }
.raza-card h3 { font: var(--t-titulo-tarjeta); }
.raza-card-cuenta { font: var(--t-epigrafe); color: var(--c-texto-2); white-space: nowrap; }
.raza-card-ver { display: inline-flex; align-items: center; gap: 8px; font: var(--t-boton); letter-spacing: var(--ls-boton); color: var(--acento-texto); }
.raza-card:focus-visible { outline: 2px solid var(--acento-texto); outline-offset: 3px; }

/* Vista de una raza: cuando está abierta, el fondo pasa a claro y se oculta la cabecera del catálogo */
#catalogo:has(#lotes:not([hidden])) { background: var(--fondo-claro); padding-top: var(--esp-64); }
#catalogo:has(#lotes:not([hidden])) > .cabecera { display: none; }
.vista-raza { animation: abre .5s var(--suave); }
.volver { display: inline-flex; align-items: center; gap: 10px; margin-bottom: var(--esp-40, 40px); font: var(--t-boton); letter-spacing: var(--ls-boton); color: var(--acento-texto); text-decoration: none; }
.vista-raza-cab { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-12); margin-bottom: 40px; }
.vista-raza-cab h3 { font: var(--t-h2); letter-spacing: var(--ls-h2); }
.categoria-grupo { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--c-rotulo); }
.categoria-cuenta { font: var(--t-texto); color: var(--c-texto-2); }
.otras-razas { display: flex; flex-wrap: wrap; gap: var(--esp-8); margin-bottom: 40px; }
.otras-razas a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--borde-sobre-claro); font: var(--t-nav); text-decoration: none; color: var(--c-texto); transition: border-color .25s, background .25s, color .25s; }
.otras-razas a:hover { border-color: var(--rotulo-sobre-claro); }
.otras-razas a[aria-current="true"] { background: var(--fondo-oscuro); border-color: var(--fondo-oscuro); color: var(--texto-sobre-oscuro); }
.otras-razas small { font: var(--t-rotulo); color: inherit; opacity: .7; }
.lotes-grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px var(--esp-24); }
.lote-tarjeta { display: flex; flex-direction: column; gap: var(--esp-12); }
.lote-info { display: flex; flex-direction: column; gap: var(--esp-4); }
.lote-titulo { font: var(--t-titulo-tarjeta); color: var(--c-texto); }
.lote-raza { font: var(--t-epigrafe); color: var(--c-texto-2); }
.ficha { margin-top: var(--esp-4); display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font: var(--t-epigrafe); }
.ficha dt { color: var(--c-texto-2); }
.ficha dd { font-weight: 600; color: var(--c-texto); }

/* Condiciones */
.condiciones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--esp-24); }
.condicion {
  display: flex; flex-direction: column; gap: var(--esp-12); padding: 28px 28px var(--esp-32);
  background: var(--fondo-oscuro-2); border: 1px solid var(--rotulo-sobre-oscuro); border-radius: var(--radio);
  transition: transform .4s var(--suave), border-color .3s;
}
.condicion:hover { transform: translateY(-4px); border-color: var(--texto-sobre-oscuro); }
.condicion::before { content: ""; width: 40px; height: 3px; background: var(--marca-rojo); }
.condicion-num { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--rotulo-sobre-oscuro); }
.condicion h3 { font: var(--t-titulo-tarjeta); }
.condicion-destacado { font: var(--t-destacado); letter-spacing: var(--ls-destacado); color: var(--texto-sobre-oscuro); text-wrap: balance; }
.condicion p { font: var(--t-texto); color: var(--texto-sobre-oscuro-2); }

/* Contacto */
.contactos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--esp-24); }
.contactos li { display: flex; flex-direction: column; gap: 6px; padding: var(--esp-24); background: var(--fondo-claro-2); border-radius: var(--radio); transition: transform .4s var(--suave), box-shadow .4s; }
.contactos li:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(26, 22, 20, .5); }
.contactos strong { font: var(--t-titulo-tarjeta); }
.contactos span { margin-bottom: var(--esp-12); font: var(--t-h3); }
.contactos .boton { padding: var(--esp-16) 20px; }

/* ---------- Pie ---------- */
.pie { display: flex; flex-direction: column; gap: var(--esp-48); padding: 80px var(--pad-x) 40px; background: var(--fondo-oscuro); color: var(--texto-sobre-oscuro-2); }
.pie-fila { display: flex; justify-content: space-between; gap: var(--esp-48); flex-wrap: wrap; }
.pie-marca-bloque { display: flex; flex-direction: column; gap: var(--esp-16); }
.pie-logo { display: flex; align-items: center; gap: var(--esp-12); text-decoration: none; color: var(--texto-sobre-oscuro); }
.pie-logo img { width: 66px; height: auto; }
.pie-logo span { font: 600 28px/1.25 var(--font-titulo); }
.pie-dir { font: var(--t-epigrafe); color: var(--texto-sobre-oscuro-2); }
.pie-cols { display: flex; gap: var(--esp-96); flex-wrap: wrap; }
.pie-col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-12); }
.pie-contactos { display: flex; flex-direction: column; gap: var(--esp-12); }
.pie-contactos a { display: inline-flex; align-items: center; gap: 10px; }
.pie-contactos .ico { width: 20px; height: 20px; }
.pie a:not(.pie-logo) { font: var(--t-nav); color: var(--texto-sobre-oscuro); text-decoration: none; transition: color .25s; }
.pie a:not(.pie-logo):hover { color: var(--rotulo-sobre-oscuro); }
.pie-legal { padding-top: var(--esp-24); border-top: 1px solid var(--borde-sobre-oscuro); font: var(--t-epigrafe); color: var(--texto-sobre-oscuro-2); }

/* ---------- Reproductor ---------- */
dialog { width: min(1000px, 94vw); padding: 0; border: 1px solid var(--borde-sobre-oscuro); border-radius: var(--radio); overflow: hidden; background: #000; }
dialog[open] { animation: abre .4s var(--suave); }
dialog::backdrop { background: rgba(14, 12, 12, .9); backdrop-filter: blur(4px); }
@keyframes abre { from { opacity: 0; transform: translateY(-6px); } }
.marco { aspect-ratio: 16 / 9; }
.marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.repro-barra { display: flex; align-items: center; gap: var(--esp-12); padding: 10px 10px 10px 18px; background: var(--fondo-oscuro); border-bottom: 1px solid var(--borde-sobre-oscuro); }
.repro-titulo { margin: 0; color: var(--texto-sobre-oscuro); font: var(--t-nav); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repro-titulo b { font: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--rotulo-sobre-oscuro); }
.repro-botones { margin-left: auto; display: flex; align-items: center; gap: var(--esp-8); flex: none; }
.repro-pos { min-width: 52px; text-align: center; font: var(--t-rotulo); letter-spacing: .1em; color: var(--texto-sobre-oscuro-2); }
.repro-nav, .cerrar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 1px solid var(--borde-sobre-oscuro); background: transparent; color: var(--texto-sobre-oscuro); transition: background .25s, color .25s, border-color .25s; }
.repro-nav:hover, .cerrar:hover { background: var(--rotulo-sobre-oscuro); border-color: var(--rotulo-sobre-oscuro); color: var(--tierra-900); }

/* ---------- Íconos ---------- */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }
.ico-flecha { width: 20px; height: 20px; transition: transform .45s var(--suave); }
.raza-card:hover .ico-flecha { transform: translateX(6px); }
.volver .ico-flecha { transform: scaleX(-1); }
.volver:hover .ico-flecha { transform: scaleX(-1) translateX(5px); }
.prensa-pie .ico, .hito a .ico { width: 16px; height: 16px; }
.hito-etiqueta .ico { width: 14px; height: 14px; }
.repro-nav .ico, .cerrar .ico { width: 20px; height: 20px; }
.boton .ico { width: 20px; height: 20px; vertical-align: 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .trayectoria { gap: var(--esp-64); }
}

@media (max-width: 960px) {
  .razas, .razas-remate, .lotes-grilla, .prensa, .contactos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oferta, .condiciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tarjeta del remate: una columna cuando no entra a dos */
@media (max-width: 760px) {
  .tarjeta-remate { grid-template-columns: minmax(0, 1fr); width: 100%; }
  .tarjeta-remate .cuenta { grid-area: 2 / 1; }
  .tarjeta-remate .boton { grid-area: 3 / 1; }
}

/* Tablet y celular: menú hamburguesa */
@media (max-width: 860px) {
  .top { gap: var(--esp-16); }
  .menu-btn { display: flex; }
  .top nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--esp-8) var(--pad-x) var(--esp-24);
    background: var(--fondo-oscuro); border-bottom: 1px solid var(--borde-sobre-oscuro);
  }
  .top.menu-abierto { background: var(--fondo-oscuro); }
  .top.menu-abierto nav { display: flex; animation: abre .35s var(--suave); }
  .top nav a:not(.boton) { padding: 14px 0; border-bottom: 1px solid var(--borde-sobre-oscuro); }
  .top nav a:not(.boton)::after { display: none; }
  .top nav a.boton { margin-top: var(--esp-16); }
  .boton-consultas .solo-desktop { display: none; }
  .boton-consultas .solo-mobile { display: inline; }
  .nosotros { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .retrato { max-width: 520px; }
  .trayectoria { grid-template-columns: minmax(0, 1fr); gap: var(--esp-32); }
  .trayectoria-col { position: static; }
  .trayectoria-foto { max-width: 400px; }
  .insta { grid-template-columns: minmax(0, 1fr); }
}

/* Celular (Figma 390) */
@media (max-width: 640px) {
  html { scroll-padding-top: 76px; }
  .top { height: 76px; padding: 20px var(--pad-x) 0; }
  .top.solida { height: 64px; padding: 4px var(--pad-x); }
  .marca-cabeza { width: 42.9px; }
  .marca span { font-size: 20px; }
  /* Con el botón "Consultas" visible no entra el nombre: queda solo la cabeza del logo */
  .top:has(.boton-consultas:not([hidden])) .marca span { display: none; }
  .hero { padding: 132px var(--pad-x) 56px; }
  .hero-marca { --gap-titulo: 10px; }
  .hero-in { gap: 20px; }
  .lema { margin-top: calc(var(--gap-titulo) - 20px); }
  /* Celular: la foto (16:9) va entera a todo el ancho, debajo del header, y el texto sigue
     abajo. Con "cover" a pantalla completa se agrandaba ~4 veces y solo se veía un pedazo. */
  .hero.con-foto { --alto-foto: 56.25vw; min-height: 0; justify-content: flex-start; padding-top: calc(76px + var(--alto-foto) + 8px); }
  .hero.con-foto::before { background: var(--foto) center 76px / 100% auto no-repeat; animation: none; }
  .hero.con-foto::after, .hero-remate.con-foto::after {
    background: linear-gradient(180deg,
      rgba(26, 22, 20, 0) calc(76px + var(--alto-foto) * .7), var(--fondo-oscuro) calc(76px + var(--alto-foto)));
  }
  .cinta-pista span { padding-block: 17px; }

  .bloque { padding: var(--esp-64) var(--pad-x); }
  .fondo-oscuro#trayectoria { padding-bottom: var(--esp-96); }
  .cabecera { margin-bottom: 40px; }
  .cuenta { width: 100%; max-width: 360px; gap: var(--esp-8); }
  .cuenta-caja { flex: 1; width: auto; min-width: 0; }
  .banda-in .cuenta { max-width: none; }

  /* Nosotros */
  .cifras { flex-direction: column; gap: var(--esp-16); }
  .cifras li { flex-direction: row; align-items: center; gap: var(--esp-16); }
  .cifras b { min-width: 40px; }
  .retrato img { aspect-ratio: 350 / 420; }

  /* Galerías y listas horizontales (scroll) */
  .fotos, .razas, .prensa, .razas-remate {
    display: flex; gap: var(--esp-16); max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(var(--pad-x) * -1); margin-right: calc(var(--pad-x) * -1); padding: 0 var(--pad-x) var(--esp-8); width: auto;
  }
  .fotos::-webkit-scrollbar, .razas::-webkit-scrollbar, .prensa::-webkit-scrollbar, .razas-remate::-webkit-scrollbar { display: none; }
  /* Con el snap, la primera tarjeta se pegaba al borde de la pantalla: el margen de la página cuenta como parte del área de encaje */
  .razas, .prensa { scroll-padding-inline: var(--pad-x); }
  .fotos { align-self: stretch; } /* dentro de una columna flex con align-items:flex-start, si no, se ensancha al contenido */
  .foto { flex: 0 0 240px; scroll-snap-align: start; }
  .raza, .prensa-nota, .raza-card { flex: 0 0 300px; scroll-snap-align: start; }
  .prensa { align-items: flex-start; }
  .raza-foto { height: 240px; }
  .nosotros-der .fotos { margin-top: 0; }

  /* Trayectoria */
  .linea { max-width: none; }
  .hito { grid-template-columns: 1fr; column-gap: 0; padding-left: 28px; }
  .hito::before { left: 0; top: 8px; }
  .hito::after { left: 5px; top: 25px; }
  .hito-premio::before { left: -1px; top: 8px; }
  .hito-premio::after { left: 5px; top: 27px; }
  .hito-anio { margin-bottom: var(--esp-8); }
  .hito-cuerpo { margin-bottom: 32px; }
  .hito-premio .hito-cuerpo { padding: 20px var(--esp-16); }

  /* Remate */
  .hero-remate .hero-in { gap: 28px; }
  .oferta, .condiciones, .contactos, .lotes-grilla { grid-template-columns: minmax(0, 1fr); }
  .lotes-grilla { gap: 32px; }
  .oferta { gap: var(--esp-24); }
  .otras-razas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: calc(var(--pad-x) * -1); margin-right: calc(var(--pad-x) * -1); padding: 0 var(--pad-x); }
  .otras-razas a { flex: none; }
  .acciones .boton { flex: 1 1 100%; }

  /* Pie */
  .pie { padding: var(--esp-64) var(--pad-x) var(--esp-32); gap: var(--esp-32); }
  .pie-fila { flex-direction: column; gap: var(--esp-32); }
  .pie-logo img { width: 52.8px; }
  .pie-logo span { font-size: 24px; }
  .pie-cols { gap: var(--esp-48); }

  dialog { width: 100vw; max-width: 100vw; }
  .repro-pos { display: none; }
}

/* Celular acostado: la portada no necesita llenar la pantalla */
@media (max-height: 500px) and (orientation: landscape) {
  .hero { min-height: 0; padding-top: 110px; }
}

/* Pantallas táctiles: áreas de toque más grandes */
@media (hover: none), (max-width: 860px) {
  .otras-razas a { min-height: 44px; }
  .cerrar, .repro-nav { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .entra, .revela, .titulo-gigante .l { opacity: 1 !important; transform: none !important; }
}

/* Foto de fondo del hero de la home: una para escritorio (anclada a la derecha, para que el toro no se corte)
   y otra para celular (anclada arriba al centro). Zoom lento y degradados quedan como estaban. */
.hero-marca.con-foto::before { background: url("img/hero-desktop.jpg") right center / cover no-repeat; }
@media (max-width: 767px) {
  /* La foto de celular (780×1600) va entera, a todo el ancho y pegada arriba: el toro queda limpio arriba y
     el texto empieza justo debajo de él, sobre el carnero, que se ve a través de un oscuro semitransparente.
     Al final de la foto el oscuro se vuelve sólido y se funde con el fondo. */
  .hero-marca.con-foto { --alto-foto: 205.13vw; min-height: 0; justify-content: flex-start; padding-top: calc(var(--alto-foto) * .45); }
  .hero-marca.con-foto::before { background: url("img/hero-mobile.jpg") center top / 100% auto no-repeat; }
  .hero-marca.con-foto::after {
    background:
      linear-gradient(180deg, rgba(26, 22, 20, .6), rgba(26, 22, 20, 0) 110px),
      linear-gradient(180deg,
        rgba(26, 22, 20, 0) calc(var(--alto-foto) * .36),
        rgba(26, 22, 20, .6) calc(var(--alto-foto) * .5),
        rgba(26, 22, 20, .6) calc(var(--alto-foto) * .74),
        var(--fondo-oscuro) calc(var(--alto-foto) * .98));
  }
}