/* INICIO roimaster · v1 (09-10-2026)
   Página corta que reparte a los 3 servicios: hero → servicios → contacto por WhatsApp → pie.
   Lenguaje de la landing de Agentes IA (web3/base3.css): Inter, titulares grandes en peso 500, una frase de apoyo, mucho aire,
   botón píldora verde con disco negro. Oscuros = NEGRO (#000) y tarjetas sobre negro en gris NEUTRO (#161618 / rgba(26,26,28,.86)),
   nunca el oscuro azulado de la marca. Verde #3cc1a0 = único acento (nunca texto verde sobre claro ni texto blanco sobre verde).
   Diseño de un solo aspecto (claro con bloques negros): 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-15:rgba(10,10,10,.15);
  --blanco:#fff; --nieve:#f5f5f7; --negro:#000; --carbon:#161618; --cristal:rgba(26,26,28,.86);
  --linea:rgba(10,10,10,.08); --linea-fuerte:rgba(10,10,10,.13); --linea-luz:rgba(255,255,255,.09);
  --verde:#3cc1a0; --verde-osc:#2fa387; --verde-10:rgba(60,193,160,.1); --verde-20:rgba(60,193,160,.22);
  --wa:#25d366; --wa-fondo:#efeae2; --wa-mio:#d9fdd3;
  --ease:cubic-bezier(.22,.8,.24,1);
  --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%; scroll-behavior:smooth; }
body{ margin:0; background:var(--blanco); color:var(--tinta); font-family:var(--fuente); font-size:16px; line-height:1.55; overflow-x:hidden;
  font-feature-settings:'cv11','ss01'; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
p{ margin:0; }
h1,h2,h3{ margin:0; font-weight:500; }
ul{ margin:0; padding:0; list-style:none; }
.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{ width:100%; max-width:calc(var(--ancho) + 64px); margin-inline:auto; padding-inline:32px; }
@media (max-width:640px){ .contenedor{ padding-inline:16px; } }

/* ---------- Tipografía ---------- */
.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); }
.oscuro .etiqueta{ color:rgba(255,255,255,.62); }
.oscuro .etiqueta::before{ box-shadow:0 0 0 4px rgba(60,193,160,.18); }
.h-sec{ font-size:clamp(34px, 4.4vw, 60px); line-height:1.04; letter-spacing:-.038em; font-weight:500; text-wrap:balance; }
.gris{ color:var(--tinta-45); }
.oscuro .gris{ color:rgba(255,255,255,.42); }
.nota{ font-size:13px; line-height:1.5; color:var(--tinta-45); }

/* ---------- 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; text-decoration:none; transition:background .2s, transform .2s var(--ease); }
.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(-12deg) scale(1.04); }
.btn .disco .ico{ width:19px; height:19px; }
.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); }
.enlace.abajo:hover .ico{ transform:translateY(3px); }
.oscuro .enlace{ color:#fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible{ outline:2px solid var(--verde); outline-offset:3px; }

/* =====================================================================
   1 · BARRA de arriba: solo el logo, sobre blanco (v2, 09-10-2026: sin hero)
   ===================================================================== */
.barra-sup{ position:relative; z-index:5; background:var(--blanco); }
.barra-sup .contenedor{ display:flex; align-items:center; height:84px; }
.logo{ display:inline-flex; align-items:center; gap:9px; font-size:19px; font-weight:600; letter-spacing:-.03em; color:#fff; text-decoration:none; }
.logo svg{ width:26px; height:22px; fill:var(--verde); }
.barra-sup .logo{ color:var(--tinta); }

/* Piezas comunes de las tareas (las usa la tarjeta de Agentes) */
.tarea-ico{ width:30px; height:30px; border-radius:9px; background:rgba(60,193,160,.13); color:var(--verde); display:grid; place-items:center; }
.tarea-ico .ico{ width:15px; height:15px; }
.estado{ display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:500; padding:2px 8px; border-radius:999px; color:var(--verde); background:rgba(60,193,160,.12); }
.estado .ico{ width:11px; height:11px; stroke-width:2.6; }
.estado.ahora{ color:rgba(255,255,255,.75); background:rgba(255,255,255,.07); }
.estado.ahora .ico{ display:none; }
.estado.ahora::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--verde); animation:parpadea 1s ease-in-out infinite; }
@keyframes parpadea{ 50%{ opacity:.25; } }

