/* ==========================================================================
   Pergamino · Menú de Experiencias — HOME
   Editorial / guía artesanal de Pucón
   ========================================================================== */

:root{
  --paper:#F4EEE0;
  --paper-soft:#ECE3CF;
  --paper-deep:#E2D5B8;
  --cream-card:#FBF7EC;
  --ink:#24261F;
  --ink-soft:#5C5A4C;
  --ink-faint:#8B8874;
  --pine:#333F2C;
  --pine-deep:#20261A;
  --terracota:#C1613D;
  --terracota-deep:#A24C2E;
  --moss:#7E8863;
  --line:rgba(36,38,31,.16);
  --line-strong:rgba(36,38,31,.30);
  --shell:min(1240px, calc(100% - 40px));
  --radius-lg:32px;
  --radius-md:20px;
  --radius-sm:12px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
.shell{width:var(--shell);margin-inline:auto}
section{position:relative}

h1,h2,h3,h4{
  font-family:"Fraunces",Georgia,serif;
  font-weight:500;
  letter-spacing:-.01em;
  margin:0;
  text-wrap:balance;
}
.kicker{
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--terracota-deep);
  margin:0 0 14px;
}
.hand{
  font-family:"Caveat",cursive;
  font-weight:600;
  line-height:1.25;
  color:var(--pine);
}
.lede{
  font-size:18px;
  line-height:1.7;
  color:var(--ink-soft);
  max-width:52ch;
}
.visually-hidden{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;
}

/* focus states */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--terracota);
  outline-offset:3px;
  border-radius:4px;
}

/* buttons */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 26px;
  border-radius:999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  transition:transform .18s ease, background-color .18s ease, color .18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}
.btn-terracota{background:var(--terracota);color:#FBF3E7}
.btn-terracota:hover{background:var(--terracota-deep)}
.btn-line{border:1.5px solid var(--pine);color:var(--pine)}
.btn-line:hover{background:var(--pine);color:var(--paper)}
.btn-paper{border:1.5px solid rgba(251,247,231,.55);color:var(--paper)}
.btn-paper:hover{background:var(--paper);color:var(--pine-deep)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(244,238,224,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:16px 0;
}
.brand{display:flex;flex-direction:column;line-height:1}
.brand b{
  font-family:"Fraunces",serif;
  font-size:26px;
  font-weight:600;
  color:var(--pine);
}
.brand small{
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.24em;
  color:var(--ink-faint);
  margin-top:3px;
}
.main-nav{display:flex;align-items:center;gap:22px}
.main-nav a{
  font-size:12px;
  font-weight:700;
  letter-spacing:.07em;
  text-transform:uppercase;
  padding-block:4px;
  border-bottom:1.5px solid transparent;
  transition:border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{border-color:var(--terracota)}
.header-actions{display:flex;align-items:center;gap:16px}
.quick-nav{display:none;align-items:center;gap:14px}
.quick-nav a{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--pine);
  border-bottom:1.5px solid var(--terracota);
}
.menu-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  border:1.5px solid var(--line-strong);
  align-items:center;justify-content:center;
}
.menu-toggle svg{width:18px;height:18px}

.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:6px 0 18px;
  border-top:1px solid var(--line);
}
.mobile-nav a{
  padding:13px 4px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  border-bottom:1px solid var(--line);
}
.mobile-nav .btn{margin-top:12px;justify-content:center;width:100%}

/* ==========================================================================
   Hero — guía ilustrada, minimalista, mucho aire
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:104px 0 0;
  background:var(--paper);
}
.hero-stage{position:relative}

/* cordillera real, usada como línea de horizonte de baja presencia */
.hero-mountains{
  position:absolute;
  left:50%;
  bottom:-4px;
  transform:translateX(-50%);
  width:140%;
  max-width:none;
  opacity:.55;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

/* microilustraciones dispersas — mismo trazo fino que la cordillera, máximo 2 simultáneas */
.hero-scatter{position:absolute;inset:0;z-index:1;pointer-events:none}
.scatter{position:absolute;color:var(--ink)}
.cloud-1{top:9%;left:7%;width:52px;opacity:.4}
.birds-1{top:15%;right:9%;width:44px;opacity:.42}

.hero-inner{position:relative;z-index:2}

.hero-head{
  text-align:center;
  max-width:660px;
  margin:0 auto;
  padding:0 12px;
}
.hero-head h1{
  font-size:clamp(44px,7vw,82px);
  line-height:1;
  color:var(--pine);
}
.hero-head .lede-sub{
  margin:20px auto 0;
  font-family:"Archivo",sans-serif;
  font-size:14px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--terracota-deep);
}
.hero-emotional{
  margin:26px auto 0;
  max-width:440px;
  font-size:clamp(18px,2vw,21px);
  line-height:1.55;
  color:var(--pine);
}

