/*
  Óptica Samara · Aire × Intervalo / Cristal

  Manrope sola, en vino sobre marfil o blanco. La escala tipográfica
  viene del MANUAL_DE_DISENO_WEB.md de la dirección anterior; lo que
  cambió con Cristal —paleta, cabecera, titulares y los tres módulos—
  sale del manual del paquete y de medir sus mockups, no de ojo.
*/

@font-face {
  font-family: Manrope;
  src: url("../recursos/fuentes/Manrope.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
/* Lora salió con la dirección anterior: la identidad Cristal es de Manrope sola. */
:root {
  /*
    Paleta de la dirección Aire × Intervalo / Cristal.

    El vino no cambia: es la marca. El marfil se enfría un punto y la
    tinta se levanta un poco, que es lo que da el aire de la propuesta —
    el beige anterior tiraba a arena y competía con la fotografía.
  */
  --vino: #58171c;
  --marfil: #f7f3ef;
  /* Los filetes de la propuesta: finos y tibios, nunca gris de sistema. */
  --divisor: #d8cbc4;
  --arena: #ddc5af;
  --rosa: #a66c70;
  /* El rosa de marca sobre marfil da 3.5:1 y el texto chico necesita 4.5.
     Este es el mismo tono, oscurecido lo justo para pasar AA. */
  --rosa-texto: #8a4d52;
  --tinta: #302525;
  --blanco: #fff;

  --interfaz: Manrope, Arial, sans-serif;
  /*
    La identidad Cristal es de Manrope sola. El token se conserva porque
    sigue nombrando un registro —el de los titulares, más ligero y
    espaciado— aunque ya no sea una serif: así no hubo que tocar las once
    reglas que lo usan.
  */
  --editorial: Manrope, Arial, sans-serif;

  --ancho: 80rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --hueco: clamp(0.875rem, 2vw, 1.5rem);
  --radio: 0.25rem;
  --toque: 2.75rem;
  --rotulo: 0.14em;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--marfil);
  color: var(--tinta);
  font-family: var(--interfaz);
  font-size: 1rem;
  line-height: 1.55;
  /* Sin esto, una foto ancha deja la página desplazable a los lados en
     móvil, que es el defecto más fácil de colar y el más visible. */
  overflow-x: hidden;
}

/*
  `height: auto` no es decorativo: las fotos llevan width/height en el HTML
  para reservar su espacio y evitar saltos al cargar, pero esos atributos
  cuentan como altura fija y ganan sobre `aspect-ratio`. Sin esto, la foto
  del hero se renderizaba de 960 px de alto dentro de 335 de ancho y se
  veía un recorte vertical del armazón.
*/
img { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--vino);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Quien pide menos movimiento no debería pelearse con la página. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.contenido {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rotulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
}

.editorial { font-family: var(--editorial); line-height: 1.1; }

/* Para lectores de pantalla y nada más. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Saltar la navegación: lo primero que encuentra quien usa teclado. */
.saltar {
  position: absolute; left: var(--margen); top: -4rem; z-index: 60;
  background: var(--marfil); color: var(--vino);
  padding: 0.75rem 1.25rem; font-weight: 600;
  transition: top 0.15s ease;
}
.saltar:focus { top: 0.75rem; }

/* ───────────────────────── Cabecera ───────────────────────── */

/*
  Cabecera · Aire × Intervalo / Cristal.

  La referencia la pide blanca y fina, con un filete de divisor y el
  logotipo en vino. Antes era una franja de vino sólido de lado a lado:
  con el color de marca llenando una barra fija sobre todas las
  pantallas, el sitio dejaba de parecer una óptica.

  EL VINO PASA DE FONDO A TINTA. Se queda donde sí es marca —el
  logotipo y los enlaces— y la superficie se vuelve clara, como en los
  tres mockups.

  El blanco es translúcido y no plano, que es lo único que me permití
  sobre la referencia: la dirección se llama Cristal y el contenido
  cruzando por debajo es lo que lo cuenta. En reposo se ve igual que el
  mockup; solo al desplazarse aparece el material.
*/
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  color: var(--vino);
  /* Piso de opacidad medido: con el armazón vino pasando por detrás, el
     enlace vino todavía pasa AA. Más transparente reprobaba. */
  background: rgb(255 255 255 / 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  border-bottom: 1px solid var(--divisor);
}

/* La refracción del labio: el desenfoque se derrama bajo el filete y se
   apaga. Un corte en seco se lee como capa de Photoshop; el vidrio
   difumina hacia su borde. Es el detalle que más hace. */
.cabecera::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 1.25rem;
  pointer-events: none;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
  mask-image: linear-gradient(to bottom, #000, transparent);
}

/*
  La fila de la cabecera. Recuperada tal cual: el logotipo necesita su
  alto fijo o el SVG se dibuja a su tamaño natural y se come la pantalla.
  `position: relative` la deja por encima del material de cristal.
*/
.cabecera__fila {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
}

/* La firma en minúsculas es más ancha y más baja que la anterior; 2rem de
   alto la deja ópticamente del mismo peso dentro de la barra. */
.cabecera__logo img { height: 2rem; width: auto; }

.menu { display: none; }

@media (min-width: 60rem) {
  .menu {
    display: flex;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: center;
  }
}

/*
  Quien pide menos transparencia en el sistema suele hacerlo porque el
  texto sobre fondos vivos no se le lee. Ahí no hay cristal: blanco
  sólido, que además es exactamente el mockup.
*/
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .cabecera {
    background: var(--blanco);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .cabecera::after { display: none; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cabecera { background: var(--blanco); }
}

.menu a {
  color: var(--vino);
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
  padding-block: 0.5rem;
  border-bottom: 1px solid transparent;
}
.menu a:hover { border-bottom-color: var(--vino); }
.menu a[aria-current="page"] { border-bottom-color: var(--vino); }

.menu__boton {
  display: grid;
  place-items: center;
  width: var(--toque);
  height: var(--toque);
  background: none;
  border: 0;
  color: var(--vino);
  cursor: pointer;
}
.menu__boton svg { width: 1.375rem; height: 1.375rem; }

/* Va DESPUÉS de declarar el botón: con la misma especificidad gana la
   última regla, y puesto antes la hamburguesa se quedaba en escritorio. */
@media (min-width: 60rem) {
  .menu__boton { display: none; }
}

/* Menú de móvil: panel bajo la barra, no pantalla completa. */
.menu--abierto {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  /* El panel es la misma pieza de cristal que la barra, colgando de
     ella: si fuera sólido, al abrirlo el encabezado volvería a ser una
     franja de color. Va más cuajado que la barra porque aquí el texto
     se lee largo, no de reojo. */
  background: rgb(255 255 255 / 0.94);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border-top: 1px solid var(--divisor);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    0 18px 36px -24px rgb(42 32 32 / 0.6);
  padding: 0.5rem var(--margen) 1.25rem;
}
.menu--abierto a {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--divisor);
}

/* ───────────────────────── Portada ───────────────────────── */

/* ───────────────────────── Portada ─────────────────────────

  Dos composiciones del mismo marcado, sin duplicar contenido:

  · Móvil: apilado. Titular, guion, botón y después la foto vertical, que
    es donde el armazón se ve completo. El botón va ANTES de la foto para
    que no haya que desplazarse a buscarlo.

  · Escritorio (≥60rem): la panorámica va a sangre y el texto se superpone
    sobre su tercio izquierdo, que la fotografía deja despejado a
    propósito. El texto se alinea al margen del contenedor, no al borde de
    la pantalla.
*/

.hero {
  position: relative;
  background: var(--marfil);
}

.hero__media,
.hero__media img {
  display: block;
  width: 100%;
}

.hero__texto {
  padding: clamp(2rem, 7vw, 3rem) var(--margen) clamp(1.75rem, 5vw, 2.5rem);
}

/*
  El titular de la propuesta va en Manrope, no en la serif.

  La inclinación es oblicua de navegador sobre Manrope, como indica el
  manual de la dirección: Manrope no trae cursiva propia y una serif
  cursiva —lo que había— pertenece a la dirección anterior.
*/
.hero__titulo {
  font-family: var(--interfaz);
  font-style: oblique 10deg;
  font-weight: 350;
  color: var(--vino);
  font-size: clamp(2.25rem, 9vw, 2.875rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

/* El filete corto va ARRIBA del titular, como en la referencia. */
.hero__regla { margin: 0 0 1.35rem; }

.hero__entrada {
  margin: 1.05rem 0 0;
  color: var(--tinta);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  max-width: 26ch;
}

/* El guion de la marca. Decorativo: va con aria-hidden en el marcado. */
.regla {
  width: 2.375rem;   /* 38 px, dentro del rango del manual */
  height: 2px;
  background: var(--vino);
  border: 0;
  margin: 1.5rem 0 0;
}

.hero__cta {
  margin-top: 1.75rem;
  /* Ancho propio, no de bloque: un botón de borde a borde no se lee como
     una acción sino como una barra. */
  min-height: 3rem;
  padding-inline: 2.5rem;
}

/*
  El cambio es a 60rem y no a las 48rem que sugiere el manual, que lo da
  como punto de partida y pide adelantarlo «si el producto invade la caja
  del titular». A 768 px el 38 % reservado al texto son 292 px y
  «Encuentra tu armazón» se partía en tres renglones. 60rem es además
  donde el menú pasa de hamburguesa a barra completa: un solo cambio de
  composición en vez de dos escalonados.
*/
@media (min-width: 60rem) {
  /*
    La capa cubre toda la foto y centra el texto en vertical; dentro, un
    contenedor del mismo ancho que el resto del sitio mantiene el margen.
  */
  .hero__capa {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    align-content: center;
    pointer-events: none;
  }

  /*
    El texto del hero se mide contra la FOTO, no contra la columna del
    sitio.

    Antes iba dentro del contenedor de 80rem centrado. La foto es a
    sangre completa, así que en cuanto la pantalla pasa de 1280 px la
    columna se centra, el texto se corre a la derecha y el titular —que
    además crece con el ancho— se montaba sobre el armazón. Se veía en
    una pantalla de 1512; en 1440 pasaba raspando.

    Aquí el texto se ancla al margen de la ventana, igual que la foto, y
    así la relación entre los dos no cambia con el tamaño de pantalla.
  */
  .hero__texto {
    width: 100%;
    padding: 0 var(--margen);
    pointer-events: auto;
  }

  .hero__texto > * { max-width: 38%; }

  /*
    En la referencia «Visión con alma» va en UN renglón.

    Con el 38 % que heredó el hero y el cuerpo del manual anterior se
    partía en dos. Se le da su propio ancho —el titular, no el bloque— y
    se baja un punto el cuerpo: medido, entra en una línea desde 1200 px
    y termina justo donde empieza el armazón, sin montarse encima.
  */
  .hero__titulo {
    /*
      El 4.2vw sale de medir la referencia: ahí «Visión con alma» ocupa
      cerca del 31 % del ancho y termina antes del armazón.

      El tope NO es a ojo: midiendo los píxeles de hero-cristal.webp, lo
      oscuro del armazón empieza en el 38.5 % del ancho de la foto. El
      titular se corta en el 35 % de la ventana —menos el margen desde el
      que arranca— y deja tres puntos y medio de aire. Si algún día se
      cambia la fotografía hay que volver a medir ese número.
    */
    font-size: clamp(2.75rem, 4.2vw, 4.25rem);
    line-height: 1.04;
    max-width: calc(35vw - var(--margen));
  }

  /* En escritorio el texto vive sobre la foto: la entrada necesita su
     propio ancho para no partirse en una columna del 38 %. */
  .hero__entrada { max-width: none; }

  .hero__cta {
    display: inline-flex;
    width: auto;
    min-height: 3.25rem;
    margin-top: 2rem;
  }

  .hero__media img {
    /*
      La foto es 2:1. Se deja que mande su proporción hasta un tope de
      alto: en pantallas muy anchas, 2:1 daría un hero de 900 px que
      empuja todo lo demás fuera de la vista.
    */
    max-height: 42rem;
    object-fit: cover;
    /*
      Anclada a la derecha, como en la propuesta. Centrada, el armazón se
      corría hacia la izquierda y el titular le caía encima; el encuadre
      de la foto deja despejado justo el lado del texto.
    */
    object-position: right center;
  }
}


/* ───────────────────────── Botones ───────────────────────── */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--toque);
  padding: 0.75rem 2rem;
  background: var(--vino);
  color: var(--marfil);
  border: 1px solid var(--vino);
  border-radius: var(--radio);
  font-family: var(--interfaz);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.boton:hover { background: #431116; border-color: #431116; }

.boton--contorno {
  background: transparent;
  color: var(--vino);
}
.boton--contorno:hover { background: var(--vino); color: var(--marfil); }

.boton--ancho { width: 100%; }

/* ───────────────────────── Secciones ───────────────────────── */

.seccion { padding-block: clamp(3.5rem, 9vw, 6.5rem); }

/*
  Jerarquía editorial: rótulo pequeño, titular, guion de marca, bajada.
  El guion va como ::after del titular en vez de un <hr> por sección: es
  el mismo gesto de la portada y así no hay que repetirlo en el marcado.
*/
.seccion__rotulo {
  text-align: center;
  color: var(--rosa-texto);
  margin: 0 0 0.875rem;
}
.banda-vino .seccion__rotulo { color: var(--arena); }

.seccion__titulo {
  font-family: var(--editorial);
  /*
    Rectos, no inclinados. En la propuesta la oblicua está reservada a los
    dos enunciados —«Visión con alma» y «Antes de tu visita»—; en el
    mockup de Colección el titular va recto. Usarla en todos los títulos
    la gastaría.
  */
  font-weight: 350;
  color: var(--vino);
  font-size: clamp(2.125rem, 4.5vw, 3.5rem);
  line-height: 1.08;
  margin: 0;
  text-align: center;
}

.seccion__titulo::after {
  content: "";
  display: block;
  width: 2.375rem;
  height: 2px;
  background: currentColor;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto 0;
  opacity: 0.65;
}

.seccion__intro {
  text-align: center;
  max-width: 46ch;
  margin: clamp(1.25rem, 3vw, 1.75rem) auto clamp(2.25rem, 5vw, 3.25rem);
  font-size: clamp(1rem, 1.2vw, 1.0625rem);
  line-height: 1.75;
  color: #4a3b3b;
}

/*
  La tela de terciopelo del kit de marca, bajo una capa del vino de
  marca: sin ella la banda es un rectángulo plano, y con la tela sola el
  tono se va del color oficial.
*/
.banda-vino {
  background:
    linear-gradient(rgba(88, 23, 28, 0.82), rgba(88, 23, 28, 0.82)),
    url("../recursos/fondos/tela-vino.jpg") center / cover no-repeat;
  color: var(--marfil);
}
.banda-vino .seccion__titulo { color: var(--marfil); }
.banda-vino .seccion__intro { color: rgba(247, 239, 230, 0.86); }

/* ───────────────────────── Catálogo ───────────────────────── */

.filtros {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

.filtro {
  min-height: var(--toque);
  padding: 0.625rem 1.75rem;
  border: 1px solid var(--vino);
  border-radius: 999px;
  background: transparent;
  color: var(--vino);
  font-family: var(--interfaz);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
}
.filtro[aria-pressed="true"] { background: var(--vino); color: var(--marfil); }

.malla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--hueco);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Por debajo de 23rem dos columnas dejan nombres ilegibles. */
@media (max-width: 23rem) {
  .malla { grid-template-columns: 1fr; }
}

/*
  De tablet en adelante las columnas se acomodan solas: a 1280 px dos
  columnas dan tarjetas de 600 px, demasiado grandes para un armazón, y
  fijar un número deja huecos en cuanto el inventario crece.
*/
@media (min-width: 48rem) {
  .malla {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: clamp(1.5rem, 3vw, 2.5rem);
  }
}

.tarjeta { display: flex; }

.tarjeta a {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  width: 100%;
  text-decoration: none;
  color: inherit;
}

.tarjeta .foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--blanco);
  transition: opacity 0.15s ease;
}
.tarjeta a:hover .foto { opacity: 0.88; }

.tarjeta__nombre {
  font-family: var(--editorial);
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--vino);
  margin: 0;
  text-align: center;
}

