/* ============================================================================
   BONOMO & MONTIEL — vinos de autor
   Bodega de alta gama, a pequeña escala y de alta precisión.
   Identidad: la huella dactilar, el verde institucional y el cobre de las
   etiquetas. Sin degradados ajenos a la paleta: negro, hueso, cobre y verde.
   Tipografía: Cormorant Garamond para el discurso, Montserrat para los rótulos.
   ============================================================================ */

:root {
  --negro:        #0C0C0C;
  --carbon:       #161614;
  --grafito:      #23231F;
  --hueso:        #FAF8F6;
  --arena:        #F1EBE3;
  --durazno:      #F5E3DA;
  --blanco:       #FFFFFF;

  --verde:        #44663C;
  --verde-osc:    #32502C;
  --verde-claro:  #6E8F5E;

  --cobre:        #C08B4E;   /* acento sobre fondos oscuros */
  --cobre-claro:  #D9A86A;
  --cobre-osc:    #86561F;   /* acento sobre fondos claros (contraste AA) */

  --tinta:        #1D1D1B;
  --tinta-suave:  #4F4F4A;
  --tinta-tenue:  #67675F;
  --borde:        #E2DBD2;
  --borde-osc:    rgba(255,255,255,.14);

  --ancho:   1240px;
  --trans:   .35s cubic-bezier(.4,0,.2,1);
  --serif:   'Cormorant Garamond', Georgia, serif;
  --sans:    'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--blanco); color: var(--tinta);
  font-family: var(--serif); font-size: 18px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1,h2,h3,h4 { margin: 0; line-height: 1.14; font-weight: 400; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }

/* Rótulos: el único lugar donde entra la sans, siempre espaciada */
.rotulo {
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase; color: var(--cobre-osc);
  margin-bottom: 16px;
}
.oscuro .rotulo, .rotulo.claro { color: var(--cobre); }

/* ---------- Franja verde lateral (firma de la marca) ---------- */
body::before {
  content: ""; position: fixed; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--verde); z-index: 60;
}

