:root {
  --red: #b51612;
  --text: #161616;
  --paper: #fff;
  --line: #ececec;
  --nav-height: 72px;
  --content-width: 1120px;
  --section-gap: clamp(72px, 9vw, 150px);
  --piece-gap: clamp(34px, 5vw, 80px);
  --menu-width: clamp(160px, 17vw, 250px);
  --section-title-width: clamp(84px, 10.5vw, 150px);
  --arrow-width: clamp(38px, 4.8vw, 66px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--text); font-family:Arial,Helvetica,sans-serif; }
img { display:block; max-width:100%; height:auto; }
a { color:inherit; }

/* FIXED TOP NAV */
.site-nav { position:sticky; top:0; z-index:50; height:var(--nav-height); background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; padding:0 clamp(18px,3vw,42px); }
.site-nav__logo img { width:74px; }
.site-nav__links { display:flex; gap:clamp(16px,2.6vw,34px); align-items:center; }
.site-nav__links a { text-decoration:none; font-size:12px; font-weight:700; letter-spacing:.12em; padding:8px 0; border-bottom:2px solid transparent; }
.site-nav__links a:hover,.site-nav__links a.is-active { color:var(--red); border-color:var(--red); }

/* Boton hamburguesa: solo existe bajo 760px */
.site-nav__toggle { display:none; }


/* GENERIC SECTION SYSTEM */
.section { scroll-margin-top:calc(var(--nav-height) + 18px); padding:var(--section-gap) 24px; }
.section__inner { width:min(100%,var(--content-width)); margin:0 auto; }
.section__head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:clamp(54px,8vw,110px); }
.section__back img { width:var(--arrow-width); }
.section__title img { width:var(--section-title-width); }


/* COVER + INITIAL MENU */
.cover { min-height:calc(56vh - var(--nav-height)); display:grid; place-items:center; padding:30px 24px 20px; }
.cover img { width:clamp(120px,18vw,240px); }
.initial-menu { padding:clamp(20px,2.6vw,38px) 24px clamp(70px,9vw,130px); display:flex; align-items:center; }
.initial-menu__list { width:min(100%,680px); margin:0 auto; display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(24px,3.2vw,44px); }
.initial-menu__item { display:block; width:var(--menu-width); margin:0 auto; transition:transform .18s ease,opacity .18s ease; }
.initial-menu__item:hover { transform:translateX(8px) scale(1.015); opacity:.84; }
.initial-menu__item img { width:100%; }

/* CIERRE */
.closing { padding:0 24px var(--section-gap); display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(34px,5vw,70px); }
.closing__photo { width:min(100%,var(--content-width)); }
.closing__logo { width:clamp(140px,17vw,230px); }

/* piezas verticales y el ITATA grande */
.w-portrait { width:min(100%,520px); }
.w-itata { width:min(100%,496px); }

/* HOW + SOUND: flujo de piezas sueltas */
.flow { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--piece-gap); justify-items:center; width:100%; }
.flow > .duo, .flow > .figure, .flow > .stack-tight { width:100%; }
/* Pieza que ademas es enlace a una pagina propia.
   La senal es la flecha de la marca (espejada) mas la palabra MORE:
   es permanente, no depende del hover, porque en celular no hay hover. */
.flow > a.piece-link { display:flex; align-items:center; justify-content:center;
  gap:clamp(10px,1.8vw,28px); width:min(100%,var(--content-width)); text-decoration:none; }
.piece-link__art { flex:0 1 auto; min-width:0; width:min(100%,840px); }
.piece-link__cue { flex:0 0 auto; display:flex; align-items:center; gap:clamp(4px,.7vw,9px); }
.piece-link__arrow { width:clamp(32px,4vw,56px); transform:scaleX(-1);
  transition:transform .2s ease; }
.piece-link__word { font-family:'Kalam','Segoe Print','Bradley Hand',cursive; font-weight:700;
  font-size:clamp(13px,1.15vw,17px); letter-spacing:.06em; color:var(--red); white-space:nowrap; }
