/* ==========================================================================
   yz.css — catálogo Yeguada Zavi (sistema portado de rivbel.css)
   Capas: 1 tokens · 2 base · 3 primitivas · 4 componentes · 5 secciones · 6 movimiento
   Componentes de Rivbel con prefijo yz- y paleta de la yeguada.
   ========================================================================== */

/* 1 · TOKENS ---------------------------------------------------------------- */
/* Color: cuero de la talabartería, arena del picadero y el oro de la marca (#AD8C27 del sitio actual). */
:root {
  --navy:        #2B2019;   /* cuero */
  --navy-deep:   #1C140F;   /* cuero hondo */
  --burgundy:    #8A6A1C;   /* oro para línea y foco sobre claro (4.6:1 sobre arena) */
  --oro:         #C9A54A;   /* oro sobre oscuro */
  --oro-marca:   #AD8C27;
  --beige:       #EFE9DD;   /* arena */
  --beige-warm:  #E3D9C6;   /* arena húmeda */
  --white:       #FFFFFF;
  --ink:         var(--navy);
  --ink-70:      rgba(43, 32, 25, .76);
  --ink-50:      rgba(43, 32, 25, .6);
  --rule:        rgba(43, 32, 25, .16);
  --rule-strong: rgba(43, 32, 25, .34);
  --on-dark:     #F3EEE4;
  --on-dark-70:  rgba(243, 238, 228, .78);

  /* Tipografía: IT Lunareth (la del sitio actual) solo para nombres y títulos; Inter para datos y UI. */
  --font-display: "IT Lunareth", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;
  --fs-xs:   .8125rem;
  --fs-sm:   .9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.328rem;
  --fs-lg:   1.66rem;
  --fs-xl:   clamp(2rem, 1.4rem + 2.4vw, 2.6rem);
  --fs-2xl:  clamp(2.6rem, 1.6rem + 4vw, 4.1rem);
  --fs-3xl:  clamp(3.4rem, 1.8rem + 7vw, 6.4rem);
  --fs-hero: clamp(3.6rem, 1.2rem + 11vw, 10rem);
  --track-label: .02em;

  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s5: 1.5rem;
  --s6: 2rem;   --s7: 3rem;  --s8: 4rem;   --s9: 6rem; --s10: 9rem;
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1440px;
  --measure: 34em;

  --ease-out:    cubic-bezier(.22, .8, .28, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-sheet:  cubic-bezier(.32, .72, 0, 1);
  --ease-menu:   cubic-bezier(.65, .01, .05, .99);
  --d1: 160ms; --d2: 280ms; --d3: 620ms; --d-img: 1200ms;

  --z-header: 40; --z-menu: 60; --z-sheet: 70; --z-toast: 80;
  --header-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* 2 · BASE ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* overflow-x en html con clip: NO en body (en body mata el sticky de las escenas) */
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--beige);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.04; letter-spacing: -.015em; text-wrap: balance; font-optical-sizing: auto; }
p { text-wrap: pretty; }
::selection { background: var(--navy); color: var(--on-dark); }
:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 3px; }
.yz-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yz-skip {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 100;
  padding: var(--s3) var(--s5); background: var(--navy); color: var(--on-dark);
  font-size: var(--fs-sm); text-decoration: none; transform: translateY(-200%);
  transition: transform var(--d2) var(--ease-out);
}
.yz-skip:focus { transform: none; }

/* 3 · PRIMITIVAS ------------------------------------------------------------ */
.yz-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.yz-label {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--track-label); color: var(--ink-70);
}
.yz-rule { height: 1px; background: var(--rule); border: 0; }
.yz-rule--accent { width: 40px; height: 1px; background: var(--burgundy); }
.yz-lead { font-size: var(--fs-md); line-height: 1.5; color: var(--ink-70); max-width: var(--measure); }
.yz-quote { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: var(--fs-xl); line-height: 1.2; letter-spacing: -.01em; }

/* Botones: mínimo 48px de alto (área táctil) */
.yz-btn {
  --btn-bg: var(--navy); --btn-fg: var(--on-dark);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  min-height: 48px; padding: 0 var(--s6);
  background: var(--btn-bg); color: var(--btn-fg);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .04em;
  text-decoration: none; border: 1px solid var(--btn-bg);
  transition: color var(--d2) var(--ease-out), border-color var(--d2) var(--ease-out), transform var(--d1) var(--ease-out);
}
.yz-btn:active { transform: scale(.98); }
.yz-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-strong); }
.yz-btn--light { --btn-bg: transparent; --btn-fg: var(--on-dark); border-color: rgba(243, 238, 228, .5); }
.yz-btn[disabled] { opacity: .45; cursor: not-allowed; }
/* «Elige tu talla» no está deshabilitado de verdad (lleva el foco a las tallas): se ve como contorno, legible */
.yz-btn[aria-disabled="true"] { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-strong); }
/* Botón «flow» (patrón AGN v5): un círculo burdeos crece desde el punto de entrada. Solo con ratón. */
.yz-btn__flow {
  position: absolute; z-index: -1; left: var(--fx, 50%); top: var(--fy, 50%);
  width: 0; height: 0; border-radius: 50%; background: var(--burgundy);
  transform: translate(-50%, -50%);
  transition: width 700ms var(--ease-out), height 700ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .yz-btn:hover .yz-btn__flow { width: 260%; height: 0; padding-bottom: 260%; }
  .yz-btn:hover { --btn-fg: var(--on-dark); border-color: var(--burgundy); color: var(--on-dark); }
}

.yz-link {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  text-decoration: none; font-weight: 500; font-size: var(--fs-sm); letter-spacing: .02em;
}
.yz-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px;
  background: currentColor; transform: scaleX(.35); transform-origin: left;
  transition: transform var(--d2) var(--ease-out);
}
@media (hover: hover) { .yz-link:hover::after { transform: scaleX(1); } }
.yz-link:focus-visible::after { transform: scaleX(1); }

/* 4 · COMPONENTES ----------------------------------------------------------- */

