/* =========================================================
   ComFuture Gastro Plus — v2
   Reconstrucción total · lenguaje visual nuevo
   Cine documental nocturno + calidez caribeña
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,500&family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- color: noche caribeña ---- */
  --night:   #0F1E1C;   /* fondo dominante, cine documental */
  --night-2: #16302C;   /* panel elevado sobre night */
  --paper:   #FAF5EA;   /* panel claro, cálido */
  --sand:    #F0E6D2;
  --ink:     #14120D;
  --coral:   #D9552E;   /* acento cálido — mango/atardecer */
  --coral-deep:#B4441F;
  --gold:    #C99A3D;   /* acento dorado — arroz con coco / plátano */
  --sea:     #2C7A73;   /* acento frío — mar */
  --line-on-dark: rgba(250,245,234,.18);
  --line-on-light: rgba(20,18,13,.16);

  /* ---- type ---- */
  --f-display: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --f-body: 'Archivo', -apple-system, sans-serif;

  --fs-hero: clamp(2.4rem, 4vw + 1.2rem, 5.6rem);
  --fs-h1:   clamp(2rem, 2.6vw + 1rem, 3.6rem);
  --fs-h2:   clamp(1.6rem, 1.6vw + 1rem, 2.4rem);
  --fs-h3:   clamp(1.2rem, .7vw + 1rem, 1.55rem);
  --fs-body: clamp(1.02rem, .2vw + .95rem, 1.16rem);
  --fs-small: clamp(.85rem, .1vw + .82rem, .95rem);
  --fs-label: clamp(.72rem, .1vw + .7rem, .8rem);

  --container: 1220px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,p,blockquote{ margin:0; }

::selection{ background:var(--coral); color:var(--paper); }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}
:focus-visible{ outline:3px solid var(--sea); outline-offset:3px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }

.section{ padding-block: clamp(3.5rem, 7vw, 7.5rem); position:relative; }
.section--dark{ background:var(--night); color:var(--paper); }
.section--sand{ background:var(--sand); }
.section--paper{ background:var(--paper); }

.label{
  display:inline-block; font-family:var(--f-body); font-size:var(--fs-label);
  font-weight:700; letter-spacing:.03em; color:var(--coral);
  margin:0 0 1em;
}
.section--dark .label{ color:var(--gold); }

h1,h2,h3,.serif{ font-family:var(--f-display); font-weight:600; line-height:1.05; letter-spacing:-.01em; }
h2{ font-size:var(--fs-h2); }
h3{ font-weight:600; font-size:var(--fs-h3); }

.lede{ font-size:clamp(1.1rem,.4vw + 1rem,1.4rem); line-height:1.5; max-width:36ch; }
.prose{ max-width:60ch; }
.prose p + p{ margin-top:1.1em; }

.btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--f-body); font-weight:700; font-size:var(--fs-small);
  padding:1em 1.7em; min-height:50px;
  background:var(--ink); color:var(--paper); border:1.5px solid var(--ink);
  border-radius:999px 999px 999px 4px;
  transition: transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--coral{ background:var(--coral); border-color:var(--coral); color:#fff; }
.btn--coral:hover{ background:var(--coral-deep); border-color:var(--coral-deep); }
.btn--outline{ background:transparent; color:var(--ink); }
.btn--outline:hover{ background:var(--ink); color:var(--paper); }
.btn--outline-light{ background:transparent; color:var(--paper); border-color:var(--line-on-dark); }
.btn--outline-light:hover{ background:var(--paper); color:var(--night); }
.btn--whatsapp{ background:#1F6B4D; border-color:#1F6B4D; color:#fff; }
.btn--whatsapp:hover{ background:#184F39; border-color:#184F39; }

/* =========== NAV: overlay de pantalla completa =========== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  padding: clamp(1rem,2vw,1.6rem) var(--gutter);
  pointer-events:none;
}
.site-header > *{ pointer-events:auto; }
.brand-badge{ display:flex; align-items:center; gap:.6em; }
.brand-badge img{ width:38px; height:auto; border-radius:50%; }
.brand-badge span{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; color:var(--paper); text-shadow:0 1px 6px rgba(0,0,0,.5); }
.is-light .brand-badge span{ color:var(--ink); text-shadow:none; }

.menu-btn{
  display:flex; align-items:center; gap:.6em;
  background:var(--night); color:var(--paper);
  border:none; padding:.7em 1.1em .7em .9em;
  border-radius:999px;
  font-weight:700; font-size:var(--fs-small);
}
.menu-btn .bars{ display:flex; flex-direction:column; gap:3px; }
.menu-btn .bars span{ width:16px; height:2px; background:currentColor; display:block; }

.nav-overlay{
  position:fixed; inset:0; z-index:90;
  background:var(--night); color:var(--paper);
  display:flex; flex-direction:column;
  transform:translateY(-100%);
  transition:transform .45s cubic-bezier(.2,.7,.2,1);
  overflow-y:auto;
}
.nav-overlay.is-open{ transform:translateY(0); }
.nav-overlay-top{
  display:flex; justify-content:space-between; align-items:center;
  padding: clamp(1rem,2vw,1.6rem) var(--gutter);
}
.nav-close{
  background:transparent; border:1.5px solid var(--line-on-dark); color:var(--paper);
  width:44px; height:44px; border-radius:50%; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center;
}
.nav-overlay-links{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  padding: 1rem var(--gutter) 3rem;
  gap: clamp(.3rem,1vw,.6rem);
}
.nav-overlay-links a{
  font-family:var(--f-display); font-weight:500; font-style:italic;
  font-size:clamp(2rem,6vw,4rem); line-height:1.25;
  color:var(--paper); opacity:.55;
  transition: opacity .2s ease;
  display:inline-block;
}
.nav-overlay-links a:hover, .nav-overlay-links a.is-active{ opacity:1; color:var(--gold); }
.nav-overlay-foot{
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top:1px solid var(--line-on-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:var(--fs-small); opacity:.75;
}
.nav-overlay-foot a:hover{ text-decoration:underline; }

/* =========== HERO =========== */
.hero{
  position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end;
  background:var(--night);
  overflow:hidden;
}
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover; }
.hero-media::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(9,16,15,.92) 0%, rgba(9,16,15,.35) 46%, rgba(9,16,15,.15) 70%);
}
.hero-content{
  position:relative; z-index:2;
  padding: 0 var(--gutter) clamp(3rem,7vw,5.5rem);
  max-width:820px;
}
.hero-content .label{ color:var(--gold); }
.hero-content h1{
  font-size:var(--fs-hero); color:var(--paper); max-width:14ch;
  font-style:italic; font-weight:500;
}
.hero-actions{ margin-top:2rem; display:flex; gap:1rem; flex-wrap:wrap; }

.hero-badge{
  position:absolute; z-index:2; right:var(--gutter); bottom:clamp(2rem,6vw,4rem);
  display:none;
}
@media (min-width:720px){ .hero-badge{ display:block; } }
.hero-badge img{ width:86px; height:auto; opacity:.95; filter: drop-shadow(0 6px 16px rgba(0,0,0,.45)); border-radius: 50%; background: rgba(250,245,234,.9); padding:8px; }

/* =========== FRANJAS EDITORIALES (offset bands) =========== */
.band{ position:relative; }
.band-media{ width:100%; aspect-ratio: 16/10; overflow:hidden; }
.band-media img{ width:100%; height:100%; object-fit:cover; }
.band-card{
  position:relative; z-index:2;
  background:var(--paper);
  margin: -3.5rem clamp(1rem,5vw,4rem) 0;
  padding: clamp(1.75rem,4vw,3rem);
  box-shadow: 0 18px 40px rgba(15,30,28,.14);
}
.band-card.is-dark{ background:var(--night); color:var(--paper); }
@media (min-width:860px){
  .band-card{ max-width:560px; margin-top:-5.5rem; }
  .band--right .band-card{ margin-left:auto; margin-right:clamp(1rem,7vw,7rem); }
  .band--left .band-card{ margin-right:auto; margin-left:clamp(1rem,7vw,7rem); }
}

