/* Eco Ansenuza — estilos de la landing (diseño aprobado) */
/* Layout: sunset hero sobre la laguna → franjas de cebra (el vehículo) como separador → secciones a una columna ancha con grillas que colapsan en mobile; botón de WhatsApp fijo */
/* Paleta de las piezas de Instagram: azul noche de las franjas, cielo pizarra, rojo-naranja del atardecer, dorado del sol, rosa flamenco, verde hoja.
   Diseño oscuro por elección (como los flyers): se ve igual en tema claro u oscuro. */

/* Fuentes autohospedadas (variables: un archivo cubre todos los pesos) */
@font-face{
  font-family:"Baloo 2";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("../fonts/baloo-2-latin-var.woff2") format("woff2");
}
@font-face{
  font-family:"Figtree";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("../fonts/figtree-latin-var.woff2") format("woff2");
}

:root{
  color-scheme:dark;
  --salt:#0A1C3A;        /* azul noche (fondo) */
  --salt-2:#0E2650;      /* franja azul de los flyers */
  --ink:#F7F0E6;         /* blanco cálido */
  --ink-soft:#B8C2D6;
  --sky:#F05A1E;         /* rojo-naranja del cielo */
  --lagoon:#FDBA2C;      /* dorado del sol */
  --lagoon-deep:#0B2A5B;
  --flamingo:#F06A95;    /* rosa flamenco */
  --flamingo-ink:#F78DB0;
  --sunset:#F7931E;      /* naranja "detalle" */
  --gold:#FDBA2C;
  --leaf:#6CBF45;        /* verde del ícono naturaleza */
  --line:#22406E;
  --card:#12305E;
  --wa:#23843D;          /* verde WhatsApp, oscurecido para contraste AA con texto blanco */
  --display:"Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*{box-sizing:border-box}
body{background:var(--salt);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;margin:0}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px, env(safe-area-inset-left, 0px));padding-right:max(20px, env(safe-area-inset-right, 0px))}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.05;text-wrap:balance;margin:0;letter-spacing:-.01em}
h3{font-weight:700}
.logo{display:block;width:var(--s,64px);height:auto;aspect-ratio:1;max-width:100%;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 0 0 3px #fff,0 6px 18px -6px rgba(5,40,90,.5)}
.logo-58{--s:58px}
.logo-96{--s:96px}
.logo-52{--s:52px}
h2{font-size:clamp(1.9rem,4vw,2.8rem)}
h3{font-size:1.3rem}
p{margin:0}
a{color:inherit}
.eyebrow{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--leaf)}
.eyebrow-gold{color:#FDBA2C}
section{padding-block:clamp(56px,8vw,96px)}
.sec-head{display:grid;gap:12px;max-width:640px;margin-bottom:40px}
.sec-head p{color:var(--ink-soft)}
:focus-visible{outline:3px solid var(--sunset);outline-offset:3px;border-radius:6px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:1rem;text-decoration:none;border-radius:999px;padding:15px 26px;transition:transform .15s ease, box-shadow .15s ease;border:0;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-wa{background:var(--wa);color:#fff;box-shadow:0 8px 24px -8px rgba(40,90,30,.6)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1.5px solid rgba(255,255,255,.55)}
.btn svg{width:20px;height:20px;flex:none}

/* HERO: atardecer sobre Ansenuza (siempre en tonos de atardecer, ambos temas) */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#1E2A4A 0%,#3B4566 22%,#7A3E4E 40%,#D9431E 56%,#F28A1E 66%,#FDBA2C 73%,#FFD45A 75.6%,#B8481E 76%,#7A2A14 86%,#1A0E0B 100%)}
.nav{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px 0}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.brand b{font-family:var(--display);font-weight:800;font-size:1.35rem;line-height:1;text-shadow:0 1px 8px rgba(5,40,90,.4)}
.brand b span{color:#8FD46A}
.nav-cta{font-weight:700;font-size:.95rem;color:#fff;text-decoration:none;padding:10px 18px;border-radius:999px;background:rgba(10,28,58,.45);border:1.5px solid rgba(255,255,255,.6)}
.hero .wrap.hero-body{position:relative;z-index:2;padding-block:clamp(48px,8vw,96px) clamp(210px,26vw,300px);display:grid;gap:22px}
.hero h1{font-size:clamp(2.5rem,6.6vw,5rem);max-width:15ch;text-shadow:0 2px 24px rgba(5,45,100,.45)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{font-size:clamp(1.05rem,2vw,1.25rem);max-width:36rem;color:#fff;text-shadow:0 1px 10px rgba(5,45,100,.5)}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.hero .chips{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.92rem;font-weight:600;color:#fff;margin-top:4px;text-shadow:0 1px 8px rgba(5,45,100,.6)}
.hero .chips span{display:inline-flex;align-items:center;gap:7px}
.hero .chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold)}
.badge{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:#0B2A5B;color:#fff;border:1px solid rgba(255,255,255,.25);padding:7px 14px;border-radius:999px;font-size:.85rem;font-weight:700;letter-spacing:.02em}
.sun{position:absolute;z-index:1;left:62%;top:72%;width:clamp(130px,17vw,220px);aspect-ratio:1;max-width:100%;border-radius:50%;
  background:radial-gradient(circle,#FFF8D6 0%,#FFE066 38%,#FDBA2C 56%,rgba(247,147,30,0) 72%);transform:translate(-50%,-50%);
  -webkit-mask:linear-gradient(180deg,#000 0 52%,transparent 52%);mask:linear-gradient(180deg,#000 0 52%,transparent 52%)}
.reflect{position:absolute;z-index:1;left:62%;top:76%;bottom:0;width:clamp(90px,12vw,160px);transform:translateX(-50%);
  background:repeating-linear-gradient(180deg,rgba(255,200,80,.7) 0 3px,transparent 3px 11px);
  -webkit-mask:linear-gradient(180deg,#000,transparent 90%);mask:linear-gradient(180deg,#000,transparent 90%)}
.flock{position:absolute;z-index:1;right:6%;top:50%;width:min(340px,42vw);opacity:.85}
.shore{position:absolute;z-index:1;left:0;right:0;bottom:0;height:60px;background:linear-gradient(180deg,transparent,#0A1C3A)}
.flamingos{position:absolute;z-index:1;left:8%;bottom:5%;width:min(220px,30vw)}

/* Franja cebra (el vehículo del safari) en azul laguna y amarillo sol */
.zebra{height:22px;background:
  repeating-linear-gradient(115deg,#0B2A5B 0 14px,transparent 14px 26px,#0B2A5B 26px 34px,transparent 34px 52px),
  #F7931E}

/* Barra de oferta */
.offer{background:#0B2A5B;color:#fff}
.offer .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-block:18px}
.offer p{font-weight:600}
.offer strong{color:#FDBA2C}
.offer a{color:#fff;font-weight:700;white-space:nowrap}

/* Experiencia */
.exp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.exp{display:grid;gap:12px;align-content:start;padding-top:20px;border-top:3px solid var(--sky)}
.exp .k{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--flamingo)}
.exp p{color:var(--ink-soft);font-size:.98rem}

/* Destino en números */
.dest{background:var(--salt-2)}
.dest-layout{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:start}
.dest-layout .sec-head{margin:0}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.fact{padding:22px 18px 22px 0;border-bottom:1px solid var(--line);display:grid;gap:4px}
.fact:nth-child(odd){border-right:1px solid var(--line)}
.fact:nth-child(even){padding-left:22px}
.fact b{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.5vw,2.8rem);line-height:1;color:var(--lagoon);font-variant-numeric:tabular-nums}
.fact span{font-size:.95rem;color:var(--ink-soft)}

/* Para quién */
.who{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.who-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:grid;gap:10px;align-content:start}
.who-card .ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--salt-2);color:var(--lagoon)}
.who-card .ico svg{width:24px;height:24px}
.who-card p{color:var(--ink-soft);font-size:.96rem}

/* Opiniones */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{margin:0;padding:26px;border-radius:18px;background:var(--card);border:1px solid var(--line);display:grid;gap:16px;align-content:space-between}
.review blockquote{margin:0;font-family:var(--display);font-weight:600;font-size:1.22rem;line-height:1.35}
.review figcaption{font-size:.9rem;color:var(--ink-soft)}
.review figcaption b{color:var(--ink);font-weight:700}
.stars{color:var(--sunset);letter-spacing:2px;font-size:.95rem}

/* Paquetes */
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pack{border-radius:20px;padding:28px;display:grid;gap:14px;align-content:start;border:1px solid var(--line);background:var(--card)}
.pack.star{background:linear-gradient(170deg,#1E2A4A 0%,#7A3E4E 45%,#D9431E 85%,#F28A1E 100%);color:#fff;border-color:transparent}
.pack.star p,.pack.star li{color:rgba(255,255,255,.88)}
.pack .tag{justify-self:start;font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--salt-2);color:var(--flamingo-ink)}
.pack.star .tag{background:var(--flamingo);color:#fff}
.pack ul{margin:0;padding-left:1.1em;display:grid;gap:6px;color:var(--ink-soft);font-size:.96rem}
.pack .more{margin-top:6px;font-weight:700;color:var(--flamingo-ink);text-decoration:none}
.pack.star .more{color:#FFE066}
.pack.star .tag{background:#0B2A5B !important}
.pack .more:hover{text-decoration:underline}

/* Cómo reservar */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:s}
.step{display:grid;gap:10px;align-content:start}
.step .n{font-family:var(--display);font-weight:800;font-size:1.3rem;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--flamingo);color:var(--salt)}
.step p{color:var(--ink-soft)}
.contact{margin-top:40px;display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;padding:24px;border-radius:18px;background:var(--salt-2)}
.phone{font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--lagoon);user-select:all;text-decoration:none}
.copy{font:inherit;font-size:.9rem;font-weight:600;background:transparent;color:var(--ink);border:1.5px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}

/* FAQ */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font-weight:700;font-size:1.05rem;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:12px;font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--flamingo)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 22px;color:var(--ink-soft);max-width:65ch}

/* Cierre */
.closing{position:relative;overflow:hidden;color:#fff;text-align:left;
  background:linear-gradient(180deg,#1E2A4A 0%,#3B4566 25%,#7A3E4E 50%,#D9431E 78%,#F28A1E 94%,#FDBA2C 100%)}
.closing .wrap{display:grid;gap:18px;justify-items:start;padding-block:clamp(64px,9vw,110px) clamp(90px,12vw,140px)}
.closing h2{max-width:16ch;font-size:clamp(2.3rem,5vw,3.8rem);text-shadow:0 2px 20px rgba(5,45,100,.35)}
.closing p{max-width:34rem;color:#fff}

footer{padding-block:32px 110px;font-size:.9rem;color:var(--ink-soft)}
footer .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
footer .fbrand{display:flex;align-items:center;gap:14px}
footer .legal{flex-basis:100%}

/* WhatsApp flotante */
.float-wa{position:fixed;z-index:20;right:calc(18px + env(safe-area-inset-right, 0px));bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  display:flex;align-items:center;gap:10px;background:var(--wa);color:#fff;text-decoration:none;font-weight:700;padding:14px 20px;border-radius:999px;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.float-wa svg{width:24px;height:24px}

/* Aviso de cookies */
.consent{position:fixed;z-index:30;left:calc(16px + env(safe-area-inset-left, 0px));bottom:calc(18px + env(safe-area-inset-bottom, 0px));max-width:min(620px, calc(100% - 210px));
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:10px 12px 10px 18px;border-radius:999px;background:var(--card);border:1px solid var(--line);box-shadow:0 10px 30px -8px rgba(0,0,0,.5);font-size:.85rem;line-height:1.4}
.consent p{flex:1 1 220px}
.consent[hidden]{display:none}
.consent-actions{display:flex;gap:8px}
.consent button{font:inherit;font-weight:700;border-radius:999px;padding:7px 16px;cursor:pointer}
.consent-ok{background:var(--ink);color:var(--salt);border:0}
.consent-no{background:transparent;color:var(--ink);border:1.5px solid var(--line)}

/* Páginas internas (privacidad, 404) */
.page{max-width:760px;padding-block:48px 80px}
.page h1{font-size:clamp(2rem,5vw,2.8rem);margin-bottom:24px}
.page h2{font-size:1.4rem;margin:32px 0 10px}
.page p,.page li{color:var(--ink-soft)}
.page p+p{margin-top:12px}
.page ul{padding-left:1.2em}
.page a{color:var(--flamingo-ink)}
.page-nav{display:flex;align-items:center;gap:12px;padding-block:18px;text-decoration:none}
.page-nav b{font-family:var(--display);font-weight:800;font-size:1.25rem}
.page-nav b span{color:#8FD46A}
.page-ctas{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:900px){
  .exp-grid,.who{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reviews,.packs,.steps{grid-template-columns:1fr}
  .dest-layout{grid-template-columns:1fr}
}
@media (max-width:520px){
  body{font-size:16px}
  .exp-grid,.who{grid-template-columns:1fr}
  .flock{width:52vw;top:auto;bottom:24%}
  .hero .btn{width:100%}
  .brand b{font-size:1.15rem}
  .brand .logo{--s:48px !important}
  .float-wa span{display:none}
  .float-wa{padding:15px}
  .consent{left:calc(12px + env(safe-area-inset-left, 0px));right:calc(84px + env(safe-area-inset-right, 0px));bottom:calc(14px + env(safe-area-inset-bottom, 0px));max-width:none;border-radius:16px;padding:10px 12px}
}
@media (prefers-reduced-motion:no-preference){
  .flock{animation:drift 14s ease-in-out infinite alternate}
  @keyframes drift{from{transform:translate(0,0)}to{transform:translate(-24px,8px)}}
}