/* cuatro ilustraciones representativas — sin efecto collage */
.sticker-quartet{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(30px,6vw,74px);
  max-width:920px;
  margin:80px auto 0;
  padding:0 16px;
}
.sticker-quartet li{list-style:none}
.s-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:clamp(92px,10vw,124px);
  text-align:center;
}
.s-item img{width:100%}
.s-item .s-label{
  display:block;
  margin-top:14px;
  font-size:clamp(14px,1.6vw,17px);
  color:var(--pine);
  line-height:1.25;
}

/* línea de tierra fina bajo las ilustraciones — refuerza la narrativa horizontal */
.hero-baseline{
  max-width:640px;
  margin:34px auto 0;
  padding:0 24px;
  color:var(--ink);
  opacity:.3;
}
.hero-baseline svg{display:block;width:100%;height:10px}

/* plato de pasta — mismo lápiz que la cordillera, sin relleno de color */
.plate-wrap{
  position:relative;
  z-index:2;
  width:min(250px,48vw);
  margin:36px auto 0;
}
.plate-wrap svg{width:100%;height:auto;display:block}

.hero-cta{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  margin-top:36px;
}

/* transición dibujada a mano hacia el catálogo */
.hero-divider{
  position:relative;
  z-index:1;
  margin-top:64px;
  color:var(--ink);
  opacity:.42;
}
.hero-divider svg{display:block;width:100%;height:22px}

/* categorías — nota discreta, no protagonista */
.categories{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:clamp(12px,3vw,30px);
  margin-top:28px;
  padding-bottom:46px;
}
.category{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:96px;
  text-align:center;
}
.category-icon{
  height:28px;
  display:flex;align-items:flex-end;justify-content:center;
  transition:transform .2s ease, opacity .2s ease;
  opacity:.75;
}
.category-icon svg{height:100%;width:auto;stroke:var(--pine)}
.category:hover .category-icon{transform:translateY(-2px);opacity:1}
.category span{
  font-size:11px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* ==========================================================================
   Section heading pattern
   ========================================================================== */
.section-pad{padding:88px 0}
.heading{
  max-width:640px;
  margin-bottom:48px;
}
.heading.center{margin-inline:auto;text-align:center}
.heading h2{font-size:clamp(34px,4.6vw,54px);line-height:1.04}
.divider{
  width:64px;height:2px;
  background:var(--terracota);
  margin:22px auto;
  border:none;
}
.divider.left{margin-left:0}

/* ==========================================================================
   Mapa
   ========================================================================== */
.map-section{background:var(--paper-soft)}
.map-frame{
  position:relative;
  max-width:1120px;
  margin:0 auto;
  background:var(--cream-card);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:14px;
  transform:rotate(-.6deg);
  box-shadow:0 22px 46px -30px rgba(30,26,18,.35);
}
.map-frame img{
  border-radius:calc(var(--radius-lg) - 12px);
  width:100%;
  height:auto;
}
.map-cta{display:flex;justify-content:center;margin-top:36px}

/* ==========================================================================
   Subtítulo interno de sección (kicker + h3 + texto)
   ========================================================================== */
.subheading{
  max-width:560px;
  margin:0 auto 44px;
  text-align:center;
}
.subheading h3{font-size:clamp(26px,3.2vw,36px);line-height:1.08;margin:0 0 10px}
.subheading p{font-size:16px;line-height:1.6;color:var(--ink-soft);margin:0}

/* ==========================================================================
   Alojamiento — escena editorial asimétrica (sección protagonista)
   ========================================================================== */
.lodging-section{background:var(--paper)}
.lodging-scene{max-width:1180px;margin:0 auto}
.lodging-main-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:48px;
  align-items:stretch;
}
.lodging-secondary{display:flex;flex-direction:column;gap:32px}
.lodging-small-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:28px;
  margin-top:56px;
}
.lodging-card{display:flex;flex-direction:column}
.lodging-card img{width:100%;height:auto;object-fit:contain}
.lodging-principal img{max-height:420px;object-fit:contain;object-position:bottom}
.lodging-medium{flex:1;display:flex;flex-direction:column;justify-content:flex-end}
.lodging-medium img{max-height:190px}
.lodging-small img{max-height:150px}
.lodging-info{margin-top:18px}
.lodging-tag{
  display:block;
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--moss);
  margin-bottom:6px;
}
.lodging-principal h3{font-size:clamp(28px,3vw,38px);line-height:1.05;margin:0}
.lodging-principal .lodging-info p{font-size:16px;color:var(--ink-soft);margin:10px 0 14px;max-width:38ch}
.lodging-medium h3,.lodging-small h3{font-size:19px;line-height:1.1;margin:0 0 8px}
.lodging-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pine);
  border-bottom:1.5px solid var(--terracota);
}
.lodging-cta{display:flex;justify-content:center;margin-top:60px}

