/* ============================================================
   Juan Martín Del Potro Wines — hoja de estilo única
   Sistema de marca: Andes Growers · Malbec 2023 · Línea Ícono
   ============================================================ */

:root{
  --naranja:#A36C36;      /* naranja institucional — acento y línea vertical */
  --verde:#45463E;        /* verde institucional — fondo oscuro principal */
  --verde-osc:#3B3C35;    /* verde profundo — hero, pie */
  --verde-claro:#4C4D44;  /* hover de tarjetas oscuras */
  --roca:#48453B;
  --gris-polvo:#767368;   /* solo sobre marfil */
  --oliva:#777C6A;        /* solo sobre marfil */
  --marfil:#F2F0D8;       /* fondo claro */
  --marfil-hover:#EAE8CE; /* hover de tarjetas claras */
  --neblina:#D8D8D6;      /* texto secundario sobre fondo oscuro */
  --ladrillo:#663328;     /* solo combinado con marfil */
  --texto-marfil:#5C594E; /* texto corrido sobre marfil */
  --linea-clara:rgba(72,69,59,0.18);
  --linea-oscura:rgba(216,216,214,0.14);

  /* ---- Tipografías del Manual de Comunicación ----
     Títulos / headlines / encabezados ....... Waverly CF Bold
     Párrafos, textos largos, subtítulos ..... Minion Variable Concept Regular (interlineado alto)
     Acentos, primera persona, firma ......... Sacre Bleu MVB Regular
     Las tres son de licencia paga. Hasta tener los archivos web (.woff2) van
     sustitutos de Google Fonts elegidos por parecido. Para pasar a las reales:
     declarar los @font-face y cambiar SOLO estas tres variables.            */
  --tipo-titulo:'Jost','Century Gothic','Trebuchet MS',sans-serif;   /* ← Waverly CF Bold */
  --tipo-texto:'Crimson Pro',Georgia,'Times New Roman',serif;        /* ← Minion */
  --tipo-firma:'Caveat','Segoe Script',cursive;                      /* ← Sacre Bleu MVB */
  --tipo-logo:Lusitana,Georgia,serif;                                /* wordmark (logo) */
}

/* ------------------------------------------------------------
   Para pasar a las tipografías licenciadas del manual:
   1. Copiar los .woff2 en assets/fonts/
   2. Descomentar estos @font-face
   3. Cambiar las variables --tipo-titulo / --tipo-texto / --tipo-firma
      por 'Waverly CF' / 'Minion Variable Concept' / 'Sacre Bleu MVB'
   4. Sacar del <link> de Google Fonts las familias sustituidas

@font-face{font-family:'Waverly CF';src:url(../fonts/waverly-cf-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Minion Variable Concept';src:url(../fonts/minion-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Sacre Bleu MVB';src:url(../fonts/sacre-bleu-mvb.woff2) format('woff2');font-weight:400;font-display:swap}
------------------------------------------------------------ */

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--verde);
  color:var(--marfil);
  font-family:var(--tipo-texto);
  font-size:18px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

a{color:var(--naranja);text-decoration:none;transition:color 300ms ease}
a:hover{color:var(--marfil)}
::selection{background:var(--naranja);color:var(--marfil)}
img{max-width:100%}