.tarjeta__dato {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--rosa-texto);
  margin: -0.5rem 0 0;
}

/* Hueco cuando el armazón aún no tiene foto en el inventario. */
.foto--vacia {
  display: grid;
  place-items: center;
  background: var(--arena);
  color: var(--vino);
}
.foto--vacia span {
  font-family: var(--editorial);
  font-size: 2.5rem;
  opacity: 0.55;
}

/* ───────────────────────── Estados ───────────────────────── */

.estado {
  text-align: center;
  padding: clamp(2.5rem, 8vw, 5rem) 1rem;
  border: 1px solid var(--arena);
  border-radius: var(--radio);
}
.estado h2 {
  font-family: var(--editorial);
  color: var(--vino);
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}
.estado p { margin: 0 auto 1.5rem; max-width: 42ch; }

.aviso-muestra {
  background: var(--arena);
  color: var(--tinta);
  text-align: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
}

/* ───────────────────────── Ficha ───────────────────────── */

.ficha { padding-block: clamp(1.5rem, 4vw, 3rem); }

.volver {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--toque);
  color: var(--vino);
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
}
.volver:hover { text-decoration: underline; }

.ficha__cuerpo {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 60rem) {
  .ficha__cuerpo { grid-template-columns: 1.15fr 0.85fr; }
}