/* ---------- Header ---------- */
.cabecera { position: sticky; top: 0; z-index: 50; background: var(--negro); color: #fff; }
.cabecera-int { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 78px; }
.logo-bm { display: grid; justify-items: start; gap: 5px; text-decoration: none; }
.logo-bm img { height: 27px; width: auto; }
.logo-bm span {
  font-family: var(--sans); font-size: .5rem; font-weight: 600;
  letter-spacing: .42em; text-transform: uppercase; color: rgba(255,255,255,.62);
  padding-left: 3px;
}
.nav { display: none; align-items: center; gap: 0; }
.nav a {
  padding: 10px 13px; font-family: var(--sans); font-size: .63rem;
  letter-spacing: .17em; text-transform: uppercase; font-weight: 600;
  color: rgba(255,255,255,.7); text-decoration: none; transition: color var(--trans);
}
.nav a:hover, .nav a.activo { color: #fff; }
.btn-nav {
  margin-left: 8px; padding: 11px 20px; border: 1px solid var(--cobre);
  background: transparent; color: var(--cobre) !important; border-radius: 0;
  transition: background var(--trans), color var(--trans);
}
.btn-nav:hover { background: var(--cobre); color: var(--negro) !important; }
.btn-nav.solido { background: var(--cobre); color: var(--negro) !important; }
.btn-nav.solido:hover { background: var(--cobre-claro); border-color: var(--cobre-claro); }

.menu-btn { display: grid; gap: 5px; padding: 8px; }
.menu-btn span { display: block; width: 24px; height: 1px; background: #fff; }
.nav-movil { display: none; background: var(--negro); padding: 8px 0 24px; }
.nav-movil.abierto { display: block; }
.nav-movil a {
  display: block; padding: 14px 4px; color: rgba(255,255,255,.85); text-decoration: none;
  font-family: var(--sans); font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; font-weight: 600; border-bottom: 1px solid var(--borde-osc);
}
.nav-movil .acciones { display: flex; gap: 10px; margin-top: 18px; }
.nav-movil .acciones a { flex: 1; text-align: center; border-bottom: none; }

/* ---------- Selector de idioma ---------- */
.idioma { display: flex; align-items: center; gap: 2px; margin-left: 12px; padding-left: 12px;
          border-left: 1px solid rgba(250,248,246,.22); }
.idioma a {
  padding: 5px 7px; font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .1em; text-decoration: none; color: rgba(250,248,246,.6);
  transition: color var(--trans);
}
.idioma a:hover { color: var(--hueso); }
.idioma a[aria-current="true"] { color: var(--cobre); }
.nav-movil .idiomas { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px;
                      border-top: 1px solid var(--borde-osc); }
.nav-movil .idiomas a {
  flex: 1; text-align: center; border: 1px solid rgba(250,248,246,.28); border-bottom: none;
  padding: 11px 18px;
}
.nav-movil .idiomas a[aria-current="true"] { border-color: var(--cobre); color: var(--cobre); }
.nav-movil .idiomas span { display: none; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: 1fr; background: var(--negro); color: #fff; }
.hero-foto { aspect-ratio: 4/5; overflow: hidden; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; }
.hero-txt {
  position: relative; overflow: hidden;
  padding: 64px 28px 70px; display: grid; align-content: center;
}
.hero-txt .huella-fondo {
  position: absolute; right: -70px; bottom: -60px; width: min(60%, 330px);
  opacity: .11; pointer-events: none;
}
/* .hero-txt es grid y los items se estiran por defecto: sin height:auto y
   justify-self, la firma se deformaba a lo alto. */
.hero-txt .firma-hero {
  width: min(78%, 360px); height: auto; margin-bottom: 26px;
  align-self: start; justify-self: start;
}
.hero-txt h1 {
  font-family: var(--serif); font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-weight: 300; font-style: italic; color: var(--hueso);
  letter-spacing: .01em; max-width: 16ch;
}
.hero-txt .lugar {
  font-family: var(--sans); font-size: .66rem; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; color: var(--cobre);
  margin-bottom: 22px;
}
.hero-txt .firmas {
  margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--borde-osc);
  font-style: italic; color: rgba(250,248,246,.7); font-size: 1rem;
}
.hero-txt .firmas span { display: block; }
.hero-txt .firmas em { font-style: normal; font-family: var(--sans); font-size: .64rem;
                       letter-spacing: .16em; text-transform: uppercase; color: var(--cobre); }

/* ---------- Cita de marca ---------- */
.cita-marca { text-align: center; padding: clamp(64px,9vw,104px) 26px; background: var(--hueso); }
.cita-marca .monograma { width: 46px; margin: 0 auto 26px; opacity: .8; }
.cita-marca h2 {
  font-family: var(--serif); font-weight: 300; font-style: italic; color: var(--tinta);
  font-size: clamp(1.7rem, 4.6vw, 2.9rem); margin-bottom: 24px; line-height: 1.22;
  max-width: 18ch; margin-left: auto; margin-right: auto;
}
.cita-marca p { max-width: 620px; margin: 0 auto; color: var(--tinta-suave); }

/* ---------- Separadores ondulados (crestas de la huella) ---------- */
.onda { display: block; width: 100%; height: clamp(62px, 8vw, 104px); }

/* ---------- Cabecera de "Nuestros vinos" ---------- */
.portico {
  position: relative; overflow: hidden; background: var(--negro); color: #fff;
  text-align: center; padding: clamp(62px, 9vw, 104px) 26px;
}
.portico .huella-fondo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: min(72vw, 420px); opacity: .09; pointer-events: none;
}
.portico > * { position: relative; z-index: 1; }
.portico h2 {
  font-family: var(--serif); font-weight: 300; color: var(--hueso);
  font-size: clamp(2.2rem, 7vw, 3.8rem); letter-spacing: .04em;
}
.portico .conteo {
  margin-top: 22px; display: inline-flex; gap: 18px; flex-wrap: wrap; justify-content: center;
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: rgba(250,248,246,.6);
}
.portico .conteo b { color: var(--cobre); font-weight: 600; }

/* ---------- Bloques de línea: la foto llega al borde, sin márgenes ---------- */
.linea { background: var(--hueso); color: var(--tinta); }
.linea .caja { display: grid; grid-template-columns: 1fr; align-items: stretch; }
.linea .foto { position: relative; min-height: 340px; }
.linea .foto img { width: 100%; height: 100%; object-fit: cover; }
.linea .txt { padding: clamp(44px, 6vw, 78px) 26px; display: grid; align-content: center; }
.linea h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.9rem, 4.4vw, 2.7rem);
  margin-bottom: 16px; letter-spacing: .01em;
}
.linea .entrada { color: var(--tinta-suave); max-width: 46ch; margin-bottom: 30px; }

