/* ===========================================================================
   Bodegas Román · estilos de la web. Un solo archivo: cambiar un color es
   cambiar una línea (patrones/mantenimiento.md).

   1. Colores: los de SU web, medidos en el navegador el 12/9/2026, con el
      PATRÓN DE TRES TONOS (patrones/color.md). Contraste apuntado al lado.
   2. Tipografías: las dos de su web, alojadas en assets/fonts (cero Google).
   3. Escala de 7 tamaños y tres puntos de ruptura: 560 · 900.
   =========================================================================== */
@font-face {
  font-family: "Antic Didone";
  src: url("assets/fonts/antic-didone-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  /* Sin el guion (U+002D): el de Antic Didone lleva aire a los lados y «550-850 m»
     o «Gallur-Ágreda» se leían «550 - 850» (diseño, vuelta 1). Así lo pinta la
     serifa de reserva y el texto sigue siendo el mismo, letra por letra. */
  unicode-range: U+0000-002C, U+002E-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Albert Sans";
  src: url("assets/fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap; /* variable: un archivo para todos los pesos */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --hondo: #32312E;       /* su cabecera y su pie. Texto sobre papel: 12,85 */
  --papel: #FFFEF5;       /* su fondo crema. Sobre hondo: 12,85 */
  --papel-alt: #F6F1E1;   /* crema alterna (nuestra). Tinta encima: 11,51 */
  --amarillo: #F3ED74;    /* su acento. Sobre hondo 10,64 (vale para texto). Sobre papel 1,21: SOLO decoración */
  --dorado: #E5C673;      /* su dorado. Sobre hondo 7,84. Sobre papel 1,64: SOLO decoración */
  --oro-texto: #847242;   /* su dorado oscurecido por nosotros: 4,64 sobre papel. NO sobre papel-alt (4,16) */
  --oro-hondo: #645732;   /* 7,03 sobre papel y 6,30 sobre papel-alt: enlaces y foco en claro */
  /* La cápsula de Román Cepas Viejas, muestreada del PNG de su botella (13/9/2026).
     En la etiqueta, ese rojo solo numera la botella: aquí, igual. */
  --teja: #CB6138;        /* sobre papel 3,91: SOLO decoración */
  --teja-texto: #AD5230;  /* oscurecida por nosotros: 5,15 sobre papel y 4,62 sobre papel-alt */
  --tinta: #32312E;
  --tinta-suave: #5A574F; /* 7,13 sobre papel, 6,39 sobre papel-alt */
  --claro-suave: #D9D4C4; /* texto secundario sobre hondo: 8,77 */
  --borde: #E2DBC6;       /* filetes (decoración) */
  --borde-campo: #7A7466; /* borde de los campos de formulario: más de 3 sobre papel */

  --p0: 1rem; --p1: 1.125rem; --p2: 1.3125rem; --p3: 1.65rem; --p4: 2.1rem; --p5: 2.7rem; --p6: 3.4rem;
  --h1: clamp(var(--p4), 5.4vw, var(--p6));
  --h2: clamp(var(--p3), 3.6vw, var(--p5));
  --e1: .5rem; --e2: 1rem; --e3: 1.6rem; --e4: 2.5rem; --e5: 4rem;

  --barra: 64px;          /* el alto de la barra fija, en UN sitio */
  /* Cartel de cookies del kit (solo sale en la web publicada, con GA4) */
  --cookies-fondo: #32312E; --cookies-texto: #FFFEF5; --cookies-texto-2: #D9D4C4;
  --cookies-boton: #F3ED74; --cookies-boton-texto: #32312E; --cookies-foco: #F3ED74;
  --barra-abajo: 56px;    /* el alto de la barra fija de abajo (solo en el móvil) */
  --radio: 10px;
  --letra: "Albert Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --titular: "Antic Didone", Didot, "Bodoni 72", Georgia, serif;
  --sombra-botella: drop-shadow(0 16px 14px rgb(50 49 46 / .22));
}

*, *::before, *::after { box-sizing: border-box; }
::placeholder { color: var(--tinta-suave); opacity: 1; } /* 7,13 sobre papel (TEC-09) */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--barra) + 1.4rem); } /* el freno de las anclas */
body { margin: 0; font: var(--p1)/1.65 var(--letra); color: var(--tinta); background: var(--papel); }
img, svg, video { max-width: 100%; height: auto; }
figure { margin: 1.7em 0; } /* el margin:1em 40px de fábrica descuadra las fotos */
figcaption { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); }
[hidden] { display: none !important; }
a { color: var(--oro-hondo); text-underline-offset: .18em; }
:where(a, button, summary, input, select, textarea):focus-visible { outline: 3px solid var(--oro-hondo); outline-offset: 2px; }
:where(.barra, .banda, .pie, .barra-movil) :where(a, button, summary):focus-visible { outline-color: var(--amarillo); }
:where(p, li, td, dd) a:where([href^="tel:"], [href^="mailto:"]) { display: inline-flex; align-items: center; min-height: 44px; } /* se pulsan con el dedo */
h1, h2, h3 { font-family: var(--titular); font-weight: 400; line-height: 1.15; text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: var(--h1); margin: 0 0 var(--e2); }
h2 { font-size: var(--h2); margin: var(--e4) 0 var(--e2); }
h3 { font-size: var(--p3); margin: var(--e3) 0 var(--e1); }
strong, b { font-weight: 700; }
p, li { max-width: 70ch; }

