/* =========================================================================
   VINOS — Chozas Carrascal
   Catálogo por denominación. Maquetación fluida y responsive (sin lienzo 1920px).
   Tipografía fiel al Figma (Cormorant Garamond + Inter), escalada con clamp().
   ========================================================================= */

.vn-page{
  --paper:#f9f7f5;
  --white:#ffffff;
  --ink:#211d18;
  --ink-2:#11100e;
  --gold:#b8924a;
  --gold-2:#8d6b4e;
  --body:#2d2a25;
  --dark:#0d0b08;
  --line:rgba(33,29,24,.14);
  background:var(--paper);
  color:var(--body);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-x:hidden;
}

/* ---- Contenedor y ritmo ---------------------------------------------- */
.vn-wrap{width:100%;max-width:1524px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.vn-sec{padding-block:clamp(64px,10vw,140px);}

/* ---- Tipografía base (reset defensivo frente a estilos globales) ------ */
.vn-overline{
  display:inline-flex;align-items:center;gap:16px;margin:0;
  font-size:13px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold)!important;
}
.vn-overline::before{content:"";width:32px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto;}
.vn-overline--center{justify-content:center;}
.vn-overline--center::after{content:"";width:40px;height:1px;background:currentColor;opacity:.6;flex:0 0 auto;}
.vn-overline--center::before{width:40px;opacity:.6;}
.vn-overline--gold{color:var(--gold)!important;}

.vn-h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:none!important;
  color:var(--ink);font-size:clamp(34px,4.4vw,62px);line-height:1.0;letter-spacing:-0.03em;margin:0;
}
:where(.vn-page) p{font-size:clamp(14px,1.1vw,16px);line-height:1.9;color:var(--body);margin:0;}

/* ---- Imagen + placeholder de ficha ----------------------------------- */
.vn-imgbox{position:relative;width:100%;aspect-ratio:357/476;overflow:hidden;background:#ede9e4;}
.vn-imgbox img{width:100%;height:100%;object-fit:cover;display:block;}
.vn-ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:16px;
  background:repeating-linear-gradient(45deg,#ece7e0 0 11px,#e4ded6 11px 22px);
  border:1px dashed #c9bba8;color:#8c8275;
}
.vn-ph-l{font-size:12px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;}
.vn-ph-d{font-size:14px;font-weight:600;color:#6f6658;}

/* ======================================================================= */
/* 1. HERO                                                                  */
/* ======================================================================= */
.vn-hero{padding-top:clamp(140px,20vh,200px);padding-bottom:clamp(64px,9vw,110px);}
.vn-hero__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,3vw,30px);max-width:1240px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.vn-hero__title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;text-transform:none!important;
  color:var(--ink);font-size:clamp(48px,8vw,100px);line-height:.92;letter-spacing:-0.045em;margin:0;text-wrap:balance;
}
.vn-hero__intro{max-width:620px;font-weight:300;font-size:clamp(14px,1.2vw,15px)!important;line-height:2;color:var(--body);}

/* ======================================================================= */
/* 2. NAVEGACIÓN POR DENOMINACIÓN                                           */
/* ======================================================================= */
.vn-denoms{padding-block:clamp(20px,2.6vw,30px);border-block:1px solid var(--line);background:var(--paper);}
.vn-denoms__list{list-style:none;margin:0 auto;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px clamp(24px,3.4vw,44px);}
.vn-denoms__sep{width:1px;height:11px;background:rgba(33,29,24,.26);}
.vn-denoms__list a{
  font-size:13px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;transition:color .2s ease;
}
.vn-denoms__list a:hover{color:var(--gold);}

/* ======================================================================= */
/* 3–6. BLOQUES DE DENOMINACIÓN                                             */
/* ======================================================================= */
.vn-block--paper{background:var(--white);}
.vn-block--soft{background:var(--paper);}
.vn-block--white{background:var(--white);}

.vn-block__head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:clamp(40px,10vw,204px);margin-bottom:clamp(44px,6vw,76px);
}
.vn-block__head-l{display:flex;flex-direction:column;gap:clamp(18px,2.2vw,26px);max-width:700px;}
.vn-block__lead{max-width:520px;font-weight:300;font-size:clamp(15px,1.2vw,16px)!important;line-height:2.03;}