/* Ficha de precisión: lo que define a cada línea */
.especificaciones { border-top: 1px solid var(--borde); margin-bottom: 30px; }
.especificaciones div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 12px 0; border-bottom: 1px solid var(--borde);
}
.especificaciones dt {
  font-family: var(--sans); font-size: .6rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue);
}
.especificaciones dd { margin: 0; color: var(--tinta); font-size: 1.02rem; }

/* Las botellas reales, recortadas, alineadas al piso */
.botellas { display: flex; gap: 22px; align-items: flex-end; margin-bottom: 32px; flex-wrap: wrap; }
.botellas figure { margin: 0; text-align: center; }
.botellas img { height: clamp(140px, 20vw, 196px); width: auto; margin: 0 auto 10px;
                filter: drop-shadow(0 16px 22px rgba(0,0,0,.28)); }
.botellas figcaption {
  font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--tinta-tenue); line-height: 1.6;
}

.btn {
  display: inline-block; justify-self: start; padding: 14px 34px;
  font-family: var(--sans); font-size: .64rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  border: 1px solid var(--tinta); color: var(--tinta); transition: all var(--trans);
}
.btn:hover { background: var(--tinta); color: var(--hueso); }

/* Variantes de fondo */
.linea.oscuro { background: var(--negro); color: var(--hueso); }
.linea.oscuro .entrada { color: rgba(250,248,246,.72); }
.linea.oscuro .especificaciones,
.linea.oscuro .especificaciones div { border-color: var(--borde-osc); }
.linea.oscuro .especificaciones dt { color: rgba(250,248,246,.5); }
.linea.oscuro .especificaciones dd { color: var(--hueso); }
.linea.oscuro .botellas figcaption { color: rgba(250,248,246,.55); }
.linea.oscuro .botellas img { filter: drop-shadow(0 18px 26px rgba(0,0,0,.75)); }
.linea.oscuro .btn { border-color: var(--cobre); color: var(--cobre); }
.linea.oscuro .btn:hover { background: var(--cobre); color: var(--negro); }
.linea.arena { background: var(--arena); }
.linea.durazno { background: var(--durazno); }

/* Bloque sin foto: las botellas ocupan el lugar de la imagen */
.linea .vitrina {
  display: grid; place-items: center; padding: clamp(44px,6vw,70px) 26px;
  background: linear-gradient(180deg, rgba(0,0,0,.04), transparent 60%);
}
.linea.oscuro .vitrina { background: radial-gradient(ellipse at center, rgba(192,139,78,.18), transparent 68%); }
.linea .vitrina img { height: clamp(250px, 40vw, 420px); width: auto;
                      filter: drop-shadow(0 26px 40px rgba(0,0,0,.4)); }
.linea .vitrina .duo { display: flex; gap: 26px; align-items: flex-end; }

/* ---------- Testimonio ---------- */
.testimonios { background: var(--hueso); padding: clamp(58px,8vw,90px) 26px; text-align: center; }
.testimonios .comillas { font-family: var(--serif); font-size: 4rem; color: var(--cobre-osc); line-height: .6; }
.testimonios blockquote {
  max-width: 660px; margin: 22px auto 0; font-size: clamp(1.1rem,2.6vw,1.35rem);
  font-style: italic; color: var(--tinta); line-height: 1.6;
}
.testimonios .firma {
  margin-top: 22px; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-tenue);
}

/* ---------- Quiénes somos ---------- */
.equipo { position: relative; padding: clamp(70px,9vw,110px) 26px; }
.equipo > img.fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.equipo::after { content: ""; position: absolute; inset: 0; background: rgba(8,8,8,.62); }
.equipo .tarjeta {
  position: relative; z-index: 1; background: var(--hueso);
  max-width: 1020px; margin: 0 auto; padding: 46px 28px 42px; text-align: left;
}
.equipo h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,4.4vw,2.5rem); margin-bottom: 10px; }
.equipo .sub { color: var(--tinta-suave); max-width: none; margin: 0 0 8px; font-size: 1.06rem; }
.personas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 18px; }
.persona img {
  width: clamp(104px, 30vw, 152px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; object-position: center 20%; filter: grayscale(1);
  margin: 0 auto 14px; transition: filter var(--trans);
}
.persona:hover img { filter: grayscale(0); }
.persona .nom { font-family: var(--serif); font-size: 1.14rem; }
.persona .rol {
  font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cobre-osc); margin-top: 6px;
}

