/* ═══════════════════════════════════════════════════════════════
   SHYN · estilos de la portada                         (27/10/2026)
   ───────────────────────────────────────────────────────────────
   Sale del boceto aprobado por Silvia (NO-SUBIR/MASTER/4-web/
   boceto-portada.html): estilo Vilma, cabecera negra con el logo
   blanco, la frase grande y el lema; el resto en blanco.
   Colores de NO-SUBIR/MASTER/1-marca/branding.json (opción A):
   lila = marca y todo lo que se pulsa; turquesa SOLO para lo que
   tranquiliza (✓, pago seguro, garantía, descuentos).
   ═══════════════════════════════════════════════════════════════ */
@font-face{font-family:Outfit;src:url(fuentes/Outfit-Variable.ttf) format('truetype');font-weight:100 900;font-display:swap}

:root{
  --lila:#7955E8; --lila-2:#5F3FC8; --lila-suave:#EEE9FD; --lila-osc:#3C2A8C;
  --turq:#2BC4A8; --turq-suave:#E3F7F2; --turq-txt:#0A5A4B;
  --tinta:#0B0C10; --texto:#15171D; --gris:#4E5565; --gris-claro:#C9CBD6;
  --linea:#E4E2EE; --fondo:#FFFFFF; --fondo-suave:#F7F5FD;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--fondo);color:var(--texto);font-family:Outfit,system-ui,sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.ico{width:1em;height:1em;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.caja{max-width:1080px;margin:0 auto;padding:0 20px}
/* El nombre dentro del H1 para Google y los lectores de pantalla, sin cambiar el titular que se ve */
h1 .oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:8px;background:#fff;color:var(--tinta);padding:8px 14px;border-radius:8px;z-index:10}
.saltar:focus{left:12px}
:focus-visible{outline:3px solid var(--turq);outline-offset:3px;border-radius:6px}

/* ── Cabecera negra ─────────────────────────────────────────── */
.oscuro{background:var(--tinta);color:#fff;border-radius:0 0 36px 36px}
.cabecera{display:flex;align-items:center;justify-content:space-between;padding:18px 0;gap:16px}
.marca{display:flex;flex-direction:column;gap:2px}
.marca img{height:30px;width:auto;align-self:flex-start}
.marca span{font-size:12px;letter-spacing:.4px;color:var(--gris-claro);padding-left:3px}
nav{display:flex;gap:24px;font-size:15px;color:var(--gris-claro);align-items:center}
nav a:hover{color:#fff}
.entrar{border:1.5px solid #fff;color:#fff;padding:7px 16px;border-radius:999px;font-weight:600}
.entrar:hover{background:#fff;color:var(--tinta)}

.hero{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:40px 0 72px}
.hero>div{min-width:0}
h1{font-size:64px;line-height:1.05;margin:0 0 16px;font-weight:800;color:#fff;letter-spacing:-.5px}
h1 span{color:var(--turq)}
.lead{font-size:19px;color:var(--gris-claro);margin:0 0 28px;max-width:520px}
.botones{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--lila);color:#fff;border:0;border-radius:12px;padding:13px 20px;font:inherit;font-weight:700;font-size:16px;cursor:pointer;white-space:nowrap;transition:background .2s}
.btn:hover{background:var(--lila-2)}
.btn-borde{background:transparent;border:1.5px solid #3A3D4A;color:#fff}
.btn-borde:hover{background:#1C1E26}
.ok-lista{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0 0;padding:0;list-style:none;font-size:14px;color:var(--gris-claro)}
.ok-lista .ico{color:var(--turq)}

/* La bola: es el botón de la demo. Sin JS se queda quieta y
   las burbujas enseñan el ejemplo igual. */
.bola-zona{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.bola-zona .bola{display:block}
.bola{position:relative;width:260px;height:260px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 35% 30%,#fff 0,#CFC2FA 18%,var(--lila) 55%,#5A3BC9 80%);
  animation:respira 4s ease-in-out infinite;box-shadow:0 30px 80px -20px rgba(121,85,232,.55)}
.bola::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 70% 75%,rgba(43,196,168,.55),transparent 45%)}
.bola .play{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(11,12,16,.55);color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:1;transition:transform .2s}
.bola:hover .play{transform:scale(1.08)}
.bola.suena{animation-duration:1.1s}
@keyframes respira{50%{transform:scale(1.04)}}
.bola-txt{font-size:14px;color:var(--gris-claro);text-align:center}
.bola-txt b{color:#fff}
/* 27/10 · Silvia: la burbuja de Dulce quedaba detrás de la bola. Ahora van como un chat:
   la de Dulce encima (a la izquierda) y la de «Apuntado» debajo (a la derecha), sin tocarla. */
.burbuja{background:#fff;color:var(--texto);border:1px solid var(--linea);border-radius:16px 16px 16px 4px;padding:10px 14px;font-size:15px;line-height:1.4;width:100%;max-width:320px;min-height:44px;box-shadow:0 8px 24px -12px rgba(11,12,16,.35);transition:opacity .3s;position:relative;z-index:2}
.b1{align-self:flex-start}
.b2{align-self:flex-end;border-radius:16px 16px 4px 16px;width:auto}
.b2 b{color:var(--turq-txt)}
.ejemplo{font-size:12px;color:#8A8D9A}

/* ── Secciones en blanco ────────────────────────────────────── */
section{padding:64px 0}
h2{font-size:36px;line-height:1.15;margin:0 0 10px;color:var(--tinta);font-weight:800;letter-spacing:-.3px}
.sub{color:var(--gris);margin:0 0 30px;max-width:620px}

.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.prod{border:1px solid var(--linea);border-radius:18px;padding:22px;background:#fff;display:flex;flex-direction:column;gap:8px;transition:border-color .2s,transform .2s}
.prod:hover{border-color:var(--lila);transform:translateY(-2px)}
.prod .cuadro{width:46px;height:46px;border-radius:12px;background:var(--lila-suave);color:var(--lila);display:flex;align-items:center;justify-content:center;font-size:24px}
.prod h3{margin:6px 0 0;font-size:19px;color:var(--tinta)}
.prod p{margin:0;color:var(--gris);font-size:15px}
.estado{align-self:flex-start;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
.ya{background:var(--turq-suave);color:var(--turq-txt)}
.pruebas{background:var(--lila-suave);color:var(--lila-osc)}
.pronto{background:#F1EFF6;color:var(--gris)}
.prod .mas{margin-top:auto;padding-top:6px;color:var(--lila);font-weight:700;font-size:15px}

.fondo-suave{background:var(--fondo-suave);border-radius:28px;padding:56px 28px}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:p;margin:0;padding:0;list-style:none}
.paso{background:#fff;border-radius:18px;padding:22px;border:1px solid var(--linea)}
.paso::before{counter-increment:p;content:counter(p);display:inline-flex;width:34px;height:34px;border-radius:50%;background:var(--lila);color:#fff;font-weight:800;align-items:center;justify-content:center;margin-bottom:10px}
.paso h3{margin:0 0 4px;font-size:18px;color:var(--tinta)}
.paso p{margin:0;color:var(--gris);font-size:15px}

.porque{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:24px}
.porque .ico{font-size:28px;color:var(--lila)}
.porque h3{margin:6px 0 4px;font-size:18px;color:var(--tinta)}
.porque p{margin:0;color:var(--gris);font-size:15px}

.confianza{background:var(--turq-suave);border-radius:18px;padding:20px 24px;display:flex;gap:28px;flex-wrap:wrap;justify-content:center;color:var(--turq-txt);font-weight:600;font-size:15px;margin:0;list-style:none}
.confianza .ico{font-size:22px;margin-right:6px;vertical-align:-5px}

.casa{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.casa a{border:1px solid var(--linea);border-radius:16px;padding:18px;display:block;transition:border-color .2s}
.casa a{--color-marca:var(--lila)}
.casa a.c-magnet{--color-marca:#E67D21}
.casa a.c-workvet{--color-marca:#17A58A}
.casa a:hover,.casa a:focus-visible{border-color:var(--color-marca)}
.casa b{transition:color .2s}
.casa a:hover b,.casa a:focus-visible b{color:var(--color-marca)}
.casa b{display:block;font-size:17px;color:var(--tinta)}
.casa span{color:var(--gris);font-size:14px}

.final{background:var(--tinta);color:#fff;border-radius:24px;padding:48px 44px;text-align:center}
.final h2{color:#fff}
.final p{color:var(--gris-claro);margin:0 auto 24px;max-width:520px}
.final .botones{justify-content:center}
.final .btn-borde,.claro .final .btn-borde{border-color:#6B6F80;color:#fff}
.final .btn-borde:hover,.claro .final .btn-borde:hover{background:#fff;border-color:#fff;color:var(--tinta)}

/* ── Pie ────────────────────────────────────────────────────── */
footer{padding:40px 0 36px;color:var(--gris);font-size:14px}
.pie-arriba{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:26px}
.pie-arriba nav{color:var(--gris);font-size:14px;gap:18px;flex-wrap:wrap}
.pie-arriba nav a:hover{color:var(--lila)}
.pie-arriba .lema{display:block;font-size:13px}
.pie-arriba img{height:26px;width:auto;display:block;margin-bottom:4px}

@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);padding-bottom:56px}
  h1{font-size:44px}
  .burbuja{max-width:none}
  .b2{max-width:85%}
  .bola{width:220px;height:220px}
  .pasos,.casa{grid-template-columns:1fr}
  nav a:not(.entrar){display:none}
  .pie-arriba nav a{display:inline}
  h2{font-size:30px}
  .fondo-suave{padding:40px 20px;margin:0 -8px}
  .final{padding:34px 20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bola,.bola.suena{animation:none}
  .prod,.prod:hover{transition:none;transform:none}
}

/* ── PRUEBA 27/10 · versión CLARA de la cabecera (Silvia: «lo del negro no me acaba de convencer»).
   Se ve en prueba-portada-clara.html (body class="claro"). Si gana, se pasa la clase a index.html;
   si no, se borran este bloque y ese archivo. ──────────────────────────────────────────────── */
.claro .oscuro{background:linear-gradient(180deg,#F7F5FD 0%,#EEE9FD 100%);color:var(--texto)}
.claro .marca span{color:var(--gris)}
.claro nav{color:var(--gris)}
.claro nav a:hover{color:var(--lila)}
.claro .entrar{border-color:var(--lila);color:var(--lila)}
.claro .entrar:hover{background:var(--lila);color:#fff}
.claro h1{color:var(--tinta)}
.claro h1 span{color:var(--lila)}
.claro .lead{color:var(--gris)}
.claro .btn-borde{border-color:#CFC9E3;color:var(--tinta)}
.claro .btn-borde:hover{background:#fff}
.claro .ok-lista{color:var(--gris)}
.claro .bola-txt{color:var(--gris)}
.claro .bola-txt b{color:var(--tinta)}
.claro .ejemplo{color:var(--gris)}

/* 27/10 · Bola «nebulosa», ELEGIDA por Silvia (: «que no parezca un balón de plástico», y luego
   «menos borrosa y centrada»). Borde nítido y redondo; por dentro, colores que se
   mueven despacio en dos capas que giran al revés. Sin brillo de plástico. Al sonar
   Dulce giran más rápido. Va con body.nebulosa (puesto en index.html). */
.nebulosa .bola{background:#5A3BC9;box-shadow:0 30px 70px -26px rgba(121,85,232,.7);isolation:isolate}
.nebulosa .bola::before,.nebulosa .bola::after{content:"";position:absolute;inset:0;border-radius:50%;z-index:0;pointer-events:none}
.nebulosa .bola::before{
  background:
    radial-gradient(circle at 30% 30%,rgba(255,255,255,.8) 0,rgba(255,255,255,0) 26%),
    radial-gradient(circle at 72% 68%,rgba(43,196,168,.85) 0,rgba(43,196,168,0) 40%),
    radial-gradient(circle at 72% 26%,rgba(217,166,242,.95) 0,rgba(217,166,242,0) 38%),
    radial-gradient(circle at 26% 74%,rgba(150,120,255,.95) 0,rgba(150,120,255,0) 42%),
    conic-gradient(from 0deg,#7955E8,#A88CFF,#5A3BC9,#8E6CF5,#7955E8);
  animation:gira 22s linear infinite}
.nebulosa .bola::after{
  background:
    radial-gradient(ellipse 42% 16% at 50% 40%,rgba(255,255,255,.5) 0,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 20% 38% at 63% 58%,rgba(43,196,168,.45) 0,rgba(43,196,168,0) 70%),
    radial-gradient(ellipse 30% 20% at 38% 66%,rgba(255,255,255,.3) 0,rgba(255,255,255,0) 70%),
    radial-gradient(circle at 50% 50%,rgba(42,26,110,0) 60%,rgba(42,26,110,.32) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  animation:gira 31s linear infinite reverse}
.nebulosa .bola .play{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.nebulosa .bola.suena::before{animation-duration:6s}
.nebulosa .bola.suena::after{animation-duration:9s}
@keyframes gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.nebulosa .bola::before,.nebulosa .bola::after{animation:none}}