/* ---------- Animaciones base ---------- */
@keyframes drawline{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes kenburns{from{transform:scale(1.01) translate(0,0)}to{transform:scale(1.09) translate(0,1.5%)}}
@keyframes kenburns-suave{from{transform:scale(1.02)}to{transform:scale(1.14)}}
@keyframes penstroke{from{clip-path:inset(0 100% -20% 0)}to{clip-path:inset(0 0 -20% 0)}}

/* Entrada por bloque (JS) */
.is-reveal{opacity:0;transform:translateY(24px);transition:opacity 560ms cubic-bezier(.22,.61,.36,1),transform 560ms cubic-bezier(.22,.61,.36,1)}
.is-reveal.is-visible{opacity:1;transform:none}

/* Firma manuscrita (JS) */
.is-stroke{clip-path:inset(0 100% -20% 0);transition:clip-path 1900ms cubic-bezier(.32,.72,.3,1)}
.is-stroke.is-drawn{clip-path:inset(0 0 -20% 0)}

/* ---------- Elementos de marca ---------- */
.linea{width:1px;background:var(--naranja);display:block}
.linea--20{height:20px}
.linea--28{height:28px}
.linea--40{height:40px}
.linea--44{height:44px}
.linea--56{height:56px}
.linea--64{height:64px}
.linea--degrade{
  background:linear-gradient(180deg,var(--naranja) 0%,rgba(163,108,54,0.12) 100%);
  transform-origin:top;
  animation:drawline 1100ms cubic-bezier(.22,.61,.36,1) both;
}
.grano{position:absolute;inset:0;background-image:url(../img/grain.png);background-size:180px;opacity:.4;pointer-events:none}
.grano--foto{opacity:.45;mix-blend-mode:overlay}
.grano--fuerte{opacity:.55;mix-blend-mode:overlay}
.grano--medio{opacity:.5}
.grano--45{opacity:.45}
.grano--botella{opacity:.5;mix-blend-mode:overlay}

.epigrafe{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--neblina)}
.epigrafe--claro{color:var(--gris-polvo)}
.epigrafe-fila{display:flex;gap:16px;align-items:center}
.epigrafe-fila--alto{align-items:flex-start}
.epigrafe-fila--alto .linea{flex:none}
.epigrafe-fila--alto .epigrafe{padding-top:2px}

/* ---------- Nav ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px clamp(20px,5vw,64px);
  background:transparent;border-bottom:1px solid transparent;
  transition:background 500ms ease,border-color 500ms ease;
}
.nav__scrim{
  position:absolute;top:0;left:0;right:0;height:190px;pointer-events:none;
  background:linear-gradient(180deg,rgba(43,44,38,.92) 0%,rgba(43,44,38,.6) 34%,rgba(43,44,38,.22) 62%,rgba(43,44,38,0) 100%);
  transition:opacity 500ms ease;opacity:1;
}
.nav.is-fija{background:rgba(59,60,53,.96)}
.nav.is-fija .nav__scrim{opacity:0}

.wordmark{position:relative;color:var(--marfil);text-align:center;line-height:1.2;display:block}
.wordmark:hover{color:var(--marfil)}
.wordmark__nombre{font-family:var(--tipo-logo);font-size:11px;letter-spacing:.3em;white-space:nowrap;text-indent:.3em}
.wordmark__sub{font-family:var(--tipo-logo);font-size:11px;letter-spacing:.6em;margin-top:5px;color:var(--neblina);white-space:nowrap;text-indent:.6em}

.nav__links{position:relative;display:flex;gap:clamp(16px,3vw,40px);font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.nav__links a{color:var(--neblina)}
.nav__links a:hover{color:var(--naranja)}
.nav__links a[aria-current="page"]{color:var(--marfil);border-bottom:1px solid var(--naranja);padding-bottom:3px}

/* ---------- Contenedores ---------- */
.seccion{padding:clamp(80px,13vh,150px) clamp(24px,7vw,120px)}
.seccion--amplia{padding:clamp(90px,15vh,180px) clamp(24px,7vw,120px)}
.seccion--oscura{background:var(--verde)}
.seccion--roca{background:var(--roca)}
.seccion--clara{background:var(--marfil);color:var(--roca)}
.seccion--rel{position:relative;overflow:hidden}
.contenedor{position:relative;max-width:1240px;margin:0 auto}
.pila{display:grid}

.titulo{font-family:var(--tipo-titulo);font-weight:600;letter-spacing:-.005em;overflow-wrap:break-word;margin:0}
.titulo--h1{font-size:clamp(42px,7.4vw,112px);line-height:.96}
.titulo--h2{font-size:clamp(32px,5vw,64px);line-height:1}
.titulo--h3{font-size:clamp(26px,3.4vw,44px);line-height:1.05}