/* ---------- Control de edad ---------- */
.puerta {
  position: fixed; inset: 0; z-index: 999; background: var(--negro);
  display: grid; place-items: center; text-align: center; padding: 32px 24px;
}
.puerta.oculto { display: none; }
.puerta .sello { width: clamp(130px, 30vw, 200px); margin: 0 auto 30px; }
.puerta h2 { font-family: var(--serif); font-weight: 300; color: var(--hueso);
             font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 6px; }
.puerta p { color: rgba(250,248,246,.62); margin-bottom: 28px; }
.puerta .botones { display: flex; gap: 12px; justify-content: center; }
.puerta button, .puerta a.no {
  min-width: 124px; padding: 14px 30px; text-decoration: none;
  font-family: var(--sans); font-size: .66rem; letter-spacing: .2em;
  text-transform: uppercase; font-weight: 600; transition: all var(--trans);
}
.puerta .si { background: var(--cobre); color: var(--negro); border: 1px solid var(--cobre); }
.puerta .si:hover { background: var(--cobre-claro); border-color: var(--cobre-claro); }
.puerta .no { background: transparent; color: rgba(250,248,246,.7); border: 1px solid rgba(250,248,246,.3); }
.puerta .no:hover { background: rgba(250,248,246,.08); }
.puerta .legal { margin-top: 32px; font-size: .74rem; color: rgba(250,248,246,.5);
                 line-height: 1.7; max-width: 450px; }

/* ---------- Autores ---------- */
.autores { display: grid; grid-template-columns: 1fr; gap: 36px; margin-top: 40px; text-align: left; }
.autor { display: grid; grid-template-columns: 1fr; gap: 20px; }
.autor img {
  width: clamp(112px, 30vw, 170px); aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; object-position: center 20%; filter: grayscale(1);
  justify-self: start; transition: filter var(--trans);
}
.autor:hover img { filter: grayscale(0); }
.autor h3 { font-family: var(--serif); font-weight: 400; font-size: 1.5rem; }
.autor .rol {
  font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cobre-osc); margin: 6px 0 14px;
}
.autor p { color: var(--tinta-suave); font-size: .98rem; }
.autor .cita {
  font-style: italic; color: var(--tinta); border-left: 2px solid var(--cobre);
  padding-left: 16px; margin-top: 16px;
}
.cierre-autores {
  margin: 38px 0 0; max-width: none; color: var(--tinta-suave); font-style: italic;
  padding-top: 26px; border-top: 1px solid var(--borde);
}
.sello-gama {
  display: inline-block; align-self: start; margin-bottom: 14px;
  font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .24em;
  text-transform: uppercase; color: var(--negro); background: var(--cobre); padding: 7px 14px;
}
.hero-txt .lema {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: rgba(250,248,246,.78); margin: 12px 0 0;
}
.firma-autor {
  font-family: var(--serif); font-style: italic; color: var(--cobre-osc);
  font-size: 1rem; margin-top: 12px;
}
.carta-autores { background: var(--arena); text-align: center; padding: clamp(58px,8vw,92px) 26px; }
.carta-autores .monograma { width: 44px; margin: 0 auto 22px; opacity: .8; }
.carta-autores blockquote {
  max-width: 68ch; margin: 0 auto; font-family: var(--serif); font-style: italic;
  font-size: clamp(1.1rem, 2.4vw, 1.35rem); line-height: 1.65; color: var(--tinta);
}
.carta-autores .firma-autor { text-align: center; }

/* ---------- Llamada mayorista ---------- */
.llamada {
  position: relative; overflow: hidden; background: var(--negro); color: var(--hueso);
  text-align: center; padding: clamp(58px,8vw,96px) 26px;
}
.llamada .huella-fondo {
  position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
  width: min(56vw, 380px); opacity: .1; pointer-events: none;
}
.llamada > * { position: relative; z-index: 1; }
.llamada h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem,4.4vw,2.5rem); margin-bottom: 14px; }
.llamada p { color: rgba(250,248,246,.72); max-width: 52ch; margin: 0 auto 30px; }
.llamada .botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.llamada .btn { justify-self: center; border-color: var(--cobre); color: var(--cobre); }
.llamada .btn:hover { background: var(--cobre); color: var(--negro); }
.llamada .btn.solido { background: var(--cobre); color: var(--negro); }
.llamada .btn.solido:hover { background: var(--cobre-claro); border-color: var(--cobre-claro); }

