/* =====================================================================
   estilos.css — la MARCA de yalisto.co, compartida por todas las páginas.
   Colores, letra, logo, botones, barra de arriba y pie de página.
   Cambias algo aquí → cambia en TODAS las páginas que lo enlazan:
     <link rel="stylesheet" href="/estilos.css">
   Lo que es de UNA sola página (abanico, encuesta, texto legal...)
   va en el <style> de esa página, no aquí.
   ===================================================================== */

@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
:root{
  --texto:#1d1d1f;--texto2:#6e6e73;--texto3:#86868b;--gris:#f5f5f7;--gris2:#e8e8ed;--linea:#d2d2d7;
  --coral:#ff6b3d;--coral-d:#d4450f;--rosa:#ff3d8b;--magenta:#d946ef;--morado:#8b5cf6;--azul:#3b82f6;--cian:#06b6d4;--verde:#22c55e;--amarillo:#facc15;
  --arcoiris:linear-gradient(90deg,#ff8a3d,#ff5a3d,#ff3d8b,#d946ef,#8b5cf6,#d946ef,#ff3d8b,#ff5a3d,#ff8a3d);
  --brillo:conic-gradient(from var(--giro),#ff7a3d,#ff3d8b,#d946ef,#8b5cf6,#3b82f6,#06b6d4,#22c55e,#facc15,#ff7a3d);
  --max:1200px;--pad:clamp(20px,4vw,28px);
  --ease:cubic-bezier(.25,.1,.25,1);--suave:cubic-bezier(.16,1,.3,1);
  --sf:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Helvetica Neue",Arial,sans-serif;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:52px;overflow-x:hidden}
body{margin:0;background:#fff;color:var(--texto);font-family:var(--sf);font-size:17px;line-height:1.47;letter-spacing:-.022em;-webkit-font-smoothing:antialiased;font-synthesis:none}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
::selection{background:#ffd9cb}
:focus-visible{outline:2px solid var(--coral);outline-offset:3px;border-radius:6px}
.saltar{position:absolute;left:-9999px;top:8px;z-index:200;background:#1d1d1f;color:#fff;padding:8px 14px;border-radius:10px;font-size:14px}
.saltar:focus{left:12px}
.cont{width:min(var(--max),100% - var(--pad)*2);margin-inline:auto}
/* iPhone: lo que se sale por los lados se recorta en el borde, sin alejar la página */
main{overflow-x:hidden}
@supports (overflow:clip){main{overflow-x:clip}}

/* Texto arcoíris animado */
.arcoiris{background:var(--arcoiris);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:corre-color 9s linear infinite}
@keyframes corre-color{to{background-position:300% 0}}
@keyframes gira{to{--giro:360deg}}

/* Botones */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:980px;font-size:17px;font-weight:500;letter-spacing:-.022em;white-space:nowrap;transition:transform .3s var(--suave),background-color .25s,box-shadow .3s;isolation:isolate}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:scale(.98)}
.btn svg{width:18px;height:18px;flex:none}
.btn-p{color:#fff;font-weight:600;box-shadow:0 12px 30px -14px rgba(255,107,61,.8)}
.btn-p::before{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--giro),#ffd07a,#ff7a3d,#ff3d8b,#ff7a3d,#ffd07a);animation:gira 4s linear infinite}
.btn-p::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#ff8a3d,#ff5a2a)}
.btn-p:hover{box-shadow:0 18px 44px -14px rgba(255,107,61,.9)}
.btn-s{background:rgba(29,29,31,.06);color:var(--texto)}
.btn-s:hover{background:rgba(29,29,31,.1)}
.btn-wa{background:#25d366;color:#fff}
.btn-wa::after{content:"";position:absolute;inset:-2px;z-index:-1;border-radius:inherit;background:conic-gradient(from var(--giro),#a7f3c9,#25d366,#0f9d58,#25d366,#a7f3c9);animation:gira 4s linear infinite}
.btn-wa{position:relative;isolation:isolate}
.botones{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:32px}

/* Franja negra de arriba */
.franja{background:#1d1d1f;color:#f5f5f7;font-size:13.5px;text-align:center;padding:9px 16px;letter-spacing:-.01em}
.franja a{color:#ffb38a;font-weight:600}
.franja a:hover{text-decoration:underline}

/* Barra de arriba (logo + menú + Hablemos) */
.nav{position:sticky;top:0;z-index:100;height:52px;background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid rgba(0,0,0,.07)}
.nav .cont{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{font-weight:800;font-size:19px;letter-spacing:-.04em}
.logo i{font-style:normal;color:var(--coral)}
.menu{display:flex;gap:30px;font-size:13px;color:rgba(29,29,31,.82)}
.menu a:hover{color:var(--texto)}
.nav .btn{min-height:32px;padding:6px 15px;font-size:13px}
.hamb{display:none;position:relative;width:36px;height:36px;margin-right:-8px}
.hamb i{position:absolute;left:10px;width:17px;height:1.5px;border-radius:2px;background:var(--texto);transition:.35s var(--suave)}
.hamb i:first-child{top:14px}.hamb i:last-child{top:21px}
.abierto .hamb i:first-child{top:17.5px;transform:rotate(45deg)}.abierto .hamb i:last-child{top:17.5px;transform:rotate(-45deg)}
.cortina{position:fixed;inset:52px 0 0;z-index:99;background:#fff;padding:22px clamp(24px,6vw,48px) 40px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:.3s var(--ease);overflow-y:auto}
.abierto .cortina{opacity:1;visibility:visible}
.cortina a:not(.btn){font-size:30px;font-weight:700;letter-spacing:-.025em;padding:9px 0;border-bottom:1px solid #f0f0f2}
.cortina a:not(.btn):hover{color:var(--coral-d)}
.cortina a.btn{margin-top:26px;width:100%;min-height:56px;font-size:18px;font-weight:600}
@media (max-width:900px){.menu,.nav .btn{display:none}.hamb{display:block}}

/* Manchas de color del fondo */
.manchas{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.manchas i{position:absolute;border-radius:50%;filter:blur(70px);will-change:transform}
@keyframes va1{to{transform:translate(90px,-60px) scale(1.12)}}
@keyframes va2{to{transform:translate(-80px,70px) scale(.9)}}
@keyframes va3{to{transform:translate(-60px,-50px) scale(1.15)}}

/* Pie de página */
.pie{background:var(--gris);color:var(--texto2);font-size:13px;padding:28px 0}
.pie .cont{border-top:1px solid var(--linea);padding-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.pie .logo{font-size:17px}
.pie nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.pie a:hover{color:var(--texto);text-decoration:underline}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}