/* Madres del Futuro 2025 · catálogo web modelo (La Gotita)
   Colores del impreso (berenjena, cobre y oro) llevados a un lenguaje de casa de remates:
   noche berenjena, papel hueso, oro en hilo fino, serif editorial y arcos como marco de las fotos.
   25/9: rediseño para que se distinga de los catálogos tradicionales. */
:root {
  --noche: #1a0b16;
  --noche-2: #231020;
  --berenjena: #3a1d33;
  --vino: #5a2a4c;
  --cobre: #8e4d2c;
  --oro: #d4a04a;
  --oro-cl: #f1d08e;
  --oro-osc: #9a6325;
  --hueso: #f3ece3;
  --papel: #faf6f0;
  --tinta: #241320;
  --gris: #6f5d68;
  --linea: #e4d8cc;
  --hilo: rgba(212, 160, 74, .35);
  --ok: #3f7d4e;
  --radio: 4px;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Raleway', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --firma: 'Pinyon Script', 'Cormorant Garamond', cursive;
  --oro-grad: linear-gradient(115deg, #f6d68f 0%, #d9a043 32%, #a8661f 55%, #e8b65c 78%, #8e531b 100%);
  --alto-nav: 64px;
  --arco: 50% 50% 0 0 / 24% 24% 0 0;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--alto-nav) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--sans); color: var(--tinta); background: var(--papel); line-height: 1.6; font-size: 16px; font-variant-numeric: lining-nums; -webkit-tap-highlight-color: rgba(212, 160, 74, .25); }
img { max-width: 100%; display: block; }
figure { margin: 0; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--cobre); }
:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--oro-cl); color: var(--noche); }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--oro); color: var(--noche); padding: 10px 14px; font-weight: 700; }
.saltar:focus { top: 12px; }
button, a, label, summary, select { touch-action: manipulation; }

/* ---------- aviso de modelo ---------- */
.aviso-modelo { position: relative; z-index: 41; background: var(--noche); color: rgba(255, 255, 255, .72); text-align: center; font-size: 12.5px; padding: 8px 16px; line-height: 1.35; border-bottom: 1px solid var(--hilo); }
.aviso-modelo strong { color: var(--oro-cl); font-weight: 700; }

/* ---------- botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 26px; border-radius: 0; border: 1px solid transparent; font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.btn:active { transform: translateY(1px); }
.btn-oro { background: var(--oro-grad); background-size: 180% 100%; background-position: 0 0; color: var(--noche); box-shadow: 0 8px 24px -10px rgba(212, 160, 74, .7); }
.btn-oro:hover { background-position: 100% 0; }
.btn-linea { border-color: rgba(241, 208, 142, .55); color: var(--oro-cl); background: transparent; }
.btn-linea:hover { background: rgba(241, 208, 142, .08); border-color: var(--oro-cl); }
.btn-linea-osc { border-color: rgba(255, 255, 255, .35); color: #fff; background: transparent; }
.btn-linea-osc:hover { border-color: var(--oro-cl); color: var(--oro-cl); }
.btn-cobre { background: var(--berenjena); color: #fff; }
.btn-cobre:hover { background: var(--vino); }
.btn-suave { background: transparent; color: var(--berenjena); border-color: var(--linea); }
.btn-suave:hover { border-color: var(--oro-osc); }
.link { background: none; border: 0; color: var(--cobre); text-decoration: underline; cursor: pointer; padding: 0; font-weight: 600; }

/* ---------- navegación ---------- */
.nav { position: sticky; top: 0; z-index: 40; height: var(--alto-nav); display: flex; align-items: center; gap: 20px; padding: 0 max(20px, env(safe-area-inset-left)); background: transparent; border-bottom: 1px solid transparent; transition: background .35s, border-color .35s; margin-bottom: calc(var(--alto-nav) * -1); }
.nav.solida { background: rgba(26, 11, 22, .94); backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px); border-bottom-color: var(--hilo); }
.nav-marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.nav-marca img { width: 46px; height: auto; }
.nav-links { display: flex; gap: 2px; margin-left: auto; }
.nav-links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; padding: 10px 12px; position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 1px; background: var(--oro); transform: scaleX(0); transition: transform .3s; transform-origin: left; }
.nav-links a:hover { color: var(--oro-cl); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-cta { min-height: 40px; padding: 0 18px; font-size: 11px; }
@media (max-width: 900px) { .nav-links { display: none; } .nav-cta { margin-left: auto; } }
@media (max-width: 420px) { .nav-marca span { display: none; } }

/* ---------- PORTADA ---------- */
.hero { position: relative; isolation: isolate; min-height: max(620px, calc(100svh - 34px)); display: grid; grid-template-rows: 1fr auto; color: #fff; overflow: hidden; background:
  radial-gradient(60% 55% at 50% 42%, rgba(154, 99, 37, .38) 0%, rgba(58, 29, 51, .6) 45%, transparent 75%),
  radial-gradient(120% 90% at 50% 0%, var(--berenjena) 0%, var(--noche) 70%); }
.hero-grano { position: absolute; inset: 0; z-index: -1; opacity: .22; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.hero-anio { position: absolute; z-index: -1; left: 50%; bottom: 58px; transform: translateX(-50%); margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(160px, 30vw, 440px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px rgba(241, 208, 142, .16); white-space: nowrap; user-select: none; }
.arco { position: absolute; z-index: -1; top: 18%; width: clamp(200px, 21vw, 330px); aspect-ratio: 3 / 4.6; border-radius: 999px 999px 0 0; overflow: hidden; outline: 1px solid var(--hilo); outline-offset: 12px; }
.arco img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; filter: saturate(.85) contrast(1.05); animation: acercar 22s ease-in-out infinite alternate; }
.arco::after { content: ''; position: absolute; inset: 0; border-radius: 999px 999px 0 0; background: linear-gradient(180deg, transparent 45%, rgba(26, 11, 22, .85)); }
.arco-izq { left: clamp(20px, 5vw, 90px); }
.arco-izq img { object-position: 30% 50%; }
.arco-der { right: clamp(20px, 5vw, 90px); top: 26%; }
.arco-der img { object-position: 62% 50%; animation-delay: -11s; }
@keyframes acercar { from { transform: scale(1); } to { transform: scale(1.08); } }

.hero-in { align-self: center; position: relative; text-align: center; padding: calc(var(--alto-nav) + 22px) 20px 26px; max-width: 900px; margin: 0 auto; }
.hero-volanta { margin: 0 0 24px; font-size: 12px; font-weight: 700; letter-spacing: .42em; text-transform: uppercase; color: var(--oro-cl); display: inline-flex; align-items: center; gap: 16px; padding-left: .42em; }
.hero-volanta::before, .hero-volanta::after { content: ''; width: 40px; height: 1px; background: var(--oro); opacity: .7; }
.hero-h1 { margin: 0; font-weight: 400; }
.hero-marca { position: relative; display: block; width: min(380px, 70vw); margin: 0 auto; filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); animation: aparecer-marca 1.6s cubic-bezier(.2, .7, .2, 1) both; }
.hero-marca img { width: 100%; height: auto; }
/* destello que cruza el logo, como el brillo del dorado del impreso */
.hero-marca::after { content: ''; position: absolute; inset: 0; -webkit-mask: url('marca-mdf-3d.webp') center / contain no-repeat; mask: url('marca-mdf-3d.webp') center / contain no-repeat;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 246, 220, .85) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: destello 5.5s ease-in-out 1.4s infinite; mix-blend-mode: soft-light; }
@keyframes aparecer-marca { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(6px) drop-shadow(0 18px 40px rgba(0, 0, 0, .55)); } }
@keyframes destello { 0% { background-position: 150% 0; } 40%, 100% { background-position: -60% 0; } }
.hero-nombre { display: block; margin-top: 22px; text-wrap: balance; font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 4.2vw, 52px); letter-spacing: .14em; text-transform: uppercase; line-height: 1.05; padding-left: .14em; color: #fff4ea; animation: subir 1.2s .35s cubic-bezier(.2, .7, .2, 1) both; }
.hero-razas { margin: 18px 0 34px; display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; font-family: var(--serif); font-style: italic; font-size: clamp(19px, 2.4vw, 25px); color: var(--oro-cl); animation: subir 1.2s .55s cubic-bezier(.2, .7, .2, 1) both; }
.hero-razas i { font-style: normal; font-size: 9px; color: var(--oro); opacity: .8; }
.hero-botones { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; animation: subir 1.2s .75s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } }

.hero-riel { position: relative; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--hilo); background: rgba(26, 11, 22, .55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-riel div { padding: 18px 20px 20px; border-right: 1px solid var(--hilo); text-align: center; }
.hero-riel div:last-child { border-right: 0; }
.hero-riel dt { font-size: 10.5px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); margin-bottom: 4px; }
.hero-riel dd { margin: 0; font-family: var(--serif); font-size: clamp(18px, 1.8vw, 22px); color: #fff; line-height: 1.2; }

@media (max-width: 980px) {
  .arco { width: clamp(150px, 24vw, 220px); top: 14%; opacity: .55; }
  .arco-der { top: 22%; }
}
@media (max-width: 700px) {
  .hero { min-height: auto; }
  .arco { width: 44vw; top: auto; bottom: 150px; opacity: .28; }
  .arco-izq { left: -10vw; } .arco-der { right: -10vw; bottom: 190px; top: auto; }
  .hero-in { padding-top: calc(var(--alto-nav) + 34px); padding-bottom: 36px; }
  .hero-volanta { font-size: 10.5px; letter-spacing: .3em; gap: 10px; }
  .hero-volanta::before, .hero-volanta::after { width: 22px; }
  .hero-riel { grid-template-columns: 1fr 1fr; }
  .hero-riel div:nth-child(2) { border-right: 0; }
  .hero-riel div:nth-child(-n+2) { border-bottom: 1px solid var(--hilo); }
  .hero-anio { bottom: 150px; }
}

/* ---------- CINTAS DE SPONSORS (se mueven solas; se frenan al pasar el mouse o tocar) ---------- */
.cinta { position: relative; background: var(--noche); border-top: 1px solid var(--hilo); border-bottom: 1px solid var(--hilo); padding: 14px 0; overflow: hidden; }
.cinta[hidden] { display: none; }
.cinta-etiqueta { position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; margin: 0; display: flex; align-items: center; padding: 0 26px 0 20px; background: linear-gradient(90deg, var(--noche) 70%, transparent); }
.cinta-etiqueta span { font-family: var(--serif); font-style: italic; font-size: 20px; color: var(--oro-cl); white-space: nowrap; }
.cinta-pista { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.cinta-rodar { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; width: max-content; animation: rodar var(--dur, 60s) linear infinite; will-change: transform; }
.cinta-reves .cinta-rodar { animation-direction: reverse; }
.cinta:hover .cinta-rodar, .cinta:focus-within .cinta-rodar, .cinta:active .cinta-rodar, .cinta.frenada .cinta-rodar { animation-play-state: paused; }
.cinta-pausa { position: absolute; z-index: 3; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hilo); background: rgba(26, 11, 22, .85); cursor: pointer; display: grid; place-items: center; transition: border-color .2s, background .2s; }
.cinta-pausa:hover { border-color: var(--oro-cl); }
.cinta-pausa span { width: 9px; height: 10px; border-left: 3px solid var(--oro-cl); border-right: 3px solid var(--oro-cl); }
.cinta-pausa[aria-pressed="true"] span { width: 0; height: 0; border-right: 0; border-left: 9px solid var(--oro-cl); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-left: 3px; }
@media (prefers-reduced-motion: reduce) { .cinta-pausa { display: none; } }
@keyframes rodar { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion: reduce) { .cinta-pista { overflow-x: auto; } }
.cinta-item { flex: none; width: 168px; height: 76px; display: grid; place-items: center; padding: 10px 16px; background: #fff; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(212, 160, 74, .25); transition: transform .25s, box-shadow .25s; }
.cinta-item:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--oro), 0 10px 22px -12px rgba(0, 0, 0, .6); }
.cinta-item img { max-width: 100%; max-height: 56px; width: auto; height: auto; object-fit: contain; }
.cinta-item.oficial { width: 120px; background: #bd0062; box-shadow: inset 0 0 0 1px var(--oro-cl); }
.cinta-portada { padding-left: 150px; }
@media (max-width: 700px) { .cinta-portada { padding-left: 0; padding-top: 38px; } .cinta-etiqueta { bottom: auto; top: 8px; background: none; left: 50%; transform: translateX(-50%); padding: 0; } .cinta-etiqueta span { font-size: 17px; } .cinta-item { width: 136px; height: 64px; } .cinta-item img { max-height: 46px; } .cinta-item.oficial { width: 96px; } }

/* cinta dentro de la grilla de lotes: ocupa todo el ancho de la pantalla */
.cinta-grilla { grid-column: 1 / -1; margin: 18px calc(50% - 50vw); padding: 16px 0; background: linear-gradient(90deg, var(--noche), var(--berenjena), var(--noche)); }

/* ---------- cifras ---------- */
.cifras-sec { background: var(--hueso); padding: clamp(40px, 6vw, 70px) 20px; border-bottom: 1px solid var(--linea); }
.cifras { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); }
.cifras div { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 6px 10px; position: relative; }
.cifras div + div::before { content: '◆'; position: absolute; left: -5px; top: 34%; font-size: 8px; color: var(--oro); }
.cifras dd { margin: 0; order: -1; font-family: var(--serif); font-weight: 300; font-size: clamp(52px, 7vw, 92px); line-height: .9; color: var(--berenjena); font-variant-numeric: lining-nums tabular-nums; }
.cifras dt { margin-top: 10px; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gris); }
@media (max-width: 760px) { .cifras { grid-template-columns: repeat(3, 1fr); row-gap: 26px; } .cifras div:nth-child(4)::before { display: none; } }