.flow > a.piece-link:hover .piece-link__arrow { transform:scaleX(-1) translateX(5px); }
.flow > a.piece-link:hover .piece-link__art { opacity:.82; }
.flow > a.piece-link:active .piece-link__art { opacity:.7; }
.flow > a.piece-link:active .piece-link__arrow { transform:scaleX(-1) translateX(8px); }
.flow > a.piece-link:focus-visible { outline:2px solid var(--red); outline-offset:6px; }
/* Anchos: siempre min(100%, X) para que nunca desborden el contenedor. */
.w-sm  { width:min(100%,560px); }
.w-md  { width:min(100%,700px); }
.w-lg  { width:min(100%,840px); }
.w-xl  { width:min(100%,930px); }
.w-full{ width:min(100%,var(--content-width)); }
.framed { border:1px solid rgba(181,22,18,.5); padding:6px; background:#fff; }
.flow > img.flourish { width:min(100%,clamp(210px,26vw,340px)); }

.figure { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(12px,1.6vw,22px); margin:0; }
.figure figcaption { display:flex; justify-content:center; width:100%; }
.cap-lg { width:min(100%,640px); }
.cap-md { width:min(100%,520px); }

.duo { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(24px,3.4vw,56px); align-items:center; justify-items:center; }
.duo img:first-child { width:min(100%,705px); }
.duo img:last-child  { width:min(100%,602px); }

/* pareja con menos aire entre sí que el resto del flujo */
.stack-tight { display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:clamp(16px,2vw,30px); }

/* WINES */
/* Los tres recuadros de clasificacion: en fila en escritorio, apilados en celular.
   Antes era una sola imagen plana de 2249px y en el telefono las variedades
   entre parentesis quedaban en unos 4px. */
.clasif-grid { display:grid; grid-template-columns:1fr 1fr 2.1fr; gap:clamp(14px,2.4vw,34px);
  align-items:center; width:min(100%,var(--content-width)); }
.clasif-grid img { width:100%; }
/* Las cuatro etiquetas Village: cuatro en fila en escritorio, dos filas en celular.
   Antes era una sola imagen plana y en el telefono el texto quedaba ilegible. */
.village-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.6vw,22px); width:min(100%,var(--content-width)); align-items:start; }
.village-grid img { width:100%; }

.wines-flow { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--piece-gap); justify-items:center; }
/* foto con firma manuscrita al costado (My son Diego 2001) */
/* foto centrada, con la firma manuscrita justo debajo y pegada a su borde derecho */
.signed { display:flex; flex-direction:column; align-items:center; gap:clamp(6px,1vw,14px); width:min(100%,var(--content-width)); margin:0 auto; }
.signed__photo { width:100%; }
.signed figcaption { align-self:flex-end; }
.signed__note { width:clamp(130px,19vw,230px); }

.cru-links { scroll-margin-top:calc(var(--nav-height) + 28px); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:clamp(12px,2vw,26px); margin:clamp(44px,6vw,76px) auto 20px; max-width:940px; }
.cru-link { display:flex; align-items:center; justify-content:center; padding:clamp(10px,1.4vw,16px) clamp(16px,2.2vw,26px); border:1px solid rgba(181,22,18,.22); border-radius:2px; background:#fff; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.cru-link img { height:clamp(24px,2.4vw,34px); width:auto; }
.cru-link:hover { transform:translateY(-3px); border-color:var(--red); box-shadow:0 8px 20px rgba(181,22,18,.14); }
.cru-link:focus-visible { outline:2px solid var(--red); outline-offset:3px; }


/* REVEAL */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease,transform .55s ease; }
.reveal.is-visible { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.initial-menu__item{transition:none}.cru-link{transition:none}.cru-link:hover{transform:none}.site-nav__toggle span{transition:none}.site-nav__links.is-open{animation:none}.piece-link__arrow{transition:none}.flow > a.piece-link:hover .piece-link__arrow{transform:scaleX(-1)} }

/* MOBILE */
@media (max-width:760px) {
  :root { --nav-height:64px; --section-gap:66px; }
  .site-nav { padding-inline:16px; }
  .site-nav__logo img { width:60px; }
  /* El menu pasa a hamburguesa: antes se salia de la pantalla y obligaba a
     desplazar la barra de lado. */
  .site-nav__toggle { display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:36px; padding:0; border:0; background:none; cursor:pointer; }
  .site-nav__toggle span { display:block; width:26px; height:2px; margin-inline:auto;
    background:var(--text); border-radius:2px; transition:transform .22s ease, opacity .16s ease; }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .site-nav__toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .site-nav__toggle:focus-visible { outline:2px solid var(--red); outline-offset:3px; border-radius:3px; }

  .site-nav__links { display:none; position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:0 12px 26px rgba(0,0,0,.08);
    padding:4px 0; gap:0; }
  .site-nav__links.is-open { display:grid; animation:navAbre .2s ease; }
  .site-nav__links a { font-size:13px; letter-spacing:.16em; padding:15px 20px; border-bottom:0; }
  .site-nav__links a.is-active { color:var(--red); background:rgba(181,22,18,.05); }
  @keyframes navAbre { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .section { padding-inline:18px; }
  .closing { padding-inline:18px; }
  .section__head { margin-bottom:48px; }
  .duo { grid-template-columns:1fr; }
  .village-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
  /* En celular los pies llenan la columna, asi que la frase mas corta quedaba
     con letras mas grandes que su pareja. Este tope la iguala. */
  .cap-pareja { width:min(80%,520px); }
  .clasif-grid { grid-template-columns:minmax(0,1fr); gap:26px; justify-items:center; }
  .clasif-grid img { width:min(100%,420px); }
  .flow > a.piece-link { flex-direction:column; align-items:flex-end; gap:8px; }
  .piece-link__art { width:100%; }
}