@font-face{font-family:'Fredoka';font-weight:300 700;font-display:swap;src:url(/fuentes/fredoka.woff2) format('woff2')}
@font-face{font-family:'Andika';font-weight:400;font-display:swap;src:url(/fuentes/andika-400.woff2) format('woff2')}
@font-face{font-family:'Andika';font-weight:700;font-display:swap;src:url(/fuentes/andika-700.woff2) format('woff2')}
:root{
  --tinta:#1d2440;--suave:#5d6687;--claro:#8b93ad;--linea:#ece6da;
  --fondo:#fffaf3;--blanco:#fff;--crema:#fff4e2;
  --naranja:#ff9a3c;--rosa:#ff5f8f;--morado:#7a5cff;--azul:#3d7bff;--verde:#1fbf75;--amarillo:#ffc83d;
  --grad:linear-gradient(135deg,#ffb547 0%,#ff5f8f 100%);
  --sombra:0 10px 30px rgba(29,36,64,.08),0 2px 6px rgba(29,36,64,.05);
  --radio:24px;--titulo:'Fredoka',system-ui,sans-serif;--texto:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--texto);color:var(--tinta);background:var(--fondo);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.contenedor{width:min(1160px,100% - 40px);margin:0 auto}
h1,h2,h3{font-family:var(--titulo);line-height:1.12;letter-spacing:-.01em}
h1{font-size:clamp(2.4rem,6vw,4.2rem);font-weight:700}
h2{font-size:clamp(1.9rem,4.4vw,2.9rem);font-weight:700}
h3{font-size:1.35rem;font-weight:600}
.etiq{display:inline-flex;align-items:center;gap:8px;font-family:var(--titulo);font-weight:600;font-size:.95rem;color:var(--rosa);background:#ffe8ef;border-radius:999px;padding:6px 14px}
.sub{color:var(--suave);font-size:1.15rem;max-width:620px}
.centro{text-align:center}.centro .sub{margin-left:auto;margin-right:auto}
section{padding:88px 0}

/* botones */
.bt{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--titulo);font-weight:600;font-size:1.08rem;border-radius:999px;padding:15px 26px;text-decoration:none;border:none;cursor:pointer;transition:transform .15s,box-shadow .15s}
.bt:hover{transform:translateY(-2px)}
.bt-pri{background:var(--grad);color:#fff;box-shadow:0 10px 24px rgba(255,95,143,.32)}
.bt-sec{background:#fff;color:var(--tinta);box-shadow:inset 0 0 0 2px var(--linea)}
.bt-peq{padding:10px 18px;font-size:.98rem}
.bt[aria-disabled=true]{opacity:.55;pointer-events:none}

/* cabecera */
.cab{position:sticky;top:0;z-index:20;background:rgba(255,250,243,.88);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.cab.con-borde{border-color:var(--linea)}
.cab .contenedor{display:flex;align-items:center;gap:20px;height:72px}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--titulo);font-weight:700;font-size:1.45rem}
.marca img{width:40px;height:40px}
.marca span b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a{text-decoration:none;color:var(--suave);font-weight:500;white-space:nowrap}
.menu a:hover{color:var(--tinta)}
@media(max-width:1020px){.menu{display:none}.cab .bt{margin-left:auto}}
.cab .bt{white-space:nowrap}

/* portada */
.heroe{padding:56px 0 40px;overflow:hidden}
.heroe .contenedor{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.heroe h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.heroe .sub{margin:18px 0 28px}
.acciones{display:flex;gap:12px;flex-wrap:wrap}
.confianza{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;color:var(--suave);font-size:.98rem}
.confianza span{display:flex;align-items:center;gap:8px}
.confianza i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#e7f8ef;color:var(--verde);display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:700}
.telefonos{position:relative;height:560px}
.telefono{position:absolute;width:250px;border-radius:38px;background:#111;padding:9px;box-shadow:0 30px 60px rgba(29,36,64,.25)}
.telefono img{border-radius:30px;aspect-ratio:412/915;object-fit:cover;width:100%}
.telefono.t1{left:6%;top:30px;transform:rotate(-6deg)}
.telefono.t2{right:6%;top:0;transform:rotate(5deg);z-index:2}
.burbuja{position:absolute;z-index:3;background:#fff;border-radius:18px;padding:10px 14px;box-shadow:var(--sombra);font-family:var(--titulo);font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px}
.burbuja.b1{left:0;bottom:70px}.burbuja.b2{right:0;bottom:20px}
@media(max-width:900px){.heroe .contenedor{grid-template-columns:1fr}.telefonos{height:480px;max-width:460px;margin:0 auto;width:100%}.telefono{width:210px}}

/* dispositivos: tablet, iPhone y Android */
.dispositivos{position:relative;height:600px;max-width:560px;margin:0 auto;width:100%}
.disp{position:absolute;margin:0;display:flex;flex-direction:column;align-items:center;gap:12px}
.disp img{display:block;width:100%;height:auto}
.disp figcaption{font-family:var(--titulo);font-weight:600;font-size:.9rem;background:#fff;border-radius:999px;padding:5px 14px;box-shadow:var(--sombra);white-space:nowrap}
.disp figcaption small{color:var(--claro);font-weight:500;margin-left:6px}
/* medidas en cqw (ancho del aparato) para que las esquinas sean reales en cualquier pantalla */
.disp{container-type:inline-size}
.disp.tablet{left:50%;top:0;width:58%;transform:translateX(-50%)}
.tablet .marco{position:relative;background:#1d1d1f;border-radius:7cqw;padding:4.6cqw 4cqw;box-shadow:0 30px 60px rgba(29,36,64,.22),inset 0 0 0 2px #3a3a3c}
.tablet .marco img{border-radius:3cqw;aspect-ratio:820/1180;object-fit:cover}
.tablet .camara{position:absolute;top:1.8cqw;left:50%;width:1.6cqw;height:1.6cqw;transform:translateX(-50%);border-radius:50%;background:#3b4250}
.disp.iphone{left:0;bottom:0;width:31%;z-index:2}
.iphone .marco{position:relative;border-radius:15cqw;padding:1.6cqw;background:linear-gradient(145deg,#e7e3dd 0%,#a9a39b 30%,#ece9e4 52%,#8d877f 78%,#d6d1ca 100%);box-shadow:0 24px 48px rgba(29,36,64,.28)}
.iphone .pantalla{border-radius:13.4cqw;padding:2.6cqw;background:#0b0b0c}
.iphone .pantalla img{border-radius:11cqw;aspect-ratio:393/852;object-fit:cover}
.iphone .isla{position:absolute;top:6.4cqw;left:50%;width:30%;height:8.4cqw;transform:translateX(-50%);background:#0b0b0c;border-radius:999px;z-index:2}
.iphone .boton{position:absolute;width:3px;border-radius:2px;background:#a39d95}
.iphone .b1{left:-3px;top:22%;height:9%}.iphone .b2{left:-3px;top:34%;height:9%}.iphone .b3{right:-3px;top:28%;height:14%}
.disp.android{right:0;bottom:16px;width:31%;z-index:2}
.android .marco{position:relative;border-radius:12cqw;padding:3.4cqw;background:linear-gradient(160deg,#2f3d36,#1c2622);box-shadow:0 24px 48px rgba(29,36,64,.28),inset 0 0 0 1.5px #4b5d53}
.android .marco img{border-radius:9cqw;aspect-ratio:412/915;object-fit:cover}
.android .perfo{position:absolute;top:6.6cqw;left:50%;width:5cqw;height:5cqw;transform:translateX(-50%);border-radius:50%;background:#0b0f0d;box-shadow:0 0 0 1.5px #1c2622;z-index:2}
.android .gestos{position:absolute;bottom:5.6cqw;left:50%;width:30%;height:1.8cqw;transform:translateX(-50%);border-radius:4px;background:rgba(255,255,255,.75);z-index:2}
.android .boton{position:absolute;right:-3px;width:3px;border-radius:2px;background:#3c4a43}
.android .b1{top:20%;height:8%}.android .b2{top:31%;height:14%}
.dispositivos .burbuja.b1{left:22%;bottom:auto;top:46%}
.dispositivos .burbuja.b2{right:20%;bottom:auto;top:12%}
@media(max-width:900px){.dispositivos{height:520px}}
@media(max-width:520px){.dispositivos .burbuja{font-size:.72rem;padding:5px 9px;border-radius:12px}.dispositivos .burbuja.b1{left:0;top:25%}.dispositivos{height:440px}.disp figcaption{font-size:.78rem;padding:4px 10px}.disp figcaption small{display:none}}

/* tiras de valores */
.franja{background:var(--blanco);border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);padding:26px 0}
.franja .contenedor{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.franja div{display:flex;align-items:center;gap:12px;font-weight:600}
.franja b{font-size:1.7rem}
@media(max-width:820px){.franja .contenedor{grid-template-columns:repeat(2,1fr)}}

/* apps */
.rejilla-apps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-top:40px}
.app{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:26px;display:flex;flex-direction:column;gap:16px;position:relative}
.app .cabeza{display:flex;gap:16px;align-items:center}
.app .cabeza img{width:76px;height:76px;border-radius:20px;box-shadow:0 6px 14px rgba(0,0,0,.1)}
.app .edad{color:var(--claro);font-size:.92rem}
.app p{color:var(--suave)}
.app ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.app li{background:var(--crema);border-radius:999px;padding:5px 12px;font-size:.88rem;font-weight:600;color:#8a5a00}
.app .pie{display:flex;gap:10px;margin-top:auto;flex-wrap:wrap}
.app .nuevo{position:absolute;top:18px;right:18px;background:var(--verde);color:#fff;font-family:var(--titulo);font-weight:600;font-size:.82rem;border-radius:999px;padding:4px 12px}
.app.pronto{background:repeating-linear-gradient(135deg,#fff,#fff 14px,#fff9ef 14px,#fff9ef 28px);box-shadow:inset 0 0 0 2px dashed var(--linea);border:2px dashed #eadfca;justify-content:center;align-items:center;text-align:center;min-height:300px}
.app.pronto b{font-size:3rem}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.paso{background:var(--blanco);border-radius:var(--radio);padding:26px;box-shadow:var(--sombra)}
.paso .num{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;margin-bottom:14px}
.paso p{color:var(--suave);font-size:.98rem;margin-top:6px}
@media(max-width:900px){.pasos{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}

/* bloques con imagen */
.doble{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.doble.inv .vis{order:-1}
.lista-check{list-style:none;margin:22px 0 28px;display:grid;gap:14px}
.lista-check li{display:flex;gap:12px;color:var(--suave)}
.lista-check li b{color:var(--tinta)}
.lista-check li::before{content:'✓';flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#e7f8ef;color:var(--verde);font-weight:700;display:flex;align-items:center;justify-content:center;margin-top:1px}
.vis{display:flex;justify-content:center;gap:18px}
.vis .telefono{position:static;transform:none;width:min(280px,46%)}
@media(max-width:900px){.doble{grid-template-columns:1fr}.doble.inv .vis{order:0}}

/* galería */
.galeria{display:flex;gap:18px;overflow-x:auto;padding:30px 4px 20px;scroll-snap-type:x mandatory}
.galeria figure{flex:0 0 220px;scroll-snap-align:start}
.galeria .telefono{position:static;transform:none;width:100%}
.galeria figcaption{text-align:center;color:var(--suave);font-size:.92rem;margin-top:12px;font-weight:600}

/* planes */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:stretch}
.plan{background:var(--blanco);border-radius:var(--radio);box-shadow:var(--sombra);padding:30px 26px;display:flex;flex-direction:column;gap:14px;position:relative}
.plan.destacado{box-shadow:0 0 0 3px var(--rosa),var(--sombra);transform:translateY(-8px)}
.plan .cinta{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--grad);color:#fff;font-family:var(--titulo);font-weight:600;font-size:.85rem;padding:5px 16px;border-radius:999px;white-space:nowrap}
.plan .precio{font-family:var(--titulo);font-size:2.2rem;font-weight:700}
.plan .precio small{font-size:1rem;color:var(--claro);font-weight:500}
.plan ul{list-style:none;display:grid;gap:10px;color:var(--suave);font-size:.98rem}
.plan li::before{content:'✓ ';color:var(--verde);font-weight:700}
.plan .bt{margin-top:auto}
.aviso{margin-top:30px;background:#eef4ff;color:#2a4fa8;border-radius:18px;padding:16px 20px;display:flex;gap:12px;align-items:flex-start}
@media(max-width:900px){.planes{grid-template-columns:1fr}.plan.destacado{transform:none}}

/* preguntas */
.preguntas{max-width:820px;margin:40px auto 0;display:grid;gap:12px}
details{background:var(--blanco);border-radius:18px;box-shadow:var(--sombra);padding:18px 22px}
summary{cursor:pointer;font-family:var(--titulo);font-weight:600;font-size:1.12rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::after{content:'+';color:var(--rosa);font-size:1.4rem;line-height:1}
details[open] summary::after{content:'–'}
details p{color:var(--suave);margin-top:10px}

/* llamado final y pie */
.llamado{background:var(--grad);color:#fff;border-radius:32px;padding:56px 40px;text-align:center}
.llamado .sub{color:rgba(255,255,255,.92);margin:14px auto 26px}
.llamado .bt-sec{box-shadow:none}
.pie-pag{padding:50px 0 40px;color:var(--suave);font-size:.95rem}
.pie-pag .contenedor{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center}
.pie-pag nav{display:flex;gap:22px;flex-wrap:wrap}
.pie-pag a{text-decoration:none}
.pie-pag a:hover{color:var(--tinta)}

/* página de app */
.app-heroe{padding:48px 0 20px}
.app-heroe .contenedor{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.app-heroe .icono{width:96px;height:96px;border-radius:26px;box-shadow:0 10px 24px rgba(0,0,0,.12);margin-bottom:18px}
@media(max-width:900px){.app-heroe .contenedor{grid-template-columns:1fr}}
.temario{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:36px}
.tema{background:var(--blanco);border-radius:20px;box-shadow:var(--sombra);padding:22px}
.tema h3{display:flex;align-items:center;gap:10px}
.tema h3 span{font-size:1.5rem}
.tema p{color:var(--suave);font-size:.95rem;margin-top:6px}
.tema .pal{font-family:'Andika',var(--texto);color:var(--tinta);margin-top:10px;font-size:1.02rem}
.instalar{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px}
.instalar div{background:var(--blanco);border-radius:20px;box-shadow:var(--sombra);padding:24px}
.instalar ol{margin:10px 0 0 20px;color:var(--suave)}
@media(max-width:700px){.instalar{grid-template-columns:1fr}}
.legal{max-width:780px;padding:56px 0 80px}
.legal h1{font-size:2.4rem;margin-bottom:6px}
.legal h2{font-size:1.4rem;margin:30px 0 8px}
.legal p,.legal li{color:var(--suave)}
.legal ul{margin-left:22px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}