/* ---------- secciones ---------- */
.sec { padding: clamp(64px, 9vw, 120px) 20px; }
.sec-cab { text-align: center; max-width: 820px; margin: 0 auto clamp(30px, 4vw, 50px); }
.volanta { font-size: 11.5px; letter-spacing: .38em; text-transform: uppercase; color: var(--oro-osc); font-weight: 700; margin: 0 0 14px; }
.volanta-clara { color: var(--oro); }
.titulo-serif { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 5.6vw, 68px); line-height: 1.02; margin: 0 0 18px; color: var(--berenjena); text-wrap: balance; letter-spacing: -.005em; }
.titulo-serif em { font-style: italic; color: var(--oro-osc); }
.titulo-serif.claro { color: #fff6ec; }
.titulo-serif.claro em { color: var(--oro-cl); }

/* aparición al hacer scroll */
.js .revelar { opacity: 0; transition: opacity .9s ease; }
.js .revelar.visto { opacity: 1; transform: none; }

/* ---------- carta ---------- */
.carta { background: var(--papel); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 90px); max-width: 1240px; margin: 0 auto; align-items: start; }
.carta-arco { position: relative; aspect-ratio: 3 / 4; border-radius: 999px 999px 0 0; outline: 1px solid var(--hilo); outline-offset: 12px; margin: 12px; }
.carta-arco img { position: relative; width: 100%; height: 100%; object-fit: cover; object-position: 65% 50%; border-radius: 999px 999px 0 0; }
.carta-in .volanta { text-align: left; }
.carta-in .titulo-serif { text-align: left; }
#carta p { font-size: 18px; line-height: 1.75; color: #3b2a35; margin: 0 0 18px; }
#carta p:first-child::first-letter { font-family: var(--serif); float: left; font-size: 92px; line-height: .78; padding: 8px 8px 0 0; color: var(--oro-osc); font-weight: 400; }
.firma { margin: 30px 0 0; display: flex; flex-direction: column; align-items: flex-start; }
.firma span { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--gris); }
.firma strong { font-family: var(--firma); font-weight: 400; font-size: clamp(40px, 5vw, 56px); color: var(--berenjena); line-height: 1.2; }
.ofrece-caja { grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-top: 40px; }
.ofrece-caja .volanta { text-align: center; }
.ofrece { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); counter-reset: of; border-left: 1px solid var(--linea); }
.ofrece li { counter-increment: of; padding: 8px 22px 12px; border-right: 1px solid var(--linea); font-family: var(--serif); font-size: 22px; line-height: 1.2; color: var(--berenjena); }
.ofrece li::before { content: counter(of, upper-roman); display: block; font-family: var(--sans); font-size: 11px; font-weight: 800; letter-spacing: .3em; color: var(--oro-osc); margin-bottom: 10px; }
@media (max-width: 860px) { .carta { grid-template-columns: 1fr; } .carta-arco { position: relative; top: 0; max-width: 360px; width: 78%; margin: 14px auto 0; } .ofrece { border-left: 0; } .ofrece li { border-right: 0; border-bottom: 1px solid var(--linea); padding: 14px 4px; } }

/* ---------- cabañas ---------- */
.cabanas { position: relative; background: radial-gradient(90% 70% at 50% 0%, var(--berenjena) 0%, var(--noche) 75%); color: #fff; }
.cabanas-ayuda { color: rgba(255, 255, 255, .62); margin: 0; font-size: 14px; }
.cabanas-grilla { list-style: none; margin: 0 auto; padding: 0; max-width: 1180px; display: flex; flex-wrap: wrap; justify-content: center; }
.cabanas-grilla li { flex: 0 0 calc(100% / 6); min-width: 0; box-shadow: 0 0 0 .5px var(--hilo); }
@media (max-width: 1000px) { .cabanas-grilla li { flex-basis: 25%; } }
@media (max-width: 700px) { .cabanas-grilla li { flex-basis: 50%; } .cabanas-grilla button { height: 150px; padding: 20px 12px 14px; } }
.cabanas-grilla button { width: 100%; height: 170px; display: grid; grid-template-rows: 1fr auto; place-items: center; gap: 10px; padding: 26px 18px 18px; border: 0; background: transparent; cursor: pointer; transition: background .35s; position: relative; }
.cabanas-grilla button::after { content: 'Ver lotes →'; position: absolute; left: 0; right: 0; bottom: 14px; font-size: 10.5px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--oro-cl); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.cabanas-grilla button:hover { background: rgba(212, 160, 74, .07); }
.cabanas-grilla button:hover::after { opacity: 1; transform: none; }
.cabanas-grilla button:hover small { opacity: 0; }
.cabanas-grilla img { max-height: 80px; max-width: min(160px, 100%); width: auto; object-fit: contain; transition: transform .4s; }
.cabanas-grilla button:hover img { transform: scale(1.05); }
.cabanas-grilla small { font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--oro); transition: opacity .3s; }

/* ---------- catálogo ---------- */
.catalogo { background: var(--papel); padding-top: 0; }
.barra { position: sticky; top: var(--alto-nav); z-index: 30; margin: 0 -20px 8px; padding: 14px 20px 10px; background: rgba(250, 246, 240, .95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--linea); }
.barra > * { max-width: 1240px; margin-left: auto; margin-right: auto; }
.barra { transition: transform .35s cubic-bezier(.2, .7, .2, 1); }
@media (min-width: 701px) { .barra.escondida { transform: translateY(calc(-100% - var(--alto-nav))); } }
.barra-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.buscar { flex: 1 1 280px; position: relative; }
.buscar svg { position: absolute; left: 2px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: var(--oro-osc); stroke-width: 1.8; stroke-linecap: round; }
.buscar input { width: 100%; height: 46px; border: 0; border-bottom: 1px solid var(--berenjena); border-radius: 0; background: transparent; padding: 0 10px 0 30px; font-size: 16px; font-family: var(--serif); font-size: 19px; }
.buscar input::placeholder { color: #9a8791; font-style: italic; }
.buscar input:focus { outline: none; border-bottom-color: var(--oro); box-shadow: 0 1px 0 var(--oro); }
.selector select { height: 46px; border: 1px solid var(--linea); border-radius: 0; background-color: #fff; color: var(--tinta); padding: 0 38px 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .06em; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--oro-osc) 50%), linear-gradient(135deg, var(--oro-osc) 50%, transparent 50%); background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size: 5px 5px; background-repeat: no-repeat; max-width: 100%; }
.vistas { display: inline-flex; border: 1px solid var(--linea); background: #fff; }
.vistas button { border: 0; background: transparent; height: 44px; padding: 0 16px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; color: var(--gris); }
.vistas button[aria-pressed="true"] { background: var(--berenjena); color: var(--oro-cl); }
.chips { display: flex; gap: 6px; overflow-x: auto; padding: 12px 0 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 1px solid var(--linea); background: transparent; border-radius: 999px; height: 34px; padding: 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--berenjena); cursor: pointer; white-space: nowrap; transition: border-color .2s, background .2s; }
.chips button:hover { border-color: var(--oro); }
.chips button span { color: var(--gris); font-weight: 600; margin-left: 5px; font-family: var(--serif); font-style: italic; font-size: 14px; }
.chips button[aria-pressed="true"] { background: var(--berenjena); border-color: var(--berenjena); color: #fff; }
.chips button[aria-pressed="true"] span { color: var(--oro-cl); }
.conteo { font-size: 13px; color: var(--gris); margin: 6px auto 0; font-family: var(--serif); font-style: italic; font-size: 15px; }

/* capítulo: número romano gigante, título en itálica y la foto en arco */
.bloque { max-width: 1240px; margin: 0 auto; }
.bloque-cab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: clamp(16px, 3vw, 40px); margin: clamp(50px, 7vw, 90px) 0 30px; padding-bottom: 22px; border-bottom: 1px solid var(--berenjena); }
.bloque-num { font-family: var(--serif); font-weight: 300; font-size: clamp(90px, 13vw, 170px); line-height: .72; color: transparent; -webkit-text-stroke: 1px var(--oro-osc); }
.bloque-cuenta { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-osc); }
.bloque-cab h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(44px, 6.6vw, 86px); line-height: .95; color: var(--berenjena); }
.bloque-bajada { margin: 10px 0 0; font-size: 14px; color: var(--gris); }
.bloque-arco { width: clamp(90px, 12vw, 150px); aspect-ratio: 3 / 4; margin-bottom: -1px; }
.bloque-arco img { width: 100%; height: 100%; object-fit: cover; border-radius: 999px 999px 0 0; }
@media (max-width: 560px) { .bloque-cab { grid-template-columns: auto minmax(0, 1fr); } .bloque-arco { display: none; } }