.ficha .foto {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--blanco);
}

.ficha__nombre {
  font-family: var(--editorial);
  color: var(--vino);
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0 0 0.75rem;
}

.ficha__dato { margin: 0 0 0.35rem; color: var(--rosa-texto); font-size: 0.9375rem; }

.ficha__descripcion { margin: 1.25rem 0 2rem; }

.galeria {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}
.galeria img {
  width: 5.5rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radio);
}

.color {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.75rem;
}
.color__muestra {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(42, 32, 32, 0.2);
}

.nota-consulta {
  font-size: 0.9375rem;
  color: var(--tinta);
  border: 1px solid var(--arena);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
}

/* ───────────────────────── Pie ───────────────────────── */

/*
  En la portada el pie va justo tras la banda vino y su margen superior
  dejaba una franja marfil de 50 px entre dos bloques del mismo color.
*/
main:has(> .banda-vino:last-child) + .pie { margin-top: 0; }

.pie {
  background: var(--vino);
  color: var(--marfil);
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  margin-top: clamp(2.5rem, 7vw, 5rem);
}

/*
  Cuando el pie sigue a una banda del mismo vino, un filete marca dónde
  termina el contenido y empieza la firma. Si el fondo anterior es
  marfil el filete sobra: el cambio de color ya lo dice.
*/
main:has(> .banda-vino:last-child) + .pie .pie__cuerpo {
  border-top: 1px solid rgba(247, 239, 230, 0.16);
  padding-top: clamp(2.5rem, 6vw, 3.5rem);
}