/* ==========================================================================
   Termas — sección protagonista, asimétrica, sin tarjeta
   ========================================================================== */
.thermal-section{background:var(--paper-soft)}
.thermal-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  grid-template-areas:"copy art" "cta art";
  gap:12px 56px;
  align-items:center;
}
.thermal-copy{grid-area:copy}
.thermal-art{grid-area:art;overflow:visible}
.thermal-cta{grid-area:cta}
.thermal-copy .lede{margin:16px 0 22px;max-width:40ch}
.thermal-note{font-size:20px;margin:0 0 8px;color:var(--pine)}
.thermal-art a,.exp-feature-art a{display:block}
.thermal-art img,.exp-feature-art img{
  display:block;
  width:70%;
  height:auto;
  object-fit:contain;
  margin-inline:auto;
}
.thermal-links{display:flex;align-items:center;flex-wrap:wrap;gap:14px 24px;margin-top:18px}
.thermal-links .compact-link,.thermal-links .lodging-link{margin-top:0}

/* ==========================================================================
   Otras formas de vivir Pucón — fichas compactas, complementarias
   ========================================================================== */
.compact-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.compact-card{
  list-style:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:20px 14px;
}
.compact-card img{width:100%;max-width:150px;height:auto;object-fit:contain;margin:0 auto}
.compact-card .name{
  margin-top:14px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.02em;
}
.compact-card .tag{
  font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-top:2px;
}
.compact-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--pine);
  border-bottom:1.5px solid var(--terracota);
}

/* ==========================================================================
   Identidad de colección — "Menú de Experiencias" / categoría de la landing
   ========================================================================== */
.experience-identity{margin-bottom:26px}
.experience-identity__title{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:clamp(24px,3.4vw,30px);
  line-height:1.1;
  color:var(--ink);
  margin:0 0 14px;
}
.experience-identity__category{
  display:inline-block;
  font-family:"Archivo",sans-serif;
  font-size:13px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--moss);
  margin:0;
  padding-bottom:8px;
  border-bottom:2px solid var(--terracota);
}

/* ==========================================================================
   Landing de categoría — hero propio (reutiliza tokens del sitio)
   ========================================================================== */
.category-hero{position:relative;overflow:hidden;padding:96px 0 72px;background:var(--paper)}
.category-hero-bg{
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
  width:130%;max-width:none;opacity:.35;z-index:0;pointer-events:none;
}
.category-hero .shell{position:relative;z-index:1;max-width:720px}
.category-hero h1{font-size:clamp(38px,6vw,60px);line-height:1.06;color:var(--pine);margin:0}
.category-hero .lede{margin:22px 0 34px;max-width:46ch}

/* ==========================================================================
   Experiencia destacada — ficha grande, asimétrica
   ========================================================================== */