.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 44px 26px; }
.tarjeta { position: relative; display: flex; flex-direction: column; background: transparent; }
.tarjeta-abrir { all: unset; cursor: pointer; display: flex; flex-direction: column; flex: 1; }
.tarjeta-abrir:focus-visible { outline: 2px solid var(--oro); outline-offset: 6px; }
.t-foto { position: relative; aspect-ratio: 986 / 703; background: var(--hueso); overflow: hidden; border-radius: var(--arco); }
.t-foto::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(58, 29, 51, .08); pointer-events: none; }
.t-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.tarjeta:hover .t-foto img { transform: scale(1.045); }
.t-mosaico { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; height: 100%; }
.t-mosaico img { height: 100%; }
.t-vacia { height: 100%; display: grid; place-items: center; background: radial-gradient(80% 80% at 50% 40%, var(--vino), var(--noche)); }
.t-vacia img { width: 46%; height: auto; }
/* número de corral grande, en serif, sobre el borde de la foto */
.t-encabezado { display: flex; align-items: flex-end; gap: 14px; }
.t-encabezado .t-tipo { flex: 1; min-width: 0; padding-bottom: 5px; }
.t-corral { flex: none; display: flex; flex-direction: column; align-items: flex-start; font-size: 9px; font-weight: 800; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-osc); padding-right: 14px; border-right: 1px solid var(--linea); }
.t-corral b { font-family: var(--serif); font-weight: 400; font-size: 44px; line-height: .85; letter-spacing: 0; color: var(--berenjena); margin-top: 2px; }
.t-rp { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--gris); }
.t-sellos { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.sello { display: inline-flex; align-items: center; gap: 5px; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: transparent; border: 1px solid var(--linea); color: var(--berenjena); }
.sello-oro { background: var(--oro-grad); border-color: transparent; color: var(--noche); }
.sello-video { background: #c4302b; border-color: #c4302b; color: #fff; }
.sello-video::before { content: ''; border-left: 7px solid #fff; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.t-cuerpo { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.t-tipo { display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--oro-osc); }
.t-titulo { font-family: var(--serif); font-size: 23px; font-weight: 500; line-height: 1.12; margin: 0; color: var(--berenjena); transition: color .25s; }
.tarjeta:hover .t-titulo { color: var(--cobre); }
.t-cab { font-size: 13px; color: var(--gris); font-weight: 600; }
.t-datos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--linea); }
.t-datos div { min-width: 0; }
.t-datos dt { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.t-datos dd { margin: 0; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-comparar { display: flex; align-items: center; gap: 8px; margin: 12px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--gris); cursor: pointer; width: max-content; }
.t-comparar input { width: 17px; height: 17px; accent-color: var(--berenjena); }

/* lista */
.grilla.lista { grid-template-columns: 1fr; gap: 0; }
.grilla.lista .tarjeta { border-bottom: 1px solid var(--linea); padding: 14px 0; }
.grilla.lista .tarjeta-abrir { flex-direction: row; gap: 20px; align-items: center; }
.grilla.lista .t-foto { width: 180px; flex: none; border-radius: 999px 999px 0 0 / 60px 60px 0 0; }
.grilla.lista .t-sellos { display: none; }
.grilla.lista .t-corral { padding-right: 10px; }
.grilla.lista .t-corral b { font-size: 26px; }
.grilla.lista .t-cuerpo { padding: 0; }
.grilla.lista .t-datos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla.lista .t-comparar { margin-left: 200px; }
.grilla.lista .cinta-grilla { margin-top: 0; margin-bottom: 0; }
@media (max-width: 620px) { .grilla.lista .t-foto { width: 112px; } .grilla.lista .t-datos { display: none; } .grilla.lista .t-titulo { font-size: 18px; } .grilla.lista .t-comparar { margin-left: 132px; } .grilla.lista .tarjeta-abrir { gap: 14px; } }

.vacio { text-align: center; padding: 40px 0; color: var(--gris); font-family: var(--serif); font-style: italic; font-size: 20px; }

/* ---------- condiciones ---------- */
.condiciones { background: var(--hueso); }
.cond-grilla { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0; border-top: 1px solid var(--berenjena); }
.cond { padding: 30px clamp(4px, 2vw, 30px) 34px 0; }
.cond + .cond { padding-left: clamp(0px, 3vw, 40px); }
@media (min-width: 720px) { .cond:nth-child(2) { border-left: 1px solid var(--linea); } }
.cond h3 { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.1; color: var(--berenjena); }
.cond h4 { margin: 26px 0 10px; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro-osc); font-weight: 800; }
.cond p { margin: 0 0 10px; font-size: 15px; }
.lista-cond { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; font-size: 15px; }
.lista-cond li { padding-left: 20px; position: relative; }
.lista-cond li::before { content: '◆'; position: absolute; left: 0; top: .1em; font-size: 8px; color: var(--oro); }
.cond-sanitarias { grid-column: 1 / -1; border-top: 1px solid var(--linea); padding-left: 0 !important; }
.cond-sanitarias summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; list-style: none; }
.cond-sanitarias summary::-webkit-details-marker { display: none; }
.cond-sanitarias summary h3 { margin: 0; }
.mas { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--oro); position: relative; flex: none; }
.mas::before, .mas::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--berenjena); transform: translate(-50%, -50%); }
.mas::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .25s; }
.cond-sanitarias[open] .mas::after { transform: translate(-50%, -50%) rotate(0); }
.cond-sanitarias[open] summary { margin-bottom: 16px; }
@media (min-width: 900px) { .cond-sanitarias[open] { column-count: 2; column-gap: 40px; } .cond-sanitarias[open] summary { column-span: all; } }