/* Columna centrada: logo, versículo, contacto, firma. */
.pie__cuerpo {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.pie__logo { height: 2.75rem; width: auto; }

.pie a { color: var(--marfil); }

.versiculo {
  font-family: var(--editorial);
  /* Oblicua, no cursiva: Manrope no tiene itálica propia y el navegador
     la sintetizaría. Es la misma inclinación de los enunciados. */
  font-style: oblique 10deg;
  font-size: clamp(1.0625rem, 2vw, 1.25rem);
  line-height: 1.55;
  max-width: 34ch;
  margin: 0;
}
.versiculo p { margin: 0; }

.versiculo cite {
  display: block;
  margin-top: 0.875rem;
  font-family: var(--interfaz);
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
  color: var(--arena);
}

/* Lo único accionable del pie: escribir o llamar. */
.pie__contacto {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 2rem;
  font-size: 0.9375rem;
}
.pie__contacto a {
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 239, 230, 0.35);
  padding-bottom: 2px;
  min-height: 1.75rem;
}
.pie__contacto a:hover { border-bottom-color: var(--marfil); }

.pie__firma {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.25rem;
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
  color: rgba(247, 239, 230, 0.6);
}
.pie__lema { color: var(--arena); }

/* ───────────────────────── Servicios ───────────────────────── */