.exp-feature-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:56px;
  align-items:center;
}
.exp-feature-copy h3{font-size:clamp(26px,3vw,36px);line-height:1.08;margin:8px 0 12px}
.exp-feature-copy p{color:var(--ink-soft);font-size:16px;line-height:1.6;margin:0 0 22px;max-width:38ch}

/* ==========================================================================
   Antes de ir — recomendaciones editoriales, sin íconos genéricos
   ========================================================================== */
.before-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:44px;
  margin-top:8px;
}
.before-item{text-align:left}
.before-num{
  font-family:"Fraunces",serif;
  font-size:32px;
  font-weight:500;
  color:var(--terracota);
  margin:0 0 12px;
}
.before-item h3{font-size:19px;line-height:1.2;margin:0 0 8px}
.before-item p{font-size:15px;color:var(--ink-soft);line-height:1.6;margin:0}

/* ==========================================================================
   Nosotros / Closing
   ========================================================================== */
.closing{
  background:var(--pine);
  color:#F4EFE1;
  padding:96px 0 48px;
  text-align:center;
}
.closing .shell{max-width:760px}
.closing .kicker{color:#E4B48C}
.closing h2{font-size:clamp(38px,6vw,64px);line-height:1.05;color:#F4EFE1}
.closing p{font-size:17px;line-height:1.7;color:rgba(244,239,225,.75);margin:20px auto 30px;max-width:52ch}
.closing-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

.site-footer{
  background:var(--pine);
  border-top:1px solid rgba(244,239,225,.14);
  padding:22px 0;
}
.footer-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(244,239,225,.55);
}

/* ==========================================================================
   Reveal animation
   ========================================================================== */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.visible{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  *{transition:none!important}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media(max-width:980px){
  .lodging-main-row{grid-template-columns:1fr;gap:36px}
  .lodging-secondary{flex-direction:row;gap:24px}
  .lodging-medium{flex:1 1 0}
  .lodging-small-row{grid-template-columns:repeat(2,1fr)}
  .compact-grid{grid-template-columns:repeat(2,1fr)}
  .thermal-row{grid-template-columns:1fr;grid-template-areas:"copy" "art" "cta"}
  .thermal-art{margin-top:8px}
  .exp-feature-row{grid-template-columns:1fr;gap:32px}
  .before-grid{grid-template-columns:repeat(3,1fr);gap:28px}
}

@media(max-width:1180px){
  .main-nav{display:none}
  .header-actions .btn-terracota{display:none}
  .menu-toggle{display:flex}
  .mobile-nav.open{display:flex}
  .quick-nav{display:flex}
}

@media(max-width:860px){
  .hero{padding-top:68px}
  .section-pad{padding:64px 0}
  .hero-head h1{font-size:clamp(38px,13vw,58px)}
  .hero-mountains{opacity:.42}
  .birds-1{display:none}
  .sticker-quartet{margin-top:60px}
  .map-frame{padding:8px;border-radius:20px}
  .map-frame img{border-radius:14px}
  .lodging-small-row{gap:20px}
  .lodging-cta{margin-top:44px}
}

@media(max-width:640px){
  .hero{padding-top:52px}
  .sticker-quartet{margin-top:48px}
  .sticker-quartet li:nth-child(n+3){display:none}
  .plate-wrap{margin-top:44px;width:min(210px,58vw)}
  .hero-cta{margin-top:32px}
  .hero-divider{margin-top:46px}
  .cloud-1{display:none}
  .hero-mountains{opacity:.32;width:175%}
  .quick-nav{gap:10px}
  .quick-nav a{font-size:11px}
  .lodging-secondary{flex-direction:column}
  .lodging-small-row{grid-template-columns:1fr}
  .compact-grid{grid-template-columns:1fr}
  .thermal-row{gap:28px}
  .before-grid{grid-template-columns:1fr;gap:32px}
  .category-hero{padding-top:64px}
  .category-hero-bg{opacity:.28;width:170%}
}

@media(max-width:480px){
  .shell{width:min(100% - 28px,1240px)}
  .categories{gap:12px}
  .category{width:80px}
  .category-icon{height:22px}
}