.firma{font-family:var(--tipo-firma);color:var(--naranja);font-size:clamp(24px,2.4vw,32px);line-height:1.4}

/* ============================================================
   INICIO
   ============================================================ */
.hero{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:flex-end;background:var(--verde-osc)}
.hero__marco{position:absolute;inset:0;overflow:hidden}
.hero__foto{
  position:absolute;inset:-3%;
  background-image:url(../img/foto-hero.jpg);background-size:cover;background-position:25% 50%;
  animation:kenburns 26s linear infinite alternate;
}
.hero__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,44,38,.46) 0%,rgba(43,44,38,.42) 38%,rgba(59,60,53,.72) 66%,rgba(69,70,62,.94) 100%)}
.hero__velo--lateral{background:linear-gradient(270deg,rgba(43,44,38,.58) 0%,rgba(43,44,38,.34) 26%,rgba(43,44,38,.08) 52%,rgba(43,44,38,0) 70%)}
.hero__cuerpo{position:relative;width:100%;padding:0 clamp(24px,9vw,160px) clamp(64px,12vh,140px);display:grid;gap:clamp(28px,4vh,48px)}
.hero__linea{height:clamp(96px,16vh,180px)}
.hero__cuerpo--derecha{justify-items:end;text-align:right}
.hero__cuerpo--derecha .hero__datos{justify-content:flex-end}
.hero__cuerpo--derecha .hero__wordmark{max-width:min(660px,88vw)}
.hero__cuerpo--derecha .hero__wordmark-inner{text-align:right}
.hero__cuerpo--derecha .hero__nombre{text-indent:0;margin-right:-.3em}
.hero__cuerpo--derecha .hero__sub{text-indent:0;margin-right:-.72em}
.hero__wordmark{container-type:inline-size;width:100%;max-width:820px}
.hero__wordmark-inner{text-align:center}
.hero__nombre{font-family:var(--tipo-logo);font-size:min(3.9cqw,34px);letter-spacing:.3em;line-height:1.3;white-space:nowrap;text-indent:.3em}
.hero__sub{font-family:var(--tipo-logo);font-size:min(2.1cqw,19px);letter-spacing:.72em;margin-top:14px;color:var(--neblina);white-space:nowrap;text-indent:.72em}
.hero__datos{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(12px,2vw,22px);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--neblina)}
.hero__datos .sep{width:1px;height:12px;background:var(--naranja)}

.manifiesto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:clamp(32px,6vw,90px);align-items:start}
.manifiesto__col{display:grid;gap:22px;min-width:0}
.manifiesto__frase{
  font-family:var(--tipo-firma);font-size:clamp(21px,2.4vw,30px);line-height:1.6;
  color:var(--ladrillo);margin:0;animation:penstroke 2400ms ease-out both;
}
.manifiesto__foto{position:relative;height:clamp(220px,28vh,330px);margin-top:clamp(8px,2vh,20px);
  background-image:url(../img/foto-resiliencia.jpg);background-size:cover;background-position:50% 42%}
.manifiesto__texto{display:grid;gap:clamp(28px,4vw,44px);min-width:0;container-type:inline-size}
.manifiesto__display{font-family:var(--tipo-titulo);font-weight:600;font-size:min(148px,11vw,17cqw);overflow-wrap:break-word;line-height:.92;letter-spacing:-.01em;margin:0}
.manifiesto__bajada{margin:0;font-size:clamp(20px,2vw,26px);line-height:1.75;max-width:30ch;color:var(--roca)}
.manifiesto__parrafo{margin:0;max-width:56ch;color:var(--texto-marfil);font-size:18px;line-height:1.95;padding-left:clamp(0px,6vw,110px)}

