/* Base v3 · Landing «Agentes IA + app» (02-10-2026)
   Estilo de las referencias del dueño (24 pines del 02-10): jerarquía clara, titulares grandes en peso medio,
   UNA frase de apoyo, etiquetas mínimas, mucho aire, interfaces realistas sobre fondo de puntos.
   Marca 2026: Inter · tinta #0a0a0a · nieve #f5f5f7 · verde #3cc1a0 (único acento; nunca texto verde sobre claro
   ni texto blanco sobre verde). La landing va en claro: es un diseño de un solo aspecto (no cambia con el tema del sistema). */

:root{
  color-scheme: light;
  --tinta:#0a0a0a; --tinta-80:rgba(10,10,10,.82); --tinta-60:rgba(10,10,10,.6); --tinta-45:rgba(10,10,10,.46); --tinta-30:rgba(10,10,10,.3); --tinta-15:rgba(10,10,10,.15);
  --blanco:#fff; --nieve:#f5f5f7; --nieve-2:#eeeef1;
  --linea:rgba(10,10,10,.08); --linea-fuerte:rgba(10,10,10,.13);
  --verde:#3cc1a0; --verde-osc:#2fa387; --verde-agua:#e6f6f1; --verde-10:rgba(60,193,160,.1); --verde-20:rgba(60,193,160,.22);
  --ambar:#b7791f; --ambar-fondo:#fdf3e1;
  --rojo:#d93c3c; --rojo-fondo:#fdecec;
  --carbon:#161618;
  --ease:cubic-bezier(.22,.8,.24,1);
  --sombra-1:0 1px 2px rgba(10,10,10,.05), 0 1px 1px rgba(10,10,10,.03);
  --sombra-2:0 1px 2px rgba(10,10,10,.05), 0 12px 32px -14px rgba(10,10,10,.22);
  --sombra-3:0 2px 4px rgba(10,10,10,.04), 0 24px 60px -24px rgba(10,10,10,.32);
  --fuente:'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ancho:1280px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--blanco); color:var(--tinta); font-family:var(--fuente); font-size:16px; line-height:1.55;
  font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,svg{ display:block; max-width:100%; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3,h4{ margin:0; font-weight:500; }
ul,ol{ margin:0; padding:0; list-style:none; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.ico{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico.relleno{ fill:currentColor; stroke:none; }
.tnum{ font-variant-numeric:tabular-nums; }

/* ---------- Contenedor y secciones ---------- */
.contenedor{ width:100%; max-width:calc(var(--ancho) + 64px); margin-inline:auto; padding-inline:32px; }
.seccion{ position:relative; padding-block:clamp(88px, 11vw, 148px); }
@media (max-width:640px){ .contenedor{ padding-inline:16px; } }

/* ---------- Tipografía (escala única) ---------- */
.etiqueta{ display:inline-flex; align-items:center; gap:10px; font-size:12px; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--tinta-60); }
.etiqueta::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--verde); box-shadow:0 0 0 4px var(--verde-10); }
.h-sec{ font-size:clamp(38px, 4.6vw, 64px); line-height:1.02; letter-spacing:-.038em; font-weight:500; text-wrap:balance; }
.h-pan{ font-size:clamp(24px, 2.1vw, 30px); line-height:1.12; letter-spacing:-.025em; font-weight:500; text-wrap:balance; }
.sub{ font-size:clamp(19px, 1.65vw, 23px); line-height:1.4; letter-spacing:-.012em; color:var(--tinta-45); text-wrap:pretty; }
.sub strong{ font-weight:400; color:var(--tinta); }
.h-sec .gris{ color:var(--tinta-45); }
.txt{ font-size:16px; line-height:1.6; color:var(--tinta-60); text-wrap:pretty; }
.txt strong{ font-weight:500; color:var(--tinta); }
.rotulo{ font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-45); }
.nota{ font-size:13px; line-height:1.5; color:var(--tinta-45); }
.btn + .nota{ max-width:420px; text-wrap:pretty; }   /* la nota larga de debajo de los botones (dueño, 03-10) no estira su bloque */
.cl-cierre .btn + .nota{ margin-inline:auto; }

