/* ============================================================================
   Empresa Demo · Nova — styles.css
   Marca: NEGRO + DORADO · estética de cabaña de élite (premium, sobria)
   ============================================================================ */
:root{
  --negro:#0a0a0b;
  --negro-2:#121110;
  --negro-3:#1a1815;
  --negro-4:#221f19;
  --linea:rgba(217,200,158,.16);
  --linea-2:rgba(217,200,158,.30);
  --dorado:#d9c89e;
  --dorado-claro:#efe3c4;
  --oro-grad:linear-gradient(135deg,#f6eed9 0%,#d9c89e 46%,#b5a37c 100%);
  --crema:#f2f1ee;
  --texto:#ece7dd;
  --texto-mut:#a49d8d;
  --ok:#5ea36a; --rem:#d99a3a; --res:#7e94c4; --vend:#7a746a;
  --cjk:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Cormorant Garamond",Georgia,"Songti SC","Noto Serif CJK SC",serif;
  --ui:"Inter",-apple-system,system-ui,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --wrap:1140px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--ui); color:var(--texto);
  background:var(--negro);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  /* Cormorant Garamond trae cifras old-style: el "1" sale como un guion bajito y
     "+USD 142K" se lee "+USD -42K"; "#1" se lee "# I". Va heredado a todo.
     ⚠️ `font-variant-numeric` NO se acumula entre reglas: cualquier regla que lo
     redeclare (p.ej. para tabular-nums) tiene que repetir `lining-nums`. */
  font-variant-numeric:lining-nums;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
/* los controles de formulario no heredan las propiedades de fuente (los pisa la
   hoja del navegador), así que las cifras dentro de un <button> —el precio en el
   riel de lotes, por ejemplo— volvían a salir old-style */
button,input,select,textarea{font-variant-numeric:inherit}
.gold{color:var(--dorado)}

/* reveal */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
/* modo captura (?shot=1): revela todo y acorta el hero para screenshots de página completa */
.shot .reveal{opacity:1!important;transform:none!important;transition:none!important}
.shot .hero{min-height:auto;padding:9rem 1.2rem 4rem}

/* ── Botones ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.7rem;border-radius:999px;font-weight:600;font-size:.95rem;
  letter-spacing:.02em;cursor:pointer;border:1px solid transparent;transition:.25s;
}
.btn-gold{background:var(--oro-grad);color:#17150f;box-shadow:0 8px 30px rgba(217,200,158,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(217,200,158,.42)}
.btn-ghost{border-color:var(--linea-2);color:var(--crema);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--dorado);background:rgba(217,200,158,.08)}

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem clamp(1rem,4vw,3rem);
  transition:.35s;border-bottom:1px solid transparent;
}
.nav.scrolled{background:rgba(10,10,10,.82);backdrop-filter:blur(14px);border-bottom-color:var(--linea)}
.nav-logo{display:flex;align-items:center;gap:.6rem;font-family:var(--serif);font-size:1.2rem;font-weight:600;letter-spacing:.04em;color:var(--crema)}
.nav-logo img{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea-2)}
.nav-links{display:flex;gap:1.8rem}
.nav-links a{font-size:.9rem;color:var(--texto-mut);font-weight:500;transition:.2s;position:relative}
.nav-links a:hover{color:var(--dorado)}
.btn-wa{display:inline-flex;align-items:center;gap:.4rem;padding:.55rem 1.1rem;border-radius:999px;border:1px solid var(--linea-2);font-size:.85rem;font-weight:600;color:var(--crema);transition:.25s}
.btn-wa:hover{border-color:var(--dorado);background:rgba(217,200,158,.1)}
.wa-ico{color:var(--dorado)}
.nav-actions{display:flex;align-items:center;gap:.7rem}
.lang-sel{appearance:none;-webkit-appearance:none;padding:.45rem 1.7rem .45rem .8rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--crema);font-family:var(--ui);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s;background-image:linear-gradient(45deg,transparent 50%,var(--dorado) 50%),linear-gradient(135deg,var(--dorado) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.lang-sel:hover{border-color:var(--dorado)}
.lang-sel option{background:#141210;color:var(--crema)}
/* EN VIVO */
.live-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--texto-mut);font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;cursor:not-allowed;transition:.25s}
.live-btn .live-dot{width:9px;height:9px;border-radius:50%;background:var(--texto-mut);flex-shrink:0;transition:.25s}
.live-btn.on{color:#fff;border-color:#e0483a;background:rgba(224,72,58,.16);cursor:pointer}
.live-btn.on .live-dot{background:#ff3b2f;animation:livePulse 1.4s infinite}
.live-btn.on:hover{background:rgba(224,72,58,.3)}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(255,59,47,.65)}70%{box-shadow:0 0 0 8px rgba(255,59,47,0)}100%{box-shadow:0 0 0 0 rgba(255,59,47,0)}}
@media(max-width:640px){.live-btn .live-txt{display:none}.live-btn{padding:.5rem .6rem}}
@media(max-width:820px){.nav-links{display:none}}

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;padding:7rem 1.2rem 4rem;overflow:hidden}
/* la foto de Emperador a sangre + un doble degradado que le garantiza contraste
   al texto sin importar qué parte del cuadro quede debajo */