.contenido--angosto { max-width: 56rem; }

/*
  La única cabecera del sitio alineada al margen, como pide el mockup
  aprobado: la retícula de seis servicios está anclada a la izquierda y un
  encabezado centrado encima se leería como de otra página.
*/
.cabecera-izq {
  text-align: left;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.cabecera-izq .seccion__rotulo,
.cabecera-izq .seccion__titulo { text-align: left; }
.cabecera-izq .seccion__titulo::after { display: none; }
.cabecera-izq .seccion__intro {
  text-align: left;
  margin: 0.875rem 0 0;
  max-width: 44ch;
}

.servicios {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 700 px: dos columnas. 1100 px: tres, que es la retícula del mockup. */
@media (min-width: 43.75rem) { .servicios { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 68.75rem) { .servicios { grid-template-columns: repeat(3, 1fr); } }

/*
  Una línea arena arriba en lugar de una caja: el mockup pide superficie
  marfil continua, sin sombras ni recuadros que la corten.
*/
.servicio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(0.875rem, 2vw, 1.25rem);
  align-items: start;
  border-top: 1px solid var(--arena);
  padding-top: clamp(1rem, 2vw, 1.375rem);
}

.servicio__foto {
  width: clamp(5.125rem, 8vw, 7.25rem);   /* 82–116 px */
  aspect-ratio: 1;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radio);
}

.servicio__nombre {
  font-family: var(--editorial);
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.22;
  color: var(--vino);
  margin: 0 0 0.375rem;
}

.servicio p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #4a3b3b;
}

/* Enlace de acción del final: subrayado propio, no botón. */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  min-height: var(--toque);
  color: var(--vino);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--vino);
  padding-bottom: 0.3125rem;
}
.enlace-flecha span { transition: transform 0.15s ease; }
.enlace-flecha:hover span { transform: translateX(0.25rem); }