.stack{ display:flex; flex-direction:column; gap: clamp(3.5rem,7vw,6rem); }

.pullquote{
  font-family:var(--f-display); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,1.6vw + 1rem,2.2rem);
  line-height:1.3; max-width:32ch;
}
.pullquote::before{ content:'“'; color:var(--coral); }
.pullquote::after{ content:'”'; color:var(--coral); }

/* =========== VALUES ROW =========== */
.values{ display:grid; gap: 2rem 2.5rem; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); }
.values li{ border-top:2px solid var(--ink); padding-top:1rem; }
.section--dark .values li{ border-color: var(--line-on-dark); }
.values h3{ margin-bottom:.4rem; }
.values p{ opacity:.75; font-size:var(--fs-small); max-width:30ch; }

/* =========== HOME: TEASER RAIL =========== */
.teaser-rail{
  display:grid; gap:1.4rem; grid-template-columns: repeat(auto-fit,minmax(230px,1fr));
}
.teaser-item{ display:block; }
.teaser-item figure{ aspect-ratio:4/5; overflow:hidden; margin:0; }
.teaser-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.teaser-item:hover img{ transform:scale(1.045); }
.teaser-item figcaption{ padding-top:.8rem; }
.teaser-item .tag{ font-size:var(--fs-label); font-weight:700; color:var(--coral); text-transform:uppercase; letter-spacing:.03em; }
.teaser-item h3{ margin-top:.3rem; font-size:1.15rem; }

/* =========== HISTORIAS: riel horizontal =========== */
.rail-wrap{ position:relative; }
.rail{
  display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:1rem; margin: 0 calc(var(--gutter) * -1); padding-inline: var(--gutter);
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail-card{
  scroll-snap-align:start;
  flex:0 0 clamp(240px, 70vw, 380px);
  background:var(--paper);
  cursor:pointer; border:none; text-align:left; padding:0;
  display:flex; flex-direction:column;
}
.rail-card figure{ margin:0; aspect-ratio:3/4; overflow:hidden; }
.rail-card img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.rail-card:hover img{ transform:scale(1.04); }
.rail-card .rail-body{ padding:1.1rem .2rem; }
.rail-tag{ font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--sea); }
.rail-card h3{ margin-top:.4rem; font-size:1.2rem; }
.rail-hint{ display:flex; align-items:center; gap:.6rem; margin-top:1.2rem; font-size:var(--fs-small); opacity:.65; }
.rail-hint svg{ width:18px; height:18px; animation: point 1.6s ease-in-out infinite; }
@keyframes point{ 0%,100%{ transform:translateX(0);} 50%{ transform:translateX(6px);} }

/* modal historia */
.story-modal{
  position:fixed; inset:0; z-index:100; background:rgba(9,16,15,.85);
  display:none; align-items:flex-start; justify-content:center;
  padding: clamp(1rem,4vw,4rem) 1rem; overflow-y:auto;
}
.story-modal.is-open{ display:flex; }
.story-modal-inner{ background:var(--paper); max-width:720px; width:100%; position:relative; }
.story-modal-inner img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.story-modal-body{ padding: clamp(1.5rem,4vw,2.6rem); }
.story-close{
  position:absolute; top:.8rem; right:.8rem; width:42px; height:42px;
  background:var(--night); color:var(--paper); border:none; border-radius:50%;
  font-size:1.2rem; display:flex; align-items:center; justify-content:center;
}

/* =========== ALEXIS ============ */
.alexis-hero{ display:grid; gap:2rem; }
@media (min-width:860px){ .alexis-hero{ grid-template-columns: .9fr 1.1fr; align-items:end; } }

/* =========== FORM ============ */
.form{ display:flex; flex-direction:column; gap:1.3rem; max-width:560px; }
.field label{ display:block; font-size:var(--fs-small); font-weight:700; margin-bottom:.45rem; }
.field input, .field select, .field textarea{
  width:100%; font-family:inherit; font-size:1rem;
  padding:.9em 1.05em; border:1.5px solid var(--line-on-light);
  background:var(--paper); color:var(--ink); border-radius:2px; min-height:50px;
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--sea); }