.hero-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 46%;z-index:0}
.hero-scrim{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(6,5,4,.78) 0%,rgba(6,5,4,.44) 26%,rgba(6,5,4,.58) 58%,rgba(6,5,4,.93) 100%),
  linear-gradient(90deg,rgba(6,5,4,.5) 0%,rgba(6,5,4,.1) 50%,rgba(6,5,4,.5) 100%)}
.hero-glow{position:absolute;inset:0;background:
  radial-gradient(60% 50% at 50% 30%,rgba(217,200,158,.14),transparent 70%),
  radial-gradient(40% 40% at 80% 90%,rgba(217,200,158,.07),transparent 70%);
  z-index:0}
.hero::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(255,255,255,.012) 3px,transparent 4px);z-index:0;pointer-events:none}
.hero-inner{position:relative;z-index:1;max-width:760px}
/* el texto va sobre la foto del animal, que es blanco: todo lleva su sombra.
   En el claim va como drop-shadow y no text-shadow porque tiene el relleno en
   degradado con background-clip:text (motion.css). */
.hero-kicker{color:var(--dorado);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem;
  text-shadow:0 1px 12px rgba(0,0,0,.85)}
.hero-claim{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,6.5vw,4.6rem);line-height:1.05;color:var(--crema);margin-bottom:1.4rem;
  filter:drop-shadow(0 3px 18px rgba(0,0,0,.8))}
.hero-sub{color:var(--texto);font-size:1.08rem;max-width:600px;margin:0 auto 2.2rem;
  text-shadow:0 1px 14px rgba(0,0,0,.9)}
.hero-sub strong{color:var(--crema);font-weight:600}
.hero-cta{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
/* VERTICAL: el 16:9 se recorta al 26% del ancho, así que la ventana visible se
   apunta a la cabeza / ojo / barbela (verificado simulando el recorte con ffmpeg),
   y el contenido se apoya abajo para no taparle la cara al animal. */
@media (orientation:portrait) and (max-width:900px){
  .hero{justify-content:flex-end;padding:5.5rem 1.1rem 2rem}
  .hero-foto{object-position:9% center}
  /* arriba se aclara para que se lea la cabeza del animal, abajo se cierra
     porque ahí va el texto. El claim es crema sobre un toro blanco, así que
     además lleva sombra propia (drop-shadow y no text-shadow: el claim tiene
     el relleno en degradado con background-clip:text). */
  .hero-scrim{background:
    linear-gradient(180deg,rgba(6,5,4,.46) 0%,rgba(6,5,4,.14) 17%,rgba(6,5,4,.40) 44%,
      rgba(6,5,4,.84) 72%,rgba(6,5,4,.96) 100%)}
  .hero-claim{font-size:clamp(2.05rem,8.6vw,3rem);margin-bottom:1.1rem}
  .hero-sub{font-size:.97rem;margin-bottom:1.7rem}
  .hero-cta .btn{flex:1 1 100%}
}
/* teléfono acostado: 390px de alto no aguantan el claim gigante ni la barra
   completa — el menú pasa al burger y el hero se comprime */
@media (orientation:landscape) and (max-height:520px){
  .hero{min-height:auto;padding:4.6rem 1.2rem 2rem}
  .hero-claim{font-size:clamp(1.6rem,5.6vh,2.4rem);margin-bottom:.7rem}
  .hero-sub{font-size:.92rem;margin-bottom:1.2rem}
  .nav-links{display:none}
  .nav-logo span{white-space:nowrap;font-size:1rem}
  .nav .btn-wa{display:none}
}

/* ── CREDENCIALES ─────────────────────────────────────────────────────── */
.creds{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(1.5rem,6vw,4.5rem);
  padding:2.2rem 1.5rem;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);background:var(--negro-2)}
