/* 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 detrás de la columna del texto, que se
   apaga bien antes de la mitad, para que el titular se lea también en la escena clara de la
   óptica (laptop con "Agenda de citas", fondo casi blanco — medido: brillo 229/255 en esa toma,
   la más clara del loop). Reforzado 26-sep-2026 porque el degradado anterior (.6/.35 hasta 52%)
   se quedaba corto justo ahí; sigue sin ser una capa opaca sobre toda la imagen: a partir del 66%
   ya no queda nada de sombra y se ve la escena limpia. */
#portada::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,22,40,.8) 0,rgba(10,22,40,.6) 32%,rgba(10,22,40,.22) 52%,rgba(10,22,40,0) 66%)}
#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)}
/* Dos textos en la misma celda: el general y el de la escena de MiCarro (lo cambia el video). */
#portada .wrap{display:grid}
#portada .escena{grid-area:1/1;transition:opacity .7s ease}
#portada .escena.micarro{align-self:start;opacity:0;pointer-events:none}
#portada.en-micarro .escena.general{opacity:0;pointer-events:none}
#portada.en-micarro .escena.micarro{opacity:1;pointer-events:auto}
#portada .titulo{color:#fff;margin:20px 0 0;max-width:15ch;font-size:clamp(30px,3.4vw,48px);font-weight:800;line-height:1.04;letter-spacing:-.03em;text-transform:uppercase;text-shadow:0 2px 14px rgba(10,22,40,.75)}
#portada .titulo em{font-style:normal;color:#7DD3FC}
.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:#12803f;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;padding:10px 14px;font-size:12.5px;gap:10px}.cookies .cookies-extra{display:none}.cookies button{padding:8px 14px}}
/* 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:190px 0 90px}
  #portada .wrap{padding-left:32px;padding-right:24px}
  #portada::after{background:linear-gradient(180deg,rgba(10,22,40,.82) 0,rgba(10,22,40,.62) 55%,rgba(10,22,40,.42) 100%)}
  .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}}
/* ES/EN (24-sep-2026): el botón de idioma va pegado al de WhatsApp */
header .der{display:flex;align-items:center;gap:10px}
.idioma{font-weight:700;font-size:13px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--bor);border-radius:999px;padding:9px 13px;line-height:1}
.idioma:hover{color:var(--p);border-color:var(--p)}
@media(max-width:760px){.idioma{padding:8px 10px;font-size:12px}}
/* El embudo de planes (24-sep-2026): tres pasos en fila, cada tarjeta con su número */
.planes.n3{grid-template-columns:repeat(3,1fr)}
.embudo .plan{padding-top:44px}
.paso-n{position:absolute;top:-13px;left:34px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:99px}
.embudo .plan.destacado .paso-n{background:var(--p)}
.plan .mas{display:block;text-align:center;font-weight:700;font-size:14px;color:var(--p);margin-top:4px}
@media(max-width:1000px){.planes.n3{grid-template-columns:1fr}}
/* Auditoría 24-sep-2026: foco visible, zonas de toque de 44px, contraste de las etiquetas de plan, enlace del aviso */
:focus-visible{outline:3px solid var(--p);outline-offset:3px;border-radius:4px}
nav a,footer .legal a,.plan .mas,footer a{display:inline-flex;align-items:center;min-height:44px}
.idioma{min-height:44px;display:inline-flex;align-items:center}
.plan small{color:var(--p)}
.cookies a{text-decoration:underline}
#cierre .demo input{min-height:48px}