.origen{padding:clamp(80px,14vh,160px) clamp(24px,7vw,120px) clamp(90px,16vh,180px)}
.origen__epigrafe{margin-bottom:clamp(36px,6vh,64px)}
.origen__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(0px,3vw,10px);align-items:center}
.origen__foto{position:relative;height:clamp(320px,52vh,540px);background-image:url(../img/foto-atardecer.jpg);background-size:cover;background-position:60% 45%;z-index:2}
.origen__cita{background:var(--roca);padding:clamp(36px,5vw,72px);display:grid;gap:32px;border-left:1px solid var(--naranja)}
.origen__cita p{margin:0;font-family:var(--tipo-texto);font-size:clamp(23px,2.6vw,34px);line-height:1.5;color:var(--marfil)}

.banda{background:#3F4039;border-top:1px solid rgba(163,108,54,.35);border-bottom:1px solid rgba(163,108,54,.35);padding:clamp(26px,5vh,46px) clamp(24px,6vw,80px)}
.banda__inner{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,44px);font-size:clamp(11px,1.1vw,13px);letter-spacing:.34em;text-transform:uppercase;color:var(--neblina)}
.banda__inner .punto{color:var(--naranja)}

.ag{position:relative;overflow:hidden;background:var(--roca)}  /* color entero, sin foto de fondo */
.ag__cuerpo{position:relative;padding:clamp(96px,18vh,210px) clamp(24px,7vw,120px);max-width:1240px;margin:0 auto;display:grid;gap:clamp(44px,7vh,84px)}
.ag__cabecera{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(32px,6vw,90px);align-items:end}
.ag__col{display:grid;gap:22px;min-width:0}
.ag__logo{margin:0;font-size:0;line-height:0}
.ag__logo img{width:min(100%,320px);height:auto;display:block}
.ag__bajada{margin:0;max-width:46ch;font-size:clamp(19px,1.7vw,22px);line-height:1.85;color:var(--marfil)}
.ag__pilares{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:0}
.ag__pilar{box-shadow:0 -1px 0 rgba(216,216,214,.16),-1px 0 0 rgba(216,216,214,.16);background:var(--verde);padding:clamp(26px,3vw,40px);display:grid;gap:14px}
.ag__pilar .num{font-size:11px;letter-spacing:.3em;color:var(--naranja)}
.ag__pilar .nombre{font-family:var(--tipo-titulo);font-size:clamp(20px,2vw,26px);line-height:1.3}
.ag__pie{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(32px,6vw,90px);align-items:center}
.ag__cita{margin:0;padding-left:clamp(20px,3vw,40px);border-left:1px solid var(--naranja);font-family:var(--tipo-texto);font-size:clamp(20px,2.1vw,27px);line-height:1.6;color:var(--marfil)}
.ag__cita footer{margin-top:20px;font-family:var(--tipo-firma);font-size:clamp(20px,2vw,26px);color:var(--naranja)}
.ag__cta{display:grid;gap:18px;justify-items:center;text-align:center}
.ag__cta .rotulo{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--neblina)}
.ag__cta a{font-family:var(--tipo-titulo);font-size:clamp(20px,2vw,28px);letter-spacing:.06em;color:var(--marfil);
  border-bottom:1px solid var(--naranja);padding-bottom:6px}
.ag__cta a:hover{color:var(--naranja)}

.cta{display:grid;gap:clamp(30px,4vh,48px);justify-items:start}
.cta__titulo{font-family:var(--tipo-titulo);font-weight:600;font-size:clamp(38px,6.2vw,84px);line-height:1.05;margin:0;max-width:22ch}
.cta__texto{margin:0;max-width:44ch;color:var(--texto-marfil);padding-left:clamp(0px,8vw,140px)}
.cta__link{font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--ladrillo);border-bottom:1px solid var(--naranja);padding-bottom:8px;padding-left:clamp(0px,8vw,140px)}
.cta__link:hover{color:var(--naranja)}

/* ============================================================
   EL VINO
   ============================================================ */
.vino-hero{position:relative;min-height:100vh;background:var(--verde-osc);display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));align-items:stretch;overflow:hidden}
.vino-hero__foto{position:relative;min-height:min(60vh,520px);overflow:hidden;background:var(--roca);
  background-image:url(../img/foto-juan-botella.jpg);background-size:cover;background-position:50% 28%}
