/* ============================================================
   Kunan Pacha — Sistema de estilos compartido
   Identidad tomada de la "Web Muestra" (Volver al origen).
   Lo usan: directorio de productores, micropáginas y festival.
   ============================================================ */

:root{
  --verde:#3a4a36;        /* verde bosque profundo */
  --verde-claro:#6b7d5a;
  --terra:#b56a45;        /* terracota */
  --ocre:#c89b52;         /* ocre dorado */
  --crema:#f4efe6;        /* crema papel */
  --crema-2:#eae2d3;
  --tierra:#5a4633;       /* marrón tierra */
  --tinta:#2c2a24;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Jost',sans-serif;
  background:var(--crema);
  color:var(--tinta);
  overflow-x:hidden;
  line-height:1.6;
}
h1,h2,h3,.serif{font-family:'Cormorant Garamond',serif;font-weight:500;letter-spacing:.5px}
em{font-style:italic}
::selection{background:var(--ocre);color:#fff}
img{display:block;max-width:100%}
a{color:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 6vw}
.wrap-narrow{max-width:840px;margin:0 auto;padding:0 6vw}
.tag{font-size:12px;letter-spacing:5px;text-transform:uppercase;color:var(--terra);font-weight:500;margin-bottom:18px}

/* ---------- BOTONES ---------- */
.btn{
  display:inline-block;padding:16px 40px;border-radius:50px;text-decoration:none;
  font-size:13px;letter-spacing:2px;text-transform:uppercase;font-weight:500;
  transition:.4s cubic-bezier(.2,.8,.2,1);cursor:pointer;border:none;
}
.btn-fill{background:var(--terra);color:#fff;box-shadow:0 10px 30px rgba(181,106,69,.35)}
.btn-fill:hover{background:#a05a38;transform:translateY(-3px);box-shadow:0 16px 40px rgba(181,106,69,.5)}
.btn-ghost{border:1px solid rgba(244,239,230,.6);color:var(--crema)}
.btn-ghost:hover{background:var(--crema);color:var(--verde);transform:translateY(-3px)}
.btn-verde{border:1px solid var(--verde);color:var(--verde);background:transparent}
.btn-verde:hover{background:var(--verde);color:var(--crema);transform:translateY(-3px)}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 6vw;transition:.5s ease;
}
nav.scrolled{background:rgba(244,239,230,.92);backdrop-filter:blur(12px);padding:14px 6vw;box-shadow:0 4px 30px rgba(44,42,36,.07)}
.logo{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;letter-spacing:2px;color:var(--verde);text-decoration:none}
.logo span{display:block;font-family:'Jost';font-size:9px;letter-spacing:6px;text-transform:uppercase;font-weight:300;margin-top:-4px;opacity:.7}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:var(--verde);text-decoration:none;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;font-weight:400;transition:.3s;opacity:.85}
.nav-links a:hover{opacity:1;color:var(--terra)}
.nav-links .btn-nav{border:1px solid var(--terra);padding:9px 22px;border-radius:40px;color:var(--terra)}
.nav-links .btn-nav:hover{background:var(--terra);color:#fff}
/* Nav sobre fondo oscuro (hero) — variante clara */
nav.on-dark .logo,nav.on-dark .nav-links a{color:var(--crema)}
nav.on-dark.scrolled .logo,nav.on-dark.scrolled .nav-links a{color:var(--verde)}

/* ---------- BREADCRUMB ---------- */
.crumb{padding:108px 0 0;font-size:12.5px;letter-spacing:1px;text-transform:uppercase;color:var(--verde-claro)}
.crumb a{color:var(--verde-claro);text-decoration:none}
.crumb a:hover{color:var(--terra)}
.crumb span{margin:0 8px;opacity:.5}

/* ---------- HERO PRODUCTOR ---------- */
.prod-hero{position:relative;padding:150px 0 90px;color:var(--crema);overflow:hidden}
.prod-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(44,42,36,.66),rgba(58,74,54,.72)),var(--hero-img,none);
  background-size:cover;background-position:center;
}
.prod-hero .wrap{position:relative}
.prod-hero .eyebrow{font-size:12px;letter-spacing:6px;text-transform:uppercase;font-weight:300;margin-bottom:20px;opacity:.92}
.prod-hero h1{font-size:clamp(44px,7vw,92px);line-height:.98}
.prod-hero h1 em{color:var(--ocre)}
.prod-hero .lead{font-size:clamp(16px,2vw,20px);font-weight:300;max-width:620px;margin-top:22px;opacity:.92}
.prod-hero .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.chip{font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;padding:8px 18px;border-radius:40px;background:rgba(244,239,230,.14);border:1px solid rgba(244,239,230,.4)}
.chip.solid{background:var(--ocre);border-color:var(--ocre);color:#fff}

/* ---------- FICHA / DATOS RÁPIDOS ---------- */
.datos{background:var(--verde);color:var(--crema)}
.datos .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;padding-top:38px;padding-bottom:38px}
.dato{text-align:center}
.dato b{display:block;font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--ocre);line-height:1.1}
.dato small{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;opacity:.8;margin-top:6px}