/* PAGO (26-sep-2026): el mismo cuadro de MiCarro, MascotaCRM y OpticaCRM */
.otras{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:12px;font-size:13px;color:var(--muted);flex-wrap:wrap}
.otras>span{width:100%;flex:none;text-align:center;margin-bottom:4px}
.otras button{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--bor);border-radius:999px;font:inherit;font-size:13px;font-weight:700;color:var(--p);background:#fff;cursor:pointer;transition:border-color .15s,color .15s}
.otras button:hover{border-color:var(--p)}
.otras button svg{width:15px;height:15px;flex:none}
.pago{margin:auto;border:0;border-radius:16px;padding:36px 36px 32px;width:min(92vw,520px);max-height:88vh;overflow-y:auto;box-shadow:0 30px 80px rgba(15,42,51,.3);color:var(--ink)}
.pago::backdrop{background:rgba(15,42,51,.55)}
.pago .cerrar{position:absolute;top:12px;right:14px;border:0;background:none;font-size:26px;color:var(--muted);cursor:pointer}
.pago h3{font-size:30px;font-weight:800;letter-spacing:-.02em;margin:8px 0 4px}
.pago .monto{font-size:17px;color:var(--muted);margin-bottom:18px}
.pago .datos{background:var(--sup);border-radius:12px;padding:6px 18px;margin-bottom:18px}
.pago .datos div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--bor);font-size:15px}
.pago .datos div:last-child{border-bottom:0}
.pago .datos span{color:var(--muted)}
.pago .datos b{text-align:right;overflow-wrap:anywhere;word-break:normal}
.pago .datos b.mono{word-break:break-all}
.pago .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
.pago .vacio{padding:12px 0;color:var(--muted);font-size:15px}
.pago .pasos{display:block;width:100%;max-width:none;font-size:13px;line-height:1.5;color:var(--muted);margin-bottom:18px}
.pago .btn{width:100%;justify-content:center}
.pago .mapita{display:block;margin:14px 0 4px;border-radius:12px;overflow:hidden;border:1px solid var(--bor);text-decoration:none;position:relative;line-height:0}
.pago .mapita img{width:100%;height:104px;object-fit:cover;display:block;transition:transform .25s ease}
.pago .mapita:hover img{transform:scale(1.03)}
.pago .mapita span{position:absolute;left:0;right:0;bottom:0;display:block;padding:9px 12px;font-size:13px;line-height:1.3;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(12,32,38,.85))}
body:has(dialog.pago[open]) .cookies{display:none}