.contenedor { width: min(100% - 2rem, 72rem); margin-inline: auto; }
.estrecho { max-width: 46rem; }
.seccion { padding: var(--e4) 0; }
.seccion > .contenedor > h2:first-child, .seccion > .contenedor > .antetitulo + h2,
.dos-col > div > :first-child, .dos-col > div > .antetitulo + h2 { margin-top: 0; }
.contenedor > .vinos:first-child { margin-top: 0; }
.antetitulo a { color: inherit; }
.fuente { font-size: var(--p0); color: var(--tinta-suave); }
.seccion--alt { background: var(--papel-alt); }
.seccion--alt .vino-lema, .seccion--alt .antetitulo { color: var(--oro-hondo); } /* el oro de texto no llega en la crema alterna */

/* --- barra fija (oscura, como la de su web) --- */
.salto { position: absolute; left: -9999px; top: 0; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; background: var(--papel); color: var(--tinta); }
.salto:focus { left: 1rem; }
.barra { position: sticky; top: 0; z-index: 50; background: var(--hondo); color: var(--papel); }
.barra__in { display: flex; align-items: center; gap: var(--e2); min-height: var(--barra); }
.barra__marca { display: inline-flex; align-items: center; min-height: 44px; margin-right: auto; color: var(--papel); text-decoration: none; }
.barra__logo { height: 34px; width: auto; } /* apaisado: se fija el ALTO */
.nav-escritorio { display: none; gap: .1rem; }
.nav-escritorio a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .65rem; color: var(--papel); text-decoration: none; border-radius: 6px; }
.nav-escritorio a:hover { color: var(--amarillo); }
.nav-escritorio a[aria-current="page"] { color: var(--amarillo); box-shadow: inset 0 -2px 0 var(--amarillo); border-radius: 0; }
.nav-movil summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; color: var(--papel); border: 1px solid rgb(255 254 245 / .5); border-radius: 999px; cursor: pointer; list-style: none; font-weight: 600; }
.nav-movil summary::-webkit-details-marker { display: none; }
.nav-movil[open] summary { background: var(--papel); color: var(--hondo); }
.nav-movil nav { position: absolute; left: 0; right: 0; top: var(--barra); display: grid; background: var(--hondo); padding: var(--e1) 1rem var(--e3); box-shadow: 0 12px 24px rgb(0 0 0 / .25); }
.nav-movil nav a { display: flex; align-items: center; min-height: 52px; color: var(--papel); text-decoration: none; border-bottom: 1px solid rgb(255 254 245 / .12); font-size: var(--p2); }
.nav-movil nav a[aria-current="page"] { color: var(--amarillo); }
/* A la derecha de la barra, desde 900 px: el teléfono (contorno) y el botón
   destacado de la página (amarillo), el mismo acento que la barra del móvil. */
.barra__acciones { display: none; align-items: center; gap: var(--e1); }
.barra .boton { min-height: 44px; padding: 0 1.1rem; white-space: nowrap; }
.barra .boton--sec { color: var(--papel); border-color: rgb(255 254 245 / .55); } /* 12,85 */
.barra .boton--sec:hover { background: var(--papel); color: var(--hondo); border-color: var(--papel); }
.barra__tel::before { content: ""; flex: 0 0 auto; width: 1em; height: 1em; margin-right: .45em; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25c1.1.37 2.3.57 3.6.57a1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* --- botones (píldora, como los «+info» de su web) --- */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 1.4rem; border-radius: 999px; background: var(--hondo); color: var(--papel); font-weight: 600; text-decoration: none; border: 2px solid var(--hondo); text-align: center; text-wrap: balance; } /* si parte en dos, que sean dos líneas parejas */
.boton:hover { background: #1F1E1C; border-color: #1F1E1C; }
.boton--sec { background: transparent; color: var(--hondo); }
.boton--sec:hover { background: var(--hondo); color: var(--papel); }
.boton--claro { background: var(--amarillo); color: var(--hondo); border-color: var(--amarillo); } /* 10,64 */
.boton--claro:hover { background: var(--papel); border-color: var(--papel); }
.banda .boton--sec { color: var(--papel); border-color: var(--papel); }
.banda .boton--sec:hover { background: var(--papel); color: var(--hondo); }
button.boton { font: inherit; font-weight: 600; cursor: pointer; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e1) var(--e2); margin: var(--e3) 0 0; }
.microcopia { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); }
/* El precio y la duracion de la visita, el dia que la bodega los confirme (datos.py -> VISITA) */
.dato-visita { margin: .75rem 0 0; font-size: var(--p1); }
/* Mientras el cartel de cookies esta abierto, la barra fija de abajo no estorba */
.cookies-abierto .barra-movil { display: none !important; }
.acciones + .microcopia { margin-top: .75rem; }