/* ---------- Botones (píldora verde con disco negro, texto tinta) ---------- */
.btn{ --alto:56px; display:inline-flex; align-items:center; gap:14px; height:var(--alto); padding:0 7px 0 26px; border-radius:999px; background:var(--verde); color:var(--tinta);
  font-size:16px; font-weight:500; letter-spacing:-.01em; white-space:nowrap; transition:background .2s, transform .2s var(--ease); text-decoration:none; }
.btn:hover{ background:#4fcbac; }
.btn:active{ transform:scale(.98); }
.btn .disco{ width:calc(var(--alto) - 14px); height:calc(var(--alto) - 14px); border-radius:50%; background:var(--tinta); color:var(--blanco); display:grid; place-items:center; transition:transform .25s var(--ease); }
.btn:hover .disco{ transform:rotate(-45deg); }
.btn .disco .ico{ width:18px; height:18px; stroke-width:2.2; }
.btn.peq{ --alto:44px; font-size:14.5px; padding-left:20px; gap:10px; }
.btn.peq .disco .ico{ width:14px; height:14px; }
.btn:focus-visible, .pt-tab:focus-visible, a:focus-visible{ outline:2px solid var(--verde-osc); outline-offset:3px; }
.enlace{ display:inline-flex; align-items:center; gap:8px; font-size:15px; font-weight:500; color:var(--tinta); text-decoration:none; }
.enlace .ico{ width:16px; height:16px; transition:transform .25s var(--ease); }
.enlace:hover .ico{ transform:translateX(3px); }

/* ---------- Escenario con rejilla de puntos (refs B03/B04) ---------- */
.lienzo{ position:relative; border-radius:20px; background:var(--nieve);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.11) 1px, transparent 1.4px); background-size:18px 18px; background-position:-1px -1px;
  border:1px solid var(--linea); overflow:hidden; isolation:isolate; }
.lienzo::after{ content:''; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(245,245,247,.9) 100%); z-index:-1; }

/* ---------- Estados de animación (los usa motor.js) ---------- */
.off{ opacity:0!important; transform:translateY(10px); pointer-events:none; }
.oculto{ display:none!important; }
.entra{ animation:entra .45s var(--ease) both; }
@keyframes entra{ from{ opacity:0; transform:translateY(8px) scale(.985); } to{ opacity:1; transform:none; } }
.pulso{ animation:pulso .35s var(--ease); }
@keyframes pulso{ 50%{ transform:scale(1.04); } }
.destello{ animation:destello .9s ease-out; }
@keyframes destello{ 0%{ background-color:var(--verde-20); } 100%{ background-color:transparent; } }
.pausada, .pausada *{ animation-play-state:paused!important; }
.sin-trans, .sin-trans *{ transition:none!important; animation:none!important; }
.pausa{ position:absolute; width:34px; height:34px; border-radius:50%; border:1px solid var(--linea-fuerte); display:grid; place-items:center; color:var(--tinta-60);
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px); z-index:8; transition:background .2s; }
.pausa:hover{ background:#fff; color:var(--tinta); }
.pausa .ico{ width:13px; height:13px; }
.pausa .i-play{ display:none; }
.pausa[aria-pressed="true"] .i-play{ display:block; }
.pausa[aria-pressed="true"] .i-pausa{ display:none; }

/* ---------- Comunes de página ---------- */
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(9px + env(safe-area-inset-bottom,0px));
  background:rgba(22,22,24,.62); -webkit-backdrop-filter:blur(16px) saturate(150%); backdrop-filter:blur(16px) saturate(150%); border-top:1px solid rgba(255,255,255,.1);   /* 05-10 (dueño): gris translúcido, no blanco */
  transform:translateY(110%); transition:transform .25s var(--ease); display:none; }