/* ───────────────────────── Colección ───────────────────────── */

/*
  Título a la izquierda y enlace a la derecha, alineados por la base: el
  enlace queda a la altura de la línea de introducción, como en el mockup.
  Por debajo de 640 px se apilan y el enlace pasa a ser de ancho propio.
*/
.coleccion__cabecera {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

@media (min-width: 40rem) {
  .coleccion__cabecera {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

.coleccion__cabecera .cabecera-izq { margin-bottom: 0; }

.coleccion__enlace {
  justify-self: start;
  gap: 0.5rem;
  min-height: var(--toque);
  white-space: nowrap;
}
.coleccion__enlace span { transition: transform 0.15s ease; }
.coleccion__enlace:hover span { transform: translateX(0.25rem); }

/* Tres fotos en fila; dos de 640 a 899 px; una por debajo. */
.malla--coleccion {
  grid-template-columns: 1fr;
  gap: clamp(1.75rem, 3vw, 2.25rem) clamp(1.25rem, 2vw, 1.5rem);
}
@media (min-width: 40rem) { .malla--coleccion { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 56.25rem) { .malla--coleccion { grid-template-columns: repeat(3, 1fr); } }

.tarjeta__categoria {
  text-align: center;
  color: var(--rosa-texto);
  margin: -0.375rem 0 0;
}

/*
  Estado de la portada mientras el inventario está vacío. Sin esto la
  sección quedaba con el título arriba y media pantalla de marfil debajo:
  se leía como una página rota, no como un catálogo en preparación.
*/
.coleccion__preparacion {
  display: grid;
  justify-items: center;
  gap: 1.75rem;
  text-align: center;
  padding: clamp(2rem, 5vw, 3rem) 1rem;
  border-top: 1px solid var(--arena);
  border-bottom: 1px solid var(--arena);
}
.coleccion__preparacion p {
  margin: 0;
  max-width: 44ch;
  line-height: 1.75;
  color: #4a3b3b;
}

/* ───────────────────────── Nosotros ───────────────────────── */

.nosotros {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

@media (min-width: 60rem) {
  .nosotros { grid-template-columns: 1fr 0.8fr; }
  /* En dos columnas el texto manda y deja de ir centrado. */
  .nosotros .seccion__rotulo,
  .nosotros .seccion__titulo { text-align: left; }
  .nosotros .seccion__titulo::after { margin-inline: 0; }
}

.nosotros__texto p {
  line-height: 1.8;
  color: rgba(247, 239, 230, 0.88);
  max-width: 46ch;
}
.nosotros__texto > p:first-of-type { margin-top: clamp(1.5rem, 3vw, 2rem); }

.nosotros__años {
  color: var(--arena) !important;
  font-family: var(--editorial);
  font-style: oblique 10deg;
  font-size: 1.0625rem;
}
.nosotros__años strong { font-style: normal; letter-spacing: 0.02em; }

.nosotros__foto {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radio);
}

/* ───────────────────────── Preguntas ───────────────────────── */

/*
  Texto y foto, 55/45. La foto se alinea con la parte de arriba de la
  cabecera, no con el centro del bloque: así el detalle de la bisagra
  queda a la altura del titular, como en el mockup.
*/
.faq {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 51.25rem) {
  .faq { grid-template-columns: 55fr 45fr; }
}

.faq__foto {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  /*
    Recorte hacia la derecha-arriba: ahí está la bisagra, que es el
    motivo de la foto. Centrado, el encuadre se la come.
  */
  object-position: 62% 40%;
  border-radius: var(--radio);
}

.preguntas { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.pregunta { border-top: 1px solid var(--arena); }
.pregunta:last-child { border-bottom: 1px solid var(--arena); }

.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--toque);
  padding: 1.125rem 0;
  cursor: pointer;
  font-family: var(--editorial);
  font-size: clamp(1.0625rem, 1.8vw, 1.3125rem);
  line-height: 1.3;
  color: var(--vino);
  list-style: none;              /* quita el triángulo nativo */
}
.pregunta summary::-webkit-details-marker { display: none; }

/*
  El signo va en un span con aria-hidden y el carácter lo pone el CSS:
  así ningún lector de pantalla lee «más» antes de cada pregunta. El
  estado abierto/cerrado ya lo anuncia <details> por su cuenta.
*/
.pregunta__signo {
  flex: none;
  width: 1.25rem;
  text-align: center;
  font-family: var(--interfaz);
  font-size: 1.375rem;
  font-weight: 400;
  line-height: 1;
}
.pregunta__signo::before { content: "+"; }
.pregunta[open] .pregunta__signo::before { content: "\2212"; }  /* − real, no guion */

.pregunta p {
  margin: 0;
  padding-bottom: 1.375rem;
  line-height: 1.75;
  color: #4a3b3b;
  max-width: 58ch;
}

/* ───────────────────────── Contacto ───────────────────────── */

#contacto { padding-bottom: clamp(2.5rem, 6vw, 4rem); }

#contactoPrincipal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.contacto__accion {
  background: var(--marfil);
  color: var(--vino);
  border-color: var(--marfil);
  min-height: 3.25rem;
  padding-inline: 2.25rem;
}
.contacto__accion:hover {
  background: var(--arena);
  border-color: var(--arena);
  color: var(--vino);
}

.contacto__dato {
  display: grid;
  gap: 0.375rem;
  justify-items: center;
  text-align: center;
  text-decoration: none;
  margin: 0;
}
.contacto__dato .rotulo { color: var(--arena); }

.contacto__valor {
  font-family: var(--editorial);
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  color: var(--marfil);
}
a.contacto__dato:hover .contacto__valor { text-decoration: underline; }

/* ───────────────────────── Agendar ───────────────────────── */

.agenda {
  display: grid;
  gap: 1.25rem;
  text-align: left;
  max-width: 44rem;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 40rem) {
  .agenda { grid-template-columns: 1fr 1fr; }
  .agenda__campo--ancho,
  .agenda__pie,
  .agenda__estado { grid-column: 1 / -1; }
}

.agenda__campo { display: grid; gap: 0.5rem; }

.agenda label,
.agenda legend {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--rotulo);
  text-transform: uppercase;
  color: var(--arena);
}
.agenda label span { text-transform: none; letter-spacing: 0; opacity: 0.75; }

.agenda input[type="text"],
.agenda input[type="tel"],
.agenda input[type="date"],
.agenda textarea {
  width: 100%;
  min-height: var(--toque);
  padding: 0.75rem 0.875rem;
  background: rgba(247, 239, 230, 0.08);
  border: 1px solid rgba(247, 239, 230, 0.35);
  border-radius: var(--radio);
  color: var(--marfil);
  font-family: var(--interfaz);
  font-size: 1rem;      /* menos de 16px y iOS hace zoom al enfocar */
}
.agenda textarea { resize: vertical; }

.agenda input:focus-visible,
.agenda textarea:focus-visible {
  outline: 2px solid var(--marfil);
  outline-offset: 1px;
}

/* El selector de fecha nativo pinta su icono en negro sobre el vino. */
.agenda input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.7;
  cursor: pointer;
}