/* ---------- HISTORIA (2 columnas) ---------- */
.historia{padding:110px 0}
.historia-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.historia h2{font-size:clamp(30px,4.4vw,52px);color:var(--verde);line-height:1.08;margin-bottom:24px}
.historia h2 em{color:var(--terra)}
.historia p{font-size:17px;color:#54504a;margin-bottom:18px;font-weight:300}
.historia blockquote{margin:30px 0;padding-left:24px;border-left:3px solid var(--ocre);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:23px;color:var(--verde);line-height:1.3}
.historia-img{position:relative;height:560px;border-radius:6px;overflow:hidden}
.historia-img img{width:100%;height:100%;object-fit:cover}
.historia-img::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.35);margin:18px;pointer-events:none}

/* ---------- QUÉ PRODUCE ---------- */
.produce{padding:110px 0;background:var(--crema-2)}
.produce-head{text-align:center;max-width:700px;margin:0 auto 60px}
.produce-head h2{font-size:clamp(30px,4.4vw,52px);color:var(--verde)}
.produce-head h2 em{color:var(--terra)}
.produce-head p{color:#6a655c;font-weight:300;font-size:17px;margin-top:14px}
.produce-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pcard{background:var(--crema);border-radius:6px;padding:34px 30px;box-shadow:0 6px 20px rgba(44,42,36,.05);transition:.4s;border:1px solid transparent}
.pcard:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(44,42,36,.13);border-color:var(--ocre)}
.pcard h3{font-size:23px;color:var(--verde);margin-bottom:8px}
.pcard p{font-size:14.5px;color:#7a756c;font-weight:300}
.pcard .k{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--terra);font-weight:500;margin-bottom:12px;display:block}

/* ---------- BLOQUE NOTA / POR CONFIRMAR ---------- */
.nota{max-width:840px;margin:40px auto 0;padding:18px 24px;border:1px dashed var(--verde-claro);border-radius:6px;background:rgba(107,125,90,.07);font-size:14px;color:var(--verde);font-weight:300}
.nota b{font-weight:600}

/* ---------- CTA "CONSEGUILO EN KUNAN PACHA" ---------- */
.cta-kp{padding:130px 6vw;text-align:center;color:var(--crema);position:relative;overflow:hidden;
  background:linear-gradient(rgba(58,74,54,.9),rgba(44,42,36,.92)),var(--cta-img,none);
  background-size:cover;background-position:center;background-attachment:fixed}