/* 4.1 Header — delgado; vidrio al hacer scroll (patrón SAN: blur + saturate) */
.yz-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  height: var(--header-h); color: var(--on-dark);
  transition: background-color var(--d2) var(--ease-out), color var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out);
}
.yz-header[data-tono="oscuro"], .yz-header.is-glass { color: var(--ink); }
.yz-header.is-glass {
  background: rgba(243, 238, 228, .8);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 1px 0 var(--rule);
}
.yz-header__row { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.yz-header__logo { display: inline-flex; align-items: center; min-height: 44px; }
.yz-header__logo img { height: 22px; width: auto; }
.yz-header__logo .is-claro { display: block; } .yz-header__logo .is-navy { display: none; }
.yz-header[data-tono="oscuro"] .is-claro, .yz-header.is-glass .is-claro { display: none; }
.yz-header[data-tono="oscuro"] .is-navy, .yz-header.is-glass .is-navy { display: block; }
.yz-header__right { display: flex; align-items: center; gap: var(--s2); }

/* 4.2 Idioma — dos botones, el activo subrayado */
.yz-lang { display: flex; align-items: center; }
.yz-lang a, .yz-lang button {
  display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; text-decoration: none;
  font-size: var(--fs-xs); font-weight: 500; letter-spacing: .12em;
  opacity: .62; transition: opacity var(--d1) var(--ease-out);
}
.yz-lang a[aria-current="true"], .yz-lang button[aria-current="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

/* 4.3 Botón Menú/Cerrar (menú cinético): el texto sube y el icono gira 315° */
.yz-menu-btn {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: 44px; padding: 0 var(--s2) 0 var(--s3);
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: .04em; color: inherit;
  position: relative; z-index: calc(var(--z-menu) + 1);
}
.yz-menu-btn__text { height: 1.4em; overflow: hidden; line-height: 1.4; }
.yz-menu-btn__text span { display: block; }
.yz-menu-btn__icon { width: 16px; height: 16px; }
.yz-menu-open .yz-menu-btn { color: var(--ink); }
/* Con el menú abierto el header sube por encima (si no, su botón Cerrar queda debajo: el header fijo
   crea su propio contexto de apilado y el z-index del botón no lo saca de ahí) */
.yz-menu-open .yz-header {
  z-index: calc(var(--z-menu) + 1); background: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--ink);
}
.yz-menu-open .yz-header .is-claro { display: none; }
.yz-menu-open .yz-header .is-navy { display: block; }
@media (min-width: 45rem) { /* el panel no cubre el logo: el logo queda sobre el velo oscuro */
  .yz-menu-open .yz-header .is-claro { display: block; }
  .yz-menu-open .yz-header .is-navy { display: none; }
}

/* 4.4 Menú cinético a pantalla completa (portado de «Sterling Gate», vanilla) */
.yz-nav { position: fixed; inset: 0; z-index: var(--z-menu); display: none; }
.yz-nav[data-nav="open"] { display: block; }
.yz-nav__overlay { position: absolute; inset: 0; background: rgba(28, 20, 15, .45); }
.yz-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 44rem);
  display: flex; flex-direction: column; overflow: hidden;
}
.yz-nav__bg { position: absolute; inset: 0; }
.yz-nav__layer { position: absolute; inset: 0; }
.yz-nav__layer--1 { background: var(--navy); }
.yz-nav__layer--2 { background: var(--navy-deep); }
.yz-nav__layer--3 { background: var(--beige); }
.yz-nav__shapes { position: absolute; inset: 0; pointer-events: none; }
.yz-shape { position: absolute; right: -6%; bottom: -4%; width: 78%; opacity: 0; visibility: hidden; }
.yz-shape.is-active { opacity: 1; visibility: visible; }
.yz-shape * { transform-box: fill-box; transform-origin: center; }
.yz-nav__content {
  position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--header-h) + var(--s6)) var(--gutter) var(--s7);
}
.yz-nav__list { list-style: none; padding: 0; display: grid; gap: var(--s2); }
.yz-nav__item { overflow: hidden; }
.yz-nav__link {
  position: relative; display: flex; align-items: baseline; gap: var(--s4);
  padding: var(--s2) 0; text-decoration: none; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.4rem, 1.6rem + 4vw, 4.4rem);
  line-height: 1.05; letter-spacing: -.02em;
}
.yz-nav__link small { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .12em; color: var(--ink-70); }
.yz-nav__link-text { position: relative; }
.yz-nav__link-text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: 2px; background: var(--burgundy);
  transform: scaleX(0); transform-origin: right; transition: transform 500ms var(--ease-menu);
}
@media (hover: hover) { .yz-nav__link:hover .yz-nav__link-text::after { transform: scaleX(1); transform-origin: left; } }
.yz-nav__link[aria-current="page"] .yz-nav__link-text::after { transform: scaleX(1); }
.yz-nav__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); color: var(--ink-70); font-size: var(--fs-sm); }
.yz-nav__foot .yz-lang { color: var(--ink); }

/* 4.5 Tarjeta de producto 3D (card-7 portada a vanilla; inclinación en rivbel.js · initTilt).
   La foto viaja al PDP (view-transition-name por producto). Sin overflow en .yz-card: lo aplanaría. */
.yz-card {
  --card-r: 18px;
  position: relative; display: block; aspect-ratio: 3 / 4; text-decoration: none; color: var(--on-dark);
  border-radius: var(--card-r); transform-style: preserve-3d; will-change: transform;
  box-shadow: 0 10px 30px -12px rgba(28, 20, 15, .35);
}
.yz-card__media, .yz-card__veil { position: absolute; inset: 0; border-radius: var(--card-r); overflow: hidden; }
.yz-card__media { background: var(--beige-warm); }
.yz-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: opacity var(--d3) var(--ease-out), transform var(--d-img) var(--ease-out); }
.yz-card__media .is-alt { opacity: 0; }
.yz-card__veil { background: linear-gradient(180deg, rgba(28, 20, 15, .55) 0%, rgba(28, 20, 15, .12) 38%, rgba(28, 20, 15, 0) 58%, rgba(28, 20, 15, .45) 100%); pointer-events: none; }
.yz-card__body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s2); padding: clamp(var(--s2), 1.6vw, var(--s4)); transform: translateZ(40px); pointer-events: none; }
.yz-card__head {
  align-self: stretch; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: clamp(var(--s2), 1.2vw, var(--s4)); border-radius: calc(var(--card-r) - 6px);
  border: 1px solid rgba(243, 238, 228, .16); background: rgba(28, 20, 15, .34);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
}
.yz-card__name { font-family: var(--font-display); font-weight: 600; font-size: clamp(.98rem, .85rem + .5vw, var(--fs-md)); line-height: 1.12; color: var(--on-dark); }
.yz-card__type { margin-top: .2em; font-size: var(--fs-xs); letter-spacing: .02em; color: var(--on-dark); opacity: .9; }
.yz-card__logo { flex: none; width: clamp(18px, 1.8vw, 26px); height: auto; margin-top: 2px; }
.yz-card__price {
  padding: .35em .9em; border-radius: 999px; background: rgba(28, 20, 15, .55); color: var(--on-dark);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.yz-card__dots { margin-top: auto; align-self: center; display: flex; gap: 6px; padding-bottom: var(--s1); }
.yz-card__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(243, 238, 228, .4); transition: background-color var(--d2) var(--ease-out); }
.yz-card__dots i:first-child { background: var(--on-dark); }
@media (hover: hover) and (pointer: fine) {
  .yz-card:hover .yz-card__media .is-alt { opacity: 1; }
  .yz-card:hover .yz-card__media img { transform: scale(1.1); }
  .yz-card:hover .yz-card__dots i:first-child { background: rgba(243, 238, 228, .4); }
  .yz-card:hover .yz-card__dots i:last-child { background: var(--on-dark); }
}
@media (hover: none) { .yz-card__dots { display: none; } }
.yz-card:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
@media (max-width: 520px) { .yz-card { --card-r: 12px; } .yz-card__logo { display: none; } }

