/* ============================================================
   CJC — CSS base v1  ·  Cancún Jungle Camp  ·  12/09/2026
   Se carga DESPUÉS del CSS exportado por Stitch/Tailwind.
   Contiene: tokens, tipografía y escala, sistema de capas,
   motion (sway, reveal, parallax) y accesibilidad.
   ============================================================ */

/* ---------- 1. Tokens (paleta calibrada contra fotos reales) ---------- */
:root{
  --cjc-alberca:#1FAAB8; --cjc-alberca-sol:#7EDCD9; --cjc-alberca-prof:#0C8391;
  --cjc-hoja:#9FB92A;    --cjc-hoja-sol:#C4CC50;    --cjc-hoja-sombra:#5F7522;
  --cjc-madera:#6A3B28;  --cjc-madera-sol:#A36A54;  --cjc-madera-sombra:#43261A;
  --cjc-camion:#E8420A;  --cjc-coral:#F7868A;       --cjc-marino:#0B3F7C;
  --cjc-cielo:#3A8FC0;   --cjc-pasto:#7DA34B;
  --cjc-blanco:#FBF8F2;  --cjc-piedra:#EFE6D6;

  --f-titulo:'Fredoka',system-ui,sans-serif;
  --f-cuerpo:'Nunito Sans',system-ui,sans-serif;
  --fs-h1:clamp(2.375rem,4.5vw,3.5rem);
  --fs-h2:clamp(1.875rem,3.2vw,2.5rem);
  --fs-h3:clamp(1.375rem,2vw,1.625rem);
  --fs-body:clamp(1.125rem,1.1vw,1.1875rem);
  --fs-caption:.95rem;

  --sp:8px;
  --sec-y:clamp(56px,8vw,96px);
  --r-card:20px; --r-img:24px; --r-pill:999px;
  --shadow:0 12px 32px rgba(67,38,26,.12);
  --ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------- 2. Base y tipografía ---------- */
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cjc-blanco);color:var(--cjc-madera-sombra);
  font-family:var(--f-cuerpo);font-size:var(--fs-body);line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.cjc-contador,.cjc-precio{font-family:var(--f-titulo);color:var(--cjc-madera);line-height:1.12;margin:0 0 .5em}
h1{font-size:var(--fs-h1);font-weight:700}
h2{font-size:var(--fs-h2);font-weight:700}
h3{font-size:var(--fs-h3);font-weight:600}
p,li{max-width:68ch}
small,.cjc-caption{font-size:var(--fs-caption);color:var(--cjc-hoja-sombra)}
a{color:var(--cjc-alberca-prof);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--cjc-alberca)}
:focus-visible{outline:3px solid var(--cjc-camion);outline-offset:3px;border-radius:4px}
img,video{max-width:100%;height:auto;display:block}

/* Letrero de madera: títulos de sección con la textura real de cabaña */
.cjc-letrero{
  display:inline-block;padding:.35em .9em;border-radius:12px;
  background:var(--cjc-madera-sol) url('/assets/textura-madera.webp') center/cover;
  color:var(--cjc-blanco);text-shadow:0 2px 0 rgba(67,38,26,.6);
  font-family:var(--f-titulo);text-transform:uppercase;letter-spacing:.02em;
  transform:rotate(-1.5deg);
}

/* ---------- 3. Botones y componentes ---------- */
.cjc-btn{
  display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.6em;
  border-radius:var(--r-pill);font:600 18px var(--f-cuerpo);text-decoration:none;
  transition:transform .2s var(--ease),background .2s;cursor:pointer;border:0;
}
.cjc-btn--primario{background:var(--cjc-camion);color:var(--cjc-blanco)}
.cjc-btn--primario:hover{background:#D33A08;transform:translateY(-2px)}
.cjc-btn--secundario{background:transparent;color:var(--cjc-alberca-prof);box-shadow:inset 0 0 0 2px var(--cjc-alberca-prof)}
.cjc-btn--secundario:hover{background:var(--cjc-alberca-sol)}

.cjc-card{background:var(--cjc-blanco);border:1px solid rgba(106,59,40,.15);border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow)}
.cjc-card img{border-radius:0}
.cjc-card__body{padding:calc(var(--sp)*3)}
.cjc-tag{display:inline-block;padding:.25em .8em;border-radius:var(--r-pill);background:var(--cjc-hoja-sol);color:var(--cjc-hoja-sombra);font:600 14px var(--f-cuerpo)}

