/* ==========================================================================
   CABALLO LOCO — CSS DE LA SECCIÓN "VINOS" (para tema de WordPress)
   --------------------------------------------------------------------------
   Todo está deliberadamente colgado de ".cl-vinos" para no pisar los
   estilos del resto del tema (nada de reglas sueltas sobre body, a, img...).
   Misma "línea de tiempo" que el template original: --dur y --ease
   controlan tanto los hovers como la transición de imagen compartida.
   ========================================================================== */

.cl-vinos{
  /* misma paleta y tipografía que el resto de caballoloco.jauriadigital.com */
  --bg: #ffffff;
  --ink: #2a1a0e;
  --ink-soft: rgba(42,26,14,.62);
  --ink-faint: rgba(42,26,14,.38);
  --line: rgba(42,26,14,.14);
  --accent: #a19370;
  --accent-ink: #2a1a0e;

  --font-serif: "Baskervville", Georgia, serif;
  --font-sans: "Montserrat", -apple-system, sans-serif;

  --dur-fast: 420ms;
  --dur: 900ms;
  --dur-slow: 1200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.cl-vinos img{ max-width: 100%; display: block; }
.cl-vinos a{ color: inherit; text-decoration: none; }
.cl-vinos button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.cl-vinos *, .cl-vinos *::before, .cl-vinos *::after{ box-sizing: border-box; }

/* ---------- shell ---------- */
.cl-vinos main{
  position: relative;
  padding: clamp(20px, 4vw, 56px);
}

/* El hero de arriba (.page-hero, .page-hero-overlay, .section-label,
   .divider-gold) vive FUERA de .cl-vinos a propósito: son las mismas
   clases que ya usan Historia y Valles, definidas en el CSS global del
   tema — no hace falta (ni conviene) redefinirlas aquí. */

.cl-vinos .cl-vinos-empty{
  color: var(--ink-soft);
  font-size: 15px;
  padding: 20px 0 80px;
}
.cl-vinos .cl-vinos-empty code{
  background: var(--line);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ---------- bento grid ---------- */
.cl-vinos .wine-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(550px, auto);
  gap: clamp(10px, 1.4vw, 18px);
  padding-bottom: 100px;
}
.cl-vinos .wine-card{
  grid-column: span 2;
  grid-row: span 1;
  min-height: 550px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.cl-vinos .wine-card.is-visible{ opacity: 1; transform: translateY(0); }
.cl-vinos .wine-card--lg{ grid-column: span 2; grid-row: span 2; }

.cl-vinos .wine-card__frame{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 550px;
  overflow: hidden;
  background: #e9e6dd;
  border-radius: 2px;
}
.cl-vinos .wine-card__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.0);
  transition: transform var(--dur-slow) var(--ease);
}
.cl-vinos .wine-card:hover .wine-card__image{ transform: scale(1.055); }

.cl-vinos .wine-card__tag{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2a1a0e;
  background: rgba(246,243,236,.88);
  border: 1px solid rgba(161,147,112,.5);
  padding: 6px 10px;
  border-radius: 100px;
  backdrop-filter: blur(3px);
}

.cl-vinos .wine-card__meta{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 20px;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  transform: translateY(6px);
  transition: transform var(--dur) var(--ease);
}
.cl-vinos .wine-card:hover .wine-card__meta{ transform: translateY(0); }
.cl-vinos .wine-card__name{
  font-family: var(--font-serif);
  font-weight: 600;
  color: #fbf9f4;
  font-size: clamp(16px, 1.6vw, 22px);
  margin: 0 0 4px;
  line-height: 1.15;
}
.cl-vinos .wine-card--lg .wine-card__name{ font-size: clamp(22px, 2.6vw, 34px); }
.cl-vinos .wine-card__subtitle{
  color: rgba(251,249,244,.8);
  font-size: 12.5px;
  letter-spacing: .03em;
}

.cl-vinos .wine-card:nth-child(1){ transition-delay: 0ms; }
.cl-vinos .wine-card:nth-child(2){ transition-delay: 60ms; }
.cl-vinos .wine-card:nth-child(3){ transition-delay: 120ms; }
.cl-vinos .wine-card:nth-child(4){ transition-delay: 180ms; }
.cl-vinos .wine-card:nth-child(5){ transition-delay: 60ms; }
.cl-vinos .wine-card:nth-child(6){ transition-delay: 120ms; }
.cl-vinos .wine-card:nth-child(7){ transition-delay: 180ms; }