/* 4.6 Control segmentado con pastilla que se desliza */
.yz-seg { position: relative; display: inline-flex; padding: 3px; border: 1px solid var(--rule-strong); }
.yz-seg__pill {
  position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; background: var(--navy);
  transform: translateX(var(--x, 0)); width: var(--w, 0);
  transition: transform var(--d2) var(--ease-out), width var(--d2) var(--ease-out);
  visibility: hidden;
}
.yz-seg.medido .yz-seg__pill { visibility: visible; }
.yz-seg button {
  position: relative; z-index: 1; min-height: 44px; min-width: 52px; padding: 0 var(--s4);
  font-size: var(--fs-sm); font-weight: 500; transition: color var(--d2) var(--ease-out);
}
.yz-seg button[aria-pressed="true"], .yz-seg button[aria-selected="true"] { color: var(--on-dark); }
.yz-seg button:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }

/* 4.8 Hoja inferior (bottom sheet, patrón SAN): curva-hoja 480ms; el velo con visibility retrasado */
.yz-sheet { position: fixed; inset: 0; z-index: var(--z-sheet); visibility: hidden; transition: visibility 0s linear 480ms; }
.yz-sheet.is-open { visibility: visible; transition-delay: 0s; }
.yz-sheet__veil { position: absolute; inset: 0; background: rgba(28, 20, 15, .42); opacity: 0; transition: opacity var(--d2) var(--ease-out); }
.yz-sheet.is-open .yz-sheet__veil { opacity: 1; }
.yz-sheet__panel {
  position: absolute; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow: auto; overscroll-behavior: contain;
  background: var(--beige); padding: var(--s3) var(--gutter) calc(var(--s6) + var(--safe-b));
  transform: translateY(105%); transition: transform 480ms var(--ease-sheet);
}
.yz-sheet.is-open .yz-sheet__panel { transform: none; }
.yz-sheet__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--rule-strong); margin: 0 auto var(--s4); }
.yz-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s5); }
.yz-sheet__head h2 { font-size: var(--fs-lg); }
.yz-close { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
.yz-close svg { width: 18px; height: 18px; }
/* En escritorio la hoja entra por la derecha (patrón MESA: lateral → inferior en móvil) */
@media (min-width: 900px) {
  .yz-sheet__panel { left: auto; top: 0; width: min(34rem, 92vw); max-height: none; padding: var(--s6) var(--s7); transform: translateX(105%); }
  .yz-sheet__grip { display: none; }
}

/* 4.10 Detalle plegable (<details> con grid-template-rows, patrón AGN v5) */
.yz-acc { border-top: 1px solid var(--rule); }
.yz-acc:last-child { border-bottom: 1px solid var(--rule); }
.yz-acc summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  min-height: 56px; cursor: pointer; font-weight: 500;
}
.yz-acc summary::-webkit-details-marker { display: none; }
.yz-acc summary svg { width: 14px; height: 14px; transition: transform var(--d2) var(--ease-out); }
.yz-acc[open] summary svg { transform: rotate(45deg); }
.yz-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d2) var(--ease-out); }
.yz-acc[open] .yz-acc__body { grid-template-rows: 1fr; }
.yz-acc__inner { overflow: hidden; }
.yz-acc__inner > * { padding-bottom: var(--s5); color: var(--ink-70); }

/* 4.13 Galería del PDP — cambio de vista con dirección (patrón MESA) */
.yz-gallery { position: relative; }
.yz-gallery__stage { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--beige-warm); }
.yz-gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.yz-gallery__nav { position: absolute; inset: auto var(--s3) var(--s3) auto; display: flex; gap: var(--s1); }
.yz-gallery__nav button {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(243, 238, 228, .88); color: var(--ink);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.yz-gallery__nav svg { width: 16px; height: 16px; }
.yz-gallery__count {
  position: absolute; left: var(--s3); bottom: var(--s3); padding: var(--s1) var(--s3);
  background: rgba(243, 238, 228, .88); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
}
.yz-thumbs {
  display: flex; gap: var(--s2); margin-top: var(--s2); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 2px;
}
.yz-thumbs::-webkit-scrollbar { display: none; }
.yz-thumbs button { flex: 0 0 72px; aspect-ratio: 3 / 4; scroll-snap-align: start; opacity: .62; outline-offset: -2px; transition: opacity var(--d1) var(--ease-out); }
.yz-thumbs button[aria-current="true"] { opacity: 1; box-shadow: inset 0 0 0 1px var(--navy), 0 0 0 1px var(--navy); }
.yz-thumbs img { width: 100%; height: 100%; object-fit: cover; }

/* 5 · SECCIONES ------------------------------------------------------------- */
.yz-section { padding-block: clamp(var(--s8), 10vw, var(--s10)); }
.yz-section--warm { background: var(--beige-warm); }
.yz-section--dark { background: var(--navy-deep); color: var(--on-dark); }
.yz-section__head { display: grid; gap: var(--s4); margin-bottom: clamp(var(--s6), 6vw, var(--s8)); }
.yz-section__head h2, h2.yz-section__head { font-size: var(--fs-2xl); }
@media (min-width: 900px) {
  .yz-section__head--split { grid-template-columns: 1fr 1fr; align-items: end; gap: var(--s7); }
}

/* 5.1 Parallax (portado de Osmo, vanilla): 3 capas, yPercent 70/55/40 */
.yz-parallax { position: relative; background: var(--navy-deep); color: var(--on-dark); }
.yz-parallax__header { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.yz-parallax__visuals { position: absolute; inset: 0; }
.yz-parallax__layers { position: absolute; inset: 0; overflow: hidden; }
.yz-parallax__layer { position: absolute; will-change: transform; }
.yz-parallax__layer--foto { inset: -2% 0 auto 0; height: 118%; width: 100%; object-fit: cover; object-position: 50% 30%; }
.yz-parallax__veil { position: absolute; inset: 0; background:
  radial-gradient(ellipse 60% 42% at 50% 46%, rgba(28, 20, 15, .5), transparent 72%),
  linear-gradient(180deg, rgba(28, 20, 15, .5) 0%, rgba(28, 20, 15, .34) 45%, rgba(28, 20, 15, .6) 100%); }
.yz-parallax__layer--escudo { left: 50%; top: 13%; width: clamp(68px, 9vw, 120px); margin-left: calc(clamp(68px, 9vw, 120px) / -2); opacity: .95; }
.yz-parallax__layer--titulo { inset: 0; display: grid; place-content: center; text-align: center; padding-inline: var(--gutter); }
.yz-parallax__title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-hero); line-height: .88;
  letter-spacing: -.035em; color: var(--on-dark);
}
.yz-parallax__title em { display: block; font-style: italic; font-weight: 400; }
.yz-parallax__sub { margin-top: var(--s5); font-size: var(--fs-sm); letter-spacing: .06em; color: var(--on-dark); text-shadow: 0 1px 12px rgba(28, 20, 15, .6); }
.yz-parallax__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, var(--navy-deep)); pointer-events: none; }
.yz-parallax__cta { position: absolute; left: 0; right: 0; bottom: max(var(--s6), calc(var(--s5) + var(--safe-b))); display: flex; justify-content: center; z-index: 2; }
.yz-parallax__content { display: grid; justify-items: center; gap: var(--s6); text-align: center; padding: var(--s8) var(--gutter) var(--s9); }
.yz-parallax__content img { width: clamp(72px, 10vw, 112px); }
.yz-parallax__content p { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.2; max-width: 22em; color: var(--on-dark); }
@media (max-width: 640px) {
  .yz-parallax__layer--escudo { top: 15%; }
}