.agenda__franja {
  border: 0;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
}
.agenda__franja label {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--toque);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--marfil);
}
.agenda__franja input { accent-color: var(--arena); width: 1.125rem; height: 1.125rem; }

/* Fuera de la vista pero no con display:none: hay robots que lo detectan. */
.agenda__trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.agenda__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 0.5rem;
}
.agenda__pie button:disabled { opacity: 0.6; cursor: progress; }

.agenda__aviso {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(247, 239, 230, 0.7);
  max-width: 34ch;
}

.agenda__estado {
  margin: 0;
  min-height: 1.5rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.agenda__estado[data-tipo="error"] { color: #f3c9c0; }
.agenda__estado[data-tipo="bien"] { color: var(--arena); font-weight: 600; }
.agenda__estado[data-tipo="esperando"] { color: rgba(247, 239, 230, 0.75); }

/* ───────────────────────── Visítanos ───────────────────────── */

.visitanos {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  text-align: left;
  align-items: start;
}

@media (min-width: 51.25rem) {
  .visitanos { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

.visitanos__datos {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
  align-content: start;
}

.visitanos__dato .rotulo {
  color: var(--arena);
  margin: 0 0 0.625rem;
}

.visitanos__direccion {
  margin: 0 0 1rem;
  font-family: var(--editorial);
  font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
  line-height: 1.5;
  max-width: 30ch;
}

/* El enlace de acción en marfil, para la banda vino. */
.enlace-flecha--claro {
  margin-top: 0;
  color: var(--marfil);
  border-bottom-color: rgba(247, 239, 230, 0.5);
  font-size: 0.9375rem;
}
.enlace-flecha--claro:hover { border-bottom-color: var(--marfil); }

.horario {
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.9375rem;
}
.horario > div {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  max-width: 22rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(247, 239, 230, 0.15);
}
.horario dt { color: rgba(247, 239, 230, 0.75); }
.horario dd { margin: 0; font-weight: 600; }

.visitanos__medios {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
}
.visitanos__medios a {
  display: inline-flex;
  align-items: center;
  min-height: var(--toque);
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 239, 230, 0.4);
}
.visitanos__medios a:hover { border-bottom-color: var(--marfil); }

/*
  El mapa es de Google y carga con `loading="lazy"`: nadie que no baje
  hasta aquí carga nada suyo.
*/
.visitanos__mapa {
  width: 100%;
  min-height: 18rem;
  height: 100%;
  border: 0;
  border-radius: var(--radio);
  /* Sobre fondo vino, el mapa claro de Google salta demasiado. */
  filter: saturate(0.85) contrast(0.95);
}

/* Respaldo por WhatsApp cuando la cita no se pudo registrar. */
.agenda__respaldo { grid-column: 1 / -1; justify-self: start; margin-top: 0.25rem; }

/* ───────── Colección · Aire × Intervalo / Cristal ───────── */

/*
  La referencia centra el bloque: etiqueta, título, guion y filtros, con
  las tres fotos debajo. Antes era una cabecera a dos columnas con el
  botón a la derecha; ese botón baja al pie de la sección para no competir
  con los filtros, que son la acción nueva.
*/
.coleccion__cristal { text-align: center; }

.coleccion__etiqueta {
  margin: 0 0 0.85rem;
  color: var(--vino);
}

.coleccion__titulo {
  margin: 0;
  font-family: var(--interfaz);
  font-weight: 350;
  letter-spacing: 0.08em;
  line-height: 1.1;
  color: var(--vino);
  font-size: clamp(2.3rem, 5.1vw, 4.25rem);
}

/* El guion va centrado bajo el título, como en el mockup. */
.coleccion__regla { margin: 1.1rem auto 0; }

.coleccion__filtros {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 1.75rem 0 2.2rem;
}

.coleccion__filtros button {
  min-height: var(--toque);
  border: 1px solid var(--divisor);
  border-radius: 99px;
  background: transparent;
  color: var(--vino);
  padding: 0.3rem 1.35rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

/*
  El estado va en aria-pressed, y el color lo sigue. Así el filtro
  elegido se anuncia aunque no se vea el relleno.
*/
.coleccion__filtros button[aria-pressed="true"] {
  background: var(--vino);
  border-color: var(--vino);
  color: var(--blanco);
}

.coleccion__pie { margin: clamp(2rem, 4vw, 3rem) 0 0; text-align: center; }

.coleccion__vacio {
  margin: 0;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
  text-align: center;
  color: var(--tinta);
}

/* El guion bajo el nombre sustituye a la etiqueta de categoría: en la
   referencia la tarjeta es foto, nombre y guion, sin más. */
.malla--coleccion .tarjeta__nombre::after {
  content: "";
  display: block;
  width: 1.4rem;
  height: 1px;
  margin: 0.75rem auto 0;
  background: var(--vino);
}

/* ───────── Visita · Aire × Intervalo / Cristal ───────── */

/*
  Panel claro a la izquierda y fotografía a la derecha, como en la
  referencia. En móvil se apila con el texto arriba.

  La reja tolera que la foto no exista: en producción la fachada se
  quita por ser una visualización de marca, y entonces el texto ocupa
  la fila completa en vez de dejar media sección vacía.
*/
.visita__reja {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.visita__titulo {
  margin: 0;
  font-family: var(--interfaz);
  font-style: oblique 10deg;
  font-weight: 350;
  line-height: 1.1;
  color: var(--vino);
  font-size: clamp(2.1rem, 3.65vw, 3.5rem);
}

.visita__lista {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

/* Filetes finos entre renglones, no tarjetas: la propuesta evita bordes
   pesados y sombras. */
.visita__lista li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--divisor);
  font-size: 1.0625rem;
}
.visita__lista li:last-child { border-bottom: 1px solid var(--divisor); }

.visita__cta { margin-top: 0.5rem; }

.visita__foto {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  /* Sin cortar el rótulo: la firma vive en la parte alta de la fachada. */
  object-position: center top;
}

@media (min-width: 60rem) {
  /* Con foto, dos columnas; sin ella, `auto-fit` colapsa a una sola y el
     texto no se queda flotando en media sección. */
  .visita__reja {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  }
  .visita__reja:not(:has(.visita__foto)) {
    grid-template-columns: minmax(0, 36rem);
  }
  .visita__texto { padding-inline-end: clamp(1rem, 4vw, 3rem); }
}