/* automatemj.css · base visual de los servicios de AutomateMJ.
   Fuentes (en el <head>): Sora 200/400/600/800 e IBM Plex Mono 400/500.
   Cada servicio solo sobrescribe las variables de color (y, si quiere, --radio); el resto se calcula solo.
   Obligatorias por servicio: --fondo --tinta --marca --marca-texto --sobre-marca --acento, en claro Y en oscuro. */
:root{
  
  --fondo:#F1F1F7; --tinta:#16172B;
  --marca:#4338CA;        /* fondos de botón y trazos: no tiene que valer como texto */
  --marca-texto:#4338CA;  /* marca usada COMO TEXTO sobre --fondo: AA 4.5:1 */
  --sobre-marca:#fff;     /* texto sobre --marca: AA 4.5:1 */
  --acento:#4338CA;       /* segundo color: filetes, fases, detalles */
  --error:#B3283F;
  --radio:0;              /* AutomateMJ es de esquinas rectas; un servicio puede poner 6px si le pega */
  /* derivadas: se recalculan solas con --fondo y --tinta */
  --suave:color-mix(in srgb,var(--tinta) 80%,var(--fondo));
  --meta:color-mix(in srgb,var(--tinta) 72%,var(--fondo));
  --linea:color-mix(in srgb,var(--tinta) 15%,var(--fondo));
  --campo:color-mix(in srgb,var(--tinta) 38%,var(--fondo));
  --panel:color-mix(in srgb,var(--tinta) 7%,var(--fondo));
  --alt:color-mix(in srgb,var(--tinta) 4%,var(--fondo));
  --trama:color-mix(in srgb,var(--tinta) 8%,transparent);
  /* bloque invertido (fecha de lanzamiento) */
  --inv-fondo:var(--tinta); --inv-texto:var(--fondo);
  --inv-suave:color-mix(in srgb,var(--inv-texto) 72%,var(--inv-fondo));
  --inv-acento:var(--inv-texto);
  /* pie, oscuro en los dos modos */
  --pie-fondo:#101124; --pie-texto:#A9A8C2; --pie-enlace:#D4D1FF; --pie-linea:#26273D;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:400 15.5px/1.7 Sora,system-ui,-apple-system,"Segoe UI",sans-serif;overflow-wrap:break-word}
[hidden]{display:none!important}
a{color:var(--marca-texto)}
:focus-visible{outline:3px solid var(--marca-texto);outline-offset:3px}
p{margin:0 0 14px;color:var(--suave);text-wrap:pretty}
h1,h2,h3{margin:0;font-weight:200;letter-spacing:-.035em;color:var(--tinta)}
strong,b{font-weight:600;color:var(--tinta)}
svg{max-width:100%}

/* ---- Cabecera con logo ---- */
.cab{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--fondo) 92%,transparent);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--linea)}
.cab>div{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--tinta);min-width:0}
.logo svg{width:30px;height:30px;flex:none}
.logo b{color:inherit;font-weight:800;font-size:17px;letter-spacing:-.02em}
.cab-nota{font:500 11px/1.3 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--meta);text-align:right}
.cab-nota a{color:inherit;text-decoration:none}

/* ---- Marco y secciones ---- */
.marco{max-width:1080px;margin:0 auto}
@media(min-width:1120px){.marco{border-inline:1px solid var(--linea)}}
.seccion{padding:56px 20px;border-top:1px solid var(--linea)}
.seccion:first-child{border-top:0}
.etiqueta{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase;color:var(--marca-texto);margin:0 0 16px}
.seccion h2{font-size:clamp(28px,5.5vw,42px);line-height:1.08;margin-bottom:20px}
.seccion h2 b{font-weight:800}
.dos{display:grid;gap:28px}
@media(min-width:900px){.seccion{padding:80px 56px}.dos{grid-template-columns:300px 1fr;gap:56px}.cab>div{padding:16px 40px}}

/* ---- Héroe ---- */
.heroe{display:grid;border-top:0}
.heroe-txt{padding:56px 20px 48px}
.heroe h1{font-size:clamp(38px,9.5vw,72px);line-height:.98;letter-spacing:-.04em}
.heroe h1 b{display:block;font-weight:800}
.heroe .etiqueta{color:var(--meta);margin-bottom:24px}
.lead{font-size:clamp(16px,2.2vw,18px);line-height:1.65;max-width:540px;margin:28px 0 0}
.heroe-panel{position:relative;min-height:220px;background:var(--panel);border-top:1px solid var(--linea);
  background-image:repeating-linear-gradient(45deg,var(--trama) 0 1px,transparent 1px 11px);
  display:grid;place-items:center;padding:28px;overflow:hidden}
.heroe-panel svg{width:min(100%,320px);height:auto}
@media(min-width:900px){.heroe{grid-template-columns:1fr 400px}.heroe-txt{padding:88px 56px 76px}
  .heroe-panel{border-top:0;border-left:1px solid var(--linea)}}