/* 5.2 Placa técnica — spec plate, no párrafo */
.yz-plate { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); border-top: 1px solid var(--rule-strong); }
.yz-plate__item { padding: var(--s5) var(--s5) var(--s6) 0; border-bottom: 1px solid var(--rule); display: grid; gap: var(--s2); align-content: start; }
.yz-plate__item dt { font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--track-label); color: var(--ink-70); }
.yz-plate__item dd { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.25; }
@media (min-width: 900px) { .yz-plate__item { padding-right: var(--s6); } .yz-plate__item + .yz-plate__item { border-left: 1px solid var(--rule); padding-left: var(--s5); } .yz-plate { grid-template-columns: repeat(3, 1fr); } .yz-plate__item:nth-child(3n + 1) { border-left: 0; padding-left: 0; } }

/* 5.3 Rejilla de colección */
.yz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s4); }
@media (min-width: 1000px) { .yz-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s5); } .yz-grid--feature .yz-card:first-child { grid-column: span 2; grid-row: span 2; } .yz-grid--feature .yz-card:first-child { aspect-ratio: auto; } }

/* 5.3b Abanico (card-fan portado; rivbel.js · initFan). Sin JS queda la tira de arriba.
   El recorte lateral va en la sección, nunca en body (mataría el sticky). */
.yz-section--looks { overflow-x: clip; }
.yz-looks.is-fan {
  --fan-w: 8.5rem;
  position: relative; display: block; overflow: visible; padding: 0;
  height: min(22rem, 70vh); margin-top: calc(var(--s6) * -1);
}
.yz-looks.is-fan figure {
  /* centrado con márgenes: GSAP escribe transform y borraría un translate */
  position: absolute; left: 50%; top: 44%; width: var(--fan-w); margin: calc(var(--fan-w) * -.625) 0 0 calc(var(--fan-w) / -2);
  will-change: transform;
}
.yz-looks.is-fan a { display: block; border-radius: 16px; overflow: hidden; background: var(--beige-warm); box-shadow: 0 18px 40px -18px rgba(28, 20, 15, .55); }
.yz-looks.is-fan img { display: block; }
.yz-looks.is-fan a:focus-visible { outline: 2px solid var(--burgundy); outline-offset: 4px; }
.yz-looks.is-fan figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.yz-fan__caption { min-height: 1.5em; margin-top: var(--s5); text-align: center; font-size: var(--fs-sm); color: var(--ink-70); }
.yz-fan__nav { display: flex; align-items: center; justify-content: center; gap: var(--s4); margin-top: var(--s4); }
.yz-fan__arrow { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rule-strong); color: var(--ink); transition: border-color var(--d2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .yz-fan__arrow:hover { border-color: var(--navy); } }
.yz-fan__dots { display: flex; gap: var(--s2); }
.yz-fan__dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-strong); transition: background-color var(--d2) var(--ease-out), transform var(--d2) var(--ease-out); }
.yz-fan__dots span.is-on { background: var(--navy); transform: scale(1.3); }
@media (min-width: 480px) { .yz-looks.is-fan { --fan-w: 10rem; height: min(26rem, 70vh); } }
@media (min-width: 640px) { .yz-looks.is-fan { --fan-w: 11rem; height: min(28rem, 70vh); } }
@media (min-width: 768px) { .yz-looks.is-fan { --fan-w: 13.5rem; height: min(34rem, 70vh); } }
@media (min-width: 1024px) { .yz-looks.is-fan { --fan-w: 16rem; height: min(38rem, 70vh); } }

/* 5.8 Pie */
.yz-footer { background: var(--navy-deep); color: var(--on-dark); padding: var(--s8) 0 calc(var(--s6) + var(--safe-b)); }
.yz-footer__top { display: grid; gap: var(--s7); }
.yz-footer__brand img { width: 168px; }
.yz-footer__brand p { margin-top: var(--s4); color: var(--on-dark-70); font-family: var(--font-display); font-style: italic; font-size: var(--fs-md); }
.yz-footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s6); }
.yz-footer h2 { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 500; letter-spacing: var(--track-label); color: var(--on-dark-70); margin-bottom: var(--s3); }
.yz-footer ul { list-style: none; padding: 0; }
.yz-footer a { display: inline-flex; min-height: 44px; min-width: 44px; align-items: center; text-decoration: none; }
@media (hover: hover) { .yz-footer a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.yz-footer__bottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid rgba(243, 238, 228, .16); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s4); font-size: var(--fs-xs); color: var(--on-dark-70); }
@media (min-width: 900px) { .yz-footer__top { grid-template-columns: 2fr 1fr; } }