/* ---------- Contacto ---------- */
.seccion-contacto { background: var(--hueso); padding: clamp(58px,8vw,92px) 0; }
.contacto-grid { display: grid; grid-template-columns: 1fr; gap: 44px; }
.seccion-contacto h2 {
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.8rem,4.4vw,2.5rem);
  margin-bottom: 14px;
}
.seccion-contacto .entrada { margin-bottom: 30px; }
.campo { margin-bottom: 16px; }
.campo label {
  display: block; font-family: var(--sans); font-size: .58rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-tenue); margin-bottom: 7px;
}
.campo input, .campo textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--borde); background: var(--blanco);
  font: inherit; font-size: .98rem; color: var(--tinta); border-radius: 0;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input:focus, .campo textarea:focus { outline: none; border-color: var(--cobre-osc); }
.dos-campos { display: grid; grid-template-columns: 1fr; gap: 0 18px; }
.contacto-datos { position: relative; }
.contacto-datos .huella-dato {
  position: absolute; right: -10px; top: -14px; width: 132px; opacity: .07; pointer-events: none;
}
.contacto-datos .dato { position: relative; margin-bottom: 26px; }
.contacto-datos .dato h3 {
  font-family: var(--sans); font-size: .58rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--cobre-osc); margin-bottom: 7px;
}
.contacto-datos .dato p, .contacto-datos .dato a { font-size: 1rem; color: var(--tinta); text-decoration: none; }
.contacto-datos .dato a:hover { color: var(--cobre-osc); }

/* ---------- Instagram ---------- */
.instagram { background: var(--hueso); text-align: center; padding: clamp(48px,7vw,74px) 26px; }
.instagram h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem,3.4vw,1.9rem); margin-bottom: 10px; }
.instagram a { color: var(--cobre-osc); font-style: italic; font-size: 1.15rem; text-decoration: none; }
.instagram a:hover { text-decoration: underline; }

/* ---------- Footer ---------- */
.pie { background: var(--verde); color: rgba(255,255,255,.9); padding: clamp(50px,7vw,72px) 0 26px; }
.pie-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.pie .huella-pie { width: 84px; opacity: .92; }
.pie h4 { font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .2em;
          text-transform: uppercase; margin-bottom: 14px; color: #fff; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { text-decoration: underline; }
.pie .datos { font-style: italic; font-size: 1rem; line-height: 1.9; }
.pie-lineas { display: grid; gap: 9px; }
.pie-lineas a { font-style: italic; font-size: 1rem; }
.news { display: grid; gap: 10px; max-width: 340px; }
.news input { padding: 13px 14px; border: none; font-family: var(--serif); font-size: 1rem; background: #fff; }
.news button {
  padding: 13px 20px; background: var(--negro); color: #fff;
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; transition: background var(--trans);
}
.news button:hover { background: var(--verde-osc); }
.pie .cierre { text-align: center; margin-top: 46px; }
.pie .cierre img { width: 120px; margin: 0 auto 12px; opacity: .95; }
.pie .legal {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.22);
  text-align: center; font-size: .8rem; color: rgba(255,255,255,.86); line-height: 1.75;
}

/* ---------- Páginas de línea ---------- */
.cabezal { background: var(--negro); color: var(--hueso); text-align: center;
           padding: clamp(56px,8vw,88px) 26px; position: relative; overflow: hidden; }
.cabezal .huella-fondo { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
                         width: min(70vw,380px); opacity: .09; }
.cabezal > * { position: relative; z-index: 1; }
.cabezal h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,5.6vw,3.2rem); margin-bottom: 18px; }
.cabezal p { max-width: 620px; margin: 0 auto; color: rgba(250,248,246,.74); }

.vinos { display: grid; gap: 0; }
.vino { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center;
        padding: clamp(44px,6vw,64px) 0; border-bottom: 1px solid var(--borde); }
.vino:last-child { border-bottom: none; }
.vino .botella { display: grid; place-items: center;
                 background: radial-gradient(ellipse at center, rgba(192,139,78,.12), transparent 66%); }