.cta-kp h2{font-size:clamp(34px,5.5vw,68px);line-height:1;margin-bottom:22px}
.cta-kp h2 em{color:var(--ocre)}
.cta-kp p{max-width:560px;margin:0 auto 40px;font-weight:300;font-size:18px;opacity:.92}
.cta-kp .botones{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ---------- DIRECTORIO (listado de productores) ---------- */
.dir-hero{padding:150px 0 70px;text-align:center;background:var(--verde);color:var(--crema)}
.dir-hero h1{font-size:clamp(40px,6vw,80px);line-height:1}
.dir-hero h1 em{color:var(--ocre)}
.dir-hero p{max-width:600px;margin:22px auto 0;font-weight:300;font-size:18px;opacity:.9}
.dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:90px 0}
.dir-card{display:block;text-decoration:none;color:inherit;background:var(--crema);border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(44,42,36,.06);transition:.5s cubic-bezier(.2,.8,.2,1)}
.dir-card:hover{transform:translateY(-10px);box-shadow:0 24px 50px rgba(44,42,36,.16)}
.dir-card-img{height:240px;overflow:hidden;position:relative}
.dir-card-img img{width:100%;height:100%;object-fit:cover;transition:1s ease}
.dir-card:hover .dir-card-img img{transform:scale(1.08)}
.dir-card-tag{position:absolute;top:14px;left:14px;background:var(--ocre);color:#fff;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:30px;font-weight:500}
.dir-card-body{padding:26px}
.dir-card-body h3{font-size:25px;color:var(--verde);margin-bottom:4px}
.dir-card-body .loc{font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--terra);margin-bottom:12px}
.dir-card-body p{font-size:14.5px;color:#7a756c;font-weight:300}

/* ============================================================
   FESTIVAL DE INVIERNO
   ============================================================ */
.fest-hero{position:relative;min-height:88vh;display:flex;align-items:center;color:var(--crema);overflow:hidden;padding:130px 0 70px}
.fest-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(44,42,36,.62),rgba(58,74,54,.7)),var(--hero-img,none);
  background-size:cover;background-position:center}
.fest-hero .wrap{position:relative;max-width:1000px}
.fest-hero .estacion{font-size:13px;letter-spacing:7px;text-transform:uppercase;font-weight:300;margin-bottom:24px;opacity:.92}
.fest-hero .estacion::before{content:"❄";margin-right:14px;color:var(--ocre)}
.fest-hero h1{font-size:clamp(48px,8vw,116px);line-height:.96}
.fest-hero h1 em{color:var(--ocre)}
.fest-hero .sub{font-size:clamp(17px,2.2vw,23px);font-weight:300;max-width:620px;margin-top:26px;opacity:.94}
.fest-hero .fechas{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:34px;font-size:15px;letter-spacing:1px}
.fest-hero .fechas span{display:flex;align-items:center;gap:10px}
.fest-hero .fechas b{font-weight:500}
.fest-hero .hero-cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}

/* Relato / invitación */
.relato{padding:110px 0;text-align:center}
.relato .wrap-narrow p{font-size:19px;font-weight:300;color:#54504a;margin-bottom:22px;line-height:1.7}
.relato .wrap-narrow p em{color:var(--terra);font-style:italic}
.relato .destacado{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(26px,3.6vw,40px);color:var(--verde);line-height:1.3;margin:14px 0 30px}

/* Info práctica (fecha/hora/lugar) */
.info-fest{background:var(--verde);color:var(--crema);padding:70px 0}
.info-fest .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}
.info-card .ic{font-size:34px;margin-bottom:14px}
.info-card b{display:block;font-family:'Cormorant Garamond',serif;font-size:27px;color:var(--ocre);margin-bottom:4px}
.info-card small{font-size:13px;letter-spacing:1px;opacity:.85;font-weight:300}