/* 5.9 Cabecera de página interior (sin foto: el header va en tono oscuro) */
.yz-pagehead { padding: calc(var(--header-h) + clamp(var(--s7), 9vw, var(--s10))) 0 clamp(var(--s6), 6vw, var(--s8)); }
.yz-pagehead h1 { font-size: var(--fs-3xl); }
.yz-pagehead h1 em { font-style: italic; font-weight: 400; }
.yz-pagehead .yz-lead { margin-top: var(--s5); }
.yz-pagehead--foto { position: relative; min-height: 78svh; display: flex; align-items: flex-end; color: var(--on-dark); padding-bottom: var(--s8); }
.yz-pagehead--foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.yz-pagehead--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 20, 15, .3), rgba(28, 20, 15, .1) 40%, rgba(28, 20, 15, .7)); }
.yz-pagehead--foto { isolation: isolate; }
.yz-pagehead--foto .yz-lead { color: var(--on-dark-70); }

/* 6 · MOVIMIENTO ------------------------------------------------------------ */
/* Transición entre páginas (cross-document View Transitions). Sin soporte = corte seco. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 420ms; animation-timing-function: var(--ease-in-out); }
::view-transition-group(*) { animation-duration: 520ms; animation-timing-function: var(--ease-out); }
.yz-header { view-transition-name: yz-header; }

/* Revelado: UN solo momento por sección (no en cada tarjeta). Lo activa rivbel.js. */
.yz-js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity var(--d3) var(--ease-out), transform var(--d3) var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms); }
.yz-js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .yz-js [data-reveal] { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

@media print {
  .yz-header, .yz-nav, .yz-sheet, .yz-toast, .yz-parallax__cta { display: none !important; }
  .yz-parallax__header { height: auto; min-height: 0; }
  .yz-parallax__layers { position: relative; }
  .yz-parallax__layer { position: relative; transform: none !important; }
}

/* 7 · CATÁLOGO ---------------------------------------------------------------
   Lo propio de la yeguada. Una sola cosa memorable: la cuadra de retratos verticales
   (los videos del sitio son 9:16) con el nombre en Lunareth. Todo lo demás, callado. */
h1, h2, h3 { font-weight: 400; letter-spacing: 0; }
.yz-validar { text-decoration: underline wavy rgba(138, 106, 28, .7); text-underline-offset: 4px; }

/* Hero con el video de cabecera del sitio */
.yz-parallax__layer--foto { object-position: 50% 50%; }
.yz-parallax__layer--escudo { width: clamp(120px, 16vw, 220px); margin-left: calc(clamp(120px, 16vw, 220px) / -2); top: 12%; }
.yz-parallax__title { font-weight: 400; line-height: .92; letter-spacing: -.01em; }
.yz-parallax__title em { font-size: .42em; margin-top: .35em; color: var(--oro); }

/* Barra de filtros: se queda pegada bajo el header */
.yz-filtros {
  position: sticky; top: var(--header-h); z-index: 20;
  background: rgba(239, 233, 221, .9); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 1px 0 var(--rule);
}
.yz-filtros__fila { display: flex; align-items: center; gap: var(--s4) var(--s6); padding-block: var(--s3); overflow-x: auto; scrollbar-width: none; }
.yz-filtros__fila::-webkit-scrollbar { display: none; }
.yz-filtros__grupo { display: flex; align-items: center; gap: var(--s2); flex: none; }
.yz-filtros__grupo > span { font-size: var(--fs-xs); color: var(--ink-70); margin-right: var(--s1); }
.yz-filtros__cuenta { margin-left: auto; flex: none; font-size: var(--fs-sm); color: var(--ink-70); font-variant-numeric: tabular-nums; white-space: nowrap; }
.yz-seg { border-radius: 999px; }
.yz-seg__pill { border-radius: 999px; }
.yz-seg button { border-radius: 999px; white-space: nowrap; }

/* Chip (patrón de la Mesa ejecutiva: pastilla con borde, el activo se rellena) */
.yz-chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s4); border-radius: 999px;
  border: 1px solid var(--rule-strong); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
  transition: background-color var(--d1) var(--ease-out), color var(--d1) var(--ease-out), border-color var(--d1) var(--ease-out), transform var(--d1) var(--ease-out);
}
.yz-chip:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .yz-chip:hover { border-color: var(--navy); } }
.yz-chip[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.yz-chip i { width: 10px; height: 10px; border-radius: 50%; margin-right: var(--s2); background: var(--c, transparent); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }

/* La cuadra: rejilla de retratos verticales */
.yz-cuadra { padding-block: var(--s6) var(--s9); }
.yz-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s4) var(--s3); list-style: none; padding: 0; }
.yz-grid > li[hidden] { display: none; }
@media (min-width: 700px) { .yz-grid { grid-template-columns: repeat(3, 1fr); gap: var(--s5) var(--s4); } }
@media (min-width: 1100px) { .yz-grid { grid-template-columns: repeat(4, 1fr); gap: var(--s6) var(--s5); } }
.yz-card { aspect-ratio: 9 / 16; }
.yz-card__media img { object-position: 50% 30%; }
.yz-card__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--d3) var(--ease-out); }
.yz-card.is-video .yz-card__video { opacity: 1; }
.yz-card__name { font-size: clamp(1.15rem, .9rem + .9vw, 1.6rem); font-weight: 400; line-height: 1.05; }
.yz-card__type { font-size: var(--fs-xs); }
.yz-card__foot { margin-top: auto; align-self: stretch; display: flex; justify-content: space-between; align-items: center; gap: var(--s2); }
.yz-card__price { font-weight: 500; }
.yz-card__play { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--on-dark); opacity: .9; }
.yz-card__play svg { width: 12px; height: 12px; }
@media (hover: none) { .yz-card__play { display: none; } }
.yz-vacio { display: grid; justify-items: start; gap: var(--s4); padding: var(--s8) 0; }
.yz-vacio[hidden] { display: none; }
.yz-vacio p { font-family: var(--font-display); font-size: var(--fs-xl); }