.vino-hero__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,44,38,.28) 0%,rgba(43,44,38,.1) 40%,rgba(43,44,38,.26) 100%)}
.vino-hero__texto{position:relative;display:flex;flex-direction:column;justify-content:center;gap:clamp(26px,4vh,44px);padding:clamp(110px,16vh,180px) clamp(24px,6vw,96px) clamp(60px,10vh,120px)}
.vino-hero__linea{height:clamp(72px,12vh,130px)}
.vino-hero__grupo{display:grid;gap:18px}
.vino-hero__rotulo{font-size:11px;letter-spacing:.34em;text-transform:uppercase;color:var(--neblina)}
.vino-hero__titulo{font-family:var(--tipo-titulo);font-weight:600;font-size:clamp(44px,7vw,118px);overflow-wrap:break-word;line-height:.94;margin:0}
.vino-hero__bajada{margin:0;max-width:40ch;color:var(--neblina)}

.ficha-wrap{gap:clamp(40px,6vh,72px)}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:0 clamp(36px,6vw,90px)}
.ficha__col{display:grid;align-content:start}
.ficha__fila{
  display:grid;grid-template-columns:minmax(140px,36%) 1fr;gap:clamp(14px,2vw,28px);align-items:baseline;
  padding:clamp(14px,1.7vh,20px) 0;border-top:1px solid rgba(72,69,59,.18);
}
.ficha__rotulo{font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--gris-polvo)}
.ficha__dato{font-family:var(--tipo-titulo);font-weight:500;font-size:clamp(18px,1.55vw,23px);letter-spacing:.04em;line-height:1.45}

.vinedo{display:grid;gap:clamp(16px,2.4vh,26px);border-top:1px solid rgba(72,69,59,.25);padding-top:clamp(22px,3vh,34px)}
.vinedo__lista{display:grid;max-width:860px}
.vinedo__fila{
  display:grid;grid-template-columns:64px 1fr auto;gap:clamp(12px,2vw,24px);align-items:baseline;
  padding:13px 0;border-top:1px solid rgba(72,69,59,.12);
}
.vinedo__fila:first-child{border-top:0}
.vinedo__pct{font-family:var(--tipo-titulo);font-weight:600;font-size:19px;color:var(--ladrillo);font-variant-numeric:tabular-nums}
.vinedo__lugar{font-family:var(--tipo-titulo);font-weight:500;font-size:19px;letter-spacing:.03em}
.vinedo__alt{font-size:13px;letter-spacing:.14em;color:var(--gris-polvo);font-variant-numeric:tabular-nums;text-align:right}

.kv{margin:0;border-top:1px solid rgba(72,69,59,.25);padding-top:clamp(20px,3vh,32px)}
.kv img{width:100%;height:auto;display:block;mix-blend-mode:multiply}
.productor{display:grid;gap:16px;justify-items:center;text-align:center;border-top:1px solid rgba(72,69,59,.25);padding-top:clamp(22px,3vh,34px)}
.productor a{display:block;width:100%}
.productor img{width:min(100%,180px);height:auto;display:block;margin:0 auto;opacity:.9;transition:opacity 300ms ease}
.productor a:hover img{opacity:1}

.notas{padding:clamp(20px,4vh,50px) clamp(24px,7vw,120px) clamp(90px,15vh,180px)}
.notas__grid{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr));gap:clamp(44px,7vw,110px)}
.notas__col{display:grid;gap:clamp(20px,3vh,32px);align-content:start;border-top:1px solid rgba(72,69,59,.25);padding-top:clamp(24px,3vh,40px)}
.notas__col p{margin:0;font-size:clamp(26px,2.3vw,36px);line-height:1.6;color:var(--roca)}