.cjc-chip{display:inline-block;padding:.35em 1em;border-radius:var(--r-pill);background:var(--cjc-alberca-sol);color:var(--cjc-alberca-prof);font:600 15px var(--f-cuerpo)}

.cjc-contador{font-size:clamp(2.5rem,5vw,3.5rem);color:var(--cjc-madera);font-variant-numeric:tabular-nums}
.cjc-contador + small{display:block;color:var(--cjc-hoja-sombra);font-size:1rem}

/* Contraste verde oscuro sobre claro: marcos, franjas, íconos */
.cjc-marco{border:3px solid var(--cjc-hoja-sombra);border-radius:var(--r-card)}
.cjc-franja{height:10px;background:var(--cjc-hoja-sombra);border-radius:var(--r-pill)}
.cjc-icono{color:var(--cjc-hoja-sombra)}

/* Texto sobre color: reglas de contraste */
.bg-alberca{background:var(--cjc-alberca);color:var(--cjc-blanco)}
.bg-alberca p,.bg-alberca li{color:var(--cjc-blanco)}
.bg-alberca h1,.bg-alberca h2{color:var(--cjc-blanco)}
.bg-hoja-sol{background:var(--cjc-hoja-sol);color:var(--cjc-madera-sombra)}
.bg-hoja-sol h2,.bg-hoja-sol h3{color:var(--cjc-madera-sombra)}
.bg-madera{background:var(--cjc-madera);color:var(--cjc-blanco)}
.bg-madera h2,.bg-madera h3,.bg-madera a{color:var(--cjc-blanco)}

/* ---------- 4. Sistema de capas por sección ---------- */
.cjc-sec{position:relative;overflow:hidden;padding:var(--sec-y) 0;isolation:isolate}
.cjc-sec__inner{position:relative;z-index:3;max-width:1200px;margin:0 auto;padding:0 calc(var(--sp)*3)}

.cjc-media{position:absolute;inset:0;z-index:0}
.cjc-media img,.cjc-media video{width:100%;height:100%;object-fit:cover}
.cjc-media--hero video{animation:cjc-zoom 20s var(--ease) both}
.cjc-media__velo{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,131,145,.15),rgba(67,38,26,.45))}

/* Capa botánica */
.cjc-hoja{position:absolute;z-index:1;pointer-events:none;will-change:transform;transform-origin:bottom center;filter:drop-shadow(0 12px 24px rgba(67,38,26,.25))}
.cjc-hoja--tl{top:-4%;left:-3%;width:clamp(140px,22vw,360px)}
.cjc-hoja--tr{top:-6%;right:-4%;width:clamp(120px,20vw,320px);transform-origin:bottom left}
.cjc-hoja--bl{bottom:-5%;left:-2%;width:clamp(120px,18vw,300px)}
.cjc-hoja--br{bottom:-4%;right:-3%;width:clamp(140px,24vw,380px);transform-origin:bottom right}
.cjc-hoja{animation:cjc-sway 6s ease-in-out infinite}
.cjc-hoja--tr{animation-duration:7.5s;animation-delay:-2s}
.cjc-hoja--bl{animation-duration:5.5s;animation-delay:-1s}
.cjc-hoja--br{animation-duration:8s;animation-delay:-3s}

/* Capa easter egg */
.cjc-ee{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(0 12px 24px rgba(67,38,26,.25))}
.cjc-ee--protagonista{width:clamp(160px,26vw,420px)}
.cjc-ee--escondido{width:clamp(56px,7vw,110px);opacity:.85;pointer-events:auto;transition:transform .35s var(--ease)}
.cjc-ee--escondido:hover{transform:rotate(-8deg) scale(1.12)}

