/*
 * Viva Telecom: estilos compartidos de la página AT&T (los piden sus bloques como "vgtb-att"; trae proveedor.css como dependencia).
 * Del prototipo disenos/viva-telecom/att.css.
 *
 * Colores de AT&T: cian #009FDB (acentos), azul #0072B2 (botones y texto) y marino #00388F, con blanco y azul muy claro. Se aplican solo al header y al <main> de esa página
 * (el tema pone la clase at-page en el body) y a cada bloque AT&T (también en la vista previa del editor). El footer sigue azul. Las reglas de Viva con azul escrito a mano
 * se rehacen aquí en los azules de AT&T.
 */

/* ---------- Colores ---------- */
:is(.at-page .site-header, .at-page main, [data-vg7^="att-"]){
  --ink:#04122e;--ink-2:#071d45;--deep:#020b1f;--navy:#00388f;
  --brand:#0072b8;--brand-2:#35c4f2;--soft:#8fdcf7;--sky:#d3effb;--mist:#eef8fd;--cream:#eef8fd;
  --text:#1d2329;--muted:#566370;--line:rgba(0,114,184,.2);
  --glow:0,159,219;--glow-2:0,56,143;
  --g-att:linear-gradient(135deg,#0b84c9 0%,#0069b4 48%,#00388f 100%);
  --g-dark:linear-gradient(145deg,#0a2a5e 0%,#020b1f 100%);
}
/* El botón azul no toca a los blancos, fantasma ni de línea (si no, la regla del header, más específica, los pintaba de azul con el texto azul) */
:is(.at-page .site-header, .at-page main, [data-vg7^="att-"]) .btn:not(.btn-white, .btn-ghost, .btn-line){background:linear-gradient(135deg,#0a8bd3,#0068b3);box-shadow:0 14px 34px -12px rgba(0,159,219,.75)}
:is(.at-page main, [data-vg7^="att-"]) .btn-ghost{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
:is(.at-page main, [data-vg7^="att-"]) .btn-white{background:#fff;color:var(--brand);box-shadow:0 14px 34px -14px rgba(0,20,60,.6)}
:is(.at-page main, [data-vg7^="att-"]) .btn-white::before{background:rgba(0,114,184,.1)}
:is(.at-page main, [data-vg7^="att-"]) .btn-line{background:transparent;box-shadow:inset 0 0 0 1.5px var(--brand)}
:is(.at-page main, [data-vg7^="att-"]) .eyebrow{background:rgba(0,114,184,.1)}
:is(.at-page main, [data-vg7^="att-"]) .on-dark .eyebrow,
:is(.at-page main, [data-vg7^="att-"]).on-dark .eyebrow{color:#fff;background:rgba(53,196,242,.22)}
.at-page .site-header.is-solid{background:rgba(2,11,31,.9)}
/* Brillo de las secciones oscuras: el de proveedor.css sale más tenue que el del prototipo */
[data-vg7^="att-"] .net-glow{background:radial-gradient(55% 45% at 22% 55%,rgba(var(--glow),calc(.22 + var(--f) * .3)),transparent 72%),radial-gradient(50% 40% at 100% 0,rgba(var(--glow-2),.6),transparent 70%)}
/* Recuadro "Oferta elegida" del formulario: el nombre de la oferta en el tinte oscuro de la página */
.at-page main .vz-sel b{color:var(--ink)}

/* Formulario de la página (bloque Formulario de contacto): mismo marcado, en azul AT&T */
.at-page main .sec-form{background:linear-gradient(135deg,#0b9ee6 0%,#0069b4 42%,#00266b 100%)}
.at-page main .form-call{background:rgba(2,11,31,.4)}
.at-page main .card-form{box-shadow:0 60px 100px -40px rgba(0,20,70,.75)}
.at-page main .fld select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230072b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.at-page main .fld input:focus,.at-page main .fld select:focus{box-shadow:0 0 0 4px rgba(0,114,184,.16)}
.at-page main .sec-form .form-call .chip-ico{color:var(--brand)}
.at-page main .sec-form .form-call{margin-top:30px}
.at-page main .sec-form .form-copy .lead{max-width:48ch}
.at-page main .chk-opt{margin-top:4px}   /* el formulario de Contacto la acerca (-8px); el de los proveedores la deja con el margen normal */
@media (hover:hover){.at-page main .form-call:hover{background:rgba(2,11,31,.58)}}
/* Verificador de código postal (los estilos .cov-fld y .cov-res vienen de cobertura.css) */
:is(.at-page main, [data-vg7^="att-"]) .cov-fld input:focus{box-shadow:0 0 0 4px rgba(0,114,184,.16)}

/* Piezas que se repiten */
.at-pill{align-self:flex-start;margin:0;padding:8px 14px;border-radius:999px;background:rgba(0,114,184,.1);color:var(--brand);font:700 11.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
.at-text{margin:14px 0 0;max-width:40ch;font-size:15px;line-height:1.6}
.at-legal{margin:14px 0 22px;max-width:46ch;font-size:12px;line-height:1.5;opacity:.74}
.at-list{display:grid;gap:11px;margin:18px 0 26px;padding:0;list-style:none}
.at-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45}
.at-list .ico{width:20px;height:20px;padding:4px;margin-top:1px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3;flex:none}
.at-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--g-att);color:#fff;box-shadow:0 14px 28px -12px rgba(0,114,184,.8);flex:none}
.at-ico .ico{width:24px;height:24px}
.at-head{display:grid;justify-items:start}
.at-head .h2{margin-top:18px;max-width:20ch}
.at-head .h2 + .lead{margin-top:16px;max-width:52ch}
.at-note{max-width:86ch;margin:clamp(22px,3vw,34px) 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.at-tag{width:fit-content;margin:18px 0 0;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);font:700 11px/1 var(--f-body);letter-spacing:.07em;text-transform:uppercase}
.at-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:600 14.5px/1 var(--f-body);color:#fff}
.at-link .ico{width:1.1em;height:1.1em;transition:transform .4s var(--ease)}
@media (hover:hover){.at-link:hover .ico{transform:translateX(4px)}}

/* ---------- 1. Hero ---------- */
.hero.hero-at{padding-bottom:clamp(64px,7vw,110px)}
.hero-at .hero-bg{background:radial-gradient(55% 60% at 78% 42%,rgba(0,159,219,.46),transparent 72%),radial-gradient(45% 45% at 2% 100%,rgba(0,56,143,.8),transparent 70%)}
.at-rings{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.at-rings i{position:absolute;right:2%;top:46%;width:min(90vw,820px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(53,196,242,.22);transform:translate(0,-50%) scale(.3);opacity:0;animation:at-ring 9s linear infinite;animation-delay:calc(var(--k,0) * -3s)}
.at-rings i:nth-child(2){--k:1}.at-rings i:nth-child(3){--k:2}
@keyframes at-ring{0%{transform:translate(0,-50%) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(0,-50%) scale(1.1);opacity:0}}
.at-hero-in{position:relative;display:grid;gap:44px;align-items:center}
.at-hero-copy{display:grid;justify-items:start}
.hero-at .hero-title{font-size:clamp(38px,5.4vw,76px);line-height:1;max-width:13ch}
.hero-at .hero-lead{max-width:46ch}
.at-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:30px 0 0;padding:0;list-style:none;font:500 14px/1.2 var(--f-body);color:rgba(255,255,255,.88)}
.at-points li{display:inline-flex;align-items:center;gap:8px}
.at-points .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3}
.at-fine{margin:24px 0 0;max-width:58ch;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.6)}

.at-visual{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-self:center;width:min(100%,560px)}
.at-visual-card{grid-column:1/-1;border-radius:36px;background:linear-gradient(160deg,#f6fcff,#d9f0fb);overflow:hidden;box-shadow:0 60px 100px -40px rgba(0,159,219,.6),inset 0 0 0 1px rgba(255,255,255,.5)}
.at-visual-card img{display:block;width:100%;height:auto}
.at-mult{mix-blend-mode:multiply}
.at-badge{display:grid;gap:4px;align-content:start;padding:18px 20px;border-radius:24px}
.at-badge b{font:800 clamp(32px,4vw,50px)/1 var(--f-title);letter-spacing:-.04em}
.at-badge b i{margin-left:3px;font:600 15px/1 var(--f-body);font-style:normal;letter-spacing:0;opacity:.8}
.at-badge span{font:500 14px/1.35 var(--f-body)}
.ab1{background:var(--g-att);color:#fff;box-shadow:0 36px 64px -28px rgba(0,114,184,.9)}
.ab2{background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.ab2 b{color:var(--brand)}
@media (min-width:640px){
  .at-visual{display:block;padding:0 0 38px}
  .at-badge{position:absolute;width:min(250px,52%)}
  .ab1{left:-28px;top:-4%}
  .ab2{right:-14px;bottom:0}
}
@media (min-width:960px){.at-hero-in{grid-template-columns:1.05fr .95fr;gap:56px}.at-visual{justify-self:end}}

/* ---------- 2. Ventajas ---------- */
.at-trust{background:#fff;box-shadow:0 1px 0 var(--line)}
.at-trust-list{display:grid;margin:0;padding:0;list-style:none}
.at-trust-list li{display:flex;align-items:flex-start;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.at-trust-list li:first-child{border-top:0}
.at-trust-h{margin:0;font:800 17px/1.2 var(--f-title);letter-spacing:-.02em;color:var(--ink)}
.at-trust-list p{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--muted)}
@media (min-width:900px){
  .at-trust-list{grid-template-columns:repeat(3,1fr)}
  .at-trust-list li{padding:34px 30px;border-top:0;border-left:1px solid var(--line)}
  .at-trust-list li:first-child{padding-left:0;border-left:0}
}

/* ---------- 3. Ofertas de equipos ---------- */
.sec-atoff{background:#fff}
.at-phones{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.at-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;container-type:inline-size;padding:clamp(22px,2.2vw,30px);border-radius:30px;background:#fff;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--line),0 24px 50px -36px rgba(0,56,143,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.at-thumb{display:grid;place-items:center;width:100%;aspect-ratio:16/11;margin-top:18px;border-radius:22px;background:linear-gradient(160deg,#f6fcff,#dff2fb);overflow:hidden}
.at-thumb img{width:100%;height:100%;object-fit:contain;padding:14px}
.at-name{margin:18px 0 0;font:800 clamp(22px,2vw,28px)/1.1 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
/* La cifra y su texto van en columna y la cifra reserva su ancho final: asi la caja no cambia de alto mientras cuenta */
.at-big{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:10px 0 0}
.at-big small{font:700 15px/1.1 var(--f-title);color:var(--muted)}
.at-fig{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.at-big b{min-width:calc(var(--n,3) * 1ch);font:800 clamp(52px,6vw,84px)/.9 var(--f-title);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--brand)}
.at-fig em{font:600 16px/1 var(--f-body);font-style:normal;color:var(--muted)}
/* La cifra se ajusta al ancho de su tarjeta (no al de la ventana): asi nunca se sale de la caja */
@supports (font-size:1cqw){.at-big b{font-size:clamp(52px,24cqw,84px)}}
.at-card .at-text{color:var(--muted);font-size:14.5px}
.at-card .at-legal{margin-bottom:20px}
.at-card .btn{margin-top:auto}
.at-top{background:var(--g-att);color:#fff;box-shadow:0 50px 90px -40px rgba(0,114,184,.85)}
.at-top .at-pill{background:rgba(255,255,255,.2);color:#fff}
.at-top .at-thumb{background:#fff}
.at-top .at-name,.at-top .at-big b{color:#fff}
.at-top .at-big small,.at-top .at-fig em,.at-top .at-text{color:rgba(255,255,255,.9)}
@media (hover:hover){.at-card:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 36px 60px -34px rgba(0,114,184,.6)}.at-top:hover{box-shadow:0 56px 90px -36px rgba(0,114,184,1)}}
@media (min-width:900px){.at-phones{grid-template-columns:repeat(3,1fr);gap:22px}}
.at-more{display:grid;gap:20px;align-items:center;margin-top:22px;padding:clamp(22px,3vw,34px) clamp(22px,3.4vw,44px);border-radius:28px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line)}
.at-more h3{margin:0;font:800 clamp(20px,2.2vw,26px)/1.15 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.at-more p{margin:8px 0 0;max-width:56ch;font-size:14.5px;line-height:1.55;color:var(--muted)}
@media (min-width:800px){.at-more{grid-template-columns:1fr auto}}

/* ---------- 4. Cambiate y ahorra ---------- */
.sec-atsave .sec-head .lead{max-width:44ch}
.at-pair{position:relative;display:grid;gap:18px}
.at-panel{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,40px);border-radius:34px}
.at-panel h3{margin:18px 0 0;font:800 clamp(28px,3vw,40px)/1.05 var(--f-title);letter-spacing:-.04em}
.at-switch{background:var(--g-att);color:#fff;box-shadow:0 50px 90px -40px rgba(0,159,219,.75)}
.at-switch .at-pill{background:rgba(255,255,255,.2);color:#fff}
.at-fix{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:14px 0 0}
.at-fix b{min-width:4ch;font:800 clamp(64px,7vw,104px)/.9 var(--f-title);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#fff}
.at-fix small{font:600 17px/1.2 var(--f-body);color:rgba(255,255,255,.88)}
.at-switch .at-text{font-size:16px}
.at-switch .at-list{gap:15px;margin:26px 0 30px}
.at-switch .at-list li{font-size:15.5px}
.at-switch .at-list .ico{background:#fff;color:var(--brand)}
.at-switch .btn{margin-top:auto}
.at-side{display:grid;gap:18px}
.at-lines{background:rgba(255,255,255,.07);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.at-lines .at-tag{margin-top:16px}
.at-fix-s b{min-width:3ch;font-size:clamp(48px,5vw,68px)}
.at-fix-s small{max-width:20ch}
.at-lines .at-text{color:rgba(255,255,255,.82)}
.at-lines .at-legal{margin-bottom:18px}
.at-lines.no-legal .at-text{margin-bottom:18px}
@media (min-width:900px){.at-pair{grid-template-columns:1.08fr 1fr;gap:22px}}

/* ---------- 5. Fibra ---------- */
.sec-atfiber{padding-block:clamp(48px,6vw,96px);background:var(--mist)}
.at-fiber{position:relative;display:grid;gap:36px;align-items:center;padding:clamp(28px,5vw,64px) clamp(22px,5vw,72px);border-radius:clamp(30px,4vw,48px);background:#fff;overflow:hidden;box-shadow:0 60px 100px -60px rgba(0,56,143,.55),inset 0 0 0 1px var(--line)}
.at-fiber-copy{display:grid;justify-items:start}
.at-fiber-copy .h2{margin-top:18px;max-width:16ch;font-size:clamp(30px,4.2vw,54px)}
.at-fiber-sub{margin:14px 0 0;max-width:44ch;font-size:16px;line-height:1.6;color:var(--muted)}
.at-fiber .at-list{margin:22px 0 28px}
.at-zip{width:100%;max-width:540px}
.at-zip label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:700 14px/1.2 var(--f-body);color:var(--ink)}
.at-zip label .ico{color:var(--brand)}
.at-zip .cov-res{margin-top:12px}
.at-fiber-legal{max-width:52ch;margin:16px 0 0;color:var(--muted)}
.at-fiber-art{position:relative;display:grid;place-items:center;width:min(78%,420px);aspect-ratio:1;margin:8% auto;justify-self:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,#12a4ec 0%,#0069b4 56%,#00388f 100%);box-shadow:0 50px 90px -40px rgba(0,114,184,.8)}
.fa-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(0,159,219,.45);transform:scale(1);opacity:0;animation:at-pulse 6s ease-out infinite}
.fa-r2{animation-delay:-2s}.fa-r3{animation-delay:-4s}
@keyframes at-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.42);opacity:0}}
.fa-giga{position:relative;display:grid;justify-items:center;margin:0;font:800 clamp(120px,20vw,196px)/.8 var(--f-title);letter-spacing:-.06em;color:#fff;text-shadow:0 20px 40px rgba(0,30,90,.35)}
.fa-giga small{margin:14px -.2em 0 0;font:800 clamp(26px,4.2vw,42px)/1 var(--f-title);letter-spacing:.2em}
.fa-chip{position:absolute;display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;background:#fff;color:var(--brand);font:800 15px/1 var(--f-title);box-shadow:0 20px 40px -18px rgba(0,30,90,.6)}
.fa-chip .ico{width:18px;height:18px}
.fa-chip i{font:600 12px/1 var(--f-body);font-style:normal;color:var(--muted)}
.fa-c1{left:-6%;top:12%}
.fa-c2{right:-4%;bottom:12%;font-size:20px}
@media (min-width:900px){.at-fiber{grid-template-columns:1.1fr .9fr;gap:48px}.at-fiber-art{width:min(100%,420px);margin:8%}}

/* ---------- 6. Combina y ahorra ---------- */
.sec-atcombo{background:#fff}
.at-combo{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.at-bundle{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(28px,3.4vw,46px);border-radius:34px;background:var(--g-att);color:#fff;box-shadow:0 50px 90px -40px rgba(0,114,184,.85)}
.at-bundle .at-ico{background:#fff;color:var(--brand);box-shadow:0 14px 28px -12px rgba(0,20,60,.5)}
.at-bundle .at-pill{margin-top:22px;background:rgba(255,255,255,.2);color:#fff}
.at-bundle-h{margin:20px 0 0;font:700 19px/1.2 var(--f-body)}
.at-fix-xl{margin-top:4px}
.at-fix-xl b{min-width:4ch;font-size:clamp(76px,9vw,128px)}
.at-bundle .btn{margin-top:auto}
.at-combo-side{display:grid;gap:18px}
.at-feat{display:flex;align-items:flex-start;gap:18px;padding:clamp(22px,2.4vw,32px);border-radius:28px;background:var(--mist);box-shadow:inset 0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.at-feat .at-tag{margin:0;background:#fff;color:var(--brand);box-shadow:inset 0 0 0 1px var(--line)}
.at-feat h3{margin:12px 0 0;font:800 clamp(21px,2vw,25px)/1.12 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.at-feat p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.at-feat .at-legal{margin:12px 0 0;font-size:12px;opacity:.85}
@media (hover:hover){.at-feat:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 30px 50px -36px rgba(0,114,184,.6)}}
@media (min-width:900px){.at-combo{grid-template-columns:1fr 1fr;align-items:stretch}.at-combo-side{grid-template-rows:1fr 1fr}}

/* ---------- Soporte para clientes: dos mitades a pantalla completa (panel azul con la llamada y temas sobre azul claro), solo informativa ---------- */
.at-sup{position:relative;overflow:clip;background:var(--mist)}
.at-sup-in{display:grid}
.at-sup-l{position:relative;isolation:isolate;display:grid;justify-items:start;align-content:start;padding-block:clamp(64px,8vw,116px)}
/* El panel azul sale hasta el borde de la pantalla; en celular tambien por la derecha */
.at-sup-l::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:-100vw;right:-100vw;background:radial-gradient(60% 50% at 85% 100%,rgba(53,196,242,.38),transparent 70%),var(--g-att)}
.at-sup-l .at-head .h2 + .lead{color:rgba(255,255,255,.84)}
.at-sup-call{display:grid;justify-items:start;margin-top:clamp(28px,3.4vw,44px)}
.at-sup-tip{margin:0 0 26px;max-width:46ch;padding-top:22px;border-top:1px solid rgba(255,255,255,.3);font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}
.at-call-l{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.at-call-n{display:block;margin-top:12px;font:800 clamp(28px,8.6vw,46px)/1 var(--f-title);letter-spacing:-.04em;white-space:nowrap;color:#fff;transition:color .3s}
@media (hover:hover){.at-call-n:hover{color:var(--soft)}}
.at-call-s{margin:14px 0 24px;max-width:40ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.84)}
.at-sup-r{display:grid;align-content:center;padding-block:clamp(48px,6vw,96px)}
.at-help{display:grid;gap:34px 30px;margin:0;padding:0;list-style:none}
.at-help li{display:flex;flex-direction:column;align-items:flex-start}
.at-help h3{margin:16px 0 0;font:800 clamp(18px,1.7vw,21px)/1.2 var(--f-title);letter-spacing:-.02em;color:var(--ink)}
.at-help p{margin:8px 0 0;max-width:34ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (min-width:600px){.at-help{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){
  .at-sup-in{grid-template-columns:1fr 1fr}
  .at-sup-l{padding-right:clamp(32px,5vw,72px)}
  .at-sup-l::before{right:0}
  .at-sup-r{padding-left:clamp(32px,5vw,72px)}
  .at-help{grid-template-columns:1fr}
  .at-call-n{font-size:clamp(28px,3.1vw,46px)}
}
@media (min-width:1180px){.at-help{grid-template-columns:repeat(2,1fr)}}

/* ---------- 7. Como cambiarte: recorrido de tres pasos ---------- */
.at-steps-head{display:grid;justify-items:center;text-align:center}
.at-steps-head .h2{margin-top:18px;max-width:20ch}
.at-track{--g:22px;position:relative;display:grid;gap:var(--g);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none}
/* Movil: linea vertical con los pasos a la derecha */
.at-st{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.at-st-node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#0d2447;box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);font:800 22px/1 var(--f-title);color:rgba(255,255,255,.55);transition:background-color .5s,box-shadow .5s,color .5s,transform .5s var(--ease)}
.at-st.is-on .at-st-node{background:var(--g-att);color:#fff;box-shadow:0 0 0 7px rgba(0,159,219,.22),0 16px 34px -10px rgba(0,159,219,.9);transform:scale(1.06)}
.at-st:not(:last-child)::before,.at-st:not(:last-child)::after{content:"";position:absolute;left:26.5px;top:28px;bottom:calc(-1 * (var(--g) + 28px));width:3px;border-radius:3px}
.at-st:not(:last-child)::before{background:rgba(255,255,255,.14)}
.at-st:not(:last-child)::after{background:linear-gradient(180deg,#35c4f2,#0072b8);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease)}
.at-st:has(+ .at-st.is-on)::after{transform:scaleY(1)}
.at-st-card{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.4vw,30px);border-radius:28px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background-color .5s,box-shadow .5s}
.at-st.is-on .at-st-card{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(53,196,242,.5),0 30px 60px -40px rgba(0,159,219,.8)}
.at-st-card h3{margin:18px 0 0;font:800 clamp(20px,2vw,24px)/1.15 var(--f-title);letter-spacing:-.03em}
.at-st-card p{margin:10px 0 0;max-width:34ch;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.at-st-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.at-st-tags li{padding:7px 12px;border-radius:999px;background:rgba(0,159,219,.2);box-shadow:inset 0 0 0 1px rgba(53,196,242,.45);font:600 12.5px/1 var(--f-body)}
.at-st-card p.at-st-pill{display:inline-flex;align-items:center;gap:8px;max-width:none;margin-top:18px;padding:9px 14px;border-radius:999px;background:#fff;color:var(--brand);font:700 13px/1.2 var(--f-body)}
.at-st-pill .ico{width:16px;height:16px;stroke-width:3}
.at-steps-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}
.vg7-motion .at-st:not(.is-on) .at-st-card{opacity:.55}
/* Pantalla ancha: tres columnas unidas por una linea horizontal */
@media (min-width:900px){
  .at-track{grid-template-columns:repeat(3,1fr)}
  .at-st{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
  .at-st-card{width:100%;height:100%}
  .at-st:not(:last-child)::before,.at-st:not(:last-child)::after{left:50%;top:26.5px;bottom:auto;width:calc(100% + var(--g));height:3px}
  .at-st:not(:last-child)::after{transform:scaleX(0);transform-origin:0 50%}
  .at-st:has(+ .at-st.is-on)::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .at-rings i{animation:none;opacity:.5;transform:translate(0,-50%) scale(.7)}
  .fa-ring{animation:none;opacity:.5;transform:scale(1.2)}
  .at-card,.at-feat,.at-st-node,.at-st-card,.at-st::after,.at-call-n{transition:none}
}