/* Ficha */
.yz-ficha { padding-top: var(--header-h); }
.yz-ficha__cabecera { position: relative; background: var(--navy-deep); }
.yz-ficha__cabecera img { width: 100%; height: auto; aspect-ratio: 1920 / 700; object-fit: cover; }
.yz-ficha__grid { display: grid; gap: var(--s7); padding-block: var(--s7) var(--s8); }
.yz-ficha__grid > * { min-width: 0; }
.yz-ficha__video { position: relative; aspect-ratio: 9 / 16; max-height: 82svh; margin-inline: auto; border-radius: 18px; overflow: hidden; background: var(--navy-deep); box-shadow: 0 30px 60px -30px rgba(28, 20, 15, .6); }
.yz-ficha__video video { width: 100%; height: 100%; object-fit: cover; }
.yz-ficha__info { display: grid; gap: var(--s6); align-content: start; }
.yz-ficha__nombre { font-size: var(--fs-3xl); line-height: .95; }
.yz-ficha__sub { margin-top: var(--s3); font-size: var(--fs-md); color: var(--ink-70); }
.yz-plate__item dd { font-family: var(--font-body); font-size: var(--fs-md); font-weight: 500; }
.yz-plate__item dd small { display: block; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-70); }
.yz-plate__item dd.is-codigo { font-variant-numeric: tabular-nums; letter-spacing: .02em; overflow-wrap: anywhere; }
.yz-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); }
@media (min-width: 960px) {
  .yz-ficha__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s9); align-items: start; }
  .yz-ficha__media { position: sticky; top: calc(var(--header-h) + var(--s5)); }
  .yz-plate { grid-template-columns: repeat(2, 1fr); }
  .yz-plate__item:nth-child(3n + 1) { border-left: 1px solid var(--rule); padding-left: var(--s5); }
  .yz-plate__item:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
}
.yz-bloque { padding-block: clamp(var(--s7), 8vw, var(--s9)); border-top: 1px solid var(--rule); }
.yz-bloque__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); }
.yz-bloque__head h2 { font-size: var(--fs-2xl); }
.yz-section--looks { overflow-x: clip; }
.yz-looks.is-fan figure { --r: 9 / 16; }
.yz-looks.is-fan img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.yz-looks:not(.is-fan) { display: flex; gap: var(--s3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.yz-looks:not(.is-fan) figure { flex: 0 0 min(64vw, 280px); scroll-snap-align: start; }
.yz-looks:not(.is-fan) img { aspect-ratio: 3 / 4; object-fit: cover; }
.yz-pedigri { display: block; width: 100%; background: var(--white); padding: clamp(var(--s3), 2vw, var(--s5)); border: 1px solid var(--rule); border-radius: 12px; cursor: zoom-in; }
.yz-pedigri img { width: 100%; height: auto; }
.yz-pedigri figcaption { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-70); }
.yz-vecinos { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.yz-vecino { display: grid; gap: var(--s1); padding: var(--s6) 0; text-decoration: none; min-height: 44px; }
.yz-vecino + .yz-vecino { text-align: right; border-left: 1px solid var(--rule); padding-left: var(--s4); }
.yz-vecino small { font-size: var(--fs-xs); color: var(--ink-70); }
.yz-vecino b { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); line-height: 1.05; }
@media (hover: hover) { .yz-vecino:hover b { color: var(--burgundy); } }

/* Visor a pantalla completa (fotos y pedigrí) */
.yz-sheet--visor .yz-sheet__panel {
  inset: 0; top: 0; width: auto; max-height: none; height: 100%; padding: 0; background: rgba(20, 14, 10, .97); color: var(--on-dark);
  transform: translateY(4%); opacity: 0; transition: transform 420ms var(--ease-sheet), opacity var(--d2) var(--ease-out);
  display: grid; grid-template-rows: auto 1fr auto;
}
.yz-sheet--visor.is-open .yz-sheet__panel { transform: none; opacity: 1; }
@media (min-width: 900px) { .yz-sheet--visor .yz-sheet__panel { left: 0; width: auto; padding: 0; transform: translateY(4%); } }
.yz-visor__bar { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) var(--gutter); }
.yz-visor__count { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--on-dark-70); }
.yz-visor__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 var(--s2); }
.yz-visor__img { max-width: 100%; max-height: 100%; object-fit: contain; touch-action: pan-y; user-select: none; }
.yz-sheet--visor.is-ancho .yz-visor__img { background: var(--white); }
.yz-visor__nav { display: flex; justify-content: center; gap: var(--s3); padding: var(--s3) var(--gutter) calc(var(--s4) + var(--safe-b)); }
.yz-visor__nav button { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(243, 238, 228, .35); }
.yz-visor__nav button:disabled { opacity: .3; cursor: default; }
.yz-visor__nav svg { width: 20px; height: 20px; }
.yz-sheet--visor .yz-close { color: var(--on-dark); }

/* Potras lactantes */
.yz-potras { display: grid; gap: var(--s6); justify-items: center; text-align: center; }
.yz-potras video { width: min(100%, 980px); border-radius: 18px; background: var(--navy-deep); }

/* Header de la yeguada: escudo + nombre en Lunareth */
.yz-header__logo { gap: var(--s3); text-decoration: none; }
.yz-header__logo img { height: 34px; width: auto; }
.yz-header__marca { font-family: var(--font-display); font-size: 1.35rem; line-height: 1; }
@media (max-width: 380px) { .yz-header__marca { display: none; } }
.yz-lang button { min-width: 40px; }
.yz-crumbs { font-size: var(--fs-sm); color: var(--ink-70); padding-top: var(--s4); }
.yz-crumbs a { text-decoration: none; display: inline-flex; min-height: 44px; align-items: center; }
@media (hover: hover) { .yz-crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; } }
.yz-footer__marca { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; }
.yz-footer__brand p + p { font-family: var(--font-body); font-style: normal; font-size: var(--fs-sm); }
.yz-pagehead h1 { font-weight: 400; }