/* =====================================================================
   2 · SERVICIOS (blanco): un bloque con 3 piezas distintas, no 3 tarjetas iguales.
   Captación a lo ancho sobre lienzo de puntos · Web en blanco con sus pestañas · Agentes en negro con el robot.
   ===================================================================== */
.s-servicios{ position:relative; background:var(--blanco); padding-block:clamp(40px, 5vw, 72px) clamp(88px, 10vw, 136px); }
.sv-cabecera{ display:flex; flex-direction:column; gap:20px; max-width:900px; margin-bottom:56px; }
.sv-rejilla{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; }
.sv{ position:relative; display:flex; flex-direction:column; border-radius:20px; overflow:hidden; isolation:isolate; }
.sv-txt{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.sv-h{ font-size:clamp(28px, 2.5vw, 36px); line-height:1.08; letter-spacing:-.032em; font-weight:500; }
.sv-frase{ font-size:clamp(17px, 1.35vw, 19px); line-height:1.45; letter-spacing:-.01em; color:var(--tinta-60); max-width:470px; text-wrap:pretty; }
.sv-puntos{ display:flex; flex-direction:column; gap:10px; padding-top:4px; }
.sv-puntos li{ display:flex; gap:11px; font-size:15px; line-height:1.45; color:var(--tinta-80); }
.ok{ flex:none; width:22px; height:22px; border-radius:50%; background:var(--verde-10); color:var(--verde-osc); display:grid; place-items:center; margin-top:-1px; }
.ok .ico{ width:12px; height:12px; stroke-width:2.6; }
.sv-pie{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:10px; }
.sv-url{ font-size:12.5px; color:var(--tinta-45); }
/* toda la tarjeta lleva al servicio */
.sv-ir::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:20px; }
.sv:hover .sv-ir .ico{ transform:translateX(3px); }
.sv-ir:focus-visible{ outline:none; }
.sv-ir:focus-visible::after{ outline:2px solid var(--verde); outline-offset:-2px; }

/* --- Captación: a lo ancho, sobre lienzo de puntos; el programa a la derecha, cortado por el borde --- */
.sv-cap{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); gap:40px; padding:52px 0 0 52px;
  background:var(--nieve); border:1px solid var(--linea);
  background-image:radial-gradient(circle at 1px 1px, rgba(10,10,10,.1) 1px, transparent 1.4px); background-size:18px 18px; }   /* 09-10: el dueño prefiere el gris al verde */

