/* avaconecta.com — la hoja de la casa (nació de romacconecta.com) con los dos azules
   del logo de Ava: el azul rey de la "c" y el celeste de la "a". Sin oro: la marca no lo trae. */
:root{--p:#0443C9;--p-osc:#03329A;--p2:#0AB2FB;--oro:#0AB2FB;--ink:#0A1628;--muted:#4A5C74;--sup:#EEF4FD;--bor:#CBD9EE;--w:#fff;--max:1200px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);background:var(--w);line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
h1,h2{text-transform:uppercase;letter-spacing:-.03em;line-height:1.02;font-weight:800}
h1{font-size:clamp(38px,4.6vw,62px)}
h2{font-size:clamp(30px,3.6vw,48px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--p)}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--oro)}
.lead{font-size:18px;color:var(--muted);max-width:56ch}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 26px;border-radius:6px;font-weight:700;font-size:15px;border:1.5px solid transparent;transition:.2s;cursor:pointer}
.btn-p{background:var(--p);color:#fff}.btn-p:hover{background:var(--p-osc)}
.btn-o{border-color:var(--bor);color:var(--p);background:#fff}.btn-o:hover{border-color:var(--p)}
.btn-w{background:#fff;color:var(--p)}
section{padding:96px 0}
.head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:56px}
.head p{color:var(--muted);font-size:17px}
/* cabecera fija */
header{position:fixed;inset:0 0 auto;z-index:50;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--bor)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:84px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.02em}
.logo img{height:72px;width:auto;display:block}
footer .logo img{height:56px}
@media(max-width:760px){.logo img{height:36px}header .btn{padding:10px 14px!important;font-size:13px}}
nav{display:flex;gap:28px;font-weight:600;font-size:14px;color:var(--muted)}
nav a:hover,nav a.on{color:var(--p)}
/* La portada: azul profundo de la casa con la red de nodos del logo, muy tenue, hasta que
   llegue el video (irá en un <video> con la misma bruma encima, como en MiCarro). */
#portada{position:relative;min-height:88vh;display:flex;align-items:center;padding:150px 0 120px;overflow:hidden;background:radial-gradient(120% 90% at 80% 20%,#0F3F9E 0,#0A1628 55%);color:#fff}
/* El fondo vivo: los tres negocios de verdad, con un acercamiento lento. La red de
   puntos se queda encima, ahora mas suave, para que siga siendo la marca y no tape. */
/* 24-sep-2026 (Henry): "quítame la capa opaca, que se vea HD con sus colores". El video va a
   color completo y en su propia capa (translateZ) para que nada lo redibuje. */
#portada video.fondo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;transform:translateZ(0);will-change:transform}
@media (prefers-reduced-motion:reduce){#portada video.fondo{display:none}}
#portada .red{position:absolute;inset:0;width:100%;height:100%;opacity:.28;pointer-events:none}
/* Sin drop-shadow ni latido (24-sep): la sombra animada sobre el video hacía redibujar el banner
   entero 60 veces por segundo — el "temblor" que veía Henry. Los puntos quedan fijos. */
#portada .red .nodos circle{fill:#38BDF8}
#portada .red .nodos circle:nth-child(2n){animation-delay:1.3s}#portada .red .nodos circle:nth-child(3n){animation-delay:2.1s}
#portada .red .nodos circle.oro{fill:var(--oro)}
@keyframes latido{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){#portada .red .nodos circle{animation:none}}
/* Ya no hay capa oscura sobre el video. Solo una sombra suave detrás de la columna del texto,
   que se apaga antes de la mitad, para que el titular se lea sobre la escena clara de la laptop. */
#portada::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,40,.6) 0,rgba(10,22,40,.35) 30%,rgba(10,22,40,0) 52%)}
#portada .wrap{position:relative;z-index:2;width:100%;max-width:none;margin:0;padding-left:clamp(32px,7vw,150px)}
#portada .eyebrow{color:#7DD3FC}
#portada h1{color:#fff;margin:20px 0 22px;max-width:13ch;text-shadow:0 2px 14px rgba(10,22,40,.75)}
#portada p,#portada .eyebrow,#portada .cifras{text-shadow:0 1px 8px rgba(10,22,40,.7)}
#portada h1 em{font-style:normal;color:#7DD3FC}
#portada .lead{color:#CFE1F5;max-width:46ch}
#portada .notas div{color:#CFE1F5}#portada .notas b{color:#fff}
#portada .btn-o{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(10,22,40,.35)}
.cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.notas{display:flex;gap:28px;margin-top:36px;padding-top:24px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;color:var(--muted);font-weight:600;max-width:640px;flex-wrap:wrap}
.notas b{display:block;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.02em}
/* videos */
.pantalla{border-radius:12px;overflow:hidden;border:8px solid #0A1628;background:#0A1628;box-shadow:0 30px 70px rgba(10,22,40,.28)}
.pantalla video{width:100%;aspect-ratio:16/9;background:#0A1628;display:block}
.videos{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.videos figcaption{margin-top:14px;color:var(--muted);font-size:15px}.videos figcaption b{color:var(--ink)}
/* héroe de página interior */
.hero{position:relative;min-height:64vh;display:flex;align-items:flex-end;padding:150px 0 72px;color:#fff;overflow:hidden;background:#0A1628}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:.45}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,40,.55) 0,rgba(10,22,40,.82) 55%,rgba(10,22,40,.97) 100%)}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow{color:#7DD3FC}
.hero h1{max-width:16ch;margin:16px 0 14px}
.hero p{font-size:19px;color:#CFE1F5;max-width:60ch}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(10,22,40,.35)}
/* banda de cifras */
#cifras{background:var(--ink);color:#fff;padding:56px 0}
#cifras .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:32px}
#cifras b{display:block;font-size:44px;font-weight:800;letter-spacing:-.03em;color:#7DD3FC;line-height:1}
#cifras span{display:block;margin-top:10px;font-size:14px;color:#B7CCE4;font-weight:500}
/* tarjetas */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.card{border:1px solid var(--bor);border-radius:12px;overflow:hidden;background:#fff;transition:.25s;display:block}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,22,40,.10)}
.card .shot{aspect-ratio:3/2;overflow:hidden;background:#F4F7FB;padding:0;margin:0;border-bottom:1px solid var(--bor)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.card div{padding:22px 24px 26px}
.card small{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--acento,var(--p2));text-transform:uppercase}
.card h3{font-size:22px;font-weight:800;margin:6px 0 8px;letter-spacing:-.01em}
.card p{color:var(--muted);font-size:15px}
.card span{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;color:var(--p)}
.card.prod{border-top:3px solid var(--acento,var(--p))}
/* Las pantallas a lo grande, como en micarrocrm.com (Henry, 16-sep: "se ven muy pequeñas,
   no se leen"): la captura se amplía al 220% y se ve la esquina de arriba a la izquierda,
   que es donde están la barra del sistema, el título del módulo y las cifras. */
.prods .card .shot img,.shots .card .shot img{width:var(--zoom,220%);max-width:none;height:auto;object-fit:unset;object-position:unset;margin-top:var(--sube,-8%)}
.prods .card .shot,.shots .card .shot{aspect-ratio:3/2;overflow:hidden}
@media (max-width:900px){.prods .card .shot img,.shots .card .shot img{width:calc(var(--zoom,220%) * .82);margin-top:-4%}}
/* los tres videos en una fila, pero más grandes: la sección se sale del ancho normal de la página */
#video .wrap:has(.videos){max-width:1480px}
/* en la ficha de cada producto el video va solo: ni a todo el ancho ni chiquito */
#video>.wrap>.pantalla{max-width:960px;margin:0 auto}
.videos{grid-template-columns:repeat(3,1fr);gap:28px}
.videos .pantalla{border-width:6px}
.videos figcaption{font-size:16px}
.shots figure.card{margin:0}
.shots figcaption{padding:14px 18px;font-size:14px;font-weight:600;color:var(--muted)}
/* el gancho: una frase grande, sola */
#gancho{padding:64px 0;background:var(--sup)}
#gancho blockquote{max-width:900px;margin:0 auto;text-align:center}
#gancho blockquote p{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:18px;color:var(--ink)}
#gancho blockquote p::after{content:"";display:block;width:64px;height:3px;background:var(--oro);margin:22px auto 0}
/* qué hace */
.puntos{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.puntos article{padding:32px;border-left:2px solid var(--p2);background:#fff}
.puntos b{display:block;font-size:12px;font-weight:800;color:var(--p2);letter-spacing:.1em;margin-bottom:12px}
.puntos h3{font-size:20px;font-weight:700;margin-bottom:8px}
.puntos p{color:var(--muted);font-size:15px}
.gris{background:var(--sup)}
/* arranque y confiar */
.nota-arranque{margin-top:28px;border-left:3px solid var(--p);background:var(--sup);padding:20px 24px;border-radius:0 10px 10px 0}
.nota-arranque p{margin:0;color:var(--muted);line-height:1.65}
.nota-arranque b{color:var(--ink)}
.ico{width:44px;height:44px;border-radius:10px;background:var(--sup);display:grid;place-items:center;color:var(--p)}
.ico b{font-size:18px;font-weight:800;color:var(--oro)}
#importar-portada .grid3 article{padding:32px;border-left:2px solid var(--p2);background:#fff}
#importar-portada .grid3 article h3{font-size:20px;font-weight:700;margin:14px 0 8px}
#importar-portada .grid3 article p{color:var(--muted);font-size:15px}
#arranque .grid3 article h3,#confiar .grid3 article h3{font-size:20px;font-weight:700;margin:14px 0 8px}
#arranque .grid3 article p,#confiar .grid3 article p{color:var(--muted);font-size:15px}
#confiar .grid3 article{padding:32px;border-left:2px solid var(--p2)}
#confiar .head b{color:var(--ink)}
/* nosotros y contacto */
.texto{max-width:760px}.texto p{font-size:18px;color:var(--muted);margin-bottom:20px;line-height:1.7}.texto a{color:var(--p);font-weight:700}.texto b{color:var(--ink)}
#datos article,#correos article{padding:28px;border:1px solid var(--bor);border-radius:12px;background:#fff}
#datos h3,#correos h3{font-size:20px;font-weight:800;margin-bottom:8px}
#datos p,#correos p{color:var(--muted);font-size:15px}
#datos a,#correos a{color:var(--p);font-weight:700}
#correos article a{display:inline-block;margin-top:12px}
/* cierre */
#cierre{position:relative;color:#fff;padding:140px 0;text-align:center;overflow:hidden;background:var(--ink)}
#cierre>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.3}
#cierre::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,22,40,.93),rgba(29,78,216,.78));z-index:1}
#cierre .wrap{position:relative;z-index:2}
#cierre .eyebrow{color:#7DD3FC}
#cierre h2{max-width:16ch;margin:16px auto 20px}
#cierre p{color:#CFE1F5;font-size:18px;max-width:52ch;margin:0 auto 34px}
.demo{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto}
.demo input{flex:1 1 200px;padding:16px 18px;border-radius:6px;border:1.5px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;font:inherit;font-size:15px}
.demo input::placeholder{color:#CFE1F5}
#cierre small{display:block;margin-top:14px;color:#B7CCE4;font-size:13px}
/* botón flotante de WhatsApp */
.experto{position:fixed;right:22px;bottom:22px;z-index:60;display:flex;align-items:center;gap:10px;padding:12px 18px 12px 14px;border-radius:999px;background:#25D366;color:#fff;font-weight:700;font-size:14px;box-shadow:0 12px 30px rgba(10,22,40,.28);transition:.2s}
.experto:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(10,22,40,.34)}
@media (max-width:600px){.experto span{display:none}.experto{padding:14px}}
/* pie */
footer{padding:48px 0;border-top:1px solid var(--bor);font-size:14px;color:var(--muted)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
footer a{color:var(--muted)}footer a:hover{color:var(--p)}
footer .legal a{margin-right:16px}
.cookies{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--ink);color:#fff;border-radius:14px;padding:14px 18px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;font-size:14px;box-shadow:0 12px 40px rgba(10,22,40,.3)}
.cookies a{color:#9ED2F6}.cookies button{background:#fff;color:var(--ink);border:0;border-radius:10px;padding:10px 16px;cursor:pointer;font:inherit;font-weight:700}
.cookies[hidden]{display:none}
/* legales */
.legalpage{max-width:820px;margin:0 auto;padding:140px 24px 80px;font-size:16px;line-height:1.7;color:var(--ink)}
.legalpage h1{font-size:36px;letter-spacing:-.5px;margin:0 0 6px}.legalpage .fecha{color:var(--muted);margin:0 0 32px;font-size:14px}
.legalpage h2{font-size:20px;margin:36px 0 10px;color:var(--p)}.legalpage p,.legalpage li{margin:0 0 10px;color:var(--ink)}.legalpage ul{padding-left:22px}
.legalpage a{color:var(--p);font-weight:600}
.legalpage .aviso{background:var(--sup);border-radius:12px;padding:16px 18px;margin:0 0 24px;font-size:15px}
@media(max-width:700px){.legalpage{padding-top:180px}.legalpage h1{font-size:28px}.cookies{left:8px;right:8px;bottom:8px}}
/* teléfono y tableta */
@media (max-width:900px){
  #cifras .wrap,.grid3,.grid2,.puntos,.head,.videos{grid-template-columns:1fr}
  header .wrap{height:auto;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;gap:8px}
  nav{order:3;width:100%;overflow-x:auto;gap:18px;font-size:13px;padding-bottom:4px;flex-wrap:nowrap}
  nav a{white-space:nowrap}
  #portada,.hero{padding-top:170px}
  #portada{min-height:auto;padding:150px 0 90px}
  #portada .wrap{padding-left:32px}
  .hero{min-height:auto;padding:150px 0 48px}
  section{padding:72px 0}
}

/* ── ficha larga (OpticaCRM primero) ── */
.portada-luz{position:relative;min-height:88vh;display:flex;align-items:center;padding:150px 0 80px;overflow:hidden;background:#fff}
.portada-luz video,.portada-luz>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% center}
.portada-luz::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0,#fff 34%,rgba(255,255,255,.86) 50%,rgba(255,255,255,0) 78%)}
.portada-luz .wrap{position:relative;z-index:2;width:100%}
.portada-luz .eyebrow{color:var(--acento,var(--p))}
.portada-luz h1{margin:20px 0 22px;max-width:14ch}
.portada-luz h1 em{font-style:normal;color:var(--acento,var(--p))}
.portada-luz .notas{border-top-color:var(--bor);color:var(--muted)}.portada-luz .notas b{color:var(--ink)}
.portada-luz.con-pantalla{background:linear-gradient(120deg,#fff 0,#fff 42%,#E9F5F1 100%)}
.portada-luz.con-pantalla::after{content:none}
.portada-luz .portada-pantalla{position:absolute;right:2%;top:50%;transform:translateY(-50%);width:48%;border-radius:14px;overflow:hidden;border:8px solid #0A1628;background:#0A1628;box-shadow:0 30px 70px rgba(10,22,40,.28)}
.portada-luz .portada-pantalla img{width:100%;display:block}
.portada-luz.con-pantalla .wrap{padding-right:600px}
@media (max-width:900px){.portada-luz.con-pantalla{flex-direction:column;align-items:stretch}.portada-luz.con-pantalla .wrap{padding-right:32px}.portada-luz .portada-pantalla{position:static;transform:none;width:100%;order:2;margin:28px 0 0;border-width:5px}}
.fotos .card>img{aspect-ratio:3/2;object-fit:cover;width:100%;display:block}
.fotos .card .shot{aspect-ratio:3/2;overflow:hidden;margin:0;background:#F4F7FB;border-bottom:1px solid var(--bor)}
.fotos .card .shot img{width:var(--zoom,150%);max-width:none;height:auto;margin-top:var(--sube,-2%);display:block}
.nota-arranque a{color:var(--p);font-weight:700}
.fotos .card small{color:var(--acento,var(--p2))}
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.paso{background:#fff;border:1px solid var(--bor);border-radius:12px;padding:28px 26px 30px}
.paso b{display:block;font-size:13px;font-weight:800;color:var(--acento,var(--p2));letter-spacing:.1em;margin-bottom:14px}
.paso h3{font-size:19px;font-weight:700;margin-bottom:8px}.paso p{color:var(--muted);font-size:15px}
.fila{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;padding:44px 0;border-top:1px solid var(--bor)}
.fila:nth-of-type(1){border-top:0}.fila h3{font-size:28px;letter-spacing:-.02em;margin:12px 0 10px}.fila p{color:var(--muted);font-size:17px;max-width:48ch}
.fila .tel{justify-self:center}.fila .tel img{width:290px;border-radius:28px;border:8px solid #0A1628;box-shadow:0 30px 70px rgba(10,22,40,.25);display:block}
#incluye .wrap{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
#incluye ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 20px}
#incluye li{padding:12px 14px 12px 40px;background:#fff;border:1px solid var(--bor);border-radius:8px;position:relative;font-weight:600;font-size:15px}
#incluye li::before{content:"";position:absolute;left:14px;top:16px;width:13px;height:13px;border-radius:50%;background:var(--acento,var(--p))}
.nota-arranque{margin-top:28px;padding:22px 26px;background:var(--sup);border-left:3px solid var(--acento,var(--p));border-radius:8px;color:var(--muted);font-size:16px}
.nota-arranque b{color:var(--ink)}
@media (max-width:900px){
  .pasos,.fila,#incluye .wrap,#incluye ul{grid-template-columns:1fr}
  .portada-luz{min-height:auto;padding:150px 0 60px}
  .portada-luz::after{background:linear-gradient(180deg,rgba(255,255,255,.94) 0,rgba(255,255,255,.88) 100%)}
  .fila .tel{justify-self:start}.fila .tel img{width:240px}
}

/* servicios: agentes de IA, páginas web, marketing */
.serv{display:flex;flex-direction:column;gap:10px;padding:32px;background:#fff;border:1px solid var(--bor);border-radius:12px;transition:.2s}
.serv:hover{border-color:var(--p2);transform:translateY(-3px);box-shadow:0 18px 40px rgba(4,67,201,.12)}
.serv h3{font-size:21px;font-weight:700;margin-top:6px}.serv p{color:var(--muted);font-size:15px;flex:1}
.serv span{color:var(--p);font-weight:700;font-size:14px}
/* páginas de servicio: la foto se ve; solo se oscurece el lado del texto */
.hero.foto>img{opacity:1;object-position:center}
.hero.foto::after{background:linear-gradient(90deg,rgba(10,22,40,.94) 0,rgba(10,22,40,.75) 38%,rgba(10,22,40,.1) 70%,rgba(10,22,40,0) 100%)}
@media(max-width:760px){.hero.foto::after{background:rgba(10,22,40,.72)}}
.hero.foto p{max-width:42ch}.hero.foto h1{max-width:14ch}
.hero.foto .wrap{max-width:none;margin:0;padding-left:clamp(32px,7vw,150px)}
/* planes de servicio */
.planes{display:grid;gap:24px;grid-template-columns:repeat(2,1fr)}
.planes.n1{grid-template-columns:minmax(0,560px);justify-content:center}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:1px solid var(--bor);border-radius:14px;padding:34px}
.plan.destacado{border:2px solid var(--p);box-shadow:0 24px 60px rgba(4,67,201,.14)}
.plan .sello{position:absolute;top:-13px;left:34px;background:var(--p);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.plan small{color:var(--p2);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.plan h3{font-size:26px;font-weight:800;letter-spacing:-.02em}.plan>p{color:var(--muted)}
.precio{display:flex;align-items:baseline;gap:8px;margin:6px 0}.precio b{font-size:44px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}.precio span{color:var(--muted);font-weight:600}
.plan ul{list-style:none;display:grid;gap:9px;margin:6px 0 4px;flex:1}
.plan li{padding-left:28px;position:relative;font-size:15px}
.plan li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--p2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.plan .nota,.extras .nota{font-size:13px;color:var(--muted)}
.plan .btn{justify-content:center;margin-top:6px}
.extras{margin-top:48px}.extras>h3{font-size:22px;font-weight:800}.extras>p{color:var(--muted);margin:4px 0 20px}
.extras article{background:#fff;border:1px solid var(--bor);border-radius:12px;padding:24px}
.extras h4{font-size:18px;font-weight:700;margin-bottom:6px}.extras article p{color:var(--muted);font-size:14px}
.extras .precio b{font-size:30px}.extras>.nota{margin-top:18px}
@media(max-width:900px){.planes{grid-template-columns:1fr}}
.hero h1 em{padding-right:.14em}
/* vitrina de webs hechas */
.sitio{display:flex;flex-direction:column;gap:16px;background:#fff;border:1px solid var(--bor);border-radius:14px;padding:14px 14px 22px;transition:.25s}
.sitio:hover{transform:translateY(-4px);border-color:var(--p2);box-shadow:0 22px 50px rgba(4,67,201,.14)}
.sitio .marco{position:relative;border-radius:10px;overflow:hidden;background:#E8EEF7;padding-top:22px;border:1px solid var(--bor)}
.sitio .marco i{position:absolute;top:8px;width:7px;height:7px;border-radius:50%;background:#C3CFE0}
.sitio .marco i:nth-child(1){left:10px}.sitio .marco i:nth-child(2){left:22px}.sitio .marco i:nth-child(3){left:34px}
.sitio img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform 4s ease}
.sitio:hover img{transform:scale(1.04)}
.sitio>div:last-child{padding:0 8px}
.sitio small{color:var(--p2);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.sitio h3{font-size:20px;font-weight:700;margin:4px 0 6px}.sitio span{color:var(--p);font-weight:700;font-size:14px}
.sitio .marco{padding:22px 0 0}.serv .ico{padding:0}.sitio span{margin-top:8px}
/* vitrina de agentes: el chat que se escribe solo */
#demo-agente{background:radial-gradient(90% 120% at 85% 20%,#0B3FA8 0,#0A1628 60%);color:#fff;overflow:hidden}
#demo-agente .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
#demo-agente .eyebrow{color:#7DD3FC}#demo-agente h2{color:#fff;margin:16px 0 18px}
#demo-agente .lead{color:#CFE1F5}#demo-agente .lead b{color:#fff}
.hitos{list-style:none;counter-reset:h;display:grid;gap:14px;margin-top:28px}
.hitos li{counter-increment:h;position:relative;padding:14px 16px 14px 58px;border:1px solid rgba(125,211,252,.22);border-radius:12px;background:rgba(255,255,255,.04);color:#B7CCE4;font-size:15px}
.hitos li::before{content:"0" counter(h);position:absolute;left:16px;top:14px;font-weight:800;color:#0AB2FB;font-size:14px}
.hitos b{display:block;color:#fff;font-size:16px;margin-bottom:2px}
#demo-agente .aclara{display:block;margin-top:14px;color:#7E93AE;font-size:12px}
.telefono{justify-self:center;position:relative}
.telefono::before{content:"";position:absolute;inset:-60px;background:radial-gradient(circle,rgba(10,178,251,.35),transparent 65%);filter:blur(10px);z-index:0}
.tel-marco{position:relative;z-index:1;width:340px;height:640px;border-radius:44px;border:10px solid #05101F;background:#0B141A;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);display:flex;flex-direction:column;overflow:hidden}
.tel-barra{display:flex;align-items:center;gap:10px;padding:26px 16px 12px;background:#1F2C34}
.tel-barra .av{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#0443C9,#0AB2FB);display:grid;place-items:center;font-weight:800}
.tel-barra b{display:block;font-size:15px}.tel-barra small{color:#8FA3AD;font-size:12px}
.tel-chat{flex:1;overflow-y:auto;padding:14px 12px;display:flex;flex-direction:column;gap:8px;scrollbar-width:none;background:#0B141A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='10' cy='10' r='1.2' fill='%23ffffff10'/%3E%3Ccircle cx='40' cy='35' r='1' fill='%23ffffff0c'/%3E%3C/svg%3E")}
.tel-chat::-webkit-scrollbar{display:none}
.msg{max-width:82%;padding:8px 10px 18px;border-radius:10px;font-size:13.5px;line-height:1.4;position:relative;display:none}
.msg.ve{display:block;animation:entra .35s ease both}
.msg.c{align-self:flex-end;background:#005C4B;border-top-right-radius:2px}
.msg.a{align-self:flex-start;background:#202C33;border-top-left-radius:2px}
.msg time{position:absolute;right:8px;bottom:3px;font-size:10px;color:#8FA3AD}
.msg .chispa{position:absolute;left:10px;bottom:3px;font-size:10px;font-weight:700;color:#0AB2FB}
.msg.foto{padding:4px;width:180px}.msg.foto img{border-radius:8px}
.msg.sis{align-self:center;max-width:none;background:rgba(10,178,251,.15);color:#7DD3FC;font-size:12px;font-weight:600;padding:6px 12px;border-radius:99px}
.msg.escribiendo{display:flex;gap:4px;padding:12px 14px}.msg.escribiendo[hidden]{display:none}
.msg.escribiendo i{width:7px;height:7px;border-radius:50%;background:#8FA3AD;animation:salta 1s infinite}
.msg.escribiendo i:nth-child(2){animation-delay:.15s}.msg.escribiendo i:nth-child(3){animation-delay:.3s}
.tel-pie{display:flex;align-items:center;gap:8px;padding:10px 12px 18px;background:#0B141A}
.tel-pie span{flex:1;background:#202C33;border-radius:99px;padding:9px 14px;color:#8FA3AD;font-size:13px}
.tel-pie i{width:38px;height:38px;border-radius:50%;background:#00A884}
@keyframes entra{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes salta{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){.msg{display:block}}
@media(max-width:900px){#demo-agente .wrap{grid-template-columns:1fr}.tel-marco{width:300px;height:580px}}