/* home.css — estilos de la portada y de «Elena en escena» (antes en línea en index.php) */
:root{
  --crema:#FEF8D6;
  --amarillo:#FEEC72;
  --turquesa:#3FE1E2;
  --rosa:#F88492;
  --magenta:#F090F0;
  --magenta-osc:#7E0F3E;
  --naranja:#FFCE7A;
  --tinta:#140C10;
  --blanco:#FFFFFF;
  --borde:3px solid var(--tinta);
  --sombra:8px 8px 0 var(--tinta);
  --sombra-s:5px 5px 0 var(--tinta);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img,svg{max-width:100%;height:auto}
input,textarea,select,button{font-size:16px} /* evita el zoom automático en iOS */
body{
  font-family:'Space Grotesk',sans-serif;
  background:var(--crema);
  color:var(--tinta);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--magenta);color:var(--tinta)}

h1,h2,h3,.display{font-family:'Archivo Black',sans-serif;line-height:.95;text-transform:uppercase}

/* ---------- grano ---------- */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* ---------- hero ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:7.5rem 1.2rem 4rem;position:relative;
}
.hero .logo-hero{width:clamp(250px,48vw,500px);margin-bottom:1.6rem}
.hero h1.titulo-logo{font-size:20px;letter-spacing:.14em;margin:0 0 1.4rem}
.t-yo{color:#FF2877}
.t-no{color:#FFBD22}
.t-est{color:#01C3E1}
.t-prep{color:#9C4BF5}
.hero .kicker{
  display:inline-block;background:var(--tinta);color:var(--amarillo);
  font-family:'Archivo Black',sans-serif;font-size:.8rem;letter-spacing:.25em;text-transform:uppercase;
  padding:.5rem 1.1rem;border-radius:999px;transform:rotate(-2deg);margin-bottom:1.6rem;
}
.hero h1{font-size:clamp(2.6rem,9.5vw,7.5rem);letter-spacing:-.01em}
.hero h1 .out{
  color:transparent;-webkit-text-stroke:2.5px var(--tinta);
  display:block;
}
.hero h1 .fill-y{color:var(--magenta-osc);display:block}
.hero p.lede{max-width:620px;margin:1.8rem auto 0;font-size:clamp(1rem,2vw,1.25rem);font-weight:500}
.hero .acciones{margin-top:2.4rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.95rem;letter-spacing:.03em;
  padding:1rem 1.7rem;border:var(--borde);border-radius:16px;background:var(--amarillo);color:var(--tinta);
  text-decoration:none;box-shadow:var(--sombra);transition:.15s;display:inline-block;cursor:pointer;
}
.btn:hover{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--tinta)}
.btn.alt{background:var(--turquesa)}
.btn.dark{background:var(--tinta);color:#fff}
.sticker,.star{position:absolute;pointer-events:none;height:auto}
.sticker.spin{animation:rotar 14s linear infinite}
@keyframes rotar{to{transform:rotate(360deg)}}
.s1{top:16%;left:6%;width:clamp(90px,12vw,150px)}
.s3{top:20%;right:8%;width:clamp(95px,13vw,150px);animation:flotar 5s ease-in-out infinite}
/* estrellas: cada una flota (contenedor) y gira (svg) a su ritmo */
.star{display:block}
.star svg{display:block;width:100%;height:100%}
.star .gira{transform-box:fill-box;transform-origin:center;animation:rotar 12s linear infinite}
.star .gira.rev{animation-direction:reverse}
.st-a{top:27%;right:17%;width:clamp(36px,4.5vw,58px);animation:flotar 6s ease-in-out infinite}
.st-b{top:60%;left:11%;width:clamp(26px,3.5vw,44px);animation:flotar 4.2s ease-in-out .7s infinite}
.st-c{bottom:12%;left:19%;width:clamp(48px,6vw,82px);animation:flotar 7s ease-in-out .3s infinite}
.st-d{top:14%;left:30%;width:clamp(22px,3vw,36px);animation:flotar 5.4s ease-in-out 1.1s infinite}
.st-e{top:8%;left:12%;width:clamp(20px,2.6vw,34px);animation:flotar 4.8s ease-in-out .6s infinite}
.st-f{top:42%;right:6%;width:clamp(34px,4.4vw,56px);animation:flotar 6.4s ease-in-out .3s infinite}
.st-g{bottom:8%;right:28%;width:clamp(18px,2.4vw,30px);animation:flotar 4.4s ease-in-out 1s infinite}
.st-h{top:24%;left:45%;width:clamp(15px,2vw,24px);animation:flotar 5.2s ease-in-out .8s infinite}
.st-i{bottom:32%;left:6%;width:clamp(26px,3.2vw,42px);animation:flotar 6.8s ease-in-out .1s infinite}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(4deg)}50%{transform:translateY(-14px) rotate(9deg)}}
@media (max-width:700px){
  .s1{display:none}
  .hero h1 .out{-webkit-text-stroke-width:1.5px}
  .s3{width:72px;top:12%;right:6%}
  .st-a{width:30px;top:13%;left:7%}
  .st-b{width:24px;bottom:6%;right:8%}
  .st-c{width:44px;bottom:7%;left:7%}
  .st-d{width:20px;top:11%;left:32%}
  .st-f{width:28px;top:40%;right:5%}
  .st-h,.st-e{display:none}
}
@media (max-height:600px){
  .hero{min-height:auto;padding-top:6.5rem}
  .sticker{display:none}
}

/* ---------- marquesina ---------- */
.marquee{
  border-top:var(--borde);border-bottom:var(--borde);
  overflow:hidden;white-space:nowrap;padding:.9rem 0;position:relative;z-index:2;
}
.marquee.amarillo{background:var(--amarillo);color:var(--tinta)}
.marquee.turquesa{background:var(--turquesa);color:var(--tinta)}
.marquee.magenta{background:var(--magenta-osc);color:#fff;border-color:var(--tinta)}
.marquee .track{display:inline-flex;gap:2.5rem;animation:deslizar 22s linear infinite;will-change:transform}
.marquee span{font-family:'Archivo Black',sans-serif;font-size:clamp(1.1rem,3vw,1.8rem);text-transform:uppercase;letter-spacing:.02em;display:inline-flex;align-items:center;gap:2.5rem}
.marquee .dot{width:.55em;height:.55em;border-radius:50%;background:currentColor;display:inline-block;flex:none}
@keyframes deslizar{to{transform:translateX(-50%)}}

/* ---------- secciones base ---------- */
section{padding:clamp(4rem,9vw,7.5rem) 1.5rem;position:relative}
.wrap{max-width:1150px;margin:0 auto}
.etiqueta{
  display:inline-block;font-family:'Archivo Black',sans-serif;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;
  padding:.45rem 1rem;border:var(--borde);border-radius:999px;margin-bottom:1.4rem;background:#fff;color:var(--tinta);
}
.etiqueta.solid{background:var(--tinta);color:#fff}
.grid{display:grid;gap:1.4rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  section{padding-left:1.1rem;padding-right:1.1rem}
  .grid{gap:1.1rem}
  .card{padding:1.3rem}
  .paso{padding:1.1rem;gap:1rem}
  .paso::before{font-size:1.2rem;padding:.4rem .6rem}
  .btn{padding:.9rem 1.3rem;font-size:.85rem;width:100%;text-align:center}
  .hero .acciones{width:100%;max-width:340px;flex-direction:column;gap:.8rem}
  .contacto .btn{width:100%}
  .marquee .track{animation-duration:16s}
  footer img{max-width:200px}
}
.card{
  border:var(--borde);border-radius:22px;background:#fff;color:var(--tinta);
  padding:1.8rem;box-shadow:var(--sombra);transition:.18s;
}
.card:hover{transform:translate(4px,4px) rotate(-.5deg);box-shadow:3px 3px 0 var(--tinta)}
.card .icono{
  width:52px;height:52px;border:var(--borde);border-radius:14px;display:grid;place-items:center;margin-bottom:1.1rem;
}
.card h3{font-size:1.15rem;margin-bottom:.6rem}
.card p{font-size:.95rem;line-height:1.55}

/* ---------- pilares (blanco) ---------- */
.pilares{background:#fff}
.pilares h2,.academy h2{font-size:clamp(2rem,5.5vw,3.8rem);margin-bottom:.8rem}
.sub{max-width:640px;font-size:1.05rem;line-height:1.55;margin-bottom:2.6rem}
.pilar .icono svg{width:26px;height:26px}

/* ---------- imprescindibles (amarillo) ---------- */
.imprescindibles{background:var(--amarillo)}
.imprescindibles h2{font-size:clamp(2rem,5.5vw,3.8rem);margin-bottom:.8rem}

/* ---------- colabora (rosa) ---------- */
.colabora{background:var(--rosa)}
.colabora h2{font-size:clamp(2rem,5.5vw,3.8rem);margin-bottom:.8rem}
.pasos{counter-reset:paso;margin:2.4rem 0}
.paso{
  display:flex;gap:1.4rem;align-items:flex-start;border:var(--borde);border-radius:20px;background:#fff;
  padding:1.5rem 1.7rem;margin-bottom:1.1rem;box-shadow:var(--sombra-s);
}
.paso::before{
  counter-increment:paso;content:"0" counter(paso);
  font-family:'Archivo Black',sans-serif;font-size:1.6rem;background:var(--amarillo);border:var(--borde);border-radius:14px;
  padding:.55rem .8rem;flex:none;
}
.paso h3{font-size:1.05rem;margin-bottom:.35rem}
.packs .card{background:var(--crema)}
.packs .card.destacado{background:var(--tinta);color:#fff}
.packs .card.destacado .precio{color:var(--amarillo)}
.precio{font-family:'Archivo Black',sans-serif;font-size:2rem;margin:.6rem 0}

/* ---------- servicios: Elena en escena (crema) ---------- */
.servicios{background:var(--crema)}
.servicios h2{font-size:clamp(2rem,5.5vw,3.8rem);margin-bottom:1rem}
.escena{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.escena .foto-principal{position:relative;margin:0 1rem 1.5rem 0}
.escena .foto-principal img{
  display:block;width:100%;aspect-ratio:2/3;object-fit:cover;
  border:var(--borde);border-radius:26px;box-shadow:var(--sombra);transform:rotate(-1.5deg);background:#fff;
}
.escena .voz-propia{
  position:absolute;right:-1rem;bottom:-1.2rem;max-width:230px;
  background:var(--amarillo);border:var(--borde);border-radius:16px;box-shadow:var(--sombra-s);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.95rem;line-height:1.15;
  padding:.8rem 1.1rem;transform:rotate(3deg);
}
.roles{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.roles span{
  font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  background:var(--tinta);color:#fff;padding:.4rem .9rem;border-radius:999px;
}
.roles span:nth-child(2){background:var(--magenta-osc)}
.roles span:nth-child(3){background:#fff;color:var(--tinta);border:var(--borde);padding:.25rem .8rem}
.escena .lede{font-size:clamp(1.1rem,2.2vw,1.4rem);line-height:1.5;font-weight:500;max-width:520px}
.escena .lede strong{background:var(--rosa);padding:.05em .3em;border-radius:6px;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.mis-servicios{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:center;margin-top:clamp(3.5rem,7vw,5.5rem)}
.mis-servicios h3.titulo{font-size:clamp(1.6rem,4vw,2.4rem);margin-bottom:1.4rem}
.lista-servicios{list-style:none;display:grid;gap:.9rem}
.lista-servicios li{
  display:flex;align-items:center;gap:1.1rem;background:#fff;border:var(--borde);border-radius:18px;
  padding:.9rem 1.2rem;box-shadow:var(--sombra-s);font-weight:700;font-size:1.02rem;line-height:1.3;transition:.15s;
}
.lista-servicios li:hover{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--tinta)}
.lista-servicios .icono{width:48px;height:48px;flex:none;border:var(--borde);border-radius:14px;display:grid;place-items:center}
.lista-servicios .icono svg{width:24px;height:24px}
.lista-servicios li:nth-child(1) .icono{background:var(--rosa)}
.lista-servicios li:nth-child(2) .icono{background:var(--turquesa)}
.lista-servicios li:nth-child(3) .icono{background:var(--amarillo)}
.lista-servicios li:nth-child(4) .icono{background:var(--magenta)}
.lista-servicios li:nth-child(5) .icono{background:var(--naranja)}

.polaroid{
  background:#fff;border:var(--borde);border-radius:6px;box-shadow:var(--sombra);
  padding:.9rem .9rem 0;transform:rotate(3deg);max-width:440px;width:100%;justify-self:center;
}
.polaroid.reveal{transform:translateY(28px) rotate(3deg)}
.polaroid.reveal.visible{transform:rotate(3deg)}
.polaroid img{display:block;width:100%;aspect-ratio:1000/730;object-fit:cover;border:2px solid var(--tinta)}
.polaroid figcaption{
  display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 0 1.1rem;
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.9rem;letter-spacing:.04em;color:var(--magenta-osc);
}
.polaroid figcaption svg{width:20px;height:20px;flex:none}

.momentos{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,4vw,3rem);margin-top:clamp(3rem,6vw,4.5rem);max-width:900px;margin-left:auto;margin-right:auto}
.momento{position:relative}
.momento img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border:var(--borde);border-radius:22px;box-shadow:var(--sombra);background:#fff;transform:rotate(-1.5deg)}
.momento:nth-child(2) img{transform:rotate(1.5deg)}
.momento figcaption{
  position:absolute;left:1rem;bottom:-1rem;background:var(--rosa);border:var(--borde);border-radius:999px;box-shadow:var(--sombra-s);
  font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-size:.85rem;padding:.45rem 1rem;transform:rotate(-2deg);
}
.momento:nth-child(2) figcaption{background:var(--turquesa);left:auto;right:1rem;transform:rotate(2deg)}
.ideal{
  display:flex;align-items:center;gap:1.3rem;margin-top:clamp(3rem,6vw,4.5rem);
  background:var(--turquesa);border:var(--borde);border-radius:22px;box-shadow:var(--sombra);padding:1.4rem 1.7rem;
}
.ideal .icono{width:56px;height:56px;flex:none;border:var(--borde);border-radius:14px;background:#fff;display:grid;place-items:center}
.ideal .icono svg{width:28px;height:28px}
.ideal p{font-size:1.08rem;line-height:1.5;font-weight:500}
.ideal strong{font-family:'Archivo Black',sans-serif;text-transform:uppercase;font-weight:400}

.cierre-voz{text-align:center;margin-top:clamp(3.5rem,7vw,5.5rem)}
.cierre-voz .frase{font-size:clamp(1.9rem,5.5vw,3.6rem);max-width:900px;margin:0 auto}
.cierre-voz .frase span{color:var(--magenta-osc)}
.cierre-voz .acciones{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.cierre-voz .huella{margin-top:1.8rem;font-weight:700;font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}

@media (max-width:800px){
  .escena,.mis-servicios{grid-template-columns:1fr}
  .escena .foto-principal{max-width:340px;margin:0 auto 1.5rem}
  .escena .voz-propia{right:-.4rem;font-size:.85rem}
  .polaroid{max-width:380px}
}
@media (max-width:600px){
  .lista-servicios li{padding:.8rem 1rem;font-size:.95rem;gap:.9rem}
  .lista-servicios .icono{width:42px;height:42px}
  .polaroid figcaption{font-size:.78rem;letter-spacing:.02em}
  .momentos{grid-template-columns:1fr;max-width:380px;gap:2.6rem}
  .ideal{flex-direction:column;align-items:flex-start;padding:1.3rem}
  .cierre-voz .acciones{flex-direction:column;align-items:stretch;max-width:340px;margin-left:auto;margin-right:auto}
}

/* ---------- academy (blanco) ---------- */
.academy{background:#fff}
.academy .card:nth-child(1) .icono{background:var(--amarillo)}
.academy .card:nth-child(2) .icono{background:var(--turquesa)}
.academy .card:nth-child(3) .icono{background:var(--rosa)}
.academy .card:nth-child(4) .icono{background:var(--magenta)}
.academy-redes{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2.4rem}
.academy-redes > span{font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;margin-right:.3rem}
.academy-redes .btn{display:inline-flex;align-items:center;gap:.5rem}
.academy-redes .btn svg{width:20px;height:20px;flex:none}

/* ---------- magazine (turquesa) ---------- */
.magazine{background:var(--turquesa)}
.magazine h2{font-size:clamp(2rem,5.5vw,3.8rem);margin-bottom:.8rem}
.articulo .tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--magenta-osc)}
a.card.articulo{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta)}
a.card.articulo .tag{margin-bottom:.55rem}
.articulo .art-foto{width:100%;aspect-ratio:16/10;object-fit:cover;border:var(--borde);border-radius:14px;margin-bottom:1rem;background:var(--crema)}
.articulo .leer{margin-top:auto;padding-top:1rem;font-weight:700;font-size:.85rem;text-transform:uppercase}
.articulo .leer::after{content:'';display:block;width:6.5em;border-bottom:3px solid var(--magenta-osc)}

/* ---------- contacto (tinta) ---------- */
.contacto{background:var(--tinta);color:#fff}
.contacto h2{font-size:clamp(2.4rem,7vw,5rem)}
.contacto h2 .amarillo{color:var(--amarillo)}
.contacto .sub{color:#f4e9ea}
.contacto-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;margin-top:2.5rem;align-items:start}
@media (max-width:800px){.contacto-grid{grid-template-columns:1fr}}
.contacto form{display:grid;gap:1rem}
.contacto input,.contacto textarea{
  font-family:'Space Grotesk',sans-serif;font-size:1rem;padding:1rem 1.2rem;border:3px solid #fff;border-radius:14px;
  background:transparent;color:#fff;width:100%;
}
.contacto input::placeholder,.contacto textarea::placeholder{color:#cbb6ba}
.contacto input:focus,.contacto textarea:focus{outline:none;border-color:var(--amarillo)}
.contacto .btn{border-color:#fff;box-shadow:8px 8px 0 rgba(255,255,255,.9);width:fit-content}
.contacto .btn:hover{box-shadow:3px 3px 0 rgba(255,255,255,.9)}
.aviso-datos{font-size:.8rem;opacity:.8;margin:0}
.aviso-datos a{color:inherit}
.form-msg{border:3px solid #fff;border-radius:14px;padding:1rem 1.2rem;font-weight:700;margin:0}
.form-msg.ok{background:var(--turquesa);color:var(--tinta)}
.form-msg.error{background:var(--rosa);color:var(--tinta)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.canal{
  display:flex;align-items:center;gap:1.1rem;border:3px solid #fff;border-radius:18px;padding:1.2rem 1.4rem;
  text-decoration:none;color:#fff;margin-bottom:1rem;transition:.15s;background:transparent;
}
.canal:hover{background:var(--magenta-osc);transform:translateX(6px)}
.canal .icono{width:46px;height:46px;flex:none;border:3px solid #fff;border-radius:12px;display:grid;place-items:center;background:var(--amarillo)}
.canal .icono svg{width:22px;height:22px}
.canal strong{font-family:'Archivo Black',sans-serif;font-size:.95rem;text-transform:uppercase;display:block}
.canal small{opacity:.85}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

/* ---------- seguridad tipográfica ---------- */
h1,h2,h3,.marquee span{overflow-wrap:anywhere}
.etiqueta{max-width:100%}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .marquee .track,.sticker.spin,.s3,.logo-hero{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .btn,.card,.local,.canal,.lista-servicios li{transition:none}
}

/* Academy: tarjeta con recursos → enlace a academy.php */
a.card.card-enlace{display:block;text-decoration:none;color:var(--tinta);cursor:pointer}
.card-enlace .ver-recursos{display:inline-block;margin-top:1rem;font-weight:700;font-size:.85rem;text-transform:uppercase;border-bottom:3px solid var(--magenta-osc)}