/* ---------- ROSTER (productores del festival, grilla pareja) ---------- */
.roster{padding:110px 0;background:var(--crema-2)}
.roster-head{text-align:center;max-width:720px;margin:0 auto 60px}
.roster-head h2{font-size:clamp(32px,5vw,58px);color:var(--verde)}
.roster-head h2 em{color:var(--terra)}
.roster-head p{color:#6a655c;font-weight:300;font-size:17px;margin-top:14px}
.roster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:26px}
.roster-card{background:var(--crema);border-radius:8px;overflow:hidden;box-shadow:0 6px 20px rgba(44,42,36,.06);transition:.45s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;text-align:center}
.roster-card:hover{transform:translateY(-8px);box-shadow:0 22px 46px rgba(44,42,36,.15)}
.roster-photo{aspect-ratio:4/3;overflow:hidden;position:relative;background:var(--verde-claro)}
.roster-photo img{width:100%;height:100%;object-fit:cover;transition:1s ease}
.roster-card:hover .roster-photo img{transform:scale(1.07)}
.roster-badge{position:absolute;top:12px;left:50%;transform:translateX(-50%);background:rgba(44,42,36,.78);color:var(--crema);font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:30px;white-space:nowrap}
.roster-body{padding:24px 22px 26px;display:flex;flex-direction:column;align-items:center;flex:1}
.roster-body h3{font-size:23px;color:var(--verde);line-height:1.1;margin-bottom:10px}
.roster-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-bottom:10px}
.roster-chips .c{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;padding:5px 12px;border-radius:30px;background:rgba(200,155,82,.16);color:var(--terra)}
.roster-body .loc{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--verde-claro);margin-bottom:12px}
.roster-body .frase{font-size:14.5px;color:#7a756c;font-weight:300;line-height:1.5}
.roster-body .mas{margin-top:auto;padding-top:16px}
.roster-body .mas a{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--terra);text-decoration:none;font-weight:500;border-bottom:1px solid transparent;transition:.3s}
.roster-body .mas a:hover{border-color:var(--terra)}
/* Tile invitación (sumate) — mismo tamaño que las cards */
.roster-invite{border:2px dashed var(--verde-claro);background:rgba(107,125,90,.06);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 26px;color:var(--verde)}
.roster-invite h3{font-size:24px;margin-bottom:12px;color:var(--verde)}
.roster-invite p{font-size:14px;font-weight:300;color:#6a655c;margin-bottom:22px}

/* ---------- REGISTRO DOBLE (consumidor / productor) ---------- */
.registro{padding:120px 0;background:var(--tierra);color:var(--crema)}
.registro-head{text-align:center;max-width:680px;margin:0 auto 60px}
.registro-head h2{font-size:clamp(32px,5vw,58px)}
.registro-head h2 em{color:var(--ocre)}
.registro-head p{opacity:.85;font-weight:300;font-size:17px;margin-top:14px}
.registro-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;max-width:980px;margin:0 auto}
.reg-card{background:rgba(244,239,230,.06);border:1px solid rgba(244,239,230,.18);border-radius:10px;padding:46px 40px;transition:.4s}
.reg-card:hover{background:rgba(200,155,82,.1);border-color:var(--ocre)}
.reg-card .et{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--ocre);margin-bottom:16px}
.reg-card h3{font-size:30px;margin-bottom:16px}
.reg-card ul{list-style:none;margin:0 0 30px}
.reg-card li{font-weight:300;font-size:15.5px;padding:9px 0 9px 28px;position:relative;opacity:.92}
.reg-card li::before{content:"✦";position:absolute;left:0;color:var(--ocre);font-size:12px;top:11px}
.reg-card .sorteo{display:inline-block;background:var(--ocre);color:#fff;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;padding:6px 14px;border-radius:30px;margin-bottom:22px;font-weight:500}

/* ---------- FOOTER ---------- */
footer{background:var(--tinta);color:var(--crema);padding:70px 6vw 34px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:50px;margin-bottom:50px}
.foot-logo{font-family:'Cormorant Garamond',serif;font-size:30px;letter-spacing:2px;font-weight:600}
.foot-logo span{display:block;font-family:'Jost';font-size:10px;letter-spacing:6px;text-transform:uppercase;font-weight:300;opacity:.6;margin-top:-2px}
footer .col p{font-size:14px;opacity:.6;font-weight:300;margin-top:16px;max-width:300px}
footer h4{font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-bottom:20px;color:var(--ocre)}
footer .col a{display:block;color:var(--crema);text-decoration:none;opacity:.7;font-size:14.5px;font-weight:300;margin-bottom:11px;transition:.3s}
footer .col a:hover{opacity:1;color:var(--ocre);padding-left:6px}
.foot-bottom{border-top:1px solid rgba(244,239,230,.12);padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:12.5px;opacity:.5;font-weight:300}

/* ---------- WHATSAPP FLOAT ---------- */
.wa{position:fixed;bottom:28px;right:28px;width:58px;height:58px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(37,211,102,.45);z-index:90;transition:.3s}
.wa:hover{transform:scale(1.1)}
.wa svg{width:30px;height:30px;fill:#fff}

/* ---------- REVEAL ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:1s cubic-bezier(.2,.8,.2,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
  .nav-links{display:none}
  .datos .wrap{grid-template-columns:1fr 1fr;gap:30px 20px}
  .historia-grid{grid-template-columns:1fr;gap:46px}
  .historia-img{height:420px}
  .produce-grid{grid-template-columns:1fr 1fr}
  .dir-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cta-kp{background-attachment:scroll}
}
@media(max-width:560px){
  .produce-grid,.dir-grid,.foot-grid{grid-template-columns:1fr}
  .datos .wrap{grid-template-columns:1fr 1fr}
}

/* ============================================================
   MODAL / FORMULARIOS
   ============================================================ */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(44,42,36,.6);backdrop-filter:blur(4px);display:none;align-items:flex-start;justify-content:center;padding:5vh 20px;overflow-y:auto}
.modal-overlay.open{display:flex}
.modal{background:var(--crema);border-radius:12px;max-width:560px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.35);position:relative;animation:modalIn .4s cubic-bezier(.2,.8,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.modal-head{padding:38px 40px 0;position:relative}
.modal-close{position:absolute;top:16px;right:18px;width:34px;height:34px;border:none;background:transparent;font-size:28px;line-height:1;color:var(--tierra);cursor:pointer;opacity:.55;transition:.3s}
.modal-close:hover{opacity:1;transform:rotate(90deg)}
.modal-head .et{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--terra);margin-bottom:10px}
.modal-head h3{font-size:32px;color:var(--verde);line-height:1.05}
.modal-head p{font-size:15px;color:#6a655c;font-weight:300;margin-top:10px}
.modal-body{padding:26px 40px 40px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;letter-spacing:.5px;color:var(--tierra);margin-bottom:7px;font-weight:500}
.field label .opt{opacity:.5;font-weight:300;letter-spacing:0}
.field input,.field textarea{width:100%;padding:13px 15px;border:1px solid #d8cfbe;border-radius:7px;background:#fff;font-family:'Jost',sans-serif;font-size:15px;color:var(--tinta);transition:.25s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--ocre);box-shadow:0 0 0 3px rgba(200,155,82,.18)}
.field textarea{resize:vertical;min-height:82px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hint{font-size:12.5px;color:#9a9488;font-weight:300}
.manejo-group{display:flex;flex-wrap:wrap;gap:10px}
.manejo-opt input{position:absolute;opacity:0;width:0;height:0}
.manejo-opt span{display:inline-block;padding:9px 16px;border:1px solid #d8cfbe;border-radius:30px;font-size:13px;cursor:pointer;transition:.25s;background:#fff}
.manejo-opt input:checked+span{background:var(--ocre);border-color:var(--ocre);color:#fff}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.modal .btn{display:block;width:100%;text-align:center;border:none;margin-top:6px}
.modal .btn[disabled]{opacity:.6;cursor:wait}
.form-msg{margin-top:14px;font-size:14px;padding:12px 16px;border-radius:7px;display:none}
.form-msg.err{display:block;background:rgba(181,106,69,.12);color:#9a4f30;border:1px solid rgba(181,106,69,.3)}
.form-ok{display:none;text-align:center;padding:14px 0 8px}
.form-ok .ic{font-size:52px;margin-bottom:12px}
.form-ok h4{font-family:'Cormorant Garamond',serif;font-size:30px;color:var(--verde);margin-bottom:10px}
.form-ok p{color:#6a655c;font-weight:300}
.modal.done .modal-form{display:none}
.modal.done .form-ok{display:block}
@media(max-width:560px){
  .modal-head,.modal-body{padding-left:24px;padding-right:24px}
  .field-row{grid-template-columns:1fr}
}