.cred{text-align:center}
.cred b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--dorado);font-weight:700}
.cred span{font-size:.76rem;color:var(--texto-mut);letter-spacing:.08em;text-transform:uppercase}

/* ── EMPERADOR · las cifras del referente ─────────────────────────────────
   La sección de dos columnas que había acá la reemplazó el viaje de cámara
   (`.mk-cine`); sólo sobreviven las cifras, que ahora viven dentro del primer
   capítulo del viaje. */
.emp-stats{display:flex;flex-wrap:wrap;gap:2rem;margin-top:1.6rem}
.emp-stats b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--dorado);font-weight:700;line-height:1}
.emp-stats span{font-size:.74rem;color:var(--texto-mut);letter-spacing:.05em;text-transform:uppercase}
@media(max-width:760px){.emp-stats{gap:1.4rem}}

/* ── SECTIONS ─────────────────────────────────────────────────────────── */
.section{max-width:var(--wrap);margin:0 auto;padding:clamp(4rem,9vw,7rem) clamp(1.2rem,4vw,2rem)}
.section.alt{max-width:none;background:var(--negro-2);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea)}
.section.alt>*{max-width:var(--wrap);margin-inline:auto}
.section-head{text-align:center;max-width:680px;margin:0 auto 3rem}
.eyebrow{display:inline-block;color:var(--dorado);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:.76rem;margin-bottom:.9rem}
.section-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,3rem);color:var(--crema);line-height:1.1}
.section-lead{color:var(--texto-mut);margin-top:1rem;font-size:1.05rem}

/* ── FILTROS + GRID CATÁLOGO ─────────────────────────────────────────── */
.cat-filters{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.4rem}
.filter-btn{padding:.55rem 1.3rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--texto-mut);font-family:var(--ui);font-size:.88rem;font-weight:600;cursor:pointer;transition:.22s}
.filter-btn:hover{color:var(--crema);border-color:var(--dorado)}
.filter-btn.active{background:var(--oro-grad);color:#17150f;border-color:transparent}
.cat-loading{grid-column:1/-1;text-align:center;color:var(--texto-mut);padding:3rem}
.cat-loading code{color:var(--dorado)}
.cat-group{font-family:var(--serif);font-size:1.5rem;color:var(--crema);font-weight:600;margin:2.2rem 0 1.2rem;display:flex;align-items:center;gap:.7rem}
.cat-group:first-child{margin-top:0}
.cat-group span{font-family:var(--ui);font-size:.72rem;color:var(--dorado);border:1px solid var(--linea-2);border-radius:999px;padding:.12rem .6rem;font-weight:700}
.cat-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.2rem}

/* ── CARD ─────────────────────────────────────────────────────────────── */
.card{position:relative;background:linear-gradient(160deg,var(--negro-3),var(--negro-2));border:1px solid var(--linea);border-radius:16px;cursor:pointer;transition:.28s;overflow:hidden}
.card:hover{transform:translateY(-4px);border-color:var(--linea-2);box-shadow:0 18px 44px rgba(0,0,0,.5)}
.card-photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:#000;border-bottom:1px solid var(--linea)}
.card-img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.card:hover .card-img{transform:scale(1.04)}
/* sin foto propia (embriones): el escudo de la cabaña ocupa el lugar de la foto */
.card-img--ph{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,var(--negro-4),var(--negro))}
.card-img--ph img{width:64%;max-width:190px;height:auto;object-fit:contain;opacity:.88;
  filter:contrast(1.08) saturate(1.15) brightness(1.04);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 52%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 52%)}