.barra-movil .btn{ width:100%; justify-content:space-between; height:50px; }
.barra-movil .btn + .nota{ max-width:none; margin:7px 6px 0; font-size:11px; line-height:1.35; text-align:center; color:rgba(255,255,255,.8); text-shadow:0 1px 2px rgba(0,0,0,.35); }
.barra-movil.visible{ transform:none; }
@media (max-width:980px){ .barra-movil{ display:block; } }
.aviso-form{ position:fixed; left:50%; bottom:24px; transform:translate(-50%,calc(100% + 48px)); background:var(--tinta); color:#fff; padding:12px 18px; border-radius:10px;
  font-size:14px; z-index:50; transition:transform .3s var(--ease); max-width:calc(100% - 32px); box-shadow:var(--sombra-3); }
.aviso-form.visible{ transform:translate(-50%,0); }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto!important; }
.lenis.lenis-stopped{ overflow:hidden; }
@media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms!important; transition-duration:.001ms!important; } }

/* CTA al final de cada sección (dueño, 05-10-2026: «al final de cada sección tiene que haber un CTA con el botón y debajo el texto del hero»).
   Frase, botón y la nota del hero. En las secciones oscuras, la nota en gris claro. */
.cta-fin{ display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:112px; }
.cta-fin-h{ max-width:880px; margin:0; font-size:clamp(28px, 3.3vw, 46px); font-weight:500; line-height:1.1; letter-spacing:-.035em; text-wrap:balance; }
.cta-fin-h .gris{ opacity:.5; }
.cta-fin .btn{ margin-top:36px; }
.cta-fin .btn + .nota{ margin:14px auto 0; }
.s-como .cta-fin .nota, .s-canales .cta-fin .nota, .cta-oscuro .nota{ color:rgba(255,255,255,.5); }
@media (max-width:899.98px){ .cta-fin{ padding-top:80px; } .cta-fin-h{ font-size:clamp(26px, 7.2vw, 32px); } }

/* PIE DE PÁGINA · v1 (05-10-2026): negro, logo y frase con el botón, 3 columnas de enlaces, línea legal y la marca en grande al fondo. */
.pie-web{ position:relative; overflow:hidden; background:#000;   /* .pie a secas ya lo usan piezas de sectores */
  color:#fff; padding-top:96px; border-top:1px solid rgba(255,255,255,.08); }
.pie-grid{ display:grid; grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap:48px; }
.pie-logo{ display:inline-flex; align-items:center; gap:10px; font-size:24px; font-weight:600; letter-spacing:-.03em; color:#fff; text-decoration:none; }
.pie-logo svg{ width:30px; height:26px; fill:var(--verde); }
.pie-marca p{ max-width:360px; margin:18px 0 28px; font-size:15.5px; line-height:1.55; color:rgba(255,255,255,.55); }
.pie-col{ display:flex; flex-direction:column; gap:12px; }
.pie-col b{ margin-bottom:6px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4); }
.pie-col a{ width:fit-content; font-size:15px; color:rgba(255,255,255,.75); text-decoration:none; transition:color .2s; }
.pie-col a:hover{ color:var(--verde); }
.pie-base{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:72px; padding-top:24px; padding-bottom:24px; border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:rgba(255,255,255,.4); }
.pie-gigante{ margin:0 0 -0.2em; text-align:center; font-size:clamp(88px, 20vw, 300px); font-weight:600; line-height:1; letter-spacing:-.065em; white-space:nowrap; pointer-events:none; user-select:none;
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0) 85%); -webkit-background-clip:text; background-clip:text; color:transparent; }
@media (max-width:899.98px){
  .pie-web{ padding-top:72px; padding-bottom:112px; }   /* deja sitio a la barra del botón del móvil */
  .pie-grid{ grid-template-columns:1fr 1fr; gap:36px 24px; }
  .pie-marca{ grid-column:1 / -1; }
  .pie-base{ margin-top:48px; flex-direction:column; gap:8px; }
}