/* =========== BOLETAS v2: stubs verticales apiladas =========== */
.boletas{ display:grid; gap:1.6rem; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
.stub{
  position:relative; background:var(--paper); color:var(--ink);
  border-radius:14px; overflow:hidden;
  box-shadow:0 14px 32px rgba(15,30,28,.16);
  transform:rotate(var(--tilt,0deg));
  transition:transform .2s ease, box-shadow .2s ease;
}
.stub:hover{ transform:rotate(0deg) translateY(-4px); box-shadow:0 20px 44px rgba(15,30,28,.22); }
.stub:nth-child(1){ --tilt:-1.2deg; }
.stub:nth-child(2){ --tilt:.8deg; }
.stub:nth-child(3){ --tilt:-.6deg; }
.stub-head{ background:var(--night); color:var(--paper); padding:1rem 1.3rem; display:flex; justify-content:space-between; align-items:center; }
.stub-head .n{ font-family:var(--f-display); font-style:italic; font-size:.95rem; color:var(--gold); }
.stub-head .m{ font-weight:700; font-size:var(--fs-small); letter-spacing:.02em; }
.stub-perf{
  height:14px; background:
    radial-gradient(circle at 8px 50%, transparent 6px, var(--paper) 6.5px) repeat-x;
  background-size:18px 14px; background-color:var(--night);
}
.stub-body{ padding:1.4rem 1.3rem 1.6rem; }
.stub-title{ font-family:var(--f-display); font-weight:700; font-size:1.7rem; }
.stub-sub{ font-size:var(--fs-small); opacity:.7; margin-top:.3rem; }
.stub-num{ font-weight:700; font-variant-numeric:tabular-nums; margin-top:1rem; display:block; }
.stub-row{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-top:1rem; }
.stub-copy{ font-size:.78rem; font-weight:700; border:1.5px solid var(--ink); padding:.5em .9em; background:transparent; border-radius:999px; min-height:40px; }
.stub-copy:hover{ background:var(--ink); color:var(--paper); }
.stub-copied{ font-size:.78rem; color:var(--sea); font-weight:700; opacity:0; transition:opacity .2s ease; }
.stub-copied.is-shown{ opacity:1; }

/* =========== FOOTER =========== */
.site-footer{ background:var(--night); color:var(--paper); padding-block: 4rem 2rem; }
.footer-grid{ display:grid; gap:2.4rem; grid-template-columns: 1.3fr 1fr 1fr; }
@media (max-width:760px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid h4{ font-family:var(--f-body); font-size:var(--fs-label); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); margin-bottom:1rem; }
.footer-brand{ display:flex; align-items:center; gap:.7em; }
.footer-brand img{ width:46px; border-radius:50%; }
.footer-brand span{ font-family:var(--f-display); font-size:1.3rem; font-weight:700; }
.footer-grid p{ opacity:.75; font-size:var(--fs-small); max-width:34ch; }
.footer-links li + li{ margin-top:.6rem; }
.footer-links a{ font-size:var(--fs-small); opacity:.85; }
.footer-links a:hover{ opacity:1; text-decoration:underline; }
.footer-bottom{
  margin-top:2.6rem; padding-top:1.6rem; border-top:1px solid var(--line-on-dark);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
  font-size:.78rem; opacity:.6;
}

/* reveal */
.reveal{ opacity:0; transform:translateY(18px); animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes rise{ to{ opacity:1; transform:translateY(0);} }

.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:1em; z-index:200; }
.skip-link:focus{ left:1rem; top:1rem; }

.center{ text-align:center; }
.mt-lg{ margin-top:clamp(2rem,4vw,3.5rem); }
.split{ display:grid; gap: clamp(2rem,5vw,4rem); align-items:center; }
@media (min-width:860px){ .split{ grid-template-columns:1fr 1fr; } .split--reverse .split-media{ order:2; } }
.split-media img{ width:100%; height:100%; object-fit:cover; }

/* page hero (non-home) */
.page-hero{ padding: clamp(7rem,14vw,9rem) 0 clamp(2rem,5vw,3rem); }