.card-photo .badge{position:absolute;top:.7rem;left:.7rem;backdrop-filter:blur(6px);background:rgba(10,10,10,.55)}
.card-body{padding:1.15rem 1.25rem 1.25rem}
.badge{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.24rem .66rem;border-radius:999px;border:1px solid}
.b-ok{color:#8fd39c;border-color:rgba(94,163,106,.4);background:rgba(94,163,106,.1)}
.b-remate{color:#f0c06a;border-color:rgba(217,154,58,.45);background:rgba(217,154,58,.12)}
.b-res{color:#a9bce6;border-color:rgba(126,148,196,.4);background:rgba(126,148,196,.1)}
.b-vend{color:#a49d8d;border-color:var(--linea);background:rgba(255,255,255,.03)}
.card-name{font-family:var(--serif);font-size:1.4rem;font-weight:600;color:var(--crema);line-height:1.12}
.card-code{font-size:.76rem;color:var(--texto-mut);margin-top:.25rem;letter-spacing:.02em}
.card-mini{display:flex;gap:.7rem;margin:1rem 0}
.mini{flex:1;background:rgba(255,255,255,.02);border:1px solid var(--linea);border-radius:10px;padding:.55rem .7rem}
.mini span{display:block;font-size:.66rem;color:var(--texto-mut);text-transform:uppercase;letter-spacing:.06em}
.mini b{font-size:.92rem;color:var(--dorado-claro);font-weight:700}
.card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.card-price{font-family:var(--serif);font-size:1.35rem;font-weight:700;color:var(--dorado)}
.card-btn{padding:.45rem .95rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--crema);font-family:var(--ui);font-size:.8rem;font-weight:600;cursor:pointer;transition:.2s}
.card-btn:hover{background:var(--dorado);color:#17150f;border-color:transparent}

/* ── NOSOTROS ─────────────────────────────────────────────────────────── */
.nosotros{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.nosotros-txt h2{font-family:var(--serif);font-size:clamp(1.9rem,4vw,2.7rem);color:var(--crema);line-height:1.12;margin-bottom:1.2rem}
.nosotros-txt p{color:var(--texto-mut);margin-bottom:1rem}
.nosotros-txt strong{color:var(--crema)}
.nosotros-stats{display:flex;gap:1.6rem;margin-top:1.8rem;flex-wrap:wrap}
.nosotros-stats div b{display:block;font-family:var(--serif);font-size:1.7rem;color:var(--dorado);font-weight:700}
.nosotros-stats div span{font-size:.78rem;color:var(--texto-mut)}
.nosotros-img{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--linea-2)}
.nosotros-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.95) contrast(1.02)}
.img-cap{position:absolute;left:0;bottom:0;right:0;padding:1.4rem 1rem .8rem;font-size:.8rem;color:var(--crema);background:linear-gradient(transparent,rgba(0,0,0,.8))}
@media(max-width:780px){.nosotros{grid-template-columns:1fr}.nosotros-img{min-height:240px}}

/* ── CHAT ─────────────────────────────────────────────────────────────── */
.chat-wrap{max-width:720px;margin:0 auto}
.chat{background:linear-gradient(180deg,var(--negro-3),var(--negro-2));border:1px solid var(--linea-2);border-radius:20px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.chat-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-bottom:1px solid var(--linea);background:rgba(0,0,0,.25);flex-wrap:wrap}
.chat-id{display:flex;align-items:center;gap:.7rem}
.chat-av{width:44px;height:44px;border-radius:50%;background:var(--oro-grad);color:#17150f;display:grid;place-items:center;font-weight:800;font-size:1.2rem;font-family:var(--serif)}
.chat-id-txt b{display:block;color:var(--crema);font-size:1rem}
.chat-id-txt span{font-size:.76rem;color:var(--dorado)}
.voz{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
#vozbtn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--crema);font-family:var(--ui);font-size:.82rem;font-weight:600;cursor:pointer;transition:.2s}
#vozbtn svg{flex-shrink:0}
#vozbtn:hover{border-color:var(--dorado);color:var(--dorado)}
#vozbtn.live{background:#c4392b;border-color:#c4392b;color:#fff}
#vozbtn.speaking{background:var(--oro-grad);color:#17150f;border-color:transparent}
#voz-status{font-size:.72rem;color:var(--texto-mut)}
.chat-log{padding:1.4rem;height:420px;overflow-y:auto;display:flex;flex-direction:column;gap:1rem}
.chat-log::-webkit-scrollbar{width:7px}.chat-log::-webkit-scrollbar-thumb{background:var(--linea-2);border-radius:4px}
.msg{display:flex;gap:.7rem;max-width:88%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.av{flex-shrink:0;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:700}
.msg.nova .av{background:var(--oro-grad);color:#17150f}
.msg.me .av{background:var(--negro-4);color:var(--dorado);border:1px solid var(--linea-2)}
.b{padding:.8rem 1rem;border-radius:14px;font-size:.94rem;line-height:1.55}
.msg.nova .b{background:var(--negro-4);border:1px solid var(--linea);color:var(--texto);border-top-left-radius:4px}
.msg.me .b{background:var(--oro-grad);color:#17150f;font-weight:500;border-top-right-radius:4px}
.msg.nova .b strong{color:var(--dorado-claro)}
.typing{display:inline-flex;gap:4px}.typing i{width:7px;height:7px;border-radius:50%;background:var(--dorado);opacity:.5;animation:bl 1s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes bl{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ficha{margin-top:.8rem;border:1px solid var(--linea-2);border-radius:12px;overflow:hidden;background:rgba(0,0,0,.3)}
.ficha-head{display:flex;justify-content:space-between;padding:.55rem .8rem;background:rgba(217,200,158,.12);font-size:.8rem;font-weight:700;color:var(--dorado)}
.ficha-body{padding:.6rem .8rem;display:flex;flex-direction:column;gap:.35rem}
.fr{display:flex;justify-content:space-between;font-size:.85rem}
.fr span{color:var(--texto-mut)}.fr b{color:var(--crema)}
.chips{display:flex;gap:.5rem;flex-wrap:wrap;padding:0 1.4rem .6rem}
.chip-btn{padding:.42rem .9rem;border-radius:999px;border:1px solid var(--linea-2);background:transparent;color:var(--crema);font-family:var(--ui);font-size:.82rem;cursor:pointer;transition:.2s}
.chip-btn:hover{background:var(--dorado);color:#17150f;border-color:transparent}
.chat-form{display:flex;gap:.6rem;padding:1rem 1.4rem;border-top:1px solid var(--linea)}
.chat-form input{flex:1;padding:.8rem 1rem;border-radius:999px;border:1px solid var(--linea-2);background:rgba(0,0,0,.35);color:var(--texto);font-family:var(--ui);font-size:.94rem}
.chat-form input:focus{outline:none;border-color:var(--dorado)}
.chat-form button{display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:50%;border:none;background:var(--oro-grad);color:#17150f;cursor:pointer;transition:.2s}
.chat-form button:hover{transform:scale(1.06)}
.chat-note{text-align:center;color:var(--texto-mut);font-size:.78rem;margin-top:1rem}

/* ── CTA / REMATES ────────────────────────────────────────────────────── */
.cta{text-align:center;max-width:640px;margin:0 auto}
.cta h2{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3rem);color:var(--crema);line-height:1.1;margin-bottom:1rem}
.cta p{color:var(--texto-mut);margin-bottom:2rem}
.cta-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.footer{max-width:var(--wrap);margin:0 auto;padding:3rem clamp(1.2rem,4vw,2rem) 2rem;display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between;border-top:1px solid var(--linea)}
.footer-brand{display:flex;align-items:center;gap:.8rem}
.footer-brand img{width:52px;height:52px;border-radius:50%;border:1px solid var(--linea-2)}
.footer-brand-txt b{display:block;font-family:var(--serif);font-size:1.15rem;color:var(--crema)}
.footer-brand-txt span{font-size:.8rem;color:var(--texto-mut)}
.footer-links{display:flex;gap:1.5rem;flex-wrap:wrap}
.footer-links a{font-size:.85rem;color:var(--texto-mut);transition:.2s}
.footer-links a:hover{color:var(--dorado)}
.footer-legal{width:100%;text-align:center;font-size:.76rem;color:var(--texto-mut);padding-top:1.5rem;border-top:1px solid var(--linea);margin-top:.5rem}
/* la burbuja flotante de WhatsApp se comía la última fila del pie en el celular */
@media(max-width:560px){.footer{padding-bottom:5.5rem}}

/* ── MODAL ────────────────────────────────────────────────────────────── */
.modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(6px)}
.modal-card{position:relative;z-index:1;width:min(560px,100%);max-height:90vh;overflow-y:auto;background:linear-gradient(180deg,var(--negro-3),var(--negro-2));border:1px solid var(--linea-2);border-radius:20px;padding:2rem;box-shadow:0 30px 80px rgba(0,0,0,.7)}
.modal-x{position:absolute;top:1rem;right:1rem;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--linea-2);background:transparent;color:var(--crema);cursor:pointer;transition:.2s;z-index:2}
.modal-x:hover{background:var(--dorado);color:#17150f;border-color:transparent}
.m-photo{margin:-2rem -2rem 1.3rem;border-bottom:1px solid var(--linea-2);background:#000;max-height:340px;overflow:hidden}
.m-photo img{width:100%;height:100%;max-height:340px;object-fit:cover;display:block}
/* ficha de un animal sin foto: cabecera de marca en vez de un hueco */
.m-photo--ph{display:grid;place-items:center;height:180px;
  background:radial-gradient(circle at 50% 45%,var(--negro-4),var(--negro))}
/* máscara circular: recorta el JPG justo en el aro dorado, si no se ve el
   recuadro negro de la imagen contra el fondo del bloque */
.m-photo--ph img{width:min(190px,52%);height:auto;object-fit:contain;opacity:.92;
  filter:contrast(1.08) saturate(1.15) brightness(1.04);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 52%);
  mask-image:radial-gradient(circle at 50% 50%,#000 46%,transparent 52%)}
.m-head{display:flex;align-items:center;gap:.8rem;margin-bottom:.9rem}
.m-cat{font-size:.76rem;color:var(--texto-mut);text-transform:uppercase;letter-spacing:.08em}
.m-name{font-family:var(--serif);font-size:2rem;color:var(--crema);font-weight:600;line-height:1.05}
.m-code{font-size:.82rem;color:var(--texto-mut);margin:.3rem 0 1rem}
.m-resumen{color:var(--texto);font-size:.96rem;margin-bottom:1.3rem}
.m-pedigree{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1rem}
.m-pedigree div{background:rgba(255,255,255,.02);border:1px solid var(--linea);border-radius:10px;padding:.7rem .8rem}
.m-pedigree span{display:block;font-size:.68rem;color:var(--texto-mut);text-transform:uppercase;letter-spacing:.06em}
.m-pedigree b{color:var(--dorado-claro);font-size:.92rem}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.2rem}
.m-prenez{display:flex;align-items:center;justify-content:space-between;gap:1rem;background:rgba(217,154,58,.09);border:1px solid var(--linea-2);border-radius:10px;padding:.7rem .9rem;margin-bottom:1.2rem}
.m-prenez span{font-size:.68rem;color:var(--texto-mut);text-transform:uppercase;letter-spacing:.06em}
.m-prenez b{color:var(--dorado-claro);font-size:.9rem;text-align:right}
.m-cell{text-align:center;background:rgba(255,255,255,.02);border:1px solid var(--linea);border-radius:10px;padding:.6rem .3rem}
.m-cell span{display:block;font-size:.62rem;color:var(--texto-mut);text-transform:uppercase}
.m-cell b{color:var(--crema);font-size:.9rem}
.m-dep-title{font-size:.76rem;color:var(--dorado);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:.7rem}
.m-deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.6rem;margin-bottom:1.4rem}
.dep{display:flex;justify-content:space-between;background:rgba(217,200,158,.06);border:1px solid var(--linea);border-radius:8px;padding:.5rem .7rem}
.dep span{font-size:.78rem;color:var(--texto-mut)}.dep b{color:var(--crema);font-size:.85rem}
.m-foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-top:1.2rem;border-top:1px solid var(--linea)}
.m-price span{display:block;font-size:.72rem;color:var(--texto-mut);text-transform:uppercase}
.m-price b{font-family:var(--serif);font-size:1.8rem;color:var(--dorado);font-weight:700}
.m-actions{display:flex;gap:.6rem;flex-wrap:wrap}
.m-actions .btn{padding:.7rem 1.3rem;font-size:.88rem}
.m-note{font-size:.72rem;color:var(--texto-mut);margin-top:1rem;font-style:italic}
@media(max-width:520px){.m-grid{grid-template-columns:repeat(2,1fr)}.m-actions{width:100%}
 .m-actions .btn{flex:1 1 42%}}

/* ── WhatsApp flotante ────────────────────────────────────────────────── */
.wa-float{position:fixed;right:1.3rem;bottom:1.3rem;z-index:60;width:54px;height:54px;border-radius:50%;background:var(--oro-grad);color:#17150f;display:grid;place-items:center;font-size:1.5rem;box-shadow:0 10px 30px rgba(217,200,158,.4);transition:.25s}
.wa-float:hover{transform:scale(1.08)}

/* ── REMATES: video real + tarjeta del próximo remate ─────────────────── */
#remates{position:relative;overflow:hidden;min-height:100svh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding-top:clamp(5rem,14vh,9rem);padding-bottom:clamp(5rem,12vh,8rem)}
#remates>:not(.rem-bg){position:relative;z-index:1}
#remates>.rem-bg{position:absolute;inset:0;z-index:0;max-width:none;margin:0;pointer-events:none}
.rem-bg img{width:100%;height:100%;object-fit:cover;filter:blur(26px) saturate(.75) brightness(.32);transform:scale(1.12)}
.rem-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(12,12,12,.62) 30%,rgba(12,12,12,.72) 72%,var(--negro-2) 100%)}
#remates .section-head{margin-bottom:clamp(2rem,5vh,3.4rem)}
.rem-grid{display:grid;grid-template-columns:minmax(280px,.8fr) 1.2fr;gap:clamp(1.4rem,3.5vw,3rem);align-items:center}
.rem-video{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linea-2);background:#000;aspect-ratio:9/14;max-height:min(600px,72svh);margin-inline:auto;width:100%;cursor:pointer;box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 6px rgba(217,200,158,.06)}
.rem-video video{width:100%;height:100%;object-fit:cover;display:block}
.rem-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;border:1px solid var(--linea-2);background:rgba(10,10,10,.55);backdrop-filter:blur(6px);color:var(--crema);display:grid;place-items:center;cursor:pointer;transition:.25s}
.rem-video:hover .rem-play{background:var(--dorado);color:#17150f;transform:translate(-50%,-50%) scale(1.06)}
.rem-video.playing .rem-play,.rem-video.playing .cap{opacity:0;pointer-events:none}
.rem-video .cap{position:absolute;left:0;right:0;bottom:0;padding:2.4rem 1.1rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.85));color:var(--crema);transition:.3s}
.rem-video .cap b{display:block;font-family:var(--serif);font-size:1.3rem;line-height:1.1}
.rem-video .cap span{font-size:.74rem;color:var(--texto-mut)}
.rem-card{display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:clamp(1.6rem,3.2vw,2.8rem);border:1px solid var(--linea-2);border-radius:22px;background:linear-gradient(160deg,rgba(26,24,21,.92),rgba(18,17,16,.92));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.rem-card h3{font-family:var(--serif);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.05;color:var(--crema);font-weight:600}
.rem-meta{display:grid;grid-template-columns:1fr 1fr;gap:.7rem 1.2rem;margin:.6rem 0 1.2rem}
.rem-meta div span{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dorado)}
.rem-meta div b{font-size:.98rem;color:var(--crema);font-weight:600}
.rem-btns{display:flex;gap:.7rem;flex-wrap:wrap}
.rm-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .95rem;border-radius:999px;border:1px solid var(--linea-2);font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--texto-mut);align-self:flex-start;background:rgba(0,0,0,.3)}
.rm-pill.gold{color:var(--dorado)}
.rm-pill.live{color:#fff;border-color:#e0483a;background:rgba(224,72,58,.22)}
.rm-pill.live i{width:8px;height:8px;border-radius:50%;background:#ff3b2f;animation:livePulse 1.4s infinite}
@media(max-width:820px){#remates{min-height:0;padding-top:clamp(4rem,10vh,6rem)}.rem-grid{grid-template-columns:1fr}.rem-video{aspect-ratio:4/5;max-height:460px;max-width:420px}.rem-btns .btn{flex:1 1 100%}}