/* Reveal (una sola entrada por objeto, al entrar en viewport) */
[data-reveal]{opacity:0;transform:translateY(24px) scale(.96);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}
.cjc-ee--escondido[data-reveal].is-in{opacity:.85}

/* Parallax: el JS mueve --py (px) según scroll */
[data-parallax]{transform:translate3d(0,var(--py,0),0)}
.cjc-hoja[data-parallax]{animation-name:cjc-sway-px} /* combina sway + parallax vía variable */

/* ---------- 5. Keyframes ---------- */
@keyframes cjc-sway{
  0%,100%{transform:rotate(-2deg) translateY(0)}
  50%{transform:rotate(2deg) translateY(-6px)}
}
@keyframes cjc-sway-px{
  0%,100%{transform:translate3d(0,var(--py,0),0) rotate(-2deg)}
  50%{transform:translate3d(0,calc(var(--py,0) - 6px),0) rotate(2deg)}
}
@keyframes cjc-zoom{from{transform:scale(1)}to{transform:scale(1.06)}}

/* ---------- 6. Móvil y accesibilidad ---------- */
@media (max-width:767px){
  .cjc-hoja--bl,.cjc-hoja--tr{display:none}          /* 2 hojas por sección */
  .cjc-ee--protagonista{width:clamp(120px,36vw,200px)}
  [data-parallax]{--py:0 !important}                  /* parallax apagado */
}
@media (prefers-reduced-motion:reduce){
  .cjc-hoja,.cjc-media--hero video{animation:none}
  [data-reveal]{opacity:1;transform:none;transition:none}
  [data-parallax]{--py:0 !important}
  html{scroll-behavior:auto}
}

/* ============================================================
   JS mínimo (≈ 1 KB). Pegar antes de </body>:

<script>
(()=>{
  const rm=matchMedia('(prefers-reduced-motion:reduce)').matches;
  const io=new IntersectionObserver(es=>es.forEach(e=>{
    if(e.isIntersecting){e.target.classList.add('is-in');io.unobserve(e.target)}
  }),{rootMargin:'0px 0px -12% 0px'});
  document.querySelectorAll('[data-reveal]').forEach(el=>io.observe(el));

  if(rm||innerWidth<768)return;
  const els=[...document.querySelectorAll('[data-parallax]')];
  let ticking=false;
  const upd=()=>{
    const h=innerHeight;
    els.forEach(el=>{
      const r=el.getBoundingClientRect();
      if(r.bottom<0||r.top>h)return;
      const f=parseFloat(el.dataset.parallax)||0.4;
      const off=(r.top+r.height/2-h/2)*-f*0.25;
      el.style.setProperty('--py',off.toFixed(1)+'px');
    });
    ticking=false;
  };
  addEventListener('scroll',()=>{if(!ticking){requestAnimationFrame(upd);ticking=true}},{passive:true});
  upd();
})();
</script>

   Marcado de ejemplo de una sección:

<section class="cjc-sec bg-alberca">
  <img class="cjc-hoja cjc-hoja--tl" src="/assets/hojas/hoja_platano_a_800.webp" alt="" data-parallax="0.5">
  <img class="cjc-hoja cjc-hoja--br" src="/assets/hojas/hoja_palma_a_800.webp" alt="" data-parallax="0.3">
  <img class="cjc-ee cjc-ee--protagonista" style="right:4%;bottom:0" src="/assets/ee/ee_barco_lateral_800.webp" alt="" data-reveal>
  <img class="cjc-ee cjc-ee--escondido" style="left:3%;top:8%" src="/assets/ee/ee_ballena_salto_400.webp" alt="" data-reveal>
  <div class="cjc-sec__inner">
    <h2>Cotiza en 2 minutos</h2>
    <p>Las fechas se apartan con meses de anticipación.</p>
    <a class="cjc-btn cjc-btn--primario" href="/cotizador">Cotiza tu grupo</a>
  </div>
</section>
   ============================================================ */