/* Ajustes tras la primera revisión visual (2026-10-29) */
/* El video de cabecera ya es el escudo animado: el título va abajo, no encima del escudo */
.yz-parallax__layer--titulo { place-content: end center; padding-bottom: calc(var(--s9) + 2rem); }
.yz-parallax__veil { background: linear-gradient(180deg, rgba(28, 20, 15, .35) 0%, rgba(28, 20, 15, .1) 40%, rgba(28, 20, 15, .75) 100%); }
.yz-header__marca { white-space: nowrap; }
@media (max-width: 479px) { .yz-header__marca { display: none; } }
.yz-lang button { min-width: 44px; }
@media (min-width: 1100px) {
  .yz-filtros__fila { flex-wrap: wrap; overflow: visible; row-gap: var(--s2); }
}
/* Ficha: en teléfono el nombre va antes del video; en escritorio, video a la izquierda */
.yz-ficha__grid { grid-template-areas: "titulo" "media" "info"; }
.yz-ficha__titulo { grid-area: titulo; }
.yz-ficha__media { grid-area: media; }
.yz-ficha__info { grid-area: info; }
@media (min-width: 960px) {
  .yz-ficha__grid { grid-template-areas: "media titulo" "media info"; grid-template-rows: auto 1fr; row-gap: var(--s6); }
}
@media (max-width: 699px) { .yz-ficha__cabecera img { aspect-ratio: 16 / 9; } }
.yz-header__logo { min-width: 44px; }
/* Contraste medido (contraste.py): el oro claro sobre el video y el «Video» de la tarjeta no llegaban */
.yz-parallax__title em { color: #E6CD86; text-shadow: 0 1px 16px rgba(28, 20, 15, .7); }
.yz-parallax__veil { background: linear-gradient(180deg, rgba(28, 20, 15, .35) 0%, rgba(28, 20, 15, .1) 35%, rgba(28, 20, 15, .82) 82%, rgba(28, 20, 15, .9) 100%); }
.yz-card__veil { background: linear-gradient(180deg, rgba(28, 20, 15, .5) 0%, rgba(28, 20, 15, .1) 38%, rgba(28, 20, 15, 0) 58%, rgba(28, 20, 15, .7) 100%); }
.yz-card__play { opacity: 1; text-shadow: 0 1px 6px rgba(28, 20, 15, .8); }

/* Filtros sencillos (Eduardo 10-29): barra con sexo + «Filtrar»; capa y año en un panel que se despliega */
.yz-filtros__fila { flex-wrap: nowrap; overflow: visible; justify-content: flex-start; gap: var(--s4); }
@media (min-width: 1100px) { .yz-filtros__fila { flex-wrap: nowrap; } }
.yz-filtros__cuenta { margin-left: auto; }
@media (max-width: 599px) { .yz-filtros__cuenta { display: none; } .yz-filtrar { margin-left: auto; } }
.yz-filtrar {
  flex: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4) 0 var(--s3);
  border: 1px solid var(--rule-strong); border-radius: 999px; font-size: var(--fs-sm); font-weight: 500;
  transition: background-color var(--d2) var(--ease-out), color var(--d2) var(--ease-out), border-color var(--d2) var(--ease-out), transform var(--d1) var(--ease-out);
}
.yz-filtrar svg { width: 18px; height: 18px; }
.yz-filtrar:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .yz-filtrar:hover { border-color: var(--navy); } }
.yz-filtrar[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: var(--on-dark); }
.yz-filtrar__n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  background: var(--burgundy); color: var(--white); font-size: .75rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.yz-filtrar__n[hidden] { display: none; }

.yz-filtros__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 480ms var(--ease-sheet); }
.yz-filtros__panel.is-open { grid-template-rows: 1fr; }
.yz-filtros__plegable { min-height: 0; overflow: hidden; }
.yz-filtros__cuerpo {
  display: grid; gap: var(--s6); padding-block: var(--s5) var(--s6);
  max-height: calc(100svh - var(--header-h) - 72px); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); transition: opacity var(--d2) var(--ease-out), transform var(--d3) var(--ease-out);
}
.yz-filtros__panel.is-open .yz-filtros__cuerpo { opacity: 1; transform: none; transition-delay: 120ms; }
.yz-filtros__panel.is-open { box-shadow: 0 1px 0 var(--rule); }
.yz-filtros .yz-filtros__grupo { display: block; flex: initial; border: 0; padding: 0; margin: 0; min-width: 0; }
.yz-filtros__grupo legend { padding: 0; margin-bottom: var(--s3); font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.1; }
.yz-filtros__opciones { display: flex; flex-wrap: wrap; gap: var(--s2); }
.yz-filtros__pie { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule); }
@media (min-width: 800px) {
  .yz-filtros__cuerpo { grid-template-columns: 1fr 1fr; column-gap: var(--s8); }
  .yz-filtros__pie { grid-column: 1 / -1; }
}
/* Teléfono: la barra entra en 390 px (sexo compacto; «Filtrar» queda como ícono por debajo de 430 px) */
@media (max-width: 599px) {
  .yz-filtros .yz-seg button { min-width: 0; padding: 0 var(--s3); }
}
@media (max-width: 429px) {
  .yz-filtrar { width: 44px; padding: 0; justify-content: center; position: relative; }
  .yz-filtrar__t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .yz-filtrar__n { position: absolute; top: -4px; right: -4px; }
}