/* TRABAJO REAL (26-sep-2026): campañas reales con su captura, grande */
.casos{display:grid;gap:32px}
.caso{background:#fff;border:1px solid var(--bor);border-radius:20px;padding:36px;display:grid;gap:28px;box-shadow:0 18px 50px rgba(10,22,40,.06)}
.caso-top{display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center}
.caso h3{font-size:clamp(26px,2.6vw,36px);font-weight:800;letter-spacing:-.02em;line-height:1.15;margin:12px 0 10px;text-wrap:balance}
.caso-top p{color:var(--muted);font-size:16px;max-width:52ch}
.caso-cifras{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.caso-cifras li{background:var(--sup);border-radius:14px;padding:16px 18px}
.caso-cifras b{display:block;font-size:clamp(26px,2.4vw,34px);font-weight:800;letter-spacing:-.02em;color:var(--p);line-height:1.1;font-variant-numeric:tabular-nums}
.caso-cifras span{font-size:13px;color:var(--muted);font-weight:600}
.caso-captura{margin:0}
.caso-captura>a{display:block;border-radius:14px;overflow:auto;border:1px solid var(--bor);box-shadow:0 10px 30px rgba(10,22,40,.08);background:#fff}
.caso-captura img{display:block;width:100%;height:auto}
.caso-captura figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.caso-captura figcaption a{color:var(--p);font-weight:700;white-space:nowrap}
@media (max-width:900px){.caso{padding:22px}.caso-top{grid-template-columns:1fr;gap:20px}.caso-captura img{min-width:680px}}

/* INICIO SIMPLE (26-sep-2026): los CRM con su video y "Obtener", la web, y lo demás como vitrina */
.crm3{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:stretch}
.crm-card{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid var(--bor);border-radius:18px;padding:14px 14px 24px;box-shadow:0 18px 50px rgba(10,22,40,.06)}
.crm-card .pantalla{border-width:5px}
.crm-info{display:flex;flex-direction:column;gap:6px;padding:0 10px;flex:1}
.crm-info small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--p)}
.crm-info h3{font-size:26px;font-weight:800;letter-spacing:-.02em}
.crm-info p{color:var(--muted);font-size:15px}
.crm-info .precio{margin:8px 0 14px}
.crm-info .btn{width:100%;justify-content:center;margin-top:auto}
.mas-info{display:inline-block;font-size:14px;font-weight:700;color:var(--p);text-decoration:none}
.mas-info:hover{text-decoration:underline}
.crm-info .mas-info{text-align:center;margin-top:10px}
.confianza{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;color:var(--muted);font-size:14px;font-weight:600}
.confianza li::before{content:"✓";color:var(--p);font-weight:800;margin-right:8px}
.lista-af{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.lista-af li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.lista-af li::before{content:"✓";position:absolute;left:0;top:0;color:var(--p);font-weight:800}
.afiliar .nota-af{font-size:13px;color:var(--muted);margin:0}
.afiliar .otras{margin:16px 0;padding:14px;border-radius:12px;background:var(--sup)}
.afiliar .otras>span{font-weight:700;color:var(--ink);font-size:14px}
.afiliar .saber-mas{margin:16px 0 0;font-size:14px;text-align:center}
.afiliar .saber-mas a{color:var(--p);font-weight:700}
.afiliar .legal-af{margin:8px 0 0;font-size:12px;color:var(--muted);text-align:center}
.web-home{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center}
.web-home h2{margin:10px 0 12px}
.web-home .precio{margin:18px 0 22px}
.web-home>.lista-af{background:#fff;border:1px solid var(--bor);border-radius:16px;padding:28px;margin:0}
.trabajos-home{margin-top:56px}
.trabajos-home h3{font-size:22px;font-weight:800;margin-bottom:20px}
.trabajos-home>.mas-info{margin-top:18px}
#que-hacemos article{background:#fff;border:1px solid var(--bor);border-radius:14px;padding:24px 26px}
#que-hacemos article h3{font-size:19px;font-weight:800;margin-bottom:6px}
#que-hacemos article p{color:var(--muted);font-size:15px}
@media (max-width:900px){.crm3,.web-home{grid-template-columns:1fr}.web-home{gap:28px}.confianza{justify-content:flex-start;flex-direction:column;gap:8px}}
/* Arreglo 26-sep: la captura ancha (min-width 680px en teléfono) estiraba la columna de la grilla
   y la página se desplazaba de lado. La columna no puede pasar del ancho disponible. */
.casos,.caso{grid-template-columns:minmax(0,1fr)}
.caso>*,.caso-captura{min-width:0}
/* Las tres tarjetas de CRM alinean nombre y precio aunque el texto ocupe 1 o 2 líneas */
@media (min-width:901px){.crm-info small{min-height:3.2em}.crm-info p{min-height:3.2em}}
/* Encabezado en columna con subtítulo resaltado (26-sep, Henry: "abajo del título, resaltado") */
.head-col{max-width:780px;margin-bottom:48px}
.head-col h2{margin-top:10px}
.subtitulo{margin-top:18px;font-size:19px;line-height:1.5;font-weight:600;color:var(--p);background:var(--sup);border-left:4px solid var(--p2);padding:14px 20px;border-radius:0 12px 12px 0}
@media (max-width:900px){.subtitulo{font-size:17px;padding:12px 16px}}
/* IA y publicidad en el Inicio: título + subtítulo resaltado, foto grande y los botones */
.feature-home{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:center}
.feature-home img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:right center;border-radius:18px;display:block;box-shadow:0 24px 60px rgba(10,22,40,.14)}
.feature-home.invertida img{order:2}
.nota-feature{color:var(--muted);font-size:16px;margin-bottom:20px;max-width:44ch}
@media (max-width:900px){.feature-home{grid-template-columns:1fr;gap:22px}.feature-home.invertida img{order:0}}
.gris .subtitulo{background:#fff}
.feature-home.invertida{grid-template-columns:1fr 1.25fr}
@media (max-width:900px){.feature-home.invertida{grid-template-columns:1fr}}
/* Títulos en mayúscula con más aire entre palabras ("DE IA" se leía "DEIA") */
h1,h2{word-spacing:.14em}
/* IA en el Inicio: la foto y, al lado, el chat de MackyPets funcionando */
.ia-home{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.ia-home>img{width:100%;height:640px;object-fit:cover;object-position:78% center;border-radius:18px;display:block;box-shadow:0 24px 60px rgba(10,22,40,.14)}
.ia-demo{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.ia-demo figcaption{max-width:340px;text-align:center;font-size:14px;color:var(--muted)}
.ia-demo figcaption b{display:block;font-size:16px;color:var(--p);margin-bottom:4px}
.ia-demo .telefono::before{background:radial-gradient(circle,rgba(10,178,251,.22),transparent 65%)}
.ia-pie{margin-top:36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;padding-top:28px;border-top:1px solid var(--bor)}
.ia-pie .nota-feature{margin:0}
/* Publicidad en el Inicio: cifras reales + la captura de Google Ads */
.mkt-home{display:grid;grid-template-columns:1fr 1.3fr;gap:44px;align-items:center}
.mkt-cifras{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:12px}
.mkt-cifras li{background:#fff;border:1px solid var(--bor);border-radius:14px;padding:14px 18px;display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center}
.mkt-cifras b{grid-row:span 2;font-size:34px;font-weight:800;letter-spacing:-.02em;color:var(--p);font-variant-numeric:tabular-nums;min-width:2ch}
.mkt-cifras span{font-weight:700;color:var(--ink);font-size:15px}
.mkt-cifras small{color:var(--muted);font-size:12px;font-weight:600}
.mkt-captura{margin:0}
.mkt-captura>a{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--bor);box-shadow:0 24px 60px rgba(10,22,40,.14);background:#fff}
.mkt-captura img{display:block;width:100%;height:auto}
.mkt-captura figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
@media (max-width:900px){.ia-home{grid-template-columns:1fr}.ia-home>img{display:none}.mkt-home{grid-template-columns:1fr;gap:26px}.ia-pie{flex-direction:column;align-items:flex-start}}
.mkt-captura figcaption a{color:var(--p);font-weight:700;white-space:nowrap}
/* Plan de publicidad de $250 (27-sep) y enlace discreto a los otros CRM al pie de cada ficha */
.plan .aviso-azul{background:#EFF6FF;border:1px solid #BFDBFE;color:#1E3A8A;border-radius:10px;padding:12px 14px;font-size:14px;line-height:1.5}
.mkt-limites{margin-top:28px}
.mkt-limites article{background:#fff;border:1px solid var(--bor);border-radius:14px;padding:26px}
.mkt-limites ul{list-style:none;display:grid;gap:8px;margin:12px 0}
.mkt-limites li{padding-left:18px;position:relative;font-size:15px}
.mkt-limites li::before{content:"";position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--p)}
.mkt-limites article:last-child li::before{background:var(--muted)}
.mkt-limites p{font-size:14px;color:var(--muted)}
.mkt-honesto{text-align:center;margin-top:22px;color:var(--muted);font-size:14px}
.otros-discreto{text-align:center;font-size:14px;color:var(--muted);padding:22px 16px 30px;margin:0}
.otros-discreto a{color:var(--p);font-weight:700;text-decoration:none}
@media (max-width:900px){.mkt-limites{grid-template-columns:1fr}}
.plan .quien-atiende{font-weight:700;color:var(--ink);font-size:15px;border-left:3px solid var(--p2);padding:2px 0 2px 12px}
.plan .limites-plan{font-size:14px;color:var(--ink);background:var(--sup);border-radius:10px;padding:12px 14px;line-height:1.5}
.portada-luz .nota-precio{font-size:14px;color:var(--muted);margin:10px 0 0;max-width:52ch}
/* Páginas web: lanzamiento de Web Presencia ($299) y las dos opciones (27-sep) */
[id]{scroll-margin-top:100px}
.lanz{padding:116px 0 64px;background:linear-gradient(180deg,#F3F8FF 0,#fff 100%)}
.lanz-arte{margin:0}
.lanz-arte img{width:100%;height:auto;border-radius:18px;box-shadow:0 24px 60px rgba(10,22,40,.12)}
.lanz-arte figcaption{margin-top:8px;font-size:12.5px;color:var(--muted);text-align:right}
.lanz-texto{display:grid;grid-template-columns:1.35fr 1fr;gap:24px 48px;align-items:end;margin-top:36px}
.lanz h1{font-size:clamp(32px,3.8vw,50px);margin:16px 0 14px}
.lanz h1 em{font-style:normal;color:var(--p)}
.lanz .cta{display:flex;flex-wrap:wrap;gap:12px}
.lanz .nota-precio{font-size:14px;color:var(--muted);margin-top:10px}
.plan .desc{color:var(--ink);font-size:16px}
.plan .fuera{font-size:13.5px;color:var(--muted);border-top:1px dashed var(--bor);padding-top:10px}
.dif{margin-top:32px;overflow-x:auto;background:#fff;border:1px solid var(--bor);border-radius:14px}
.dif table{width:100%;border-collapse:collapse;font-size:15px;min-width:480px}
.dif caption{text-align:left;padding:16px 16px 4px;font-weight:800;font-size:17px}
.dif th,.dif td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--bor);vertical-align:top}
.dif thead th{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--p)}
.dif tbody th{font-weight:600;color:var(--muted)}
.dif tbody tr:last-child th,.dif tbody tr:last-child td{border-bottom:0}
.condiciones{margin-top:24px;background:#fff;border:1px solid var(--bor);border-radius:14px;padding:24px 26px}
.condiciones h3{font-size:18px;margin-bottom:8px}
.condiciones ul{columns:2;column-gap:36px;list-style:none}
.condiciones li{break-inside:avoid;padding:4px 0 4px 18px;position:relative;font-size:15px}
.condiciones li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:7px;border-radius:50%;background:var(--p)}
.condiciones p{margin-top:10px;font-size:14px}.condiciones a{color:var(--p);font-weight:700}
.mas-trabajos{margin-top:22px}
.mas-trabajos summary{cursor:pointer;font-weight:700;color:var(--p);text-align:center;list-style:none;padding:10px;min-height:44px}
.mas-trabajos summary::-webkit-details-marker{display:none}
.mas-trabajos .vitrina{margin-top:18px}
.pasos.n3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.lanz{padding:150px 0 48px}.lanz-texto{grid-template-columns:1fr;margin-top:26px}.condiciones ul{columns:1}.pasos.n3{grid-template-columns:1fr}}
.planes .plan ul{align-content:start}
@media(max-width:900px){.lanz{padding-top:188px}[id]{scroll-margin-top:178px}}
/* /web299 (28-sep-2026) */
.w299-precio{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:10px 0 0}
.w299-precio b{font-size:2.6rem;line-height:1}
.w299-trabajos{grid-template-columns:repeat(2,minmax(0,1fr))}
.w299-alcance{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:start}
.w299-tu{font-weight:600}.w299-fuera{opacity:.8;font-size:.95rem}
.w299-form-wrap{max-width:760px}
.w299-form{display:grid;gap:14px;padding:24px;border-radius:16px;border:1px solid rgba(10,28,60,.12);background:#fff}
.w299-form label{display:grid;gap:6px;font-weight:600}
.w299-form input[name=nombre],.w299-form input[name=whatsapp]{font:inherit;padding:12px 14px;border:1px solid rgba(10,28,60,.25);border-radius:10px;width:100%;box-sizing:border-box}
.w299-form .chk{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.w299-form .chk input{margin-top:3px;width:18px;height:18px;flex:none}
.w299-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.w299-form button:disabled{opacity:.7;cursor:default}
.w299-msg{margin:0;font-weight:600}.w299-msg:empty{display:none}
.w299-msg.ok{color:#127A3E}.w299-msg.error{color:#B42318}
.w299-legal{margin-top:22px;text-align:center}
@media(max-width:900px){.w299-trabajos,.w299-alcance{grid-template-columns:1fr}}
.w299-alcance .condiciones ul{columns:1}