/* ---- Rejilla de fichas ----------------------------------------------- */
.vn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);}
.vn-grid + .vn-grid{margin-top:clamp(40px,5vw,64px);}
/* Filas incompletas: mantienen el ancho de columna de una rejilla de 4. */
.vn-grid--3{grid-template-columns:repeat(3,1fr);max-width:calc(75% - (clamp(20px,2.4vw,32px) / 4));}
.vn-grid--2{grid-template-columns:repeat(2,1fr);max-width:calc(50% - (clamp(20px,2.4vw,32px) / 2));}
.vn-grid--center{margin-inline:auto;}

.vn-card{display:flex;flex-direction:column;gap:clamp(14px,1.4vw,20px);text-decoration:none;color:inherit;}
a.vn-card .vn-imgbox img{transition:transform .6s cubic-bezier(.2,.7,.2,1);}
a.vn-card:hover .vn-imgbox img{transform:scale(1.04);}
.vn-card__meta{display:flex;flex-direction:column;gap:8px;}
.vn-card__title{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:none!important;
  color:var(--ink);font-size:clamp(26px,2.6vw,34px);line-height:.97;letter-spacing:-0.035em;margin:0;
}
.vn-card__sub{
  font-weight:300;font-size:12px!important;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gold-2);margin:0;line-height:1.4;
}
a.vn-card:hover .vn-card__title{color:var(--gold);}

/* ======================================================================= */
/* 5. ENLACE A CAVAS (oscuro)                                               */
/* ======================================================================= */
.vn-cavas{background:var(--dark);padding-block:clamp(72px,10vw,120px);}
.vn-cavas__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,3vw,30px);max-width:1000px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.vn-cavas__h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:none!important;
  color:#fbf8f1;font-size:clamp(34px,4.4vw,62px);line-height:1.06;letter-spacing:-0.03em;margin:0;
}
.vn-cavas__lead{max-width:640px;font-weight:300;font-size:15px!important;line-height:1.93;color:rgba(251,248,241,.72)!important;}
.vn-cavas__link{
  margin-top:6px;display:inline-flex;align-items:center;
  padding:17px 30px;border:1px solid rgba(251,248,241,.42);
  font-size:13px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:#fbf8f1;text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.vn-cavas__link:hover{background:#fbf8f1;color:var(--dark);border-color:#fbf8f1;}

/* ======================================================================= */
/* 7. CTA FINAL                                                             */
/* ======================================================================= */
.vn-cta{background:var(--paper);padding-top:clamp(72px,10vw,140px);padding-bottom:clamp(88px,12vw,160px);}
.vn-cta__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,3vw,30px);max-width:1100px;margin-inline:auto;padding-inline:clamp(20px,5vw,80px);}
.vn-cta__h2{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:300;text-transform:none!important;
  color:var(--ink);font-size:clamp(32px,4.4vw,62px);line-height:1.06;letter-spacing:-0.03em;margin:0;text-wrap:balance;
}
.vn-cta__btns{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:6px;}
.vn-cta__btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:17px 32px;border:1px solid rgba(33,29,24,.5);
  font-size:13px;font-weight:300;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.vn-cta__btn:hover{background:var(--ink);color:#fbf8f1;border-color:var(--ink);}

/* ======================================================================= */
/* RESPONSIVE                                                               */
/* ======================================================================= */
@media (max-width:1080px){
  .vn-grid{grid-template-columns:repeat(2,1fr);}
  .vn-grid--3,.vn-grid--2{grid-template-columns:repeat(2,1fr);max-width:none;}
  .vn-block__head{flex-direction:column;align-items:flex-start;gap:clamp(20px,4vw,32px);}
  .vn-block__lead{max-width:640px;}
}

@media (max-width:560px){
  .vn-grid,.vn-grid--3,.vn-grid--2{grid-template-columns:1fr;}
  .vn-grid + .vn-grid{margin-top:clamp(28px,8vw,40px);}
  .vn-denoms__list{gap:12px 18px;}
  .vn-denoms__sep{display:none;}
  .vn-denoms__list a{font-size:12px;letter-spacing:.12em;}
}