/* Tono Claro / Negro (Eduardo 10-29): dos muestras junto al idioma */
.yz-tema { display: flex; align-items: center; }
.yz-tema button { width: 36px; min-height: 44px; display: grid; place-items: center; }
.yz-tema__punto { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 1px currentColor; transition: box-shadow var(--d2) var(--ease-out), transform var(--d1) var(--ease-out); }
.yz-tema__punto.is-claro { background: #EFE9DD; }
.yz-tema__punto.is-negro { background: #0B0B0B; }
.yz-tema button[aria-pressed="true"] .yz-tema__punto { box-shadow: 0 0 0 1px currentColor, 0 0 0 4px rgba(173, 140, 39, .55); }
.yz-tema button:active .yz-tema__punto { transform: scale(.9); }
.yz-header__right { gap: var(--s1); }
@media (max-width: 379px) { .yz-tema button { width: 32px; } }

/* Tono NEGRO, como el sitio original: negro, crema y el oro de la marca (#AD8C27) */
:root[data-tema="negro"] {
  --beige:       #0B0B0B;
  --beige-warm:  #171513;
  --navy:        #E9E1D0;   /* lo que en claro es «cuero» (texto y rellenos) aquí es crema */
  --ink:         #EDE6D8;
  --ink-70:      rgba(237, 230, 216, .74);
  --ink-50:      rgba(237, 230, 216, .58);
  --rule:        rgba(237, 230, 216, .14);
  --rule-strong: rgba(237, 230, 216, .3);
  --burgundy:    #C9A54A;
  --navy-deep:   #000000;
  color-scheme: dark;
}
:root[data-tema="negro"] body { background: var(--beige); color: var(--ink); }
/* rellenos: en negro los controles activos van en oro con texto negro */
:root[data-tema="negro"] .yz-btn { --btn-bg: #AD8C27; --btn-fg: #0B0B0B; }
:root[data-tema="negro"] .yz-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-strong); }
:root[data-tema="negro"] .yz-btn--light { --btn-bg: transparent; --btn-fg: #F3EEE4; }
:root[data-tema="negro"] .yz-btn__flow { background: #E6CD86; }
@media (hover: hover) and (pointer: fine) { :root[data-tema="negro"] .yz-btn:hover { color: #0B0B0B; border-color: #E6CD86; } }
:root[data-tema="negro"] .yz-seg__pill { background: #AD8C27; }
:root[data-tema="negro"] .yz-seg button[aria-pressed="true"] { color: #0B0B0B; }
:root[data-tema="negro"] .yz-chip[aria-pressed="true"],
:root[data-tema="negro"] .yz-filtrar[aria-expanded="true"] { background: #AD8C27; border-color: #AD8C27; color: #0B0B0B; }
:root[data-tema="negro"] .yz-filtrar__n { background: #AD8C27; color: #0B0B0B; }
:root[data-tema="negro"] .yz-filtros { background: rgba(11, 11, 11, .88); }
:root[data-tema="negro"] .yz-header.is-glass { background: rgba(11, 11, 11, .8); }
:root[data-tema="negro"] .yz-header[data-tono="oscuro"] .is-claro,
:root[data-tema="negro"] .yz-header.is-glass .is-claro { display: block; }
:root[data-tema="negro"] .yz-header[data-tono="oscuro"] .is-navy,
:root[data-tema="negro"] .yz-header.is-glass .is-navy { display: none; }
:root[data-tema="negro"] .yz-ficha__nombre, :root[data-tema="negro"] .yz-bloque__head h2 { color: #F3EEE4; }
:root[data-tema="negro"] .yz-vecino b { color: #F3EEE4; }
@media (hover: hover) { :root[data-tema="negro"] .yz-vecino:hover b { color: #C9A54A; } }
:root[data-tema="negro"] .yz-filtros__grupo legend { color: #C9A54A; }
:root[data-tema="negro"] .yz-pedigri { border-color: transparent; }
:root[data-tema="negro"] .yz-footer { border-top: 1px solid var(--rule); }
:root[data-tema="negro"] .yz-skip { background: #AD8C27; color: #0B0B0B; }
.yz-tema button, .yz-lang button { width: 44px; min-width: 44px; }
@media (max-width: 379px) { .yz-tema button { width: 44px; } }
/* el pedigrí es una lámina blanca en los dos tonos: su pie va en tinta oscura */
:root[data-tema="negro"] .yz-pedigri figcaption { color: rgba(43, 32, 25, .78); }
/* El escudo del video trae «YEGUADA ZAVI» abajo: el velo ya no lo apaga; solo oscurece el borde para el botón */
.yz-parallax__veil { background: linear-gradient(180deg, rgba(0, 0, 0, .25) 0%, rgba(0, 0, 0, 0) 18%, rgba(0, 0, 0, 0) 84%, rgba(0, 0, 0, .55) 100%); }
.yz-parallax__fade { height: 10%; }
.yz-parallax__cta { bottom: max(var(--s5), calc(var(--s4) + var(--safe-b))); }

/* Visor rediseñado (Eduardo 10-29): la foto CABE en la pantalla. La fila del medio es minmax(0, 1fr):
   con «1fr» a secas el mínimo es el tamaño de la foto y la fila crecía hasta salirse (1424×950 en 1440×900). */
.yz-sheet--visor .yz-sheet__panel {
  background: #0D0B09; color: #F3EEE4;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.yz-visor__bar { gap: var(--s4); padding: var(--s3) var(--gutter); }
.yz-visor__titulo { display: flex; align-items: baseline; gap: var(--s3); min-width: 0; }
.yz-visor__nombre { font-family: var(--font-display); font-size: var(--fs-md); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-visor__count { font-size: var(--fs-sm); color: rgba(243, 238, 228, .72); font-variant-numeric: tabular-nums; white-space: nowrap; }
.yz-visor__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: var(--s2) clamp(var(--s2), 7vw, 6.5rem); }
.yz-visor__img {
  display: block; width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; border-radius: 10px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .9);
  touch-action: pan-y; user-select: none;
}
.yz-sheet--visor.is-ancho .yz-visor__img { background: #FFFFFF; padding: clamp(6px, 1.2vw, 16px); }
.yz-visor__flecha {
  position: absolute; top: 50%; translate: 0 -50%; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(243, 238, 228, .1); border: 1px solid rgba(243, 238, 228, .28); color: #F3EEE4;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color var(--d2) var(--ease-out), opacity var(--d2) var(--ease-out), transform var(--d1) var(--ease-out);
}
.yz-visor__flecha svg { width: 20px; height: 20px; }
.yz-visor__flecha.is-prev { left: clamp(var(--s2), 2vw, var(--s6)); }
.yz-visor__flecha.is-next { right: clamp(var(--s2), 2vw, var(--s6)); }
.yz-visor__flecha:disabled { opacity: 0; pointer-events: none; }
.yz-visor__flecha:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .yz-visor__flecha:hover { background: rgba(243, 238, 228, .2); } }
@media (max-width: 699px) { .yz-visor__flecha { width: 44px; height: 44px; top: auto; bottom: var(--s3); translate: none; } }
.yz-visor__tira {
  display: flex; justify-content: center; gap: var(--s2); padding: var(--s3) var(--gutter) calc(var(--s4) + var(--safe-b));
  overflow-x: auto; scrollbar-width: none;
}
.yz-visor__tira::-webkit-scrollbar { display: none; }
.yz-visor__tira[hidden] { display: none; }
.yz-visor__tira button { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; opacity: .5; transition: opacity var(--d2) var(--ease-out), box-shadow var(--d2) var(--ease-out); }
.yz-visor__tira button[aria-current="true"] { opacity: 1; box-shadow: 0 0 0 2px #0D0B09, 0 0 0 4px #AD8C27; }
@media (hover: hover) { .yz-visor__tira button:hover { opacity: .85; } }
.yz-visor__tira img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 520px) { .yz-visor__tira { justify-content: flex-start; } }
.yz-visor__nav { display: none; }
/* max-height:100% no se resuelve contra la celda del grid en Chrome: el tope va contra la pantalla
   (barra ~68 px + miniaturas ~88 px + aire); sin miniaturas (pedigrí) hay más alto */
.yz-visor__img { max-height: calc(100svh - 184px); }
.yz-sheet--visor.is-ancho .yz-visor__img { max-height: calc(100svh - 110px); }
/* la columna del panel tomaba el ancho natural de la foto (1600 px) y empujaba el botón Cerrar fuera de la pantalla */
.yz-sheet--visor .yz-sheet__panel { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100vw; }
.yz-visor__stage { grid-template-columns: minmax(0, 1fr); }

/* Video del logo «más para atrás» (Eduardo 10-29 noche): ya no llena la pantalla; ocupa ~70 % del alto,
   centrado, y sus bordes se funden con el gris del propio video (#111211, medido en sus esquinas). */
.yz-parallax, .yz-parallax__header { background: #111211; }
.yz-parallax__layer--foto {
  inset: auto; top: 50%; left: 50%; translate: -50% -52%;
  height: 70%; width: auto; max-width: none; aspect-ratio: 12 / 5; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
@media (max-width: 699px) {
  /* teléfono: el recorte cuadrado a resolución nativa */
  .yz-parallax__layer--foto { height: auto; width: min(118vw, 68svh); aspect-ratio: 1; }
}
/* el video arranca y termina en negro puro (medido: 0,0,0 en 0.5 s y 6.9 s): con fondo gris quedaba una
   mancha negra en cada vuelta; en negro, el gris del centro se lee como luz detrás del escudo */
.yz-parallax, .yz-parallax__header { background: #000; }
.yz-parallax__fade { background: linear-gradient(180deg, transparent, var(--navy-deep)); }