/* ============================================================
   flowfunnel.css — StartToFlow
   El diseño entero. No hay lógica que dependa de este archivo: cámbialo sin
   miedo.

   POR QUÉ NO HAY TAILWIND. La versión anterior lo cargaba desde su CDN, o sea
   ~300 KB de utilidades bloqueando el render para usar treinta clases, y una
   dependencia de un tercero en la ruta crítica de una página que cabe en una
   pantalla. Aquí el CSS entero pesa menos que el `<script>` que lo traía.

   La identidad se conserva a propósito —claro, mucho aire, degradados suaves y
   la taza de notas como protagonista—: le habla a una persona, no a una empresa,
   y el oscuro corporativo de los otros dos sitios le quedaría ajeno.
   ============================================================ */
:root{
  --tinta:#0F172A; --tinta-suave:#475569; --gris:#64748B; --tenue:#94A3B8;
  --papel:#FFFFFF; --niebla:#F8FAFC; --linea:#E2E8F0;
  --verde:#25D366; --verde-hondo:#128C7E;   /* los de WhatsApp, a propósito:
                                               el botón promete abrir WhatsApp y
                                               el color es la mitad de esa promesa */
  --acento:#6366F1;
  --voz:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --radio:14px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--voz);color:var(--tinta);background:var(--papel);
     line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3{line-height:1.12;letter-spacing:-.028em;margin:0;font-weight:800}
p{margin:0}
a{color:inherit}
img{max-width:100%}
.env{max-width:1100px;margin:0 auto;padding:0 24px}

/* ---------- las manchas de color del fondo ----------
   Eran una animación de "blobs" que se deformaban en bucle. Se quedan quietas:
   un fondo que se mueve solo compite con lo único que la página quiere que leas,
   y en un teléfono lo paga la batería. El color y la suavidad son los mismos. */
.manchas{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
         background:var(--papel)}