.vino .botella img { max-height: 340px; width: auto; filter: drop-shadow(0 20px 30px rgba(0,0,0,.25)); }
.vino h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(1.7rem,4.4vw,2.4rem); margin-bottom: 6px; }
.vino .varietal {
  font-family: var(--sans); font-size: .62rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cobre-osc); margin-bottom: 20px;
}
.ficha { display: grid; gap: 0; }
.ficha .fila { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.ficha .fila:last-child { border-bottom: none; }
.ficha dt { font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .2em;
            text-transform: uppercase; color: var(--tinta-tenue); }
.ficha dd { margin: 0; color: var(--tinta); }
h3.nota-autor {
  font-family: var(--sans); font-size: .6rem; font-weight: 600; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cobre-osc); margin: 30px 0 10px;
}
.vino h3.nota-autor + p { color: var(--tinta-suave); font-size: .96rem; }

.gracias { text-align: center; padding: 120px 26px; }
.gracias h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2rem,5vw,3rem); margin-bottom: 14px; }
.gracias p { color: var(--tinta-suave); }

/* ============================================================
   ESCRITORIO
   ============================================================ */
@media (min-width: 900px) {
  body::before { width: 46px; }
  body { padding-left: 46px; }
  .nav { display: flex; }
  .menu-btn, .nav-movil { display: none !important; }

  .hero { grid-template-columns: 1.05fr .95fr; min-height: 82vh; }
  .hero-foto { aspect-ratio: auto; }
  .hero-txt { padding: 76px clamp(46px, 5vw, 76px); }

  /* La foto ocupa media pantalla a sangre; el texto respira del otro lado */
  .linea .caja { grid-template-columns: 1fr 1fr; }
  .linea.invertida .foto, .linea.invertida .vitrina { order: 2; }
  .linea .txt { padding: clamp(56px,5.5vw,88px) clamp(40px,4.5vw,68px); }
  .especificaciones div { grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; }

  .personas { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .autores { grid-template-columns: 1fr 1fr; gap: 46px; }
  .contacto-grid { grid-template-columns: 1.1fr .9fr; gap: 66px; }
  .dos-campos { grid-template-columns: 1fr 1fr; }
  .autor { grid-template-columns: 170px 1fr; gap: 24px; align-items: start; }
  .autor img { justify-self: start; }
  .equipo .tarjeta { padding: 56px 50px 50px; }
  .vino { grid-template-columns: 330px 1fr; gap: 60px; }
  .ficha .fila { grid-template-columns: 158px 1fr; gap: 20px; align-items: baseline; }
  .pie-grid { grid-template-columns: auto 1fr auto; gap: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
:focus-visible { outline: 2px solid var(--cobre); outline-offset: 3px; }

/* ============================================================================
   LECTURA EN PANTALLAS CHICAS
   El "vino de autor" del encabezado llegaba a 8 px: ilegible en un teléfono.
   ============================================================================ */
@media (max-width: 600px) {
  .logo-bm span { font-size: .76rem; letter-spacing: .22em; }
  .rotulo { font-size: .74rem; letter-spacing: .2em; }
  .hero-txt .lugar { font-size: .76rem; letter-spacing: .24em; }
  .btn, .btn-nav { font-size: .76rem; letter-spacing: .13em; }
  .nav-movil a { font-size: .82rem; }
  .especificaciones dt, .ficha dt, .campo label { font-size: .72rem; letter-spacing: .14em; }
  .botellas figcaption { font-size: .78rem; letter-spacing: .06em; }
  .hero-txt .firmas em { font-size: .76rem; letter-spacing: .12em; }
  .portico .conteo { font-size: .74rem; letter-spacing: .14em; }
  .vino .varietal, .autor .rol, .persona .rol { font-size: .74rem; letter-spacing: .15em; }
  .contacto-datos .dato h3, .pie h4, h3.nota-autor { font-size: .72rem; letter-spacing: .14em; }
  .testimonios .firma, .sello-gama { font-size: .72rem; letter-spacing: .14em; }
  .pie .legal { font-size: .82rem; }
  .contacto-datos .dato a, .pie a { display: inline-block; padding: 6px 0; }
}


/* ---------- Menú desplegable: más aire en los laterales ----------
   Heredaba el mismo padding que el resto del sitio y en el desplegable
   el texto quedaba pegado a los bordes. */
.nav-movil { padding-left: 34px; padding-right: 34px; }
.nav-movil a { padding-left: 2px; padding-right: 2px; }
.nav-movil .acciones, .nav-movil .idiomas { padding-left: 2px; padding-right: 2px; }
@media (max-width: 380px) {
  .nav-movil { padding-left: 26px; padding-right: 26px; }
}