/* ==========================================================================
   BUIMUE · estilo caribeño
   ========================================================================== */
@font-face { font-family: "Lilita"; src: url("../fonts/LilitaOne.0d4e1383accd.ttf") format("truetype"); font-display: swap; }
@font-face { font-family: "Fredoka"; src: url("../fonts/Fredoka.7b33fede4d21.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("../fonts/Nunito.1f0e8654e8e5.ttf") format("truetype"); font-weight: 200 1000; font-display: swap; }

:root {
  --noche: #0b2458;
  --noche-2: #13337a;
  --azul: #1f4fb4;
  --mar: #00b4d8;
  --mar-2: #0096c7;
  --turquesa: #48cae4;
  --espuma: #caf0f8;
  --arena: #fff3d6;
  --arena-2: #ffe3a3;
  --mango: #ffb703;
  --mango-2: #fb8500;
  --coral: #ff6b5b;
  --hoja: #2bb673;
  --hoja-2: #148a4f;
  --coco: #7a4a2a;
  --tinta: #1b2440;
  --tinta-suave: #4a5578;
  --blanco: #ffffff;
  --radio: 26px;
  --sombra: 0 18px 40px -18px rgba(11, 36, 88, .45);
  --sombra-suave: 0 10px 30px -14px rgba(11, 36, 88, .3);
  --display: "Lilita", "Fredoka", system-ui, sans-serif;
  --ui: "Fredoka", "Nunito", system-ui, sans-serif;
  --texto: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body {
  margin: 0; font-family: var(--texto); color: var(--tinta); background: var(--arena);
  line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0 0 .5em; letter-spacing: .3px; }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-family: var(--ui); font-weight: 700; font-size: 1.25rem; letter-spacing: 0; }
p { margin: 0 0 1em; }
svg { width: 1.2em; height: 1.2em; flex: none; }
.contenedor { width: min(1180px, 100% - 40px); margin-inline: auto; position: relative; z-index: 1; }

/* ---------- Botones ---------- */
.boton {
  --fondo: var(--mar); --texto-b: #fff; --borde: var(--mar-2);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--ui); font-weight: 600; font-size: 1.05rem; text-decoration: none;
  padding: .8em 1.5em; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--fondo); color: var(--texto-b);
  box-shadow: 0 5px 0 var(--borde), 0 12px 24px -10px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.boton:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 7px 0 var(--borde), 0 16px 28px -10px rgba(0,0,0,.4); }
.boton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--borde), 0 6px 14px -8px rgba(0,0,0,.4); }
.boton:focus-visible { outline: 3px solid var(--noche); outline-offset: 3px; }
.boton--mango { --fondo: linear-gradient(180deg, #ffc93c, var(--mango)); --texto-b: var(--noche); --borde: #d98a00; }
.boton--blanco { --fondo: #fff; --texto-b: var(--noche); --borde: #b9d3ea; }
.boton--mar { --fondo: linear-gradient(180deg, var(--turquesa), var(--mar-2)); --borde: #0072a0; }
.boton--noche { --fondo: var(--noche); --borde: #050f2a; }
.boton--coral { --fondo: var(--coral); --borde: #d9463a; }
.boton--grande { font-size: 1.15rem; padding: .95em 1.8em; }
.boton--chico { font-size: .95rem; padding: .55em 1.1em; box-shadow: 0 4px 0 var(--borde); }
.boton--ancho { width: 100%; }

.etiqueta {
  display: inline-block; font-family: var(--ui); font-weight: 600; font-size: .9rem; letter-spacing: .06em;
  text-transform: uppercase; padding: .35em 1em; border-radius: 999px;
  background: #ffffffb3; color: var(--hoja-2); border: 2px solid #2bb67333; margin-bottom: 1rem;
}
.etiqueta--mango { background: var(--mango); color: var(--noche); border-color: transparent; }
.etiqueta--coral { background: var(--coral); color: #fff; border-color: transparent; }

/* ---------- Navegación ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, box-shadow .3s, padding .3s; padding: 14px 0; }
.nav.con-fondo { background: rgba(255, 250, 238, .88); backdrop-filter: blur(12px); box-shadow: 0 6px 24px -14px rgba(11,36,88,.4); padding: 6px 0; }
.nav__dentro { width: min(1240px, 100% - 32px); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.nav__logo img { width: 128px; transition: width .3s; filter: drop-shadow(0 4px 8px rgba(11,36,88,.2)); }
.nav.con-fondo .nav__logo img { width: 104px; }
.nav__enlaces { display: flex; align-items: center; gap: 6px; }
.nav__enlaces a:not(.boton) {
  font-family: var(--ui); font-weight: 500; text-decoration: none; color: var(--noche);
  padding: .45em .85em; border-radius: 999px; transition: background .2s;
}
.nav__enlaces a:not(.boton):hover { background: #ffffff99; }
.nav__hamburguesa { display: none; background: #fff; border: 0; border-radius: 14px; width: 48px; height: 44px; padding: 11px; cursor: pointer; box-shadow: var(--sombra-suave); }
.nav__hamburguesa span { display: block; height: 3px; border-radius: 3px; background: var(--noche); margin: 4px 0; transition: transform .25s, opacity .25s; }

/* ---------- Avisos ---------- */
.avisos { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px; width: min(560px, 92vw); }
.aviso { padding: 14px 20px; border-radius: 16px; background: #fff; box-shadow: var(--sombra); font-family: var(--ui); border-left: 6px solid var(--mar); animation: entra .4s ease; }
.aviso--error { border-color: var(--coral); }
.aviso--warning { border-color: var(--mango); }
.aviso--success { border-color: var(--hoja); }
@keyframes entra { from { opacity: 0; transform: translateY(-10px); } }

/* ==========================================================================
   HÉROE
   ========================================================================== */
.heroe {
  position: relative; min-height: 100vh; padding: 130px 0 170px; overflow: hidden;
  background: linear-gradient(180deg, #5fd4f5 0%, #9be7fb 45%, #d6f7ff 78%, #e9fbff 100%);
}
.heroe__cielo { position: absolute; inset: 0; pointer-events: none; }
.sol { position: absolute; top: 90px; right: 9%; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #fff6c9, #ffd23f 55%, #ffb703); box-shadow: 0 0 80px 30px #ffe57a88; }
.sol__rayos { position: absolute; inset: -60px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, #fff3b050 0deg 8deg, transparent 8deg 22deg);
  mask: radial-gradient(circle, transparent 42%, #000 43%, transparent 72%); -webkit-mask: radial-gradient(circle, transparent 42%, #000 43%, transparent 72%);
  animation: gira 60s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.nube { position: absolute; background: #fff; border-radius: 999px; opacity: .92; filter: drop-shadow(0 8px 10px #7cc8e033); }
.nube::before, .nube::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.nube--1 { width: 190px; height: 52px; top: 150px; left: -220px; animation: nube 70s linear infinite; }
.nube--1::before { width: 90px; height: 90px; top: -45px; left: 30px; }
.nube--1::after { width: 70px; height: 70px; top: -30px; left: 95px; }
.nube--2 { width: 130px; height: 38px; top: 260px; left: -160px; animation: nube 95s linear infinite -40s; opacity: .8; }
.nube--2::before { width: 60px; height: 60px; top: -30px; left: 20px; }
.nube--2::after { width: 48px; height: 48px; top: -22px; left: 64px; }
.nube--3 { width: 240px; height: 60px; top: 70px; left: -260px; animation: nube 120s linear infinite -80s; opacity: .7; }
.nube--3::before { width: 110px; height: 110px; top: -55px; left: 40px; }
.nube--3::after { width: 80px; height: 80px; top: -35px; left: 130px; }
@keyframes nube { to { transform: translateX(calc(100vw + 520px)); } }
.gaviota { position: absolute; width: 38px; fill: none; stroke: #2b4d7a; stroke-width: 2.5; stroke-linecap: round; opacity: .55; }
.gaviota--1 { top: 140px; left: 58%; animation: vuela 7s ease-in-out infinite; }
.gaviota--2 { top: 110px; left: 62%; width: 26px; animation: vuela 6s ease-in-out infinite -2s; }
@keyframes vuela { 50% { transform: translate(14px, -10px) scaleY(.7); } }

.heroe__dentro { width: min(1200px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1.05fr .95fr; gap: 30px; align-items: center; position: relative; z-index: 2; }
.heroe__logo { width: min(360px, 76%); margin: 0 0 10px -8px; filter: drop-shadow(0 14px 22px rgba(11,36,88,.25)); animation: flota 5s ease-in-out infinite; }
.heroe h1 { font-size: clamp(2.3rem, 5vw, 4rem); color: var(--noche); margin-bottom: .35em; text-shadow: 0 3px 0 #ffffff99; }
.subrayado { position: relative; color: var(--azul); white-space: nowrap; }
.subrayado::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.12em; height: .32em; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 14 C40 4 80 18 120 9 S180 6 197 11' fill='none' stroke='%23ffb703' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%; }
.heroe__bajada { font-size: 1.2rem; color: #22325e; max-width: 560px; }
.heroe__botones { display: flex; flex-wrap: wrap; gap: 14px; margin: 1.6rem 0 1.4rem; }
.heroe__confianza { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-family: var(--ui); font-weight: 500; color: var(--noche); font-size: .95rem; }
.heroe__confianza li { display: flex; align-items: center; gap: .45em; }
.heroe__confianza svg { color: var(--azul); }
@keyframes flota { 50% { transform: translateY(-8px); } }

.isla { position: relative; display: grid; justify-items: center; align-self: end; padding-top: 20px; margin-bottom: 70px; }
.isla__buimue { position: relative; z-index: 2; width: min(540px, 100%); margin-bottom: -64px; transition: opacity .35s ease; }
.isla__buimue.cambiando { opacity: 0; }
.isla__arena { position: relative; z-index: 1; width: 115%; max-width: 520px; height: 90px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, #fff2c4 0%, #ffe08a 45%, #f4c25a 100%); box-shadow: inset 0 -10px 18px #d9a43d88, 0 20px 30px -18px #0b245880; }
.isla__arena::before, .isla__arena::after { content: ""; position: absolute; border-radius: 50%; }
.isla__arena::before { width: 26px; height: 22px; left: 22%; top: 26px; background: radial-gradient(circle at 35% 35%, #9c6a42, #5c3a1f); box-shadow: 30px 6px 0 -3px #6d4527; }
.isla__arena::after { width: 34px; height: 16px; right: 20%; top: 34px; background: #ff8fa3; clip-path: polygon(50% 0, 62% 38%, 100% 38%, 69% 60%, 80% 100%, 50% 75%, 20% 100%, 31% 60%, 0 38%, 38% 38%); }
.isla__arena--noche { background: radial-gradient(ellipse at 50% 30%, #f0d79b 0%, #d9b46a 55%, #b38a45 100%); }
.globo-habla {
  position: absolute; top: 40px; left: 0; z-index: 3; max-width: 290px;
  font-family: var(--ui); font-weight: 600; font-size: 1.1rem; color: var(--tinta);
  background: linear-gradient(180deg, #fffde6, #fff2c2); border: 2.5px solid #5c4e2e; border-radius: 22px;
  padding: 14px 20px; box-shadow: 4px 6px 0 #0b245822; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .3s;
}
/* La puntita apunta hacia la palmera (abajo a la derecha): un triángulo marrón (borde) con otro crema encima */
.globo-habla::before, .globo-habla::after { content: ""; position: absolute; clip-path: polygon(0 0, 58% 0, 100% 100%); }
.globo-habla::before { bottom: -27px; right: 26px; width: 40px; height: 29.5px; background: #5c4e2e; }
.globo-habla::after { bottom: -21px; right: 31.5px; width: 31px; height: 24px; background: #fff2c2; }
.globo-habla.oculto { transform: scale(.6) translateY(20px); opacity: 0; }

.olas { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: 160px; z-index: 3; }
.ola--1 { fill: #48cae4; opacity: .55; animation: marea 9s ease-in-out infinite; }
.ola--2 { fill: #00b4d8; opacity: .7; animation: marea 7s ease-in-out infinite reverse; }
.ola--3 { fill: var(--arena); }
@keyframes marea { 50% { transform: translateX(-40px); } }

/* ==========================================================================
   SECCIONES
   ========================================================================== */
.seccion { position: relative; padding: 100px 0; }
.seccion--arena { background: var(--arena); }
.seccion--arena:nth-of-type(odd) { background: linear-gradient(180deg, var(--arena), #fff8e6); }
.titulo-seccion { text-align: center; max-width: 760px; margin: 0 auto 50px; }
.titulo-seccion h2 { color: var(--noche); }
.titulo-seccion p { color: var(--tinta-suave); font-size: 1.12rem; }
.titulo-seccion--claro h2, .titulo-seccion--claro p { color: #fff; }
.titulo-seccion--claro p { opacity: .92; }

/* ---------- Escenario de emociones ---------- */
.escenario { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 34px; align-items: center; }
.escenario__tarjeta {
  --color: var(--mar); position: relative; overflow: hidden; border-radius: 36px; padding: 30px 30px 34px;
  background: #fff; box-shadow: var(--sombra); display: grid; justify-items: center; text-align: center;
  border: 3px solid color-mix(in srgb, var(--color) 35%, white);
}
.escenario__circulo { position: absolute; width: 440px; height: 440px; top: -60px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--color) 45%, white) 0%, color-mix(in srgb, var(--color) 18%, white) 55%, transparent 70%);
  transition: background .5s; }
.escenario__tarjeta img { position: relative; width: min(340px, 100%); transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.escenario__tarjeta img.cambiando { transform: scale(.85); opacity: 0; }
.escenario__info { position: relative; }
.escenario__info h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; color: var(--noche); margin: 6px 0 4px; }
/* Espacio fijo para el texto: la tarjeta cambia de emoción sola y, si su alto cambiara, movería la página */
.escenario__info p { color: var(--tinta-suave); max-width: 420px; margin-inline: auto; min-height: 3.4em; }
@media (max-width: 600px) { .escenario__info p { min-height: 5.1em; } }
.enlace-gif { display: inline-flex; gap: .4em; align-items: center; font-family: var(--ui); font-weight: 600; color: var(--azul); text-decoration: none; padding: .4em 1em; border-radius: 999px; background: #eef5ff; }
.enlace-gif:hover { background: #dfeaff; }

.emociones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.emocion {
  --color: var(--mar); display: grid; justify-items: center; gap: 4px; padding: 12px 8px 14px; cursor: pointer;
  background: #ffffffcc; border: 2.5px solid transparent; border-radius: 22px; font-family: var(--ui); font-weight: 600;
  font-size: .95rem; color: var(--noche); transition: transform .2s, border-color .2s, background .2s, box-shadow .2s;
}
.emocion img { width: 72px; height: 72px; border-radius: 50%; background: color-mix(in srgb, var(--color) 22%, white); transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.emocion:hover { transform: translateY(-3px); background: #fff; box-shadow: var(--sombra-suave); }
.emocion:hover img { transform: scale(1.1) rotate(-4deg); }
.emocion.activa { border-color: var(--color); background: #fff; box-shadow: 0 10px 24px -12px var(--color); }
.emocion:focus-visible { outline: 3px solid var(--noche); outline-offset: 2px; }

/* ---------- Qué hace ---------- */
.seccion--mar { background: linear-gradient(160deg, #0096c7 0%, #00b4d8 45%, #1fc8c0 100%); overflow: hidden; }
.hojas-fondo { position: absolute; inset: 0; opacity: .13; pointer-events: none;
  background:
    radial-gradient(ellipse 60px 220px at 8% 10%, #0b5e3a 60%, transparent 61%),
    radial-gradient(ellipse 60px 220px at 12% 18%, #0b5e3a 60%, transparent 61%),
    radial-gradient(ellipse 70px 260px at 92% 80%, #0b5e3a 60%, transparent 61%),
    radial-gradient(ellipse 60px 220px at 86% 88%, #0b5e3a 60%, transparent 61%); }
.funciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.funcion { background: #ffffff; border-radius: var(--radio); padding: 28px 26px; box-shadow: 0 20px 40px -24px #03344d; transition: transform .25s, box-shadow .25s; }
.funcion:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 28px 44px -24px #03344d; }
.funcion__icono { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 14px; color: #fff; font-size: 1.5rem; }
.funcion:nth-child(9n+1) .funcion__icono { background: linear-gradient(135deg, #ff9f1c, #ff6b5b); }
.funcion:nth-child(9n+2) .funcion__icono { background: linear-gradient(135deg, #ff5da2, #c77dff); }
.funcion:nth-child(9n+3) .funcion__icono { background: linear-gradient(135deg, #4d96ff, #1f4fb4); }
.funcion:nth-child(9n+4) .funcion__icono { background: linear-gradient(135deg, #2bb673, #148a4f); }
.funcion:nth-child(9n+5) .funcion__icono { background: linear-gradient(135deg, #8e7cff, #5e60ce); }
.funcion:nth-child(9n+6) .funcion__icono { background: linear-gradient(135deg, #00b4d8, #0077b6); }
.funcion:nth-child(9n+7) .funcion__icono { background: linear-gradient(135deg, #ffb703, #fb8500); }
.funcion:nth-child(9n+8) .funcion__icono { background: linear-gradient(135deg, #06d6a0, #118ab2); }
.funcion:nth-child(9n+9) .funcion__icono { background: linear-gradient(135deg, #0b2458, #1f4fb4); }
.funcion h3 { color: var(--noche); margin-bottom: .3em; }
.funcion p { color: var(--tinta-suave); margin: 0; font-size: 1rem; }

/* ---------- Demo nocturna ---------- */
.seccion--noche { background: radial-gradient(ellipse at 70% 20%, #1c3f8f 0%, var(--noche) 55%, #06153a 100%); color: #fff; overflow: hidden; }
.estrellas { position: absolute; inset: 0; opacity: .8; pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 25% 60%, #fff, transparent),
    radial-gradient(2px 2px at 40% 15%, #fff8, transparent), radial-gradient(1px 1px at 55% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 75%, #fff, transparent), radial-gradient(1px 1px at 85% 30%, #fff, transparent),
    radial-gradient(2px 2px at 92% 65%, #fff9, transparent), radial-gradient(1px 1px at 5% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 48% 88%, #fff, transparent), radial-gradient(1px 1px at 33% 35%, #fff, transparent);
  animation: titila 4s ease-in-out infinite alternate; }
@keyframes titila { to { opacity: .45; } }
.demo { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.demo__texto h2 { color: #fff; }
.demo__texto > p { color: #cfdcff; font-size: 1.1rem; max-width: 560px; }
.chat { margin-top: 26px; background: #ffffff10; border: 1px solid #ffffff26; border-radius: 26px; backdrop-filter: blur(6px); overflow: hidden; box-shadow: 0 30px 60px -30px #000; }
.chat__barra { display: flex; align-items: center; gap: 7px; padding: 12px 18px; background: #ffffff14; font-family: var(--ui); }
.chat__barra span { width: 11px; height: 11px; border-radius: 50%; background: var(--coral); }
.chat__barra span:nth-child(2) { background: var(--mango); }
.chat__barra span:nth-child(3) { background: var(--hoja); }
.chat__barra b { margin-left: 8px; font-weight: 600; opacity: .85; }
/* Alto FIJO: si cambiara con cada mensaje, empujaría toda la página hacia arriba y hacia abajo.
   Los mensajes nuevos entran abajo y los viejos suben y se desvanecen por arriba. */
.chat__mensajes { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; padding: 20px;
  height: 340px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 48px); mask-image: linear-gradient(to bottom, transparent 0, #000 48px); }
.chat__mensajes > * { flex-shrink: 0; }
.msj { max-width: 85%; padding: 12px 16px; border-radius: 20px; font-size: 1.02rem; animation: burbuja .45s cubic-bezier(.34,1.56,.64,1); }
.msj--yo { align-self: flex-end; background: linear-gradient(135deg, var(--mar), var(--mar-2)); border-bottom-right-radius: 6px; }
.msj--yo::before { content: "🎤 "; }
.msj--buimue { align-self: flex-start; background: #fff; color: var(--tinta); border-bottom-left-radius: 6px; }
.msj--buimue b { font-family: var(--ui); color: var(--hoja-2); display: block; font-size: .85rem; }
.msj--escribiendo { align-self: flex-start; background: #fff; padding: 14px 18px; display: flex; gap: 5px; }
.msj--escribiendo i { width: 8px; height: 8px; border-radius: 50%; background: #9aa5c4; animation: punto 1s infinite; }
.msj--escribiendo i:nth-child(2) { animation-delay: .15s; }
.msj--escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes punto { 50% { transform: translateY(-5px); background: var(--mar); } }
@keyframes burbuja { from { opacity: 0; transform: translateY(12px) scale(.9); } }
.demo__palma { position: relative; display: grid; justify-items: center; }
.demo__palma img { position: relative; z-index: 2; width: min(380px, 100%); margin-bottom: -40px; transition: opacity .3s; }
.demo__palma .isla__arena { width: 100%; max-width: 420px; }
.luna { position: absolute; top: -20px; right: 8%; width: 90px; height: 90px; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 60px 10px #fff5c455, inset -18px -8px 0 #efe0a8; }

/* ---------- Pasos ---------- */
.pasos { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; position: relative; }
.pasos::before { content: ""; position: absolute; top: 44px; left: 16%; right: 16%; height: 4px;
  background: repeating-linear-gradient(90deg, var(--mango) 0 14px, transparent 14px 26px); border-radius: 4px; }
.paso { text-align: center; position: relative; background: #fff; border-radius: var(--radio); padding: 30px 26px 26px; box-shadow: var(--sombra-suave); margin-top: 44px; }
.paso__coco { position: absolute; top: -44px; left: 50%; transform: translateX(-50%); width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--display); font-size: 2.4rem; color: #fff;
  background: radial-gradient(circle at 35% 30%, #a8764b, #6b4226 60%, #4a2c16); box-shadow: 0 10px 20px -8px #4a2c16, inset 0 -6px 0 #0003; }
.paso__coco::after { content: ""; position: absolute; top: -8px; right: 6px; width: 34px; height: 18px; border-radius: 0 100% 0 100%; background: var(--hoja); transform: rotate(-20deg); }
.paso h3 { margin-top: 36px; color: var(--noche); font-family: var(--display); font-weight: 400; font-size: 1.6rem; }
.paso p { color: var(--tinta-suave); margin: 0; }

/* ---------- Precios ---------- */
.seccion--precios { background: linear-gradient(180deg, #0077b6 0%, #00a6c9 60%, #48cae4 100%); overflow: hidden; }
.seccion--precios::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12;
  background: radial-gradient(circle at 15% 25%, #fff 0 2px, transparent 3px) 0 0 / 40px 40px; }
.interruptor { display: flex; width: fit-content; margin: -20px auto 46px; background: #ffffff2e; padding: 6px; border-radius: 999px; gap: 4px; }
.interruptor__op { font-family: var(--ui); font-weight: 600; font-size: 1.05rem; border: 0; background: transparent; color: #fff; padding: .6em 1.4em; border-radius: 999px; cursor: pointer; display: flex; gap: .5em; align-items: center; transition: background .25s, color .25s; }
.interruptor__op.activo { background: #fff; color: var(--noche); box-shadow: 0 6px 16px -8px #0006; }
.interruptor__ahorro { font-size: .75rem; background: var(--mango); color: var(--noche); padding: .2em .6em; border-radius: 999px; }
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; max-width: 1040px; margin-inline: auto; }
.plan { position: relative; background: #fff; border-radius: 30px; padding: 26px 22px 24px; display: flex; flex-direction: column; box-shadow: 0 26px 50px -28px #002a44; transition: transform .25s; }
.plan:hover { transform: translateY(-6px); }
.plan--destacado { background: linear-gradient(180deg, #fffaf0, #fff); outline: 4px solid var(--mango); transform: translateY(-14px); box-shadow: 0 34px 60px -26px #002a44; }
.plan--destacado:hover { transform: translateY(-20px); }
.plan__cinta { position: absolute; top: -16px; left: 50%; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; background: var(--coral); color: #fff; font-family: var(--ui); font-weight: 600; padding: .35em 1.1em; border-radius: 999px; box-shadow: 0 6px 12px -6px #a8281c; }
.plan__palma { width: 110px; height: 110px; margin: -6px auto 4px; }
.plan h3 { font-family: var(--display); font-weight: 400; font-size: 1.8rem; text-align: center; color: var(--noche); margin: 0; }
.plan__lema { text-align: center; color: var(--tinta-suave); font-size: .95rem; min-height: 2.9em; margin: 4px 0 10px; }
.plan__precio { text-align: center; margin-bottom: 18px; min-height: 92px; }
.precio { display: flex; align-items: baseline; justify-content: center; gap: 2px; font-family: var(--display); font-size: 3rem; color: var(--noche); line-height: 1; }
.precio small { font-family: var(--ui); font-weight: 600; font-size: 1rem; color: var(--tinta-suave); }
.precio__nota { display: block; margin-top: 6px; font-size: .88rem; color: var(--hoja-2); font-weight: 700; }
.plan__lista { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; font-size: .95rem; }
.plan__lista li { display: flex; gap: .55em; align-items: flex-start; line-height: 1.4; }
.plan__lista svg { margin-top: 1px; }
.plan__lista .ok { color: var(--hoja); }
.plan__lista .no { color: #9aa2b8; text-decoration: line-through; }
.plan__lista .no svg { color: #c4c9d6; }
.plan__pcs { font-family: var(--ui); font-weight: 600; color: var(--azul); }
.plan--pronto { opacity: .9; }
.plan--pronto .plan__cinta { background: var(--noche); box-shadow: 0 6px 12px -6px #050f2a; }
.boton--apagado { --fondo: #e4ebf3; --texto-b: var(--tinta-suave); --borde: #c3cfdd; cursor: default; }
.boton--apagado:hover, .boton--apagado:active { transform: none; filter: none; box-shadow: 0 5px 0 var(--borde); }
.nota-precios { max-width: 760px; margin: 28px auto 0; text-align: center; color: #fff; opacity: .9; font-size: .95rem; }
.garantias { list-style: none; padding: 0; margin: 60px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 290px)); justify-content: center; gap: 16px; }
.garantias li { display: flex; gap: 14px; align-items: flex-start; background: #ffffff24; border: 1px solid #ffffff40; color: #fff; padding: 18px; border-radius: 20px; }
.garantias svg { width: 2rem; height: 2rem; color: var(--mango); }
.garantias b { font-family: var(--ui); font-weight: 600; display: block; font-size: 1.05rem; }
.garantias span { font-size: .92rem; opacity: .9; }

/* ---------- Preguntas ---------- */
.preguntas { display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; align-items: start; }
.preguntas__lado { position: sticky; top: 110px; }
.preguntas__lado h2 { color: var(--noche); }
.preguntas__lado img { width: 220px; margin: 10px 0; }
.requisitos { background: #fff; border-radius: var(--radio); padding: 20px 24px; box-shadow: var(--sombra-suave); }
.requisitos h3 { color: var(--noche); }
.requisitos ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.requisitos li { display: flex; gap: .6em; align-items: center; }
.requisitos svg { color: var(--mar-2); }
.acordeon { display: grid; gap: 12px; }
.acordeon details { background: #fff; border-radius: 22px; box-shadow: var(--sombra-suave); overflow: hidden; border: 2px solid transparent; transition: border-color .2s; }
.acordeon details[open] { border-color: var(--turquesa); }
.acordeon summary { list-style: none; cursor: pointer; padding: 20px 60px 20px 24px; font-family: var(--ui); font-weight: 600; font-size: 1.1rem; color: var(--noche); position: relative; }
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after { content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--espuma); color: var(--mar-2); font-size: 1.4rem; transition: transform .25s, background .25s; }
.acordeon details[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--mango); color: var(--noche); }
.acordeon p { padding: 0 24px 20px; margin: 0; color: var(--tinta-suave); }

/* ---------- Atardecer ---------- */
.atardecer { position: relative; overflow: hidden; padding: 90px 0 120px; color: #fff;
  background: linear-gradient(180deg, #ff9e6d 0%, #ff6f7d 45%, #b24592 80%, #6a2c91 100%); }
.atardecer__sol { position: absolute; left: 50%; bottom: -160px; transform: translateX(-50%); width: 420px; height: 420px; border-radius: 50%;
  background: radial-gradient(circle, #ffe38a, #ffb347 60%, transparent 70%); opacity: .7; }
.atardecer__dentro { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; }
.atardecer img { width: 280px; filter: drop-shadow(0 20px 20px #0004); }
.atardecer h2 { text-shadow: 0 4px 0 #0002; }
.atardecer p { font-size: 1.15rem; max-width: 560px; }

/* ---------- Pie ---------- */
.pie { position: relative; background: var(--noche); color: #cfdcff; padding: 90px 0 30px; }
.pie__ola { position: absolute; top: -1px; left: 0; width: 100%; height: 90px; fill: #6a2c91; }
.pagina-interna .pie__ola { fill: var(--arena); }
.pie__dentro { width: min(1180px, 100% - 40px); margin-inline: auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.pie__marca img { width: 170px; margin-bottom: 10px; filter: drop-shadow(0 6px 10px #0006); }
.pie__col { display: grid; gap: 8px; align-content: start; }
.pie__col h4 { color: #fff; font-size: 1.3rem; margin-bottom: 4px; }
.pie__col a { text-decoration: none; opacity: .85; }
.pie__col a:hover { opacity: 1; color: var(--mango); }
.pie__legal { text-align: center; margin: 40px 0 0; opacity: .6; font-size: .9rem; }
.whatsapp { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; box-shadow: 0 12px 24px -8px #0b6b33; transition: transform .2s; }
.whatsapp svg { width: 34px; height: 34px; }
.whatsapp:hover { transform: scale(1.08) rotate(-6deg); }

/* ==========================================================================
   PÁGINAS INTERNAS (compra, gracias)
   ========================================================================== */
.pagina-interna { background: var(--arena); }
.interna { padding: 130px 0 100px; min-height: 80vh; background:
  radial-gradient(circle at 90% 10%, #caf0f8 0, transparent 35%), radial-gradient(circle at 5% 90%, #ffe3a3 0, transparent 35%), var(--arena); }
.compra { display: grid; grid-template-columns: 1.15fr .85fr; gap: 34px; align-items: start; }
.tarjeta { background: #fff; border-radius: 30px; padding: 34px; box-shadow: var(--sombra); }
.tarjeta h1 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--noche); }
.tarjeta h2 { font-size: 1.7rem; color: var(--noche); }
.campo { display: grid; gap: 6px; margin-bottom: 18px; }
.campo label, .grupo-titulo { font-family: var(--ui); font-weight: 600; color: var(--noche); }
.campo input, .campo select {
  font: inherit; padding: 14px 16px; border-radius: 16px; border: 2px solid #dfe6f3; background: #fbfdff; color: var(--tinta); transition: border-color .2s, box-shadow .2s;
}
.campo input:focus, .campo select:focus { outline: none; border-color: var(--mar); box-shadow: 0 0 0 4px #00b4d833; }
.errorlist { list-style: none; padding: 0; margin: 0; color: #d0342c; font-size: .9rem; }
.opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 8px 0 20px; }
.opcion { position: relative; }
.opcion input { position: absolute; opacity: 0; }
.opcion label { display: grid; gap: 2px; padding: 16px 18px; border-radius: 18px; border: 2.5px solid #dfe6f3; cursor: pointer; transition: border-color .2s, background .2s; height: 100%; }
.opcion label b { font-family: var(--ui); font-weight: 600; color: var(--noche); font-size: 1.05rem; display: flex; align-items: center; gap: .45em; }
.opcion label span { color: var(--tinta-suave); font-size: .92rem; }
.opcion input:checked + label { border-color: var(--mar); background: #effbff; }
.opcion input:focus-visible + label { outline: 3px solid var(--noche); outline-offset: 2px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 22px; color: var(--tinta-suave); font-size: .95rem; }
.check input { width: 20px; height: 20px; accent-color: var(--mar-2); margin-top: 3px; }
.resumen { position: sticky; top: 110px; text-align: center; overflow: hidden; }
.resumen img { width: 210px; margin: -10px auto 0; }
.resumen .precio { font-size: 3.2rem; }
.resumen ul { text-align: left; }
.otros { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; font-family: var(--ui); }
.otros a { text-decoration: none; padding: .35em .9em; border-radius: 999px; background: var(--espuma); color: var(--mar-2); font-weight: 600; font-size: .9rem; }
.nota-demo { background: #fff6d9; border: 2px dashed var(--mango); border-radius: 18px; padding: 14px 18px; margin-bottom: 22px; font-size: .95rem; }
.licencia { font-family: "Fredoka", monospace; font-weight: 600; font-size: clamp(1.4rem, 4vw, 2.1rem); letter-spacing: .08em; color: var(--noche);
  background: repeating-linear-gradient(-45deg, #fff8e0, #fff8e0 12px, #fff2c7 12px, #fff2c7 24px); border: 3px dashed var(--mango); border-radius: 20px; padding: 18px; margin: 10px 0 8px; user-select: all; text-align: center; }
.aviso-correo { display: flex; flex-direction: column; gap: 6px; background: #e8f8ef; border: 2px solid var(--hoja); border-radius: 18px; padding: 16px 20px; margin: 18px auto; max-width: 560px; }
.aviso-correo b { color: var(--hoja-2); font-family: var(--ui); font-size: 1.1rem; word-break: break-word; }
.aviso-correo span { color: var(--tinta-suave); font-size: .95rem; }
.aviso-correo--error { background: #fff1ef; border-color: var(--coral); }
.aviso-correo--error b { color: #c0392b; }
.reenviar { margin: 0 0 18px; }
.enlace-boton { background: none; border: 0; padding: 4px; color: var(--mar-2); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.gracias { text-align: center; max-width: 780px; margin-inline: auto; }
.gracias img.palma-gracias { width: 260px; margin: -30px auto 0; }
.datos-banco { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; text-align: left; background: #f3f8ff; border-radius: 18px; padding: 18px 22px; margin: 18px 0; }
.datos-banco dt { font-weight: 800; color: var(--noche); }
.datos-banco dd { margin: 0; }
.pasos-mini { text-align: left; display: grid; gap: 10px; counter-reset: p; list-style: none; padding: 0; margin: 20px 0; }
.pasos-mini li { counter-increment: p; display: flex; gap: 12px; align-items: flex-start; }
.pasos-mini li::before { content: counter(p); flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--mango); color: var(--noche); font-family: var(--display); display: grid; place-items: center; }
.confeti-pieza { position: fixed; top: -20px; width: 10px; height: 16px; z-index: 70; pointer-events: none; border-radius: 2px; animation: cae linear forwards; }
@keyframes cae { to { transform: translateY(110vh) rotate(720deg); } }

/* ---------- Revelado al hacer scroll ---------- */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i, 0) * 70ms); }
.revelar.visible { opacity: 1; transform: none; }
.plan--destacado.revelar.visible { transform: translateY(-14px); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .planes { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .plan--destacado, .plan--destacado.revelar.visible { transform: none; }
  .garantias { grid-template-columns: repeat(auto-fit, minmax(220px, 290px)); }
  .funciones { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  body { font-size: 16px; }
  .nav__hamburguesa { display: block; }
  .nav__enlaces { position: fixed; top: 72px; right: 16px; left: 16px; flex-direction: column; align-items: stretch; gap: 4px; padding: 14px;
    background: #fffaf0; border-radius: 24px; box-shadow: var(--sombra); transform: translateY(-12px); opacity: 0; pointer-events: none; transition: .25s; }
  .nav__enlaces.abierto { transform: none; opacity: 1; pointer-events: auto; }
  .nav__enlaces a:not(.boton) { padding: .7em 1em; }
  .heroe { padding-top: 110px; }
  .heroe__dentro, .escenario, .demo, .preguntas, .compra, .atardecer__dentro { grid-template-columns: 1fr; }
  .heroe__texto { text-align: center; }
  .heroe__logo { margin-inline: auto; }
  .heroe__bajada { margin-inline: auto; }
  .heroe__botones, .heroe__confianza { justify-content: center; }
  .sol { width: 100px; height: 100px; top: 80px; right: 4%; }
  .isla { padding-top: 60px; margin-bottom: 0; }
  .pasos { grid-template-columns: 1fr; gap: 20px; }
  .pasos::before { display: none; }
  .preguntas__lado { position: static; text-align: center; }
  .preguntas__lado img { margin-inline: auto; }
  .resumen { position: static; order: -1; }
  .atardecer__dentro { text-align: center; justify-items: center; }
  .pie__dentro { grid-template-columns: 1fr 1fr; }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .seccion { padding: 70px 0; }
  .planes, .funciones, .garantias { grid-template-columns: 1fr; }
  .emociones { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .emocion { font-size: .8rem; padding: 8px 4px 10px; }
  .emocion img { width: 56px; height: 56px; }
  .opciones { grid-template-columns: 1fr; }
  .tarjeta { padding: 24px 20px; }
  .globo-habla { left: 0; font-size: 1rem; }
  .boton--grande { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .revelar { opacity: 1; transform: none; }
}
.pie__lema { font-family: var(--ui); font-weight: 600; color: var(--mango); margin: -4px 0 6px; font-size: 1.1rem; }