/* ============================================================================
   Cancún Jungle Camp — cjc-site.css · v2 · 2026-09-12
   Base de layout y componentes del sitio. Se carga ANTES de css/cjc-base.css
   (el CSS real de 03_Web_SEO, que aporta tokens, tipografía, capas y motion).

   [SUPUESTO] El brief preveía una exportación de Stitch/Tailwind como base;
   no llegó, y el brief lo permite: "rediseñar directo sobre el stack actual".
   Este archivo es esa base. No redefine tokens: usa los --cjc-* de cjc-base.css
   y sus clases (.cjc-sec, .cjc-hoja, .cjc-ee, .cjc-btn, [data-reveal]).
   Cubre lo que cjc-base.css no trae: reset, nav, hero, cinta de datos,
   tarjetas de segmento, foto + pie, galería, cifras, FAQ, cotizador, footer.
   ============================================================================ */

/* ---------- 0. Reset y utilidades ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body { overflow-x: hidden; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.container { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
.container--angosto { width: min(100% - 2.5rem, 880px); margin-inline: auto; }
.text-center { text-align: center; }
.text-center p, .text-center h2 { margin-inline: auto; }
.mt-2 { margin-top: 1rem; } .mt-4 { margin-top: 2rem; } .mt-6 { margin-top: 3rem; }
.mb-2 { margin-bottom: 1rem; } .mb-4 { margin-bottom: 2rem; }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; }
.lead { font-size: clamp(1.25rem, 1.5vw, 1.4375rem); line-height: 1.5; }
.suave { color: #6E5546; } /* madera sombra al 75 %: 6.4:1 sobre blanco cálido */
.num { font-family: var(--f-titulo); font-weight: 700; font-variant-numeric: tabular-nums; }
.kicker { display: block; font: 700 15px/1.3 var(--f-cuerpo); text-transform: uppercase; letter-spacing: .1em; color: var(--cjc-hoja-sombra); margin-bottom: .75rem; }
.cjc-btn svg { width: 22px; height: 22px; flex: none; }
.cjc-btn--lg { font-size: 20px; padding: 1.05em 1.9em; }
.cjc-btn--sm { font-size: 16px; padding: .7em 1.2em; }
.cjc-btn--claro { background: var(--cjc-blanco); color: var(--cjc-madera); }
.cjc-btn--claro:hover { background: #fff; }
.cjc-btn--fantasma { background: rgba(251, 248, 242, .14); color: var(--cjc-blanco); box-shadow: inset 0 0 0 2px rgba(251, 248, 242, .75); backdrop-filter: blur(6px); }
.cjc-btn--fantasma:hover { background: rgba(251, 248, 242, .26); }
.cjc-btn:disabled, .cjc-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.cjc-letrero { margin-bottom: 1rem; font-size: clamp(18px, 1.5vw, 22px); font-weight: 600; }
.cjc-chip, .cjc-tag { margin-bottom: 1rem; }
.cjc-tag { font-size: 15px; } /* mínimo 15 px (TIPOGRAFIA_v1) */

/* Sin JS, los objetos con data-reveal se ven de inmediato */
html:not(.js) [data-reveal] { opacity: 1; transform: none; }

/* Grids */
.grid-2 { display: grid; gap: 2rem; grid-template-columns: 1fr; }
.grid-3 { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 1. Navegación ------------------------------------------------- */
:root { --nav-alto: 84px; }
@media (max-width: 760px) { :root { --nav-alto: 72px; } }
.navbar { position: fixed; inset: 0 0 auto 0; height: var(--nav-alto); z-index: 1000; display: flex; align-items: center; background: var(--cjc-blanco); border-bottom: 1px solid rgba(106, 59, 40, .15); transition: background-color .25s, box-shadow .25s; }
.navbar--float { background: linear-gradient(180deg, rgba(67, 38, 26, .5), rgba(67, 38, 26, 0)); border-bottom: 0; }
.navbar.scrolled { background: rgba(251, 248, 242, .96); border-bottom: 1px solid rgba(106, 59, 40, .15); box-shadow: 0 4px 14px rgba(67, 38, 26, .08); backdrop-filter: blur(10px); }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; }
.nav-brand img { width: 56px; height: 56px; border-radius: 50%; background: var(--cjc-blanco); padding: 3px; }
.nav-brand__nombre { font: 700 20px/1 var(--f-titulo); color: var(--cjc-madera); }
.navbar--float:not(.scrolled) .nav-brand__nombre { color: var(--cjc-blanco); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.nav-links { display: none; list-style: none; margin: 0; padding: 0; gap: clamp(.8rem, 1.5vw, 1.5rem); align-items: center; }
.nav-link { font: 700 17px/1 var(--f-cuerpo); color: var(--cjc-madera); text-decoration: none; padding: .6rem 0; border-bottom: 2px solid transparent; }
.nav-link:hover, .nav-link.active { color: var(--cjc-alberca-prof); border-bottom-color: var(--cjc-alberca); }
.navbar--float:not(.scrolled) .nav-link { color: var(--cjc-blanco); text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.navbar--float:not(.scrolled) .nav-link:hover, .navbar--float:not(.scrolled) .nav-link.active { color: var(--cjc-alberca-sol); border-bottom-color: var(--cjc-alberca-sol); }
.nav-actions { display: none; gap: .75rem; align-items: center; }
.hamburger { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; padding: 10px; background: rgba(251, 248, 242, .92); border: 1px solid rgba(106, 59, 40, .15); border-radius: 12px; cursor: pointer; z-index: 1100; }
.hamburger-line { display: block; width: 24px; height: 3px; border-radius: 3px; background: var(--cjc-madera); transition: transform .25s, opacity .2s; }
.hamburger.active .hamburger-line:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.hamburger.active .hamburger-line:nth-child(2) { opacity: 0; }
.hamburger.active .hamburger-line:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
.nav-mobile-overlay { position: fixed; inset: 0; z-index: 999; background: var(--cjc-blanco); display: flex; flex-direction: column; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity .25s; padding: var(--nav-alto) 1.5rem 2rem; overflow-y: auto; }
.nav-mobile-overlay.active { opacity: 1; pointer-events: auto; }
.nav-mobile-links { list-style: none; margin: 0; padding: 0; text-align: center; display: grid; gap: 1rem; }
.nav-mobile-link { font: 600 28px/1.2 var(--f-titulo); color: var(--cjc-madera); text-decoration: none; display: inline-block; padding: .25rem .5rem; }
.nav-mobile-link:hover { color: var(--cjc-alberca-prof); }
@media (min-width: 1024px) { .nav-links, .nav-actions { display: flex; } .hamburger { display: none; } }

/* ---------- 2. Hero ------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; isolation: isolate; color: var(--cjc-blanco); }
.hero--corto { min-height: min(80svh, 780px); }
.hero .cjc-media { background: var(--cjc-madera-sombra) center / cover no-repeat; }
.hero .cjc-media.is-still video { visibility: hidden; }
.hero .cjc-media__velo { background: linear-gradient(180deg, rgba(67, 38, 26, .30) 0%, rgba(12, 131, 145, .05) 35%, rgba(67, 38, 26, .30) 65%, rgba(67, 38, 26, .82) 100%); }
.hero__content { width: min(100% - 2.5rem, 1200px); margin: 0 auto; padding: calc(var(--nav-alto) + 2rem) 0 clamp(56px, 8vw, 110px); position: relative; z-index: 3; }
.hero__content h1 { color: var(--cjc-blanco); max-width: 16ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .4); font-size: clamp(2.375rem, 5.2vw, 4rem); }
.hero__content .lead { color: var(--cjc-blanco); max-width: 54ch; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.hero__chip { display: inline-block; background: rgba(251, 248, 242, .94); color: var(--cjc-alberca-prof); font: 700 15px/1.2 var(--f-cuerpo); padding: 8px 16px; border-radius: 999px; margin-bottom: 1.25rem; }
.hero__medallon { width: 88px; height: 88px; margin-bottom: 1rem; border-radius: 50%; background: var(--cjc-blanco); padding: 4px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .35)); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; margin-top: 1.5rem; align-items: center; }
.hero__nota { font-size: 16px; opacity: .95; margin: 0; }
.hero .cjc-ee--protagonista { right: 3%; bottom: -3%; left: auto; }
@media (max-width: 767px) { .hero .cjc-ee--protagonista { right: 4%; bottom: auto; top: calc(var(--nav-alto) + 4%); } .hero__medallon { width: 66px; height: 66px; } }

/* ---------- 3. Cinta de contadores (estática) ---------------------------- */
.datos { background: var(--cjc-alberca-sol); color: var(--cjc-madera-sombra); padding: 1.5rem 0; }
.datos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; text-align: center; }
@media (min-width: 760px) { .datos__list { grid-template-columns: repeat(4, 1fr); } }
.datos__list li { font-weight: 700; font-size: 16px; }
.datos__list b { display: block; font: 700 clamp(30px, 3vw, 40px)/1 var(--f-titulo); color: var(--cjc-alberca-prof); font-variant-numeric: tabular-nums; margin-bottom: .25rem; }

/* ---------- 4. Tarjetas de segmento -------------------------------------- */
.puertas { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .puertas { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .puertas { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .puertas--5 { grid-template-columns: repeat(5, 1fr); } }
.puerta { display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: box-shadow .2s, border-color .2s; }
.puerta:hover { border-color: var(--cjc-alberca); box-shadow: 0 16px 40px rgba(67, 38, 26, .18); color: inherit; }
.puerta img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.puerta .cjc-card__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.puerta__title { font: 700 24px/1.15 var(--f-titulo); color: var(--cjc-madera); }
.puerta__text { font-size: 17px; margin: 0; color: #6E5546; }
.puerta__arrow { margin-top: auto; padding-top: .75rem; font-weight: 700; color: var(--cjc-alberca-prof); }
.puerta:hover .puerta__arrow { color: var(--cjc-alberca); }

/* ---------- 5. Dupla foto + texto y bloque "para qué sirve" -------------- */
.dupla { display: grid; gap: 2rem; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .dupla { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); } .dupla--invertida > :first-child { order: 2; } }
.experiencia { display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
.experiencia .dupla h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); }
.experiencia .dupla .para { font-size: clamp(1.125rem, 1.4vw, 1.3125rem); }

/* Foto con pie (regla: cada foto lleva pie) */
.foto { margin: 0; border-radius: var(--r-img); overflow: hidden; background: var(--cjc-piedra); box-shadow: var(--shadow); display: flex; flex-direction: column; }
.foto img { width: 100%; object-fit: cover; }
.foto figcaption { padding: .75rem 1rem; font-size: 16px; color: #6E5546; background: #fff; }
.foto figcaption b { display: block; color: var(--cjc-madera); font: 600 17px/1.3 var(--f-titulo); }
.foto--4x3 img { aspect-ratio: 4 / 3; }
.foto--3x4 img { aspect-ratio: 3 / 4; }
.foto--16x10 img { aspect-ratio: 16 / 10; }
.galeria { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .galeria { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .galeria { grid-template-columns: repeat(4, 1fr); } .galeria .es-doble { grid-column: span 2; } }

/* ---------- 6. Cifras, listas, pasos, tarjetas de valor ------------------ */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin: 2rem 0; }
.cifras div { background: #fff; border-radius: 16px; padding: 1rem 1rem .75rem; border-left: 6px solid var(--cjc-alberca); box-shadow: 0 4px 14px rgba(67, 38, 26, .08); }
.cifras dd { margin: 0; font: 700 clamp(2.25rem, 4vw, 3rem)/1 var(--f-titulo); color: var(--cjc-alberca-prof); font-variant-numeric: tabular-nums; }
.cifras dt { font-size: 16px; font-weight: 700; color: #6E5546; margin-top: .35rem; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .8rem; }
.lista-check li { position: relative; padding-left: 2.3rem; }
.lista-check li::before { content: ""; position: absolute; left: 0; top: .1em; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cjc-hoja-sol) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F7522' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7.5'/></svg>") center / 60% no-repeat; }
.valor { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .valor { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .valor { grid-template-columns: repeat(3, 1fr); } }
.valor .cjc-card { padding: 1.5rem; }
.valor .cjc-card h3 { margin-top: .25rem; }
.valor .cjc-card p:last-child { margin-bottom: 0; }
.icono { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--cjc-alberca-sol); color: var(--cjc-alberca-prof); margin-bottom: 1rem; }
.icono svg { width: 28px; height: 28px; }
.icono--hoja { background: var(--cjc-hoja-sol); color: var(--cjc-hoja-sombra); }
.icono--coral { background: var(--cjc-coral); color: var(--cjc-madera-sombra); }
.cita { background: var(--cjc-hoja-sol); border-left: 8px solid var(--cjc-hoja-sombra); border-radius: 0 var(--r-card) var(--r-card) 0; padding: 1.5rem 2rem; font: 600 clamp(1.25rem, 2vw, 1.5rem)/1.4 var(--f-titulo); color: var(--cjc-madera-sombra); margin: 0; max-width: 60ch; }

/* ---------- 7. Banda CTA y cierre ------------------------------------------ */
.banda-cta { text-align: center; }
.banda-cta h2 { color: var(--cjc-blanco); max-width: 20ch; margin-inline: auto; }
.banda-cta p { margin-inline: auto; }
.banda-cta .cjc-ee--protagonista { right: 2%; bottom: -6%; }
.banda-cta .cjc-ee--escondido { left: 3%; top: 10%; }
.cierre { color: var(--cjc-blanco); padding: clamp(80px, 12vw, 160px) 0; }
.cierre .cjc-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(67, 38, 26, .5), rgba(67, 38, 26, .8)); }
.cierre h2, .cierre p { color: var(--cjc-blanco); }

/* ---------- 8. FAQ -------------------------------------------------------- */
.faq { display: grid; gap: .75rem; }
.faq details { background: #fff; border: 1px solid rgba(106, 59, 40, .15); border-radius: 16px; padding: 0 1.5rem; box-shadow: 0 4px 14px rgba(67, 38, 26, .08); }
.faq summary { cursor: pointer; list-style: none; padding: 1rem 2.4rem 1rem 0; font: 600 21px/1.3 var(--f-titulo); color: var(--cjc-madera); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; background: var(--cjc-alberca-sol); color: var(--cjc-alberca-prof); display: grid; place-items: center; font: 700 22px/1 var(--f-titulo); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding-bottom: 1rem; margin: 0; color: #6E5546; }

/* ---------- 9. Cotizador (js/calculator.js espera estas clases e ids) ----- */
.quote-container { position: relative; background: #fff; border: 1px solid rgba(106, 59, 40, .15); border-radius: var(--r-card); box-shadow: var(--shadow); padding: clamp(1.25rem, 3vw, 2.5rem); max-width: 1040px; margin-inline: auto; }
.form-progress { height: 8px; background: var(--cjc-piedra); border-radius: 999px; overflow: hidden; margin-bottom: 2rem; }
.form-progress-bar { height: 100%; width: 0; background: var(--cjc-alberca); border-radius: 999px; transition: width .3s; }
.form-step { display: none; }
.form-step.active { display: block; }
.form-step__titulo { font-size: clamp(1.5rem, 2.6vw, 1.875rem); text-align: center; margin-bottom: 1.5rem; }
.segment-selector-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .segment-selector-grid { grid-template-columns: repeat(2, 1fr); } }
.segment-option { border: 2px solid rgba(106, 59, 40, .15); border-radius: 16px; padding: 1rem 1.5rem; cursor: pointer; background: var(--cjc-blanco); transition: border-color .2s, background-color .2s; }
.segment-option:hover { border-color: var(--cjc-alberca-sol); }
.segment-option.active { border-color: var(--cjc-alberca); background: var(--cjc-alberca-sol); }
.segment-option-icon { display: none; }
.segment-option-title { display: block; font: 700 22px/1.2 var(--f-titulo); color: var(--cjc-madera); }
.segment-option p { font-size: 16px; color: #6E5546; margin: .35rem 0 0; }
.form-group { margin-bottom: 1.5rem; }
.form-label { display: block; font-weight: 700; margin-bottom: .5rem; color: var(--cjc-madera-sombra); }
.form-input, .form-textarea { width: 100%; font: inherit; color: var(--cjc-madera-sombra); padding: 14px 16px; border: 2px solid rgba(106, 59, 40, .2); border-radius: 12px; background: #fff; transition: border-color .2s; }
.form-input:focus, .form-textarea:focus { outline: none; border-color: var(--cjc-alberca); box-shadow: 0 0 0 4px rgba(31, 170, 184, .18); }
.form-input::placeholder, .form-textarea::placeholder { color: #9B8577; }
input[type="range"].form-input { padding: 0; border: 0; accent-color: var(--cjc-alberca); height: 40px; background: transparent; }
input[type="number"].form-input { padding: 8px 10px; }
input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--cjc-alberca-prof); flex: none; }
.form-hint { font-size: 15px; color: #6E5546; margin-top: .5rem; display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; }
.form-check { display: flex; align-items: flex-start; gap: .7rem; font-weight: 400; margin-bottom: .8rem; line-height: 1.45; }
.form-check input { margin-top: .2em; }
.bloque-incluido { background: var(--cjc-hoja-sol); border-radius: 16px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; color: var(--cjc-madera-sombra); }
.bloque-incluido h4, .bloque-opcional h4 { font: 600 20px/1.2 var(--f-titulo); color: var(--cjc-hoja-sombra); margin: 0 0 .5rem; }
.bloque-opcional h4 { color: var(--cjc-madera); }
.bloque-incluido ul { margin: 0; padding-left: 1.2rem; font-size: 17px; }
.bloque-incluido li { margin-bottom: .25rem; }
.card-glass { background: var(--cjc-piedra); border: 1px solid rgba(106, 59, 40, .15); border-radius: 16px; padding: 1.5rem; }
.card-glow-orange { border-color: var(--cjc-alberca); background: var(--cjc-alberca-sol); }
.calc-row { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed rgba(106, 59, 40, .2); font-size: 17px; }
.calc-row span:last-child { text-align: right; }
.calc-summary-box { margin-top: 1rem; background: #fff; border-radius: 12px; padding: 1rem; }
.calc-total { display: flex; justify-content: space-between; gap: 1rem; padding-top: .75rem; margin-top: .5rem; border-top: 2px solid var(--cjc-alberca); font: 700 22px/1.3 var(--f-titulo); color: var(--cjc-alberca-prof); flex-wrap: wrap; }
.calc-porpersona { font-size: 16px; color: #6E5546; margin-top: .4rem; text-align: right; }
.calc-nota { font-size: 15px; color: #6E5546; margin: 1rem 0 0; text-align: center; line-height: 1.45; }
.form-nav-buttons { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; flex-wrap: wrap; }
.text-accent-volt, .text-accent-orange { color: var(--cjc-alberca-prof); }
#pricingLoadError { margin: 0 0 1rem; padding: .85rem 1rem; border-radius: 12px; background: #FDE8E1; border: 1px solid var(--cjc-camion); color: #8A2A08; font-size: 16px; }
/* Botones heredados del cotizador (calculator.js los muestra/oculta por id) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .9em 1.6em; border-radius: 999px; font: 600 18px var(--f-cuerpo); text-decoration: none; cursor: pointer; border: 0; transition: background .2s, transform .2s; }
.btn-orange { background: var(--cjc-camion); color: var(--cjc-blanco); }
.btn-orange:hover { background: #D33A08; color: var(--cjc-blanco); }
.btn-volt, .btn-wa { background: var(--cjc-alberca-prof); color: #fff; }
.btn-volt:hover, .btn-wa:hover { background: #0A6F7B; color: #fff; }
.btn-outline { background: transparent; color: var(--cjc-alberca-prof); box-shadow: inset 0 0 0 2px var(--cjc-alberca-prof); }
.btn-outline:hover { background: var(--cjc-alberca-sol); }

/* ---------- 10. Footer y WhatsApp flotante ---------------------------------- */
.footer { background: var(--cjc-madera); color: var(--cjc-blanco); padding: 3rem 0 2rem; font-size: 17px; position: relative; overflow: hidden; }
.footer a { color: var(--cjc-blanco); }
.footer a:hover { color: var(--cjc-hoja-sol); }
.footer h4 { color: var(--cjc-hoja-sol); font: 600 18px/1.3 var(--f-titulo); margin: 0 0 1rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.footer-brand { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.footer-brand img { width: 72px; height: 72px; border-radius: 50%; background: var(--cjc-blanco); padding: 5px; }
.footer-brand b { font: 700 22px/1.1 var(--f-titulo); }
.footer-description { color: rgba(251, 248, 242, .88); max-width: 36ch; }
.footer-links-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.footer-link { text-decoration: none; display: inline-block; padding: .3rem 0; }
.footer-link:hover { text-decoration: underline; }
.footer-contact-item { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: .8rem; }
.footer-contact-item svg { width: 22px; height: 22px; flex: none; color: var(--cjc-hoja-sol); margin-top: .15em; }
.footer-bottom { border-top: 1px solid rgba(251, 248, 242, .22); margin-top: 2rem; padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .75rem 1.5rem; font-size: 15px; color: rgba(251, 248, 242, .88); }
.footer-bottom p { margin: 0; }
.footer .cjc-ee--escondido { right: 2%; bottom: 8%; }
.whatsapp-float { position: fixed; right: 1rem; bottom: 1rem; z-index: 900; width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; background: var(--cjc-alberca-prof); color: #fff; box-shadow: 0 10px 24px rgba(12, 131, 145, .35); }
.whatsapp-float:hover { background: #0A6F7B; color: #fff; }
.whatsapp-float svg { width: 30px; height: 30px; }

@media print { .navbar, .nav-mobile-overlay, .whatsapp-float, .cjc-hoja, .hero video { display: none !important; } .hero { min-height: auto; } }

/* Hero de foto (landings): mismo zoom lento de 20 s que el video; apagado con reduced-motion */
.cjc-media--hero img { animation: cjc-zoom 20s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .cjc-media--hero img { animation: none; } }

/* El cotizador es una tarjeta blanca: su texto no hereda el blanco de .bg-alberca */
.bg-alberca .quote-container, .bg-alberca .quote-container p, .bg-alberca .quote-container li,
.bg-alberca .quote-container label, .bg-alberca .quote-container h3, .bg-alberca .quote-container h4 { color: var(--cjc-madera-sombra); }
.bg-alberca .quote-container h3, .bg-alberca .quote-container h4 { color: var(--cjc-madera); }
.bg-alberca .quote-container .bloque-incluido h4 { color: var(--cjc-hoja-sombra); }
.bg-alberca .quote-container .suave { color: #6E5546; }
.bg-alberca .quote-container a { color: var(--cjc-alberca-prof); }

.form-check small { display: block; }

/* Móvil: el objeto de la fila de cabañas va sobre la esquina superior de la foto, no sobre el pie */
@media (max-width: 767px) { .experiencia .dupla .cjc-ee--protagonista { left: -4%; top: -6%; bottom: auto; width: 120px; } }