/* ---------- sponsors ---------- */
.sponsors { background: radial-gradient(90% 70% at 50% 0%, var(--berenjena) 0%, var(--noche) 75%); color: #fff; padding-left: 0; padding-right: 0; }
.sp-oficial { display: flex; flex-direction: column; align-items: center; margin: 0 auto 40px; }
.sp-oficial img { width: 190px; height: auto; padding: 18px 26px; background: #bd0062; box-shadow: 0 0 0 1px var(--oro-cl), 0 0 0 8px var(--noche), 0 0 0 9px var(--hilo); }
.sp-nivel { text-align: center; margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: 24px; color: var(--oro-cl); }
.sponsors .cinta { margin-bottom: 40px; background: transparent; }
.sponsors .cinta-item { width: 190px; height: 90px; }
.sponsors .cinta-item img { max-height: 66px; }

/* ---------- contacto ---------- */
.contacto { position: relative; isolation: isolate; color: #fff; overflow: hidden; background: var(--noche); border-top: 1px solid var(--hilo); }
.contacto-in { max-width: 1100px; margin: 0 auto; text-align: center; position: relative; }
.contacto-dia { position: absolute; z-index: -1; left: 50%; top: -30px; transform: translateX(-50%); margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(150px, 26vw, 360px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(241, 208, 142, .14); white-space: nowrap; }
.contacto-lugar { font-family: var(--serif); font-style: italic; font-size: 21px; color: rgba(255, 255, 255, .8); margin: 0 0 50px; }
.contacto-grilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); text-align: left; border-top: 1px solid var(--hilo); }
.c-caja { padding: 26px 22px 10px 0; }
.c-caja + .c-caja { padding-left: 22px; border-left: 1px solid var(--hilo); }
@media (max-width: 560px) { .c-caja + .c-caja { padding-left: 0; border-left: 0; border-top: 1px solid var(--hilo); } }
.c-caja h3 { margin: 0 0 10px; font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
.c-caja p { margin: 0 0 6px; color: rgba(255, 255, 255, .88); overflow-wrap: anywhere; }
.c-caja a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(241, 208, 142, .5); }
.c-caja a:hover { color: var(--oro-cl); }

.pie { background: #120710; color: rgba(255, 255, 255, .6); text-align: center; padding: 40px 20px calc(36px + env(safe-area-inset-bottom)); font-size: 13px; }
.pie img { margin: 0 auto 14px; width: 72px; height: auto; opacity: .9; }
.pie a { color: var(--oro-cl); }
.pie p { max-width: 640px; margin: 0 auto; }

/* ---------- barra de comparar ---------- */
.comparar-barra { position: fixed; z-index: 45; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 10px; background: var(--noche); color: #fff; padding: 8px 8px 8px 20px; border: 1px solid var(--hilo); box-shadow: 0 12px 40px rgba(0, 0, 0, .35); font-weight: 700; font-size: 14px; white-space: nowrap; }
.comparar-barra .btn { min-height: 40px; padding: 0 16px; font-size: 11px; }
.comparar-barra[hidden] { display: none; }

/* ---------- ficha ---------- */
dialog { padding: 0; border: 0; max-width: none; max-height: none; }
dialog::backdrop { background: rgba(18, 7, 16, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.ficha { width: min(1140px, 100vw - 24px); height: min(100dvh - 24px, 1000px); border-radius: 2px; background: var(--papel); color: var(--tinta); overflow: hidden; box-shadow: 0 0 0 1px var(--hilo), 0 40px 90px rgba(0, 0, 0, .5); }
.ficha[open] { display: flex; animation: entra .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes entra { from { opacity: 0; transform: translateY(18px); } }
.ficha-in { display: flex; flex-direction: column; width: 100%; min-height: 0; }
@media (max-width: 700px) { .ficha { width: 100vw; height: 100dvh; } }
.f-cab { flex: none; display: flex; align-items: stretch; background: var(--noche); color: #fff; min-height: 80px; border-bottom: 1px solid var(--hilo); }
.f-cab-txt { flex: 1; min-width: 0; padding: 12px 20px; display: flex; flex-direction: column; justify-content: center; }
.f-tipo { font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--oro); font-weight: 800; }
.f-cab h2 { margin: 4px 0 0; font-family: var(--serif); font-size: clamp(22px, 3vw, 32px); font-weight: 500; line-height: 1.05; background: linear-gradient(90deg, #fff4e2, var(--oro-cl) 60%, var(--oro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.f-corral { flex: none; display: flex; align-items: baseline; align-self: center; gap: 8px; padding: 0 22px; font-size: 10.5px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--oro); border-left: 1px solid var(--hilo); }
.f-corral b { font-family: var(--serif); font-weight: 400; font-size: 52px; line-height: .8; letter-spacing: 0; color: #fff; }
.f-acc { flex: none; display: flex; align-items: center; gap: 2px; padding: 0 8px; border-left: 1px solid var(--hilo); }
.icono { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; font-size: 24px; line-height: 1; }
.icono:hover { background: rgba(241, 208, 142, .12); color: var(--oro-cl); }
.icono svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) { .f-corral { padding: 0 12px; } .f-corral span { display: none; } .f-corral b { font-size: 36px; } .icono { width: 38px; height: 38px; } }
.f-cuerpo { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.f-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 900px) { .f-grid { grid-template-columns: minmax(0, 1fr); } }
.f-medios { background: var(--noche-2); position: relative; }
.f-foto { position: static; }
.f-medios { align-self: start; }
.f-foto img, .f-foto iframe { width: 100%; height: auto; aspect-ratio: 986 / 703; object-fit: cover; border: 0; display: block; background: #000; }
@media (max-width: 900px) { .f-foto { position: static; } }
.f-botones { display: flex; gap: 8px; padding: 12px; flex-wrap: wrap; background: var(--noche-2); }
.f-botones .btn { min-height: 42px; font-size: 11px; padding: 0 16px; }
.btn-video { background: #c4302b; color: #fff; }
.btn-video:hover { background: #d9423c; }
.f-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px; }
.f-galeria figure { margin: 0; }
.f-galeria button { all: unset; cursor: zoom-in; display: block; overflow: hidden; }
.f-galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.f-galeria figcaption { font-size: 12px; font-weight: 700; color: var(--oro-cl); padding: 6px 2px 0; letter-spacing: .04em; }
.f-datos { padding: 22px clamp(16px, 3vw, 30px) 28px; }
.f-cabanas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.f-cabanas span { display: inline-flex; align-items: center; gap: 8px; background: var(--noche); color: #fff; border-radius: 999px; padding: 5px 14px 5px 6px; font-weight: 700; font-size: 13px; }
.f-cabanas img { height: 28px; width: auto; max-width: 64px; object-fit: contain; }
.f-cabanas span.sin-logo { padding-left: 14px; }
.f-sellos { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.f-sellos .sello { background: var(--hueso); border: 1px solid var(--linea); }
.f-sellos .sello-oro { border-color: transparent; }
.f-h3 { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-osc); margin: 26px 0 12px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.f-h3::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.f-h3:first-of-type { margin-top: 4px; }
.tabla-datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 0; }
@media (max-width: 480px) { .tabla-datos { grid-template-columns: 1fr; } }
.tabla-datos div { display: flex; flex-direction: column; border-bottom: 1px solid var(--linea); padding: 8px 0; }
.tabla-datos dt { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.tabla-datos dd { margin: 0; font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.faltante { color: var(--gris); font-weight: 500 !important; font-style: italic; font-size: 13px !important; }
.nota { background: #fff8ec; border-left: 2px solid var(--oro); padding: 10px 14px; font-weight: 700; color: #7a4a17; margin: 14px 0 0; font-size: 14px; }
.texto-lote p { margin: 0 0 12px; font-size: 15px; }
.texto-lote.mayus p { font-size: 14px; letter-spacing: .01em; }
.texto-lote ol { margin: 0 0 12px; padding-left: 22px; font-size: 14px; }
.subtitulo-lote { font-family: var(--serif); font-style: italic; font-size: 30px; line-height: 1.1; color: var(--cobre); margin: 0 0 14px; font-weight: 500; }

/* DEP en barras */
.dep { display: grid; gap: 0; border-top: 1px solid var(--linea); }
.dep-fila { display: grid; grid-template-columns: 88px 64px minmax(0, 1fr) 56px; align-items: center; gap: 12px; border-bottom: 1px solid var(--linea); padding: 9px 4px; }
.dep-sigla { font-weight: 800; font-size: 14px; color: var(--berenjena); line-height: 1.1; }
.dep-sigla small { display: block; font-size: 10px; color: var(--gris); font-weight: 600; letter-spacing: .02em; }
.dep-valor { font-weight: 800; font-size: 16px; text-align: right; }
.dep-valor small { display: block; font-size: 10px; color: var(--gris); font-weight: 600; }
.dep-barra { height: 6px; border-radius: 999px; background: #eee4da; overflow: hidden; }
.dep-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #bda89a, var(--vino)); }
.dep-fila.top .dep-barra i { background: var(--oro-grad); }
.dep-fila.top { background: linear-gradient(90deg, rgba(241, 208, 142, .22), transparent 70%); }
.dep-rk { text-align: right; font-weight: 800; font-size: 14px; }
.dep-rk small { display: block; font-size: 10px; color: var(--gris); font-weight: 600; }
.dep-ayuda { font-size: 12px; color: var(--gris); margin: 10px 0 0; }
@media (max-width: 420px) { .dep-fila { grid-template-columns: 70px 54px minmax(0, 1fr) 44px; gap: 8px; } }

/* pedigree */
.ped { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.ar { display: flex; align-items: center; }
.ar-n { flex: none; width: 230px; background: #fff; border: 1px solid var(--linea); border-left: 2px solid var(--vino); padding: 7px 10px; font-size: 11.5px; font-weight: 700; line-height: 1.25; position: relative; overflow-wrap: anywhere; }
.ar-n small { display: block; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 700; }
.ar-n.m { border-left-color: var(--oro); }
.ar-n.raiz { background: var(--noche); color: #fff; border-color: var(--noche); border-left-color: var(--oro); width: 210px; }
.ar-n.raiz small { color: var(--oro-cl); }
.ar-h { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; position: relative; }
.ar-h::before { content: ''; position: absolute; left: 0; top: 25%; bottom: 25%; width: 10px; border: 1px solid #cdb9a8; border-right: 0; }
.ar-h > .ar { position: relative; }
@media (max-width: 700px) { .ar-n { width: 176px; font-size: 11px; } .ar-n.raiz { width: 150px; } .ped::after { content: 'Deslizá para ver todo el árbol →'; display: block; font-size: 11px; color: var(--gris); margin-top: 6px; } }

.f-ancho { padding: 4px clamp(16px, 3vw, 30px) 28px; border-top: 1px solid var(--linea); }
.f-ancho .f-h3:first-child { margin-top: 22px; }
.f-pie { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--linea); }
.f-pie .btn { min-height: 44px; font-size: 11px; }

/* ---------- comparar ---------- */
.comparar { width: min(1100px, 100vw - 24px); max-height: calc(100dvh - 24px); background: var(--papel); box-shadow: 0 0 0 1px var(--hilo); }
.comparar-in { display: flex; flex-direction: column; max-height: calc(100dvh - 24px); }
.comparar-cab { display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 22px; background: var(--noche); color: #fff; border-bottom: 1px solid var(--hilo); }
.comparar-cab h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 26px; color: var(--oro-cl); }
.cerrar { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .08); color: #fff; font-size: 26px; cursor: pointer; line-height: 1; }
.cerrar:hover { background: rgba(241, 208, 142, .18); }
.comparar-tabla { overflow: auto; padding: 16px; overscroll-behavior: contain; }
.comparar-tabla table { border-collapse: separate; border-spacing: 0; min-width: 640px; width: 100%; font-size: 14px; }
.comparar-tabla th, .comparar-tabla td { padding: 9px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; font-variant-numeric: lining-nums tabular-nums; }
.comparar-tabla th[scope="row"] { color: var(--gris); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; width: 150px; position: sticky; left: 0; background: var(--papel); }
.comparar-tabla td img { width: 100%; max-width: 260px; height: auto; aspect-ratio: 986 / 703; object-fit: cover; border-radius: 999px 999px 0 0 / 50px 50px 0 0; }
.comparar-tabla td.mejor { color: var(--cobre); font-weight: 800; }

/* ---------- visor de páginas / fotos ---------- */
.visor { width: 100vw; height: 100dvh; background: rgba(15, 5, 12, .96); }
.visor[open] { display: grid; place-items: center; }
.visor .cerrar { position: fixed; top: 12px; right: 12px; z-index: 2; }
.visor-in { width: 100%; height: 100%; overflow: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 60px 12px 24px; overscroll-behavior: contain; }
.visor-in img { max-width: min(1200px, 100%); height: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.visor-in p { color: rgba(255, 255, 255, .8); font-size: 14px; margin: 0; text-align: center; }

.aviso { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); background: var(--noche); color: #fff; border: 1px solid var(--hilo); padding: 10px 18px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 60; }
.aviso.ver { opacity: 1; transform: translate(-50%, 0); }

/* números parejos y cortes de palabras largas */
.dep-valor, .dep-rk, .t-datos dd, .t-corral b, .f-corral b { font-variant-numeric: lining-nums tabular-nums; }
.tarjeta { scroll-margin-top: 220px; }
.t-titulo, .f-cab h2 { overflow-wrap: anywhere; }
.f-cab-txt, .t-cuerpo { min-width: 0; }

/* celular: barra de filtros sin quedar fija */
@media (max-width: 700px) {
  .barra { position: static; padding-top: 16px; }
  .barra-fila { gap: 8px; }
  .buscar { flex-basis: 100%; }
  .selector { flex: 1 1 0; min-width: 0; }
  .selector select { width: 100%; }
  .vistas button { padding: 0 12px; }
  .grilla { gap: 36px 18px; }
}

/* ==================================================================
   26/9, Domingo: sin fondo blanco. Las secciones de contenido van en el
   berenjena de la marca (dos tonos que se alternan) con el oro de acento.
   La ficha del lote (ventana) sigue clara para leer bien DEP y pedigree.
================================================================== */
:root {
  --fondo: #3a1d33;
  --fondo-2: #2b1426;
  --texto-cl: #f6ece1;
  --texto-cl-2: rgba(246, 236, 225, .68);
  --linea-osc: rgba(241, 208, 142, .18);
}
body { background: var(--fondo); }
.cifras-sec { background: linear-gradient(180deg, var(--noche), var(--fondo)); border-bottom-color: var(--linea-osc); }
.cifras dd { background: var(--oro-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cifras dt { color: var(--texto-cl-2); }

.carta { background: var(--fondo); color: var(--texto-cl); max-width: none; padding-left: max(20px, calc((100% - 1240px) / 2)); padding-right: max(20px, calc((100% - 1240px) / 2)); }
.carta .titulo-serif { color: var(--texto-cl); }
.carta .titulo-serif em, .carta .volanta, .ofrece-caja .volanta { color: var(--oro-cl); }
#carta p { color: rgba(246, 236, 225, .86); }
#carta p:first-child::first-letter { color: var(--oro); }
.firma span { color: var(--texto-cl-2); }
.firma strong { color: var(--oro-cl); }
.ofrece-caja { border-top-color: var(--linea-osc); }
.ofrece { border-left-color: var(--linea-osc); }
.ofrece li { color: var(--texto-cl); border-right-color: var(--linea-osc); border-bottom-color: var(--linea-osc); }
.ofrece li::before { color: var(--oro); }

.catalogo { background: radial-gradient(70% 40% at 50% 0%, rgba(154, 99, 37, .16), transparent 70%), var(--fondo-2); color: var(--texto-cl); }
.barra { background: rgba(43, 20, 38, .95); border-bottom-color: var(--linea-osc); }
.buscar input { color: var(--texto-cl); border-bottom-color: var(--oro); }
.buscar input::placeholder { color: rgba(246, 236, 225, .45); }
.buscar svg { stroke: var(--oro); }
.selector select { background-color: var(--fondo); color: var(--texto-cl); border-color: var(--linea-osc); background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%); }
.vistas { background: transparent; border-color: var(--linea-osc); }
.vistas button { color: var(--texto-cl-2); }
.vistas button[aria-pressed="true"] { background: var(--oro-grad); color: var(--noche); }
.chips button { color: var(--texto-cl); border-color: var(--linea-osc); }
.chips button span { color: var(--oro-cl); }
.chips button[aria-pressed="true"] { background: var(--oro-grad); border-color: transparent; color: var(--noche); }
.chips button[aria-pressed="true"] span { color: var(--berenjena); }
.conteo, .vacio { color: var(--texto-cl-2); }
.link { color: var(--oro-cl); }

.bloque-cab { border-bottom-color: var(--oro); }
.bloque-num { -webkit-text-stroke-color: var(--oro); }
.bloque-cab h2 { color: var(--texto-cl); }
.bloque-cuenta { color: var(--oro); }
.bloque-bajada { color: var(--texto-cl-2); }

.t-foto { background: var(--fondo); }
.t-foto::after { box-shadow: inset 0 0 0 1px rgba(241, 208, 142, .14); }
.t-corral { color: var(--oro); border-right-color: var(--linea-osc); }
.t-corral b { color: var(--texto-cl); }
.t-tipo { color: var(--oro); }
.t-rp { color: var(--texto-cl-2); }
.t-titulo { color: var(--texto-cl); }
.tarjeta:hover .t-titulo { color: var(--oro-cl); }
.t-cab { color: var(--texto-cl-2); }
.t-datos { border-top-color: var(--linea-osc); }
.t-datos dt { color: var(--texto-cl-2); }
.t-datos dd { color: var(--texto-cl); }
.t-comparar { color: var(--texto-cl-2); }
.t-comparar input { accent-color: var(--oro); }
.t-cuerpo .sello { color: var(--texto-cl); border-color: var(--linea-osc); }
.t-cuerpo .sello-oro { color: var(--noche); border-color: transparent; }
.t-cuerpo .sello-video { color: #fff; border-color: #c4302b; }
.grilla.lista .tarjeta { border-bottom-color: var(--linea-osc); }
.cinta-grilla { background: linear-gradient(90deg, var(--noche), #4a2440, var(--noche)); }

.condiciones { background: var(--fondo); color: var(--texto-cl); }
.condiciones .titulo-serif { color: var(--texto-cl); }
.condiciones .volanta { color: var(--oro-cl); }
.cond-grilla { border-top-color: var(--oro); }
.cond h3 { color: var(--texto-cl); }
.cond h4 { color: var(--oro); }
.cond p, .lista-cond { color: rgba(246, 236, 225, .84); }
.cond strong { color: #fff; }
@media (min-width: 720px) { .cond:nth-child(2) { border-left-color: var(--linea-osc); } }
.cond-sanitarias { border-top-color: var(--linea-osc); }
.mas::before, .mas::after { background: var(--oro-cl); }

/* ---------- revisión 26/9 ---------- */
/* las cintas usan 100vw: con barra de desplazamiento de Windows eso se pasaba unos px a lo ancho */
main { overflow-x: clip; }

/* botones y casillas fáciles de tocar en el celular (mínimo ~44 px) */
.t-comparar { min-height: 44px; margin-top: 4px; padding-right: 8px; }
.nav-marca { min-height: 44px; }
.cinta-pausa { width: 40px; height: 40px; right: 6px; }

/* botón dorado: degradé más claro para que el texto oscuro se lea bien en todo el botón */
.btn-oro, .vistas button[aria-pressed="true"], .chips button[aria-pressed="true"] { background: linear-gradient(115deg, #f6d68f 0%, #e3b25a 45%, #d49a40 70%, #efc374 100%); background-size: 180% 100%; }

/* con movimiento reducido las cintas quedan quietas y se desplazan a mano: sin logos repetidos */
@media (prefers-reduced-motion: reduce) { .cinta-item[aria-hidden="true"] { display: none; } }

/* en vista lista, el corral se lee más grande */
.grilla.lista .t-corral b { font-size: 34px; }

/* ==================================================================
   27/9, Domingo: cintas de sponsors en dorado degradé (el del logo)
   con los logos en un solo color que contrasta: berenjena noche.
================================================================== */
:root { --oro-cinta: linear-gradient(100deg, #f7d587 0%, #e2a948 22%, #c07a28 45%, #e6b458 66%, #f3cf82 80%, #a8661f 100%); }
.cinta, .cinta-grilla, .sponsors .cinta { background: var(--oro-cinta); border-color: rgba(26, 11, 22, .35); }
.cinta { box-shadow: inset 0 1px 0 rgba(255, 244, 214, .6), inset 0 -1px 0 rgba(90, 50, 10, .4); }
.cinta-etiqueta { background: linear-gradient(90deg, #f3cf82 60%, transparent); }
.cinta-etiqueta span { color: var(--noche); font-weight: 600; }
.cinta-item, .cinta-item.oficial, .sponsors .cinta-item { width: auto; min-width: 90px; height: 64px; padding: 0 22px; background: transparent; box-shadow: none; border-radius: 0; }
.cinta-item + .cinta-item { border-left: 1px solid rgba(26, 11, 22, .18); }
.cinta-item:hover { transform: none; box-shadow: none; }
.cinta-logo { display: block; background: var(--noche); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; transition: opacity .25s; opacity: .92; }
.cinta-item:hover .cinta-logo { opacity: 1; }
.cinta-raster { max-height: 44px; width: auto; filter: grayscale(1) contrast(1.6) brightness(.8); mix-blend-mode: multiply; }
.cinta-rodar { gap: 0; }
@keyframes rodar { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.cinta-pausa { background: var(--noche); border-color: rgba(26, 11, 22, .6); }
.sponsors .cinta { margin-bottom: 44px; border-top: 1px solid rgba(26, 11, 22, .35); }
.sponsors .cinta-item { height: 84px; padding: 0 28px; }
.sp-oficial-placa { display: grid; place-items: center; width: 210px; height: 230px; background: var(--oro-cinta); box-shadow: 0 0 0 1px var(--oro-cl), 0 0 0 8px var(--noche), 0 0 0 9px var(--hilo), 0 24px 50px -20px rgba(0, 0, 0, .7); }
@media (max-width: 700px) { .cinta-item, .cinta-item.oficial { height: 56px; padding: 0 16px; } }

/* ---------- 27/9: fotos chicas del impreso, sin estirar ---------- */
.f-mosaico { position: static; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 14px; align-content: start; }
.f-mosaico.una { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.f-mosaico figure { margin: 0; max-width: 420px; justify-self: center; width: 100%; }
.f-mosaico button { all: unset; cursor: zoom-in; display: block; }
.f-mosaico button:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }
.f-mosaico img { width: 100%; max-width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; background: transparent; border-radius: 2px; }
.f-mosaico.una img { width: auto; max-width: min(100%, 520px); }
.f-mosaico figcaption { font-size: 12px; font-weight: 700; color: var(--oro-cl); padding: 6px 2px 0; letter-spacing: .04em; }
.f-mosaico figure { display: flex; flex-direction: column; align-items: center; }
.f-mosaico figcaption { align-self: stretch; text-align: center; }
@media (max-width: 700px) { .cinta-portada { padding-top: 34px; } .cinta-etiqueta { background: none; top: 6px; } .cinta-etiqueta span { font-size: 16px; } }

/* 27/9, Domingo: nada queda pegado al bajar (la foto de la carta y la de la ficha se movían y se encimaban) */
.carta .carta-arco { outline-color: rgba(212, 160, 74, .55); }

/* ==================================================================
   27/9: ficha reorganizada, sin espacio muerto bajo la foto
================================================================== */
/* hembras: la foto y la ficha comparten la primera fila; el DEP va abajo a lo ancho */
.f-grid { align-items: stretch; }
.f-medios { align-self: stretch; display: flex; flex-direction: column; }
.f-medios .f-galeria { margin-top: auto; }
.f-datos { align-self: start; }
.f-ancho .dep { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.f-ancho .dep-ayuda { max-width: 80ch; }
@media (max-width: 900px) { .f-ancho .dep { grid-template-columns: minmax(0, 1fr); } }

/* elecciones, embriones y semen: franja de fotos arriba a lo ancho */
.f-grid-franja { grid-template-columns: minmax(0, 1fr); }
.f-grid-franja .f-medios { background: var(--noche-2); }
.f-grid-franja .f-mosaico { grid-template-columns: repeat(auto-fit, minmax(190px, max-content)); justify-content: center; gap: 14px; padding: 18px 18px 6px; }
.f-grid-franja .f-mosaico figure { width: auto; max-width: none; }
.f-grid-franja .f-mosaico img { width: auto; max-width: min(100%, 420px); max-height: 300px; }
.f-grid-franja .f-botones { justify-content: center; }
.f-grid-franja .f-datos { padding-bottom: 6px; }
.f-grid-franja .f-cabanas, .f-grid-franja .f-sellos { justify-content: flex-start; }
/* el texto largo en dos columnas cuando hay lugar */
@media (min-width: 900px) {
  .f-ancho .texto-lote { column-count: 2; column-gap: 40px; }
  .f-ancho .texto-lote p, .f-ancho .texto-lote li { break-inside: avoid; }
}

/* ---------- 27/9: botones de la tarjeta (ver video y comparar) ---------- */
.t-acciones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.t-accion { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.t-video { background: #c4302b; border: 1px solid #c4302b; color: #fff; }
.t-video:hover { background: #d9423c; border-color: #d9423c; }
.t-video span { width: 0; height: 0; border-left: 8px solid #fff; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.t-comparar { background: transparent; border: 1px solid var(--linea-osc, rgba(241, 208, 142, .3)); color: var(--texto-cl, #fff); margin: 0; width: auto; min-height: 40px; }
.t-comparar::before { content: '+'; font-size: 15px; line-height: 1; color: var(--oro); }
.t-comparar:hover { border-color: var(--oro); }
.t-comparar[aria-pressed="true"] { background: var(--oro-grad); border-color: transparent; color: var(--noche); }
.t-comparar[aria-pressed="true"]::before { content: '✓'; color: var(--noche); font-size: 12px; }
.grilla.lista .t-acciones { margin-left: 200px; margin-top: 8px; }
@media (max-width: 620px) { .grilla.lista .t-acciones { margin-left: 132px; } }
.grilla.lista .t-acciones .t-comparar { margin-left: 0; }

/* ==================================================================
   28/9, Domingo: comparar en el celular sin deslizar de costado.
   Compu: tabla. Pantalla chica: lectura vertical, una hembra debajo de la otra.
================================================================== */
.cm-movil { display: none; }
@media (max-width: 760px) {
  .cm-tabla { display: none; }
  .cm-movil { display: block; }
  .comparar { width: 100vw; max-height: 100dvh; }
  .comparar-in { max-height: 100dvh; }
  .comparar-tabla { padding: 12px 14px 20px; }
}
.cm-hembras { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.cm-h { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 3px solid var(--c); }
.cm-h:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
.cm-h img { width: 100%; aspect-ratio: 986 / 703; object-fit: cover; border-radius: 999px 999px 0 0 / 40px 40px 0 0; }
.cm-h span { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 13px; color: var(--berenjena); }
.cm-h small { font-size: 11.5px; line-height: 1.25; color: var(--gris); overflow-wrap: anywhere; }
.cm-punto { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.cm-bloque h3 { margin: 18px 0 6px; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--oro-osc); display: flex; align-items: center; gap: 10px; }
.cm-bloque h3::after { content: ''; flex: 1; height: 1px; background: var(--linea); }
.cm-dato { padding: 8px 0; border-bottom: 1px solid var(--linea); }
.cm-t { margin: 0 0 4px; font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--gris); }
.cm-t small { letter-spacing: .04em; text-transform: none; font-weight: 600; margin-left: 4px; }
.cm-fila { display: flex; align-items: center; gap: 8px; margin: 3px 0; font-size: 14px; }
.cm-fila b { display: inline-flex; align-items: center; gap: 6px; flex: none; min-width: 92px; font-size: 12.5px; color: var(--berenjena); }
.cm-fila > span:not(.cm-v):not(.cm-b):not(.cm-r) { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.cm-sin { color: var(--gris); font-style: italic; font-weight: 500 !important; }
.cm-dep { display: grid; grid-template-columns: 92px 52px minmax(0, 1fr) 40px; gap: 8px; }
.cm-v { text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }
.cm-b { height: 7px; border-radius: 999px; background: #eee4da; overflow: hidden; }
.cm-b i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #bda89a, var(--vino)); }
.cm-dep.top .cm-b i { background: var(--oro-grad); }
.cm-r { text-align: right; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; }
.cm-dep.top .cm-r { color: var(--oro-osc); }
.cm-h img { height: auto; }
.cm-hembras { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
@media (max-width: 760px) { .perfil-comp .rd-leyenda { display: none; } .perfil-comp { margin-bottom: 8px; padding-bottom: 8px; } .perfil-comp .radar { max-width: 230px; margin: 0 auto; } }