/* «Ver el servicio» es un botón, no solo texto (dueño, 09-10) */
.sv-ir.btn{ --alto:50px; position:static; font-size:15px; padding-left:22px; }
.sv-ir.btn .disco .ico{ width:17px; height:17px; }
.sv:hover .sv-ir.btn{ background:#4fcbac; }
.sv:hover .sv-ir.btn .disco{ transform:rotate(-12deg) scale(1.04); }

.sv-cap .sv-txt{ padding-bottom:52px; }
.cap-vis{ position:relative; min-height:440px; }
.ventana{ position:absolute; left:0; top:0; width:820px; margin:0; border-radius:12px 0 0 0; overflow:hidden; background:#fff; border:1px solid var(--linea-fuerte); border-right:0; border-bottom:0;
  box-shadow:var(--sombra-3); }
.ventana-barra{ display:flex; align-items:center; gap:6px; height:36px; padding:0 14px; border-bottom:1px solid var(--linea); background:#fafafa; font-size:12px; color:var(--tinta-45); }
.ventana-barra i{ width:9px; height:9px; border-radius:50%; background:rgba(10,10,10,.12); }
.ventana-barra span{ margin-left:10px; }
.ventana img{ width:100%; height:auto; }
.ficha{ position:absolute; z-index:3; left:-30px; bottom:44px; width:286px; padding:16px; border-radius:14px; background:#fff; border:1px solid var(--linea); box-shadow:var(--sombra-3); }
.ficha-cab{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.ficha-cab b{ font-size:14px; font-weight:600; letter-spacing:-.01em; }
.pill{ display:inline-flex; align-items:center; gap:5px; height:22px; padding:0 9px; border-radius:999px; font-size:11px; font-weight:500; color:var(--tinta-80); background:var(--verde-10); }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:var(--verde); }
.ficha dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:7px 14px; margin:0; font-size:13px; }
.ficha dt{ color:var(--tinta-45); }
.ficha dd{ margin:0; color:var(--tinta); font-weight:500; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ficha-btn{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; height:38px; border-radius:999px; background:var(--tinta); color:#fff; font-size:13.5px; font-weight:500; }
.ficha-btn .ico{ width:14px; height:14px; }

/* --- Web: blanca, una web fija (la de fisioterapia), sin pestañas ni recorrido --- */
.sv-web{ padding:44px 44px 0; background:#fff; border:1px solid var(--linea-fuerte); }
.web-vis{ position:relative; margin-top:auto; padding-top:40px; }
.web-marco{ position:relative; height:330px; border-radius:12px 12px 0 0; overflow:hidden; background:#fff; border:1px solid var(--linea-fuerte); border-bottom:0; box-shadow:var(--sombra-2); }
.web-marco .ventana-barra{ justify-content:flex-start; }
.web-url{ flex:1; display:flex; justify-content:center; padding-right:40px; }
.web-url span{ display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 12px; border-radius:6px; background:rgba(10,10,10,.05); font-size:11.5px; color:var(--tinta-60); margin:0; }
.web-url .ico{ width:10px; height:10px; stroke-width:2.2; }
.web-vista{ position:absolute; left:0; right:0; top:36px; bottom:0; }
.web-vista img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 0; opacity:0; transition:opacity .6s var(--ease); }
.web-vista img.visible{ opacity:1; }

/* --- Agentes: negro, el robot con su luz y las tareas --- */
.ia-red{ position:absolute; left:0; right:0; top:-56px; bottom:0; width:100%; height:calc(100% + 56px); pointer-events:none; }   /* neuronas detrás del robot (dueño, 09-10) */
.sv-ia{ padding:44px 44px 0; background:var(--negro); color:#fff; }
.sv-ia .sv-frase{ color:rgba(255,255,255,.6); }
.sv-ia .sv-puntos li{ color:rgba(255,255,255,.78); }
.sv-ia .ok{ background:rgba(60,193,160,.14); color:var(--verde); }
.sv-ia .sv-url{ color:rgba(255,255,255,.4); }
.ia-vis{ position:relative; flex:1; min-height:384px; margin-inline:-44px; margin-top:24px; }
.ia-fondo{ position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,255,255,.07) 1.5px, transparent 1.6px) 0 0 / 18px 18px;
  -webkit-mask-image:radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 100%); mask-image:radial-gradient(60% 70% at 50% 60%, #000 30%, transparent 100%); }
.ia-fondo::after{ content:''; position:absolute; inset:0; background:radial-gradient(34% 40% at 50% 46%, rgba(60,193,160,.24), rgba(60,193,160,.05) 60%, transparent 80%); }
.ia-robot{ position:absolute; left:52%; bottom:0; width:430px; height:auto; max-width:86%; transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(#000 72%, transparent 100%); mask-image:linear-gradient(#000 72%, transparent 100%); }
.ia-tareas{ position:absolute; inset:0; }
.ia-t{ position:absolute; display:flex; align-items:center; gap:10px; padding:8px 12px 8px 8px; border-radius:12px; background:var(--cristal); border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.9); font-size:12.5px; white-space:nowrap; }
.ia-t .tarea-ico{ width:28px; height:28px; border-radius:8px; }
.ia-t b{ font-weight:500; color:#fff; }
.ia-t .estado{ margin-left:4px; }
.ia-t.t1{ left:7%; top:30%; }
.ia-t.t2{ right:6%; top:47%; }
.ia-t.t3{ left:10%; top:70%; }

/* =====================================================================
   3 · CONTACTO POR WHATSAPP (negro): texto y botón a la izquierda; a la derecha, la conversación en el móvil.
   ===================================================================== */
.s-contacto{ position:relative; background:var(--negro); color:#fff; overflow:hidden; isolation:isolate; padding-block:clamp(96px, 11vw, 144px); }
.co-brillo{ position:absolute; z-index:-1; right:-10%; top:50%; width:900px; height:900px; margin-top:-450px; pointer-events:none;
  background:radial-gradient(closest-side, rgba(60,193,160,.16), rgba(60,193,160,.04) 60%, transparent 100%); }
.co-grid{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 400px); gap:64px; align-items:center; }
.co-txt{ display:flex; flex-direction:column; align-items:flex-start; gap:24px; }
.co-h2{ font-size:clamp(36px, 4.2vw, 58px); line-height:1.04; letter-spacing:-.042em; font-weight:500; text-wrap:balance; max-width:700px; }
.co-sub{ font-size:clamp(17px, 1.45vw, 20px); line-height:1.5; letter-spacing:-.012em; color:rgba(255,255,255,.6); max-width:540px; text-wrap:pretty; }
.co-btn{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding-top:10px; }
.co-btn .nota{ color:rgba(255,255,255,.5); font-size:13.5px; }
.co-num{ color:#fff; font-weight:500; user-select:all; }
.co-pasos{ display:flex; gap:28px; flex-wrap:wrap; padding-top:24px; margin-top:6px; border-top:1px solid rgba(255,255,255,.1); width:100%; max-width:560px; }
.co-pasos li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:rgba(255,255,255,.7); }
.co-pasos .ok{ background:rgba(60,193,160,.14); color:var(--verde); }

/* El móvil con WhatsApp (colores claros reales de WhatsApp: fondo #efeae2, mensaje propio #d9fdd3) */
.movil{ justify-self:center; width:340px; max-width:100%; padding:10px; border-radius:48px; background:#1c1c1e; border:1px solid rgba(255,255,255,.12);
  box-shadow:0 50px 100px -40px rgba(0,0,0,1), inset 0 0 0 1px rgba(255,255,255,.04); }
.pantalla{ position:relative; height:620px; border-radius:38px; overflow:hidden; background:var(--wa-fondo); display:flex; flex-direction:column; color:#111; }
.wa-estado{ display:flex; align-items:center; justify-content:space-between; height:44px; padding:0 26px 0 30px; background:#f7f7f7; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.wa-estado .iconos{ display:flex; gap:5px; align-items:center; }
.wa-estado .iconos i{ display:block; background:#111; border-radius:2px; }
.wa-cab{ display:flex; align-items:center; gap:10px; padding:6px 14px 10px; background:#f7f7f7; border-bottom:1px solid rgba(0,0,0,.08); }
.wa-cab .volver{ width:20px; height:20px; color:#111; }
.wa-av{ width:36px; height:36px; border-radius:50%; background:var(--negro); display:grid; place-items:center; flex:none; }
.wa-av svg{ width:19px; height:16px; fill:var(--verde); }
.wa-nombre{ display:flex; flex-direction:column; min-width:0; flex:1; }
.wa-nombre b{ font-size:15px; font-weight:600; line-height:1.2; }
.wa-nombre span{ font-size:12px; color:rgba(0,0,0,.5); }
.wa-cab .accion{ width:21px; height:21px; color:#111; opacity:.85; }
.wa-chat{ flex:1; display:flex; flex-direction:column; gap:6px; padding:12px 12px 10px; overflow:hidden; justify-content:flex-end; }
.wa-dia{ align-self:center; margin-bottom:6px; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.92); font-size:11.5px; color:rgba(0,0,0,.55); box-shadow:0 1px .5px rgba(0,0,0,.08); }
.msg{ position:relative; max-width:82%; padding:7px 9px 6px; border-radius:10px; font-size:13.8px; line-height:1.38; box-shadow:0 1px .5px rgba(0,0,0,.12); transition:opacity .35s var(--ease), transform .35s var(--ease); }
.msg.yo{ align-self:flex-end; background:var(--wa-mio); border-top-right-radius:3px; }
.msg.el{ align-self:flex-start; background:#fff; border-top-left-radius:3px; }
.msg time{ float:right; display:inline-flex; align-items:center; gap:3px; margin:6px 0 -3px 10px; font-size:10.5px; color:rgba(0,0,0,.45); }
.msg time .ico{ width:15px; height:11px; stroke-width:2; }
.msg.escondido{ opacity:0; transform:translateY(8px); }
.msg.escondido.fuera{ display:none; }
.escribe{ align-self:flex-start; display:inline-flex; gap:4px; padding:11px 12px; border-radius:10px; border-top-left-radius:3px; background:#fff; box-shadow:0 1px .5px rgba(0,0,0,.12); }
.escribe i{ width:7px; height:7px; border-radius:50%; background:rgba(0,0,0,.35); animation:escribe 1s infinite; }
.escribe i:nth-child(2){ animation-delay:.15s; } .escribe i:nth-child(3){ animation-delay:.3s; }
@keyframes escribe{ 0%,60%,100%{ transform:none; opacity:.5; } 30%{ transform:translateY(-3px); opacity:1; } }
.wa-pie{ display:flex; align-items:center; gap:8px; padding:8px 10px 22px; background:#f7f7f7; border-top:1px solid rgba(0,0,0,.06); }
.wa-pie .mas{ width:22px; height:22px; color:#111; opacity:.8; }
.wa-campo{ flex:1; height:34px; display:flex; align-items:center; padding:0 14px; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08); font-size:13.5px; color:rgba(0,0,0,.4); }
.wa-mic{ width:34px; height:34px; border-radius:50%; background:var(--wa); color:#fff; display:grid; place-items:center; flex:none; }
.wa-mic .ico{ width:16px; height:16px; }

/* =====================================================================
   4 · PIE (negro, como el de Agentes)
   ===================================================================== */
.pie-web{ position:relative; overflow:hidden; background:var(--negro); color:#fff; padding-top:88px; 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{ font-size:24px; }
.pie-logo svg{ width:30px; height:26px; }
.pie-marca p{ max-width:360px; margin-top:18px; 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, .pie-col span{ 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-block: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(84px, 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; }

/* Barra del botón en el móvil */
.barra-movil{ position:fixed; left:0; right:0; bottom:0; z-index:30; padding:10px 16px calc(10px + 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);
  transform:translateY(110%); transition:transform .25s var(--ease); display:none; }
.barra-movil .btn{ width:100%; justify-content:space-between; height:50px; }
.barra-movil.visible{ transform:none; }

/* =====================================================================
   Tableta y móvil
   ===================================================================== */
@media (max-width:1180px){
  .ventana{ width:700px; }
}
@media (max-width:980px){
  .barra-movil{ display:block; }
  .pie-web{ padding-bottom:84px; }
}
@media (max-width:899.98px){

  .sv-cabecera{ margin-bottom:36px; }
  .sv-rejilla{ grid-template-columns:minmax(0, 1fr); gap:16px; }
  .sv-cap{ grid-template-columns:minmax(0, 1fr); gap:0; padding:32px 0 0 24px; }
  .sv-cap .sv-txt{ padding:0 24px 36px 0; }
  .cap-vis{ min-height:330px; }
  .ventana{ width:600px; }
  .ficha{ left:auto; right:16px; bottom:22px; width:250px; padding:14px; }
  .sv-web, .sv-ia{ padding:32px 24px 0; }
  .web-vis{ padding-top:32px; }
  .web-marco{ height:280px; }
  .web-url{ padding-right:0; }
  .ia-vis{ margin-inline:-24px; min-height:360px; }
  .ia-t.t1{ left:4%; top:22%; }
  .ia-t.t2{ right:4%; top:44%; }
  .ia-t.t3{ left:6%; top:68%; }

  .co-grid{ grid-template-columns:minmax(0, 1fr); gap:56px; }
  .co-pasos{ gap:12px 22px; }
  .movil{ width:320px; }
  .pantalla{ height:600px; }

  .pie-web{ padding-top:64px; }
  .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; }
}
@media (max-width:420px){
  .ia-t{ font-size:12px; }
  .ia-t .estado{ display:none; }
  }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }
}