.cita-seccion{padding:clamp(96px,17vh,200px) clamp(24px,7vw,120px)}
.cta-vino{padding:clamp(80px,14vh,160px) clamp(24px,7vw,120px)}
.cita-foto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(36px,6vw,90px);align-items:start}
.cita-foto__img{position:relative;height:clamp(300px,50vh,520px);background-image:url(../img/foto-vinedo.jpg);background-size:cover;background-position:48% 35%}
.cita-foto__cita{margin:0;padding-left:clamp(20px,3vw,44px);border-left:1px solid var(--naranja);display:grid;gap:26px}
.cita-foto__cita p{margin:0;font-family:var(--tipo-texto);font-size:clamp(24px,2.8vw,38px);line-height:1.5}

.cta--vino .cta__titulo{font-size:clamp(36px,5.6vw,76px);max-width:20ch}

/* ============================================================
   DÓNDE ENCONTRAR
   ============================================================ */
.cabecera{position:relative;background:var(--verde-osc);padding:clamp(150px,26vh,270px) clamp(24px,7vw,120px) clamp(70px,12vh,130px);overflow:hidden}
.cabecera--botella .cabecera__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);align-items:center;column-gap:clamp(28px,4vw,64px)}
.cabecera__inner{position:relative;max-width:1240px;margin:0 auto;display:grid;gap:clamp(26px,4vh,42px)}
.cabecera__texto{display:grid;gap:clamp(26px,4vh,42px);min-width:0;position:relative;z-index:2}
.cabecera__caja{position:relative;align-self:center;justify-self:center;overflow:hidden;
  width:min(100%,560px);aspect-ratio:3/2;max-width:100%;
  background:url(../img/foto-botella-espejo.jpg) center/cover no-repeat;
  box-shadow:0 30px 60px rgba(24,25,21,.45)}
.cabecera__linea{height:clamp(64px,10vh,110px);animation-duration:1000ms}
.cabecera__bajada{margin:0;max-width:42ch;color:var(--neblina);padding-left:clamp(0px,10vw,180px)}

.bloques{display:grid;gap:clamp(48px,7vh,84px)}
.cava{gap:clamp(40px,6vh,68px)}
.contacto-wrap{gap:clamp(44px,7vh,76px)}
.rubro{display:flex;flex-wrap:wrap;align-items:baseline;gap:clamp(14px,3vw,30px);border-bottom:1px solid rgba(216,216,214,.18);padding-bottom:22px}
.rubro--claro{border-bottom-color:rgba(72,69,59,.2)}
.grupos{display:grid;gap:clamp(34px,5vh,56px)}
.grupo{display:grid;gap:22px;min-width:0}
.grupo__titulo{display:flex;gap:14px;align-items:center}
.grupo__titulo .linea{height:20px}

.locales{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:0}
.local{
  box-shadow:0 -1px 0 var(--linea-oscura),-1px 0 0 var(--linea-oscura);
  background-color:var(--verde);
  background-image:linear-gradient(var(--naranja),var(--naranja));
  background-repeat:no-repeat;background-position:left top;background-size:1px 24px;
  transition:background-size 420ms cubic-bezier(.22,.61,.36,1),background-color 420ms ease;
  padding:clamp(22px,2.4vw,32px);
}
.local:hover{background-size:1px 100%;background-color:var(--verde-claro)}
.local__nombre{font-family:var(--tipo-titulo);font-weight:500;font-size:21px;letter-spacing:.04em}
.local__dir{color:var(--neblina);font-size:17px;margin-top:8px}
.local__zona{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--neblina);margin-top:12px}

.local--claro{
  box-shadow:0 -1px 0 var(--linea-clara),-1px 0 0 var(--linea-clara);
  background-color:var(--marfil);
}
.local--claro:hover{background-size:1px 100%;background-color:var(--marfil-hover)}
.local--claro .local__dir{color:var(--texto-marfil)}
.local__tel{font-size:13px;letter-spacing:.22em;color:var(--ladrillo);margin-top:14px}

.destacados{position:relative;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));gap:0}
.destacado{background:var(--roca);padding:clamp(30px,4vw,52px);display:grid;gap:16px;border-left:1px solid var(--naranja)}
.destacado__dato{color:var(--neblina)}
.destacado__dato--tel{letter-spacing:.18em}
.destacado__tel{color:var(--neblina);border-bottom:1px solid var(--naranja);justify-self:start;padding-bottom:4px}
.destacado__tel:hover{color:var(--naranja)}