/* --- portada y cabeceras con foto: dos mitades, como una etiqueta ---
   En el móvil: titular y entradilla, la foto a todo lo ancho y después los
   botones (la barra fija ya lleva «Llamar» y el botón destacado, así que el
   «cómo te localizo» sigue en la primera pantalla; patrones/primera-pantalla:
   titular → subtítulo → foto → botón). Sin la foto arriba, la portada de una
   bodega se abría en el móvil como un documento de texto (diseño, vuelta 2).
   En escritorio: papel a la izquierda y la foto a sangre hasta el borde derecho,
   a toda la altura. El canal derecho se calcula con el ancho de la sección
   (100cqi), no con 100vw, que en Windows cuenta la barra de desplazamiento. */
.partida { container-type: inline-size; background: var(--papel); border-bottom: 1px solid var(--borde); overflow-x: clip; }
.partida__rej { display: grid; grid-template-areas: "texto" "foto" "accion"; padding: var(--e3) 0 var(--e4); }
.partida__texto { grid-area: texto; }
.partida__texto .entradilla { margin-top: var(--e1); }
.partida__accion { grid-area: accion; }
.partida__accion > .acciones:first-child { margin-top: 0; }
.partida__foto { grid-area: foto; margin: var(--e3) -1rem; }
.partida__foto picture { display: block; }
.partida__foto img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* Comprar: en vez de una foto, las tres botellas sobre la crema alterna */
.partida__foto--botellas { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1.2rem, 6vw, 3rem); padding: var(--e3) 1rem var(--e2); background: var(--papel-alt); }
.partida__foto--botellas img { width: auto; height: 170px; aspect-ratio: auto; object-fit: contain; filter: var(--sombra-botella); }
.antetitulo { margin: 0 0 var(--e1); color: var(--oro-texto); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: var(--p0); }
.entradilla { font-size: var(--p2); color: var(--tinta-suave); max-width: 38rem; margin: 0; }
.datos-rapidos { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e1) var(--e3); padding: var(--e2) 0 0; margin: var(--e3) 0 0; border-top: 1px solid var(--borde); }
.datos-rapidos li { font-size: var(--p0); color: var(--tinta-suave); }
.datos-rapidos b { display: block; font-family: var(--titular); font-weight: 400; font-size: var(--p3); color: var(--tinta); line-height: 1.1; }

/* --- cabecera de página interior sin foto (vinos, privacidad, gracias) --- */
.cabecera-pagina { padding: var(--e4) 0 var(--e3); background: var(--papel); border-bottom: 1px solid var(--borde); }
.cabecera-pagina .entradilla { margin-top: var(--e1); }

/* --- panorámica (la bodega con la sierra nevada detrás): a su proporción, sin recortar --- */
.panorama { margin: var(--e4) 0 0; }
.panorama img { display: block; width: 100%; border-radius: var(--radio); }
.panorama figcaption { margin-top: var(--e1); }

/* --- los vinos: las botellas mandan, sin tarjetas de tienda ---
   Antes, botellas de 240 px dentro de cajas con borde (diseño, vuelta 2): la
   etiqueta de Román, con su hoja y su número, no se llegaba a ver. */
.vinos { display: grid; gap: var(--e4) var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); margin-top: var(--e4); }
.vino-tarjeta { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 var(--e1); color: var(--tinta); text-decoration: none; }
.vino-tarjeta img { height: 320px; width: auto; margin-bottom: var(--e3); filter: var(--sombra-botella); transition: transform .25s ease; }
.vino-tarjeta:hover img { transform: translateY(-6px); }
.vino-nombre { font-family: var(--titular); font-weight: 400; font-size: var(--p4); letter-spacing: .14em; text-transform: uppercase; margin: 0; line-height: 1.1; }
.vino-marca { margin: .2rem 0 0; font-size: var(--p0); letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-suave); }
.vino-lema { margin: var(--e1) 0 0; font-family: var(--titular); font-size: var(--p2); color: var(--oro-texto); }
.vino-datos { list-style: none; padding: 0; margin: var(--e2) 0 var(--e2); font-size: var(--p0); color: var(--tinta-suave); }
.vino-datos li { padding: .25rem 0; border-top: 1px solid var(--borde); }
.vino-tarjeta .ir { margin-top: auto; font-weight: 700; color: var(--oro-hondo); text-decoration: underline; text-underline-offset: .18em; }
.filete { display: block; width: 3rem; height: 2px; margin: var(--e2) auto 0; background: var(--dorado); border: 0; }
/* La numeración de la botella, en su teja y espaciada como en su etiqueta. En la
   letra del texto y seminegrita: en la serifa fina, a este tamaño, se leía pálida */