/* ---------- Grand Cru: grilla cuadrada (estilo ornellaia.com) ----------
   Sólo afecta a la página Grand Cru (clase .wine-grid--grand-cru, agregada
   por page-vinos.php según la línea de vino actual). Las otras 3 líneas
   (Numerado no usa grilla; Experimental y Espumantes) mantienen la
   grilla "bento" original con tarjetas rectangulares.
   Aquí cada casilla es cuadrada (aspect-ratio 1/1) en vez de rectangular.
   El vino marcado "¿Vino destacado?" sigue ocupando un bloque más grande
   (2×2 casillas) — pero ahora ese bloque también es cuadrado, no un
   rectángulo ancho. Las imágenes adicionales (.wine-card--media, ver
   "Imágenes adicionales de la grilla") usan la misma casilla y también
   pueden marcarse como bloque grande. */
.cl-vinos .wine-grid--grand-cru{
  grid-auto-rows: auto;
}
.cl-vinos .wine-grid--grand-cru .wine-card{
  grid-column: span 1;
  grid-row: span 1;
  min-height: 0;
}
.cl-vinos .wine-grid--grand-cru .wine-card--lg{
  grid-column: span 2;
  grid-row: span 2;
  min-height: 0;
}
.cl-vinos .wine-grid--grand-cru .wine-card__frame{
  aspect-ratio: 1 / 1;
  min-height: 0;
  height: auto;
}

/* Grand Cru: la botella se ve completa dentro del recuadro cuadrado en
   vez de recortada — object-fit: contain (no cover) más un padding que
   la achica, sobre el fondo crema del frame. Se anula también el zoom
   en hover (heredado del resto del sitio) para que no vuelva a recortar
   la imagen al pasar el mouse. Las imágenes adicionales de la grilla
   (.wine-card--media: fotos de viñedo/bodega, sin botella) quedan fuera
   de esta regla y mantienen cover + zoom, como el resto del sitio. */
.cl-vinos .wine-grid--grand-cru .wine-card:not(.wine-card--media) .wine-card__image{
  object-fit: contain;
  padding: 13%;
  box-sizing: border-box;
}
.cl-vinos .wine-grid--grand-cru .wine-card:not(.wine-card--media):hover .wine-card__image{
  transform: scale(1.0);
}

/* Grand Cru: sin tag sobre la foto, y la ficha (nombre/subtítulo) va
   debajo de la imagen en vez de superpuesta — por eso en page-vinos.php
   el .wine-card__meta se imprime como hermano de .wine-card__frame,
   no dentro. Se anula el estilo "overlay" (posición absoluta, degradé
   oscuro, texto claro) por uno de flujo normal en fondo claro. */
.cl-vinos .wine-grid--grand-cru .wine-card__meta,
.cl-vinos .wine-grid--grand-cru .wine-card:hover .wine-card__meta{
  position: static;
  background: none;
  padding: 22px 8px 0;
  transform: none;
  text-align: center;
}
.cl-vinos .wine-grid--grand-cru .wine-card__name{
  color: var(--ink);
  font-size: clamp(17px, 1.5vw, 21px);
}
.cl-vinos .wine-grid--grand-cru .wine-card__subtitle{ color: var(--ink-soft); }

/* Tarjeta puramente visual (imagen adicional, sin enlace a ningún vino) */
.cl-vinos .wine-card--media{ cursor: default; }

/* ---------- detail view ---------- */
.cl-vinos .vino-single main,
.cl-vinos main.vino-single{ padding-top: 28px; }

.cl-vinos .back-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(28px, 5vw, 56px);
  transition: color var(--dur-fast) var(--ease), gap var(--dur-fast) var(--ease);
}
.cl-vinos .back-btn:hover{ color: var(--accent); gap: 12px; }
.cl-vinos .back-btn__arrow{ transition: transform var(--dur-fast) var(--ease); }
.cl-vinos .back-btn:hover .back-btn__arrow{ transform: translateX(-3px); }

.cl-vinos .detail-layout{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 90px);
  align-items: start;
  padding-bottom: 100px;
}
@media (max-width: 860px){
  .cl-vinos .detail-layout{ grid-template-columns: 1fr; }
}

.cl-vinos .wine-hero{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #e9e6dd;
  border-radius: 2px;
}
.cl-vinos .wine-hero__image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 32px;
  box-sizing: border-box;
}

.cl-vinos .wine-detail__body{
  padding-top: clamp(4px, 2vw, 24px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cl-vinos .wine-detail__body.is-visible{ opacity: 1; transform: translateY(0); }

.cl-vinos .wine-detail__tag{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(161,147,112,.5);
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 20px;
}
.cl-vinos .wine-detail__title{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.05;
  margin: 0 0 8px;
}
.cl-vinos .wine-detail__subtitle{
  font-size: 14.5px;
  color: var(--ink-soft);
  letter-spacing: .02em;
  margin: 0 0 32px;
}
.cl-vinos .wine-detail__notes-title{
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.cl-vinos .wine-detail__notes{
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 58ch;
  margin: 0 0 32px;
}
.cl-vinos .wine-detail__notes p{ margin: 0 0 1em; }
.cl-vinos .wine-detail__notes p:last-child{ margin-bottom: 0; }

.cl-vinos .wine-detail__footrow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.cl-vinos .wine-detail__year{
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-transform: uppercase;
}
/* contenedor de los botones de ficha — puede haber más de uno
   (ficha técnica, certificado, etc.) */
.cl-vinos .wine-detail__fichas{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* mismo botón "Ver más" con borde dorado que ya usa el resto del sitio */
.cl-vinos .wine-detail__cta{
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 12px 32px;
  border-radius: 0;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cl-vinos .wine-detail__cta:hover{
  background-color: var(--accent);
  color: #fff;
}

/* ---------- Filas alternadas sobre fondo claro (Vino Tinto/Vino Blanco
   en Numerado, y los vinos de Espumantes) ----------------------------
   Reutiliza .wine-lines/.wine-line-row/.wine-line-img/.wine-line-content
   de assets/css/caballo-loco.css (misma fila alternada que "Grand Cru" /
   "Experimental" en el home), pero ese componente nació para la sección
   oscura #vinos del home — acá va sobre el fondo claro de esta página,
   así que se sobreescriben sólo los colores de texto/borde. Se aplica a
   dos contenedores: ".numerado-chooser" (selector de línea de Numerado,
   cl_render_numerado_chooser()) y ".wine-lines--rows" (vinos reales de
   Espumantes, cl_render_wine_line_rows()) — mismo aspecto en los dos. */
.cl-vinos .numerado-chooser,
.cl-vinos .wine-lines--rows{ background: #ffffff; padding: 8px 0 48px; }
.cl-vinos .numerado-chooser .wine-line-row:not(:last-child),
.cl-vinos .wine-lines--rows .wine-line-row:not(:last-child){
  border-bottom-color: var(--line);
}
.cl-vinos .numerado-chooser .section-label,
.cl-vinos .wine-lines--rows .section-label{ color: var(--accent); }
.cl-vinos .numerado-chooser .wine-line-name,
.cl-vinos .wine-lines--rows .wine-line-name{
  font-family: var(--font-serif);
  color: var(--ink);
}
.cl-vinos .numerado-chooser .wine-line-desc,
.cl-vinos .wine-lines--rows .wine-line-desc{ color: var(--ink-soft); }
/* Subtítulo/denominación del vino (ej. "Método tradicional — Valle de
   Colchagua"): mismo estilo que la descripción pero un poco más marcado,
   para distinguirlo del párrafo de notas/origen que va debajo. */
.cl-vinos .wine-lines--rows .wine-line-desc--subtitle{
  color: var(--ink);
  font-weight: 500;
}
.cl-vinos .numerado-chooser .wine-line-img-placeholder,
.cl-vinos .wine-lines--rows .wine-line-img-placeholder{
  border: 1px solid var(--line);
}
/* Fotos de botella (fondo transparente/blanco): se ven completas en vez
   de recortadas por los bordes de la caja 7:9 — mismo tratamiento
   (contain + fondo claro + padding) que .wine-hero__image en el detalle
   de cada vino. */
.cl-vinos .numerado-chooser .wine-line-img,
.cl-vinos .wine-lines--rows .wine-line-img{
  object-fit: contain;
  background: #f6f3ec;
}
.cl-vinos .numerado-chooser .btn-cl-dark,
.cl-vinos .wine-lines--rows .btn-cl-dark{
  color: var(--ink);
  border-color: var(--ink);
}
.cl-vinos .numerado-chooser .btn-cl-dark:hover,
.cl-vinos .wine-lines--rows .btn-cl-dark:hover{
  background: var(--ink);
  color: #fff;
}

/* ---------- Numerado: selector de edición (reemplaza la línea de tiempo
   de añadas de Ornellaia por un selector de número de edición) --------- */
.cl-vinos .edition-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 clamp(36px, 6vw, 64px);
  padding: 20px clamp(14px, 2vw, 22px);
  background: #fff;
  border: 1px solid var(--line);
}
.cl-vinos .vino-single--numerado .edition-nav,
.cl-vinos .vinos-page .edition-nav{ margin-top: 0; }
.cl-vinos .edition-nav__label{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 18px;
  margin-right: 12px;
  border-right: 1px solid var(--line);
}
.cl-vinos .edition-nav__label-eyebrow{
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.cl-vinos .edition-nav__label-current{
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink);
}
.cl-vinos .edition-nav__arrow{
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-soft);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.cl-vinos .edition-nav__arrow:hover{ border-color: var(--accent); color: var(--accent); }
.cl-vinos .edition-nav__arrow.is-disabled{ opacity: .3; pointer-events: none; }
.cl-vinos .edition-nav__track{
  flex: 1 1 auto;
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding: 4px 2px;
}
.cl-vinos .edition-nav__track::-webkit-scrollbar{ display: none; }
.cl-vinos .edition-nav__item{
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink-faint);
  border-radius: 50%;
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.cl-vinos .edition-nav__item:hover{ color: var(--ink); }
.cl-vinos .edition-nav__item.is-active{
  color: #fff;
  background: var(--accent);
  font-weight: 600;
  transform: scale(1.12);
}

/* ---------- Numerado: barras de origen (valles / variedades) --------- */
.cl-vinos .origin-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin: 4px 0 8px;
}
@media (min-width: 520px){
  .cl-vinos .origin-grid.has-two{ grid-template-columns: 1fr 1fr; }
}
.cl-vinos .origin-bars__title{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
.cl-vinos .origin-bar{
  display: grid;
  grid-template-columns: minmax(90px, 130px) 1fr 46px;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  margin-bottom: 10px;
}
.cl-vinos .origin-bar__label{ color: var(--ink-soft); }
.cl-vinos .origin-bar__track{ height: 6px; background: var(--line); overflow: hidden; }
.cl-vinos .origin-bar__fill{ display: block; height: 100%; background: var(--accent); transition: width 900ms var(--ease); }
.cl-vinos .origin-bar__value{ text-align: right; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

/* ---------- Numerado: aviso de ficha sin completar todavía --------- */
.cl-vinos .placeholder-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .04em;
  color: #8a5a2b;
  background: rgba(202,138,44,.1);
  border: 1px dashed rgba(202,138,44,.4);
  padding: 10px 14px;
  margin: 4px 0 28px;
}

@media (max-width: 720px){
  .cl-vinos .edition-nav{ flex-wrap: wrap; }
  .cl-vinos .edition-nav__label{
    border-right: 0; padding-right: 0; margin-right: 0; width: 100%;
    flex-direction: row; align-items: baseline; gap: 8px;
    padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px;
  }
}

/* ---------- FLIP clone (vive fuera de .cl-vinos mientras se anima) ------- */
.cl-vinos-flip-clone{
  position: fixed;
  z-index: 9999;
  object-fit: cover;
  will-change: left, top, width, height, border-radius;
  pointer-events: none;
  margin: 0;
}

/* staging: copia oculta de la página destino, usada sólo para medir
   dimensiones antes de animar (ver vinos-template.js) */
.cl-vinos-staging{
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .cl-vinos .wine-grid{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(420px, auto); }
  .cl-vinos .wine-card,
  .cl-vinos .wine-card--lg{ grid-column: span 2; grid-row: span 1; min-height: 420px; }
  .cl-vinos .wine-card__frame{ min-height: 420px; }

  /* Grand Cru sigue siendo cuadrada en mobile: 2 columnas, misma casilla.
     El destacado (o una imagen adicional marcada "grande") ocupa las 2
     columnas completas — sigue siendo cuadrado, sólo que más grande. */
  .cl-vinos .wine-grid--grand-cru{ grid-auto-rows: auto; }
  .cl-vinos .wine-grid--grand-cru .wine-card{ grid-column: span 1; grid-row: span 1; min-height: 0; }
  .cl-vinos .wine-grid--grand-cru .wine-card--lg{ grid-column: span 2; grid-row: span 2; min-height: 0; }
  .cl-vinos .wine-grid--grand-cru .wine-card__frame{ aspect-ratio: 1 / 1; min-height: 0; height: auto; }
}

@media (prefers-reduced-motion: reduce){
  .cl-vinos *{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}