.contacto{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(36px,6vw,90px)}
.contacto__col{display:grid;gap:18px;justify-items:start;border-top:1px solid rgba(72,69,59,.25);padding-top:28px}
.contacto__titulo{font-family:var(--tipo-titulo);font-weight:600;font-size:clamp(26px,3.6vw,46px);overflow-wrap:break-word;line-height:1.1;margin:0;max-width:18ch}
.contacto__col p{margin:0;color:var(--texto-marfil);max-width:36ch}
.contacto__tel{font-family:var(--tipo-titulo);font-size:clamp(22px,2.4vw,32px);letter-spacing:.14em;color:var(--ladrillo);border-bottom:1px solid var(--naranja);padding-bottom:6px}
.contacto__tel:hover{color:var(--naranja)}
.contacto__persona{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gris-polvo)}

/* ============================================================
   PIE
   ============================================================ */
.pie{background:var(--verde-osc);padding:clamp(48px,8vh,86px) clamp(24px,7vw,120px);border-top:1px solid rgba(163,108,54,.3)}
.pie__inner{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:36px;align-items:center}
.pie__marca{text-align:center;color:var(--marfil);justify-self:start;line-height:1.2}
.pie__legal{font-size:14px;letter-spacing:.14em;color:var(--neblina);text-align:center}
.pie__ag{justify-self:end;display:grid;gap:10px;justify-items:end;color:var(--neblina)}
.pie__ag:hover{color:var(--neblina)}
.pie__ag img{height:34px;width:auto;display:block;opacity:.88;transition:opacity 300ms ease}
.pie__ag:hover img{opacity:1}

/* ============================================================
   Mobile — revisado a 390 px
   ============================================================ */
@media (max-width:640px){
  body{font-size:17px}
  .nav{gap:10px;padding:14px 18px}
  .wordmark__nombre{font-size:8.5px;letter-spacing:.18em;text-indent:.18em}
  .wordmark__sub{font-size:8.5px;letter-spacing:.42em;text-indent:.42em;margin-top:4px}
  .nav__links{gap:11px;font-size:9px;letter-spacing:.1em;white-space:nowrap}
  .hero__foto{background-image:url(../img/foto-hero-mobile.jpg);background-position:45% 50%}
  .vino-hero__foto{background-position:50% 14%;min-height:min(66vh,560px)}
  .notas__grid{grid-template-columns:1fr}
  .ficha__fila{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .vinedo__fila{grid-template-columns:52px 1fr;gap:10px}
  .vinedo__alt{grid-column:2;text-align:left}
  .pie__inner{grid-template-columns:1fr;gap:28px;justify-items:center}
  .pie__marca,.pie__ag{justify-self:center;justify-items:center}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__foto,.manifiesto__frase,.linea--degrade{animation:none}
  .is-reveal{opacity:1;transform:none;transition:none}
  .is-stroke{clip-path:none;transition:none}
}

@media (max-width:400px){
  .nav{gap:8px;padding:12px 16px}
  .nav__links{gap:9px;font-size:8.5px;letter-spacing:.08em}
}

/* Pantallas muy angostas (iPhone SE y similares): el menú pasa a dos filas */
@media (max-width:345px){
  .nav{flex-direction:column;align-items:center;gap:8px;padding:10px 12px}
  .nav__links{gap:12px;font-size:9px;letter-spacing:.06em}
  .wordmark__nombre{font-size:9px}
  .wordmark__sub{font-size:9px}
}

/* Cabecera de Dónde encontrar en celular: la botella baja al flujo, centrada */
@media (max-width:760px){
  .cabecera--botella .cabecera__inner{grid-template-columns:1fr;justify-items:center}
  .cabecera__caja{width:min(100%,420px);margin-top:clamp(18px,3vh,30px)}
}