.numerada { font-family: var(--letra); font-weight: 600; font-size: .875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teja-texto); }
.seccion--alt .vino-datos li { border-top-color: #DDD3B8; }

/* --- ficha de un vino --- */
.ficha-vino { display: grid; gap: var(--e3); align-items: start; }
.ficha-vino__botella { margin: 0; text-align: center; background: var(--papel-alt); border-radius: var(--radio); padding: var(--e2); }
.ficha-vino__botella img { height: 260px; width: auto; filter: var(--sombra-botella); } /* en el móvil, que el titular entre en la primera pantalla */
.ficha-vino h2 { font-size: clamp(var(--p3), 2.6vw, var(--p4)); } /* por debajo del H1: antes la pregunta pesaba casi lo mismo que el nombre del vino */
.ficha-vino .numerada { margin: var(--e1) 0 0; }
.ficha { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
.ficha th, .ficha td { padding: .75rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.ficha th { width: 38%; font-size: var(--p0); font-weight: 600; color: var(--tinta-suave); }
.texto-bodega { margin: var(--e3) 0; padding: var(--e2) 0 var(--e2) var(--e3); border-left: 3px solid var(--dorado); }
.texto-bodega p { font-size: var(--p1); }
.texto-bodega footer { font-size: var(--p0); color: var(--tinta-suave); }

/* --- bandas oscuras --- */
.banda { background: var(--hondo); color: var(--papel); }
.banda h2, .banda h3 { color: var(--papel); }
.banda a:not(.boton) { color: var(--amarillo); }
.banda strong, .banda b { color: inherit; }
.banda .antetitulo { color: var(--dorado); }
.banda .entradilla, .banda .suave, .banda .microcopia { color: var(--claro-suave); } /* la microcopia tambien: sobre la banda oscura, el tono de tinta suave no se lee (axe, 17/9) */
/* La seleccion de la D.O. (vuelta 6): un tercero con nombre y fecha, con su
   fuente enlazada. Destaca sobre las medallas porque es lo unico con vino y añada. */
.seleccion-do { margin: var(--e3) 0 0; padding: var(--e2) var(--e2) var(--e2) 1.25rem; border-left: 4px solid var(--dorado); background: var(--papel-alt); border-radius: 0 var(--radio) var(--radio) 0; font-size: var(--p1); }
.seleccion-do__cuando { display: block; margin-bottom: .3rem; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-hondo); } /* 6,30 sobre la crema alterna */
.banda .seleccion-do { background: rgb(255 254 245 / .07); }
.banda .seleccion-do__cuando { color: var(--dorado); } /* 7,84 sobre hondo */
.banda .mas { margin-top: var(--e3); }
/* «¿Lo has probado fuera?» bajo las botellas de la portada (vuelta 6, CRO-02) */
.franja-compra { margin-top: var(--e4); padding: var(--e3) 0 0; border-top: 2px solid var(--dorado); text-align: center; } /* voz de la bodega, no widget: filete, sin caja (diseño, vuelta 6) */
.franja-compra__t { max-width: 44rem; margin: 0 auto; font-family: var(--titular); font-size: var(--p2); line-height: 1.3; }
.franja-compra__t b { font-weight: 400; }
.franja-compra .acciones { justify-content: center; margin-top: var(--e1); }
/* El aviso de añada a pie de ficha: un campo, un permiso, un botón */
.formulario--corto { max-width: 32rem; }
.formulario--corto .ayuda { margin: 0; font-size: .9375rem; color: var(--tinta-suave); }
@media (max-width: 559px) {
  .seleccion-do { font-size: var(--p0); padding: var(--e1) var(--e2); }
  .franja-compra { margin-top: var(--e3); }
  .franja-compra .acciones { flex-direction: column; align-items: stretch; }
  .franja-compra .boton { width: 100%; }
  /* La tabla D.O./Román, fila a fila: a tres columnas de 90 px no se leía (DIS-01) */
  .ficha--comparada thead { position: absolute; left: -9999px; }
  .ficha--comparada, .ficha--comparada tbody, .ficha--comparada tr { display: block; }
  .ficha--comparada tr { padding: var(--e2) 0; border-bottom: 1px solid var(--borde); }
  .ficha--comparada th[scope=row] { display: block; width: auto; border: 0; padding: 0 0 .3rem; font-family: var(--titular); font-weight: 400; font-size: var(--p2); }
  table.ficha--comparada td { display: block; width: auto; border: 0; padding: .2rem 0; }
  .ficha--comparada td::before { content: attr(data-e); display: block; font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--oro-hondo); } /* 6,30 sobre la crema alterna */
  .ficha--comparada td:last-child { margin-top: .4rem; padding-left: var(--e2); border-left: 3px solid var(--dorado); font-weight: 600; }
}
/* «DESDE 1998» se quedaba huérfano en la primera pantalla (DIS-05) */
@media (max-width: 420px) { .antetitulo { font-size: .875rem; letter-spacing: .08em; } }
/* La página del QR: el zorro de su marca sobre el titular y la pregunta, plegada debajo del pedido (DIS-04) */
.zorro-cabecera { display: block; width: auto; height: 40px; margin-bottom: var(--e1); }
.mas-info { margin-top: var(--e3); border-top: 1px solid var(--borde); padding-top: var(--e1); }
.mas-info summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
/* La tabla D.O. / Román de la página de cepas viejas */
.ficha--comparada thead th { font-family: var(--titular); font-weight: 400; font-size: var(--p1); border-bottom: 2px solid var(--dorado); }
.ficha--comparada td { width: 40%; }
/* La página del QR: tarjetas para elegir el vino que se ha probado */
.vinos--elegir .vino-tarjeta { background: var(--papel); border-radius: var(--radio); border: 1.5px solid transparent; }
.vinos--elegir .vino-tarjeta--elegida { border-color: var(--hondo); box-shadow: inset 0 -4px 0 var(--amarillo); } /* el que has tocado (QA-05) */
.franja-compra .boton { min-width: min(100%, 17rem); } /* los dos botones, del mismo ancho (QA-08) */
.premios { list-style: none; padding: 0; margin: var(--e3) 0 0; display: grid; gap: var(--e2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.premios li { padding: var(--e2) 0 0; border-top: 2px solid var(--dorado); }
.premios b { display: block; font-family: var(--titular); font-weight: 400; font-size: var(--p3); color: var(--dorado); line-height: 1.15; }
.premios span { color: var(--papel); }

/* --- dos columnas: texto y foto --- */
.dos-col { display: grid; gap: var(--e3); align-items: center; }
.dos-col--arriba { align-items: start; }
.dos-col figure { margin: 0; }
.dos-col img { display: block; width: 100%; border-radius: var(--radio); }
.foto-ancha { margin: var(--e3) 0 0; }
.foto-ancha img { display: block; width: 100%; border-radius: var(--radio); }

/* --- cronología --- */
.cronologia { list-style: none; padding: 0; margin: var(--e3) 0; display: grid; gap: var(--e3); }
.cronologia li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--e2); max-width: none; }
.cronologia b { font-family: var(--titular); font-weight: 400; font-size: var(--p4); line-height: 1; color: var(--oro-texto); }

/* --- cita de la bodega --- */
.cita { margin: var(--e4) 0; padding: 0 0 0 var(--e3); border-left: 3px solid var(--dorado); }
.cita p { margin: 0; font-family: var(--titular); font-size: var(--p3); line-height: 1.3; }
.cita footer { margin-top: var(--e1); font-size: var(--p0); color: var(--tinta-suave); }
.banda .cita footer { color: var(--claro-suave); }

/* --- pasos, preguntas, tablas --- */
.pasos { counter-reset: paso; list-style: none; padding: 0; display: grid; gap: var(--e2); }
.pasos li { counter-increment: paso; padding-left: 3.2rem; position: relative; min-height: 2.4rem; }
.pasos li::before { content: counter(paso); position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--hondo); color: var(--amarillo); font-family: var(--titular); font-size: var(--p2); }
.preguntas details { border-bottom: 1px solid var(--borde); padding: var(--e1) 0; }
.preguntas summary { min-height: 48px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.preguntas details p { margin-top: 0; }
table { width: 100%; border-collapse: collapse; margin: var(--e2) 0; }
th, td { padding: .7rem .4rem; border-bottom: 1px solid var(--borde); text-align: left; vertical-align: top; }
.lista { padding-left: 1.2rem; }
.lista li { margin: .35rem 0; }
.hueco { background: var(--papel-alt); outline: 2px dashed var(--oro-hondo); outline-offset: 1px; padding: 0 .3em; } /* PENDIENTE: un dato que falta, a la vista */

/* --- formularios --- */
.formulario { display: grid; gap: var(--e2); max-width: 42rem; margin-top: var(--e3); }
.campo { display: grid; gap: .35rem; }
.campo label, .campo legend { font-weight: 600; }
.campo .ayuda { font-size: var(--p0); color: var(--tinta-suave); margin: 0; }
.campo input, .campo select, .campo textarea { width: 100%; min-height: 48px; padding: .6rem .85rem; font: inherit; color: var(--tinta); background: #FFFFFF; border: 1.5px solid var(--borde-campo); border-radius: 8px; }
.campo textarea { min-height: 7rem; resize: vertical; }
.campos-2 { display: grid; gap: var(--e2); }
fieldset.campo { border: 0; padding: 0; margin: 0; }
.opciones { display: grid; gap: .3rem; }
.opcion, .casilla { display: flex; gap: .35rem; align-items: center; min-height: 44px; }
.casilla { align-items: flex-start; }
.casilla span { padding-top: .45rem; }
/* Casillas y botones de opción de 44 px de zona táctil que se ven de 24:
   el dibujo va de fondo (SVG), así funciona igual en todos los navegadores. */
.opcion input, .casilla input { -webkit-appearance: none; appearance: none; flex: 0 0 44px; width: 44px; height: 44px; margin: 0 0 0 -10px; border: 0; border-radius: 8px; cursor: pointer; background: transparent center / 24px 24px no-repeat; }
.opcion input[type="checkbox"], .casilla input[type="checkbox"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4' fill='%23fff' stroke='%237A7466' stroke-width='2'/%3E%3C/svg%3E"); }
.opcion input[type="checkbox"]:checked, .casilla input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='1' y='1' width='22' height='22' rx='4' fill='%2332312E' stroke='%2332312E' stroke-width='2'/%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F3ED74' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.opcion input[type="radio"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%237A7466' stroke-width='2'/%3E%3C/svg%3E"); }
.opcion input[type="radio"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff' stroke='%2332312E' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='6' fill='%2332312E'/%3E%3C/svg%3E"); }
.rgpd { font-size: var(--p0); color: var(--tinta-suave); background: var(--papel-alt); padding: var(--e2); border-radius: 8px; }
.rgpd p { margin: 0 0 .4rem; }
.aviso-demo { margin: 0; padding: var(--e1) var(--e2); border-left: 4px solid var(--dorado); background: var(--papel-alt); font-size: var(--p0); }
.oculto { position: absolute; left: -9999px; } /* fuera de la vista, no de los lectores: la trampa del formulario y los textos de los botones «−/+» */
/* «Pedir este vino» (fichas) llega al formulario de pedido con ese vino
   señalado, sin JavaScript: el ancla va justo encima del formulario y :target
   resalta su campo. Antes llegaba a tres casillas en blanco (conversión, vuelta 4) */
.ancla-vino { display: block; }
.seccion > .contenedor > .ancla-vino ~ h2:first-of-type { margin-top: 0; }
/* La cesta del pedido (vuelta 6): cada vino con su botella y su «− / +».
   Sin JavaScript se ve el campo de número; con él, los botones de 44 px.
   El vino que llega de su ficha (#pedido-<vino>) sale ya señalado. */
.cesta { display: grid; gap: var(--e1); }
.cesta__vino { display: grid; grid-template-columns: 3.4rem 1fr auto; align-items: center; gap: var(--e2); padding: var(--e1) var(--e2) var(--e1) var(--e3); background: var(--papel); border: 1.5px solid var(--borde); border-radius: var(--radio); }
.cesta__vino img { height: 112px; width: auto; justify-self: center; filter: drop-shadow(0 6px 5px rgb(50 49 46 / .22)); } /* que se reconozca la etiqueta (DIS-03) */
.cesta__vino label { display: grid; font-weight: 600; }
.cesta__nombre { font-family: var(--titular); font-size: var(--p2); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; }
.cesta__marca { font-size: .875rem; font-weight: 400; color: var(--tinta-suave); }
.cesta__vino--elegido { border-color: var(--hondo); box-shadow: inset 0 -4px 0 var(--amarillo); } /* el mismo gesto que la tarjeta del QR */
.paso { display: flex; align-items: center; gap: .25rem; }
.paso input { width: 4.2rem; min-height: 44px; padding: .4rem; font: inherit; font-weight: 700; text-align: center; color: var(--tinta); background: #FFFFFF; border: 1.5px solid var(--borde-campo); border-radius: 8px; -moz-appearance: textfield; }
.paso input::-webkit-outer-spin-button, .paso input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.paso__b { width: 44px; height: 44px; display: grid; place-items: center; font: inherit; font-size: 1.4rem; line-height: 1; color: var(--hondo); background: var(--papel-alt); border: 1.5px solid var(--borde-campo); border-radius: 50%; cursor: pointer; }
.paso__b:hover { background: var(--amarillo); }
.cesta__resumen:empty { display: none; } /* vacía no ocupa; el nodo sigue ahí y el primer «+» se anuncia (TEC-03) */
.cesta__resumen { margin: var(--e1) 0 0; padding: var(--e1) var(--e2); background: var(--hondo); color: var(--papel); border-radius: 8px; font-weight: 600; }
@media (max-width: 380px) {
  .cesta__vino { grid-template-columns: 3rem 1fr auto; gap: var(--e1); padding: var(--e1); }
  .paso input { width: 3rem; }
}

/* --- mapa al pulsar (cero peticiones a Google al abrir) --- */
.mapa { border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: var(--papel-alt); margin-top: var(--e3); }
.mapa__marco iframe { display: block; width: 100%; height: 380px; border: 0; }
.mapa__texto { padding: var(--e2) var(--e2) 0; margin: 0; }
.mapa__acciones { display: flex; flex-wrap: wrap; gap: var(--e1); padding: var(--e2); }

/* --- pie --- */
.pie { padding: var(--e4) 0 calc(var(--e4) + 64px); background: var(--hondo); color: var(--papel); font-size: var(--p0); }
.pie a { color: var(--papel); }
.pie__rej { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.pie__rej p { margin: .2rem 0; }
.pie__zorro { display: block; width: auto; height: 40px; margin: 0 0 var(--e2); } /* su símbolo, en su dorado */
.pie__enlaces { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.pie__enlaces a { display: flex; align-items: center; min-height: 44px; }
.pie__demo { margin-top: var(--e3); padding-top: var(--e2); border-top: 1px solid rgb(255 254 245 / .2); color: var(--claro-suave); }

/* --- barra fija de abajo, solo en el móvil --- */
.barra-movil { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: var(--hondo); box-shadow: 0 -2px 12px rgb(0 0 0 / .2); }
.barra-movil a { flex: 1; display: flex; align-items: center; justify-content: center; min-height: var(--barra-abajo); color: var(--papel); font-weight: 700; text-decoration: none; }
.barra-movil a + a { border-left: 1px solid rgb(255 254 245 / .25); }
.barra-movil .barra-movil__destacado { background: var(--amarillo); color: var(--hondo); } /* 10,64. «Reservar visita» o «Pedir vino», según la página */

/* Dos columnas de verdad desde 560 px: con auto-fit cabían tres y la cuarta
   tarjeta de «Qué se hace en la bodega» se quedaba sola (diseño, vuelta 2). */
.rejilla-2 { display: grid; gap: var(--e2) var(--e4); grid-template-columns: 1fr; }
.rejilla-2 h3 { margin-top: var(--e2); }
.campos-3 { display: grid; gap: var(--e2); }
.oculto:is(caption) { position: absolute; left: -9999px; }

/* En el móvil las tarjetas de vino van en horizontal: botella a la izquierda.
   Apiladas, tres botellas se comían dos pantallas de la portada. */
@media (max-width: 559px) {
  .entradilla { font-size: var(--p1); } /* a 21 px ocupaba cinco líneas y empujaba la foto fuera de la primera pantalla */
  /* Las tres cifras, en una fila: apiladas eran tres renglones y la portada
     pasó de las 8 pantallas del techo del kit (8,2, motor, vuelta 2) */
  .datos-rapidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e2); }
  .datos-rapidos li { font-size: .9375rem; line-height: 1.4; }
  .datos-rapidos b { font-size: var(--p2); margin-bottom: .2rem; }
  .vinos { gap: 0; }
  .vino-tarjeta { display: grid; grid-template-columns: 5rem 1fr; column-gap: var(--e2); text-align: left; align-items: start; padding: var(--e2) 0; border-top: 1px solid var(--borde); }
  .vino-tarjeta:last-child { border-bottom: 1px solid var(--borde); }
  .vino-tarjeta img { grid-row: 1 / span 6; height: 190px; margin: 0; justify-self: center; }
  .vino-nombre { font-size: var(--p3); }
  .vino-datos { margin: var(--e1) 0; }
  .vino-tarjeta .ir { margin-top: var(--e1); }
}
@media (min-width: 560px) {
  .campos-2, .rejilla-2 { grid-template-columns: 1fr 1fr; }
  .campos-3 { grid-template-columns: repeat(3, 1fr); }
  .partida__foto--botellas img { height: 220px; }
}
@media (max-width: 899px) {
  /* Lo que recibe el foco no puede quedar debajo de la barra fija de abajo: con
     el tabulador, el botón de enviar de los cuatro formularios caía entero
     debajo, y un toque ahí era «Llamar» (QA-01, vuelta 2; WCAG 2.2, 2.4.11) */
  html { scroll-padding-bottom: calc(var(--barra-abajo) + 1rem); }
  /* Menos aire en el móvil donde no hace falta: con la foto en la cabecera la
     portada llegó a 8,1 pantallas (techo del kit: 8). */
  .partida__rej { padding-bottom: var(--e3); }
  .preguntas details { padding: .25rem 0; }
  .panorama { margin-top: var(--e3); }
  .panorama { margin-inline: -1rem; }
  .panorama img { border-radius: 0; }
  .panorama figcaption { padding-inline: 1rem; }
}
@media (min-width: 900px) {
  :root { --barra: 76px; }
  .barra__logo { height: 42px; }
  .barra__acciones { display: flex; }
  .barra-movil { display: none; }
  .seccion { padding: var(--e5) 0; }
  .pie { padding-bottom: var(--e4); }
  /* La cabecera partida: el texto centrado en su mitad, la foto a toda la altura */
  .partida__rej { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". foto" "texto foto" "accion foto" ". foto"; column-gap: var(--e5); padding: 0; min-height: var(--partida-alto, 30rem); }
  .partida__texto { padding-top: var(--e5); }
  .partida__accion { padding-bottom: var(--e5); }
  .partida__accion > .acciones:first-child { margin-top: var(--e3); }
  /* La foto no puede empujar la altura (una vertical de 1400×1867 estiraría la
     cabecera): va absoluta y la altura la marcan el texto y --partida-alto. */
  .partida__foto { position: relative; margin: 0 calc(-1 * max(1rem, (100cqi - 72rem) / 2)) 0 0; }
  .partida__foto:not(.partida__foto--botellas) img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .partida__foto--botellas { align-items: center; padding: var(--e4) var(--e3); }
  .partida__foto--botellas img { height: 300px; }
  .portada { --partida-alto: min(calc(100vh - var(--barra)), 46rem); }
  .dos-col { grid-template-columns: 1fr 1fr; gap: var(--e5); }
  .dos-col--foto-izq figure { order: -1; }
  .vino-tarjeta img { height: 360px; }
  .ficha-vino { grid-template-columns: 22rem 1fr; gap: var(--e5); }
  .ficha-vino__botella { padding: var(--e3) var(--e2); }
  .ficha-vino__botella img { height: 420px; }
  .ficha-vino__botella { position: sticky; top: calc(var(--barra) + 1.5rem); }
}
/* El menú entero, desde 1200 px: con el teléfono y el botón al lado cabe justo
   desde 1160 (13 px de holgura, medido); se deja margen. Entre 900 y 1199 sigue
   el botón «Menú», con los dos botones al lado. */
@media (min-width: 1200px) {
  .nav-escritorio { display: flex; }
  .nav-movil { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  .barra, .barra-movil, .nav-movil, .salto, .formulario, .mapa { display: none !important; }
  * { animation: none !important; opacity: 1 !important; }
  body { background: #fff; }
}

/* Las vías de pedir, separadas del resto del pie (conversión, CRO-03). */
.pie__rotulo { margin: .45rem 0 .1rem; color: var(--claro-suave); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; }

/* La página privada para la bodega (para-la-bodega, 1/10/2026). */
.puertas { display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: var(--e3); }
.puerta { display: flex; flex-direction: column; padding: var(--e3); background: var(--papel); border: 1px solid var(--borde); border-top: 3px solid var(--dorado); border-radius: var(--radio); }
.puerta h3 { margin: 0 0 var(--e1); font-family: var(--titular); font-weight: 400; font-size: var(--p3); line-height: 1.2; }
.puerta p { margin: 0 0 var(--e1); }
.puerta__busca { font-size: var(--p0); font-style: italic; color: var(--oro-hondo); }
.puerta__ir { margin-top: auto !important; padding-top: var(--e1); font-weight: 600; }
.puerta__ir a { display: inline-flex; align-items: center; min-height: 44px; color: var(--oro-hondo); }
.avisos-ejemplo { display: grid; gap: var(--e2); }
.aviso-ejemplo { padding: var(--e2) var(--e3); background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 10px 24px rgb(50 49 46 / .10); }
.aviso-ejemplo__de { margin: 0 0 var(--e1); font-size: var(--p0); font-weight: 700; color: var(--tinta-suave); }
.aviso-ejemplo__sello { margin-left: .4rem; padding: .1rem .5rem; border-radius: 999px; background: var(--hondo); color: var(--amarillo); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.aviso-ejemplo dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem var(--e2); margin: 0; }
.aviso-ejemplo dt { color: var(--tinta-suave); }
.aviso-ejemplo dd { margin: 0; font-weight: 600; }
.tarjeta-mesa { width: min(100%, 20rem); margin-inline: auto; padding: var(--e3); background: var(--hondo); color: var(--papel); border: 1px solid var(--dorado); border-radius: var(--radio); text-align: center; }
.tarjeta-mesa p { margin: 0 0 var(--e1); }
.tarjeta-mesa__marca { letter-spacing: .25em; text-transform: uppercase; font-size: var(--p0); color: var(--dorado); }
.tarjeta-mesa__t { font-family: var(--titular); font-size: var(--p4); line-height: 1.1; }
.tarjeta-mesa__qr { width: min(100%, 13rem); margin: var(--e2) auto; padding: .5rem; background: #fff; border-radius: 8px; }
.tarjeta-mesa__qr svg { display: block; width: 100%; height: auto; }
.tarjeta-mesa__tel { font-weight: 700; }
.microcopia--claro { color: var(--claro-suave); }
.antes-ahora__caja { overflow-x: auto; margin-top: var(--e3); }
.antes-ahora th, .antes-ahora td { padding: var(--e1) var(--e2); vertical-align: top; text-align: left; border-bottom: 1px solid var(--borde); }
.antes-ahora td:first-child { color: var(--tinta-suave); }
.antes-ahora td:last-child { font-weight: 600; }
.cuenta { margin-top: var(--e3); padding: var(--e3); background: var(--papel-alt); border-radius: var(--radio); }
.cuenta input { width: 100%; }
.cuenta__total { margin: var(--e2) 0 0; font-family: var(--titular); font-size: var(--p4); }
@media (max-width: 39.99rem) {
  .antes-ahora thead { position: absolute; left: -9999px; }
  .antes-ahora, .antes-ahora tbody, .antes-ahora tr, .antes-ahora td { display: block; }
  .antes-ahora tr { padding: var(--e1) 0; border-bottom: 1px solid var(--borde); }
  .antes-ahora td { border: 0; padding: .2rem 0; }
  .antes-ahora td:first-child::before { content: "Hoy: "; font-weight: 700; }
  .antes-ahora td:last-child::before { content: "Con esta: "; color: var(--oro-hondo); }
}