@keyframes sube{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.heroe-txt>*{animation:sube .7s cubic-bezier(.2,.8,.2,1) both}
.heroe-txt>:nth-child(2){animation-delay:.08s}.heroe-txt>:nth-child(3){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){.heroe-txt>*{animation:none}*{transition:none!important}}

/* ---- Bloque de fecha de lanzamiento (invertido) ---- */
.lanzamiento{background:var(--inv-fondo);color:var(--inv-texto);padding:36px 20px;display:grid;gap:10px}
.lanzamiento .etiqueta{color:var(--inv-acento);margin:0;display:flex;align-items:center;gap:10px}
.lanzamiento .etiqueta::before{content:"";width:9px;height:9px;background:var(--inv-acento);flex:none;animation:led 2.4s ease infinite}
@keyframes led{50%{opacity:.35}}
.lanzamiento p{color:var(--inv-suave);margin:0;max-width:520px;font-size:14.5px}
.lanzamiento .fecha{font-size:clamp(28px,6vw,46px);font-weight:200;letter-spacing:-.035em;line-height:1.1;color:var(--inv-texto);max-width:none}
.lanzamiento time{font-weight:800}
@media(min-width:900px){.lanzamiento{padding:44px 56px}}

/* ---- Precio ---- */
.precio{margin:0;padding:6px 0 6px 20px;border-left:3px solid var(--marca);font-size:17px;line-height:1.6;color:var(--tinta);max-width:560px}
.precio::before{content:"PRECIO";display:block;font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.22em;color:var(--meta);margin-bottom:6px}

/* ---- Botón y formulario de lista de espera ---- */
.boton,button[data-interes]{display:inline-block;appearance:none;border:1px solid var(--marca);border-radius:var(--radio);background:var(--marca);color:var(--sobre-marca);
  font:600 15px/1.2 Sora,system-ui,sans-serif;padding:17px 30px;cursor:pointer;text-decoration:none;transition:transform .25s,filter .25s}
.boton:hover,button[data-interes]:hover{transform:translateY(-2px);filter:brightness(1.08)}
.boton--borde{background:transparent;color:var(--tinta);border-color:var(--tinta)}
.lista{margin:22px 0 0;max-width:560px}
.lista .fila{display:flex;flex-wrap:wrap;gap:12px}
.lista input[type=email]{flex:1 1 230px;min-width:0;padding:16px;border:1px solid var(--campo);border-radius:var(--radio);background:var(--fondo);color:var(--tinta);font:400 15px Sora,system-ui,sans-serif}
.lista input::placeholder{color:var(--meta)}
.lista .boton{flex:0 0 auto}
.lista-nota{font-size:13.5px;margin:12px 0 0}
[data-respuesta]{margin:14px 0 0;padding:12px 16px;border-left:4px solid var(--marca);background:var(--panel);color:var(--tinta);font-size:14.5px}

/* ---- Avisos: privacidad y Angola ---- */
.aviso-privacidad{margin:22px 0 0;font-size:13.5px;line-height:1.65;max-width:560px}
.aviso-angola{margin:16px 0 0;padding:16px 18px;border:1px solid var(--acento);border-left-width:4px;background:var(--alt);font-size:14px}
.aviso-angola p{margin:0 0 10px;color:var(--tinta)}
.aviso-angola label{display:flex;gap:10px;align-items:flex-start;color:var(--tinta);cursor:pointer}
.aviso-angola input{margin-top:5px;width:18px;height:18px;flex:none;accent-color:var(--marca)}

/* ---- Contenido: tarjetas y listas ---- */
.cols{display:grid;gap:0;border:1px solid var(--linea)}
.cols>div{padding:24px 22px;border-top:1px solid var(--linea)}
.cols>div:first-child{border-top:0}
.cols h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px}
.cols p{margin:0;font-size:14.5px}
.cols .num{font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.2em;color:var(--marca-texto);margin-bottom:12px;display:block}
@media(min-width:760px){.cols{grid-template-columns:repeat(3,1fr)}.cols>div{border-top:0;border-left:1px solid var(--linea)}.cols>div:first-child{border-left:0}}

/* ---- Preguntas frecuentes (sin JS: details) ---- */
.faq details{border-top:1px solid var(--linea)}
.faq details:last-child{border-bottom:1px solid var(--linea)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;align-items:baseline;padding:22px 0;font-size:18px;font-weight:600;letter-spacing:-.015em;color:var(--tinta)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 20px "IBM Plex Mono",ui-monospace,monospace;color:var(--marca-texto);transition:transform .3s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;max-width:640px;font-size:15px;line-height:1.72}

/* ---- Fases (salida escalonada) ---- */
.fases{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:fase;border:1px solid var(--linea)}
.fases li{counter-increment:fase;padding:24px 22px;border-top:1px solid var(--linea);position:relative}
.fases li:first-child{border-top:0}
.fases li::before{content:"FASE " counter(fase);display:block;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.22em;color:var(--marca-texto);margin-bottom:12px}
.fases li::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--acento);opacity:.0}
.fases li:first-child::after{opacity:1}
.fases time{display:block;font:500 12px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;color:var(--meta);margin-bottom:8px}
.fases h3{font-size:19px;font-weight:600;letter-spacing:-.015em;margin-bottom:6px}
.fases p{margin:0;font-size:14.5px}
@media(min-width:760px){.fases{grid-auto-flow:column;grid-auto-columns:1fr}.fases li{border-top:0;border-left:1px solid var(--linea)}.fases li:first-child{border-left:0}}

/* ---- Pie ---- */
.pie{background:var(--pie-fondo);color:var(--pie-texto);padding:40px 20px 48px;font-size:13.5px;line-height:1.7}
.pie>div{max-width:1080px;margin:0 auto}
@media(min-width:900px){.pie{padding:48px 56px 56px}}
.pie p{color:var(--pie-texto);margin:0 0 10px;max-width:760px}
.pie a{color:var(--pie-enlace)}
.pie nav{margin-top:14px;padding-top:14px;border-top:1px solid var(--pie-linea);font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.14em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:8px 22px}
.pie nav a{text-decoration:none}
.pie nav a:hover{text-decoration:underline}
.pie [data-declaracion-ia]{font:500 11px/1.6 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--pie-texto)}
.pie .logo{color:var(--pie-enlace);margin-bottom:18px}
.salto{position:absolute;left:-999px}.salto:focus{left:12px;top:12px;z-index:50;background:var(--fondo);padding:8px 12px}