.manchas span{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.manchas span:nth-child(1){width:44vw;height:44vw;left:-6vw;top:-8vw;
  background:radial-gradient(circle,#93C5FD,transparent 70%)}
.manchas span:nth-child(2){width:38vw;height:38vw;right:-4vw;top:2vw;
  background:radial-gradient(circle,#FBCFE8,transparent 70%)}
.manchas span:nth-child(3){width:36vw;height:36vw;left:28vw;top:26vw;
  background:radial-gradient(circle,#A7F3D0,transparent 70%)}
@media (prefers-reduced-motion:no-preference){
  .manchas span{transition:none}
}

/* ---------- barra ---------- */
.barra{position:sticky;top:0;z-index:50;
       background:rgba(255,255,255,.78);backdrop-filter:blur(14px);
       border-bottom:1px solid rgba(15,23,42,.06)}
.barra-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;
          max-width:1100px;margin:0 auto;padding:12px 24px}
.barra img{height:34px;width:auto;display:block}
.barra-nav{display:flex;align-items:center;gap:1.4rem}
.barra-nav > a{font-size:.9rem;font-weight:600;text-decoration:none;color:var(--tinta-suave)}
.barra-nav > a:hover{color:var(--tinta)}

/* ---------- hero ---------- */
.hero{padding:72px 0 88px;position:relative}
.hero-rej{display:grid;grid-template-columns:1.05fr .95fr;gap:3rem;align-items:center}
.hero h1{font-size:clamp(2.4rem,5.2vw,4rem);text-wrap:balance;max-width:14ch}
.hero .lede{font-size:clamp(1.08rem,1.7vw,1.3rem);color:var(--tinta-suave);
            margin-top:1.3rem;max-width:46ch}
.hero-acciones{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center;margin-top:2.2rem}
.hero-nota{margin-top:1rem;font-size:.88rem;color:var(--gris)}

/* La ilustración. `width/height` en la etiqueta reservan el hueco antes de que
   llegue la imagen, así que la página no da el salto que Google penaliza.

   400 px, NO 480, y el techo lo pone el archivo: el original mide 538×698. A 400
   px en una pantalla de doble densidad ya se pide más detalle del que hay. Antes
   se servía un .webp de 900 px de ancho sacado de ese mismo original —detalle
   inventado por interpolación— y se enseñaba a 480: por eso la taza se veía peor
   que en la versión de React, que la mostraba más pequeña. */
.hero-arte{justify-self:center;max-width:400px;width:100%;position:relative}

/* EL DESVANECIDO DE ABAJO. El archivo original termina con tinta en su ÚLTIMO
   renglón —la nota de abajo va rebanada por el canto—, así que la ilustración se
   recortó antes, en el hueco donde la cascada respira. Aquí el último 6% se
   difumina para que la cascada se pierda en vez de acabar en una línea recta.

   `mix-blend-multiply` la funde con el degradado del fondo en vez de dejarla
   posada encima. Y NO lleva sombra proyectada: con la máscara, la sombra caería
   justo sobre lo que debe disolverse y devolvería el filo por otro camino. */
.hero-arte img{width:100%;height:auto;display:block;
  mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom, #000 94%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 94%, transparent 100%)}

/* La píldora sobre la taza, como en la versión de React.
   Se había perdido: la reconstruí con el glifo verde suelto sobre fondo blanco y
   colgando por DEBAJO del dibujo, y así no se veía. Dos motivos, y los dos
   estaban en el original:

   1. EL ICONO VA EN UN CUADRO VERDE SÓLIDO, con el glifo en blanco. Es lo único
      con color de toda la píldora, y es lo que la hace leerse como un botón en
      vez de como una banda blanca.
   2. VA DENTRO DE LA ILUSTRACIÓN, no debajo. El desenfoque de fondo necesita
      algo que desenfocar: colgando sobre el fondo de la página —que es casi
      blanco— no tenía nada, y el borde translúcido desaparecía.

   Y el contenido va alineado a la izquierda con el icono delante, no centrado:
   centrado parece un rótulo, y con el icono a la izquierda parece pulsable. */
.arte-cta{position:absolute;left:6%;right:6%;bottom:5%;
  display:flex;align-items:center;gap:.75rem;
  padding:0 .9rem;height:52px;border-radius:10px;text-decoration:none;
  font-weight:650;font-size:1rem;color:var(--tinta-suave);
  background:rgba(255,255,255,.82);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.55);
  box-shadow:0 6px 20px rgba(0,0,0,.12);
  transform:translateY(-2px);
  transition:transform .3s ease, box-shadow .3s ease}
.arte-cta:hover{transform:translateY(-5px);box-shadow:0 8px 24px rgba(0,0,0,.16)}

/* El cuadro verde. `flex:none` para que no lo encoja un texto largo — las CTA
   rotan y algunas son bastante más largas que otras. */
.arte-cta svg{width:32px;height:32px;flex:none;padding:5px;border-radius:7px;
  background:var(--verde);color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.12)}

@media (max-width:880px){
  .hero{padding:48px 0 64px}
  .hero-rej{grid-template-columns:1fr;gap:2.2rem}
  /* La ilustración DEBAJO del texto: en un teléfono, media pantalla de dibujo
     antes del titular retrasa lo único que el visitante vino a leer. */
  .hero-arte{max-width:300px;order:2}
}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
     font-family:inherit;font-size:1rem;font-weight:700;padding:.95rem 1.7rem;
     border-radius:999px;text-decoration:none;border:2px solid transparent;
     cursor:pointer;transition:transform .12s ease,background .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(1px)}
.btn-wa{background:var(--verde);color:#08312A;
        box-shadow:0 10px 24px -8px rgba(37,211,102,.7)}
.btn-wa:hover{background:#1FBE5B}
.btn-wa svg{width:1.25em;height:1.25em;flex:none}
.btn-suave{background:var(--papel);color:var(--tinta);border-color:var(--linea)}
.btn-suave:hover{border-color:var(--tinta);}

/* ---------- secciones ---------- */
section{padding:76px 0}
.seccion-rotulo{font-size:.78rem;font-weight:800;letter-spacing:.14em;
                text-transform:uppercase;color:var(--acento)}
h2.sec{font-size:clamp(1.7rem,3.4vw,2.4rem);max-width:20ch;margin-top:.7rem}
.sec-lede{color:var(--tinta-suave);margin-top:1rem;max-width:58ch;font-size:1.05rem}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
          gap:1.3rem;margin-top:2.8rem}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--radio);
         padding:1.7rem}
.tarjeta h3{font-size:1.08rem;font-weight:800}
.tarjeta p{color:var(--tinta-suave);margin-top:.55rem;font-size:.97rem}
.tarjeta .icono{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
                background:#EEF2FF;color:var(--acento);font-weight:800;margin-bottom:1rem}

/* ---------- una conversación de ejemplo ----------
   Enseña el producto en vez de describirlo: es un asistente que vive en un chat,
   así que un chat es la demostración más corta posible. */
.chat{max-width:420px;margin-top:2.4rem;background:#ECE5DD;border-radius:18px;
      padding:1rem;border:1px solid var(--linea)}
.chat p{max-width:82%;padding:.6rem .85rem;border-radius:12px;font-size:.95rem;
        margin-bottom:.55rem;line-height:1.45}
.chat .yo{background:#DCF8C6;margin-left:auto;border-bottom-right-radius:3px}
.chat .el{background:var(--papel);border-bottom-left-radius:3px}
.chat .hora{display:block;font-size:.68rem;color:var(--tenue);text-align:right;margin-top:.2rem}

/* ---------- precios ---------- */
.planes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
        gap:1.3rem;margin-top:2.8rem;align-items:start}
.plan{border:1px solid var(--linea);border-radius:var(--radio);padding:1.8rem;
      background:var(--papel);display:flex;flex-direction:column;height:100%}
.plan.destacado{border:2px solid var(--acento);
                box-shadow:0 16px 40px -18px rgba(99,102,241,.5);position:relative}
.plan h3{font-size:1rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
         color:var(--gris)}
.plan .precio{margin-top:.8rem;font-size:2.3rem;font-weight:850;letter-spacing:-.03em}
.plan .precio small{font-size:.9rem;font-weight:600;color:var(--gris);letter-spacing:0}
.plan ul{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.6rem;flex:1;
         align-content:start}
.plan li{padding-left:1.6rem;position:relative;font-size:.96rem;color:var(--tinta-suave)}
.plan li::before{content:"";position:absolute;left:0;top:.55em;width:.7rem;height:.38rem;
  border-left:2.5px solid var(--verde);border-bottom:2.5px solid var(--verde);
  transform:rotate(-45deg)}
.plan .btn{margin-top:1.6rem;width:100%}

/* ---------- preguntas ---------- */
.faq{margin-top:2.4rem;max-width:760px}
.faq details{border-bottom:1px solid var(--linea);padding:1.05rem 0}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;
             justify-content:space-between;gap:1rem;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:.5rem;height:.5rem;flex:none;
  border-right:2px solid var(--tenue);border-bottom:2px solid var(--tenue);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq p{color:var(--tinta-suave);margin-top:.7rem;font-size:.98rem}

/* ---------- cierre y pie ---------- */
.cierre{text-align:center}
.cierre h2{margin:0 auto;max-width:18ch}
.cierre .sec-lede{margin-left:auto;margin-right:auto}
.cierre .hero-acciones{justify-content:center}

.pie{border-top:1px solid var(--linea);padding:2.4rem 0;color:var(--gris);
     font-size:.9rem;background:var(--niebla)}
.pie-in{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
.pie a{color:var(--gris);text-decoration:none}
.pie a:hover{color:var(--tinta)}

/* ---------- páginas legales ---------- */
.legal{max-width:760px}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem)}
.legal h2{font-size:1.15rem;margin-top:2.2rem}
.legal p{color:var(--tinta-suave);margin-top:.8rem}
.legal .fecha{color:var(--tenue);font-size:.88rem;margin-top:.6rem}

/* ---------- selector de idioma ----------
   Lo pone traduce.js. Mismo desplegable que en los otros dos sitios: tres botones
   planos ocupaban sitio y competían con el único botón que importa. */
.idiomas{position:relative;margin-left:.4rem}
.idiomas summary{display:flex;align-items:center;gap:.45rem;cursor:pointer;
  list-style:none;padding:.35rem .1rem;font-size:.88rem;color:var(--tinta-suave)}
.idiomas summary::-webkit-details-marker{display:none}
.idiomas summary::after{content:'';width:.35rem;height:.35rem;margin-left:.15rem;
  border-right:1.5px solid var(--tenue);border-bottom:1.5px solid var(--tenue);
  transform:rotate(45deg);transition:transform .18s ease}
.idiomas[open] summary::after{transform:rotate(-135deg) translate(-.05rem,-.05rem)}
.idiomas summary:hover{color:var(--tinta)}
.idiomas summary b{font-weight:600}
.idiomas svg{width:1.15rem;height:.83rem;flex:none;display:block;border-radius:2px}
.idiomas ul{position:absolute;top:calc(100% + .5rem);right:0;z-index:60;margin:0;
  padding:.35rem;list-style:none;min-width:9.5rem;background:var(--papel);
  border:1px solid var(--linea);border-radius:12px;
  box-shadow:0 14px 34px -12px rgba(15,23,42,.3)}
.idiomas li{display:block}
.idiomas ul a{display:flex;align-items:center;gap:.55rem;padding:.5rem .6rem;
  border-radius:8px;text-decoration:none;font-size:.9rem;color:var(--tinta)}
.idiomas ul a:hover{background:var(--niebla)}
@media (max-width:560px){
  .barra-nav{gap:.8rem}
  .barra-nav > a{font-size:.82rem}
  .idiomas summary b{display:none}
}

/* ---------- revelado de secciones ----------
   La clase la pone js/secciones.js. Sin JS estas reglas no casan con nada y la
   página se ve entera y quieta, que es el comportamiento correcto cuando el
   script falla. */
.con-revelado .revela{opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1),
             transform .65s cubic-bezier(.22,.61,.36,1)}
.con-revelado .revela.dentro{opacity:1;transform:none}
.con-revelado .revela:nth-child(2){transition-delay:.07s}
.con-revelado .revela:nth-child(3){transition-delay:.14s}
.con-revelado .revela:nth-child(4){transition-delay:.21s}
.con-revelado .revela:nth-child(n+5){transition-delay:.26s}
@media (prefers-reduced-motion:reduce){
  .con-revelado .revela{opacity:1;transform:none;transition:none}
}

/* El precio anual, bajo el mensual. Va apagado a propósito: la decisión que la
   página quiere que tomes es empezar, no elegir periodicidad. */
.plan-anual{margin-top:.35rem;font-size:.9rem;color:var(--gris)}