/*
 * Viva Telecom: estilos compartidos de la página T-Mobile (los piden sus bloques como "vgtb-t-mobile"; trae proveedor.css como dependencia).
 * Del prototipo disenos/viva-telecom/tmobile.css.
 *
 * Colores de T-Mobile: magenta #E20074, negro, gris oscuro, blanco y rosa muy claro. Se aplican solo al header y al <main> de esa página (el tema pone la clase
 * tm-page en el body) y a cada bloque T-Mobile (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 magenta.
 */

/* ---------- Colores ---------- */
:is(.tm-page .site-header, .tm-page main, [data-vg7^="t-mobile-"]){
  --ink:#0a0a0c;--ink-2:#151518;--deep:#000;--navy:#8c0049;
  --brand:#e20074;--brand-2:#ff4fa8;--soft:#ff9fd0;--sky:#ffd9ec;--mist:#fdf0f7;--cream:#fdf0f7;
  --text:#26262b;--muted:#63636b;--line:rgba(226,0,116,.2);
  --glow:226,0,116;--glow-2:110,0,60;
  --g-mag:linear-gradient(135deg,#ff2d9a 0%,#e20074 48%,#9c0052 100%);
  --g-dark:linear-gradient(145deg,#2a2a30 0%,#0a0a0c 100%);
}
:is(.tm-page .site-header, .tm-page main, [data-vg7^="t-mobile-"]) .btn:not(.btn-white, .btn-ghost, .btn-line){box-shadow:0 14px 34px -12px rgba(226,0,116,.8)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .btn-ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .btn-white{color:var(--brand);box-shadow:0 14px 34px -14px rgba(60,0,30,.6)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .btn-white::before{background:rgba(226,0,116,.1)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .btn-line{box-shadow:inset 0 0 0 1.5px var(--brand)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .eyebrow{background:rgba(226,0,116,.1)}
:is(.tm-page main, [data-vg7^="t-mobile-"]) .on-dark .eyebrow,
:is(.tm-page main, [data-vg7^="t-mobile-"]).on-dark .eyebrow{color:#fff;background:rgba(255,79,168,.24)}
.tm-page .site-header.is-solid{background:rgba(10,10,12,.9)}

/* Formulario de la página (bloque Formulario de contacto): mismo marcado, en magenta */
.tm-page main .sec-form{background:linear-gradient(135deg,#ff2d9a 0%,#e20074 40%,#5e0030 100%)}
.tm-page main .form-call{background:rgba(10,10,12,.38)}
.tm-page main .card-form{box-shadow:0 60px 100px -40px rgba(60,0,30,.75)}
.tm-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='%23e20074' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.tm-page main .fld input:focus,.tm-page main .fld select:focus{box-shadow:0 0 0 4px rgba(226,0,116,.16)}
.tm-page main .sec-form .form-call .chip-ico{color:var(--brand)}
.tm-page main .sec-form .form-call{margin-top:30px}
.tm-page main .sec-form .form-copy .lead{max-width:48ch}
.tm-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){.tm-page main .form-call:hover{background:rgba(10,10,12,.55)}}

/* Piezas que se repiten */
.tm-pill{align-self:flex-start;margin:0;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.2);color:#fff;font:700 11.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase}
.tm-text{margin:14px 0 0;max-width:38ch;font-size:15px;line-height:1.6}
.tm-legal{margin:14px 0 22px;max-width:46ch;font-size:12px;line-height:1.5;opacity:.74}
.tm-list{display:grid;gap:11px;margin:18px 0 26px;padding:0;list-style:none}
.tm-list li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45}
.tm-list .ico{width:20px;height:20px;padding:4px;margin-top:1px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3;flex:none}
.tm-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--brand);color:#fff;box-shadow:0 14px 28px -12px rgba(226,0,116,.8);flex:none}
.tm-ico .ico{width:24px;height:24px}
.tm-head{display:grid;justify-items:start}
.tm-head .h2{margin-top:18px;max-width:20ch}
.tm-note{max-width:86ch;margin:clamp(22px,3vw,34px) 0 0;font-size:12.5px;line-height:1.6;color:var(--muted)}

/* ---------- 1. Hero ---------- */
.hero-tm{padding-bottom:clamp(64px,7vw,110px)}
.hero-tm .hero-bg{background:radial-gradient(55% 60% at 78% 42%,rgba(226,0,116,.5),transparent 72%),radial-gradient(45% 45% at 2% 100%,rgba(110,0,60,.7),transparent 70%)}
.tm-rings{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.tm-rings i{position:absolute;right:2%;top:46%;width:min(90vw,780px);aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.14);transform:translate(0,-50%) scale(.3);opacity:0;animation:tm-ring 9s linear infinite;animation-delay:calc(var(--k,0) * -3s)}
.tm-rings i:nth-child(2){--k:1}.tm-rings i:nth-child(3){--k:2}
@keyframes tm-ring{0%{transform:translate(0,-50%) scale(.3);opacity:0}15%{opacity:1}100%{transform:translate(0,-50%) scale(1.1);opacity:0}}
.tm-hero-in{position:relative;display:grid;gap:48px;align-items:center}
.tm-hero-copy{display:grid;justify-items:start}
.hero-tm .hero-title{font-size:clamp(42px,6vw,84px);line-height:1;max-width:12ch}
.hero-tm .hero-lead{max-width:46ch}
.tm-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)}
.tm-points li{display:inline-flex;align-items:center;gap:8px}
.tm-points .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--brand);color:#fff;stroke-width:3}
.tm-fine{margin:24px 0 0;max-width:58ch;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.58)}

.tm-stats{position:relative;display:grid;gap:14px;justify-self:center;width:min(100%,460px);padding-block:8px}
.tm-5g{position:absolute;right:-4%;top:-16%;margin:0;font:800 clamp(150px,26vw,330px)/.8 var(--f-title);letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.16);pointer-events:none;-webkit-user-select:none;user-select:none}
.tm-stat{position:relative;display:grid;gap:4px;padding:22px 26px;border:0;border-radius:26px;-webkit-backdrop-filter:none;backdrop-filter:none}
.tm-stat b{font:800 clamp(40px,5vw,64px)/1 var(--f-title);letter-spacing:-.04em}
.tm-stat>span{font:500 15px/1.35 var(--f-body)}
.tm-s1{background:var(--g-mag);color:#fff;box-shadow:0 40px 70px -30px rgba(226,0,116,.85)}
.tm-s2{background:#fff;color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
.tm-s2 b{color:var(--brand)}
.tm-s3{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (min-width:600px){.tm-s2{margin-left:36px}.tm-s3{margin-left:12px}}
@media (min-width:960px){.tm-hero-in{grid-template-columns:1.1fr .9fr;gap:56px}.tm-stats{justify-self:end}}

/* ---------- Cinta de promociones ---------- */
.tm-ticker{overflow:hidden;background:var(--g-mag);color:#fff}
.tm-ticker-track{display:flex;width:max-content;animation:tm-marq 40s linear infinite}
.tm-ticker:hover .tm-ticker-track{animation-play-state:paused}
.tm-ticker ul{display:flex;flex:none;margin:0;padding:0;list-style:none}
.tm-ticker li{display:flex;align-items:center;padding:16px 0;font:800 14px/1 var(--f-title);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.tm-ticker li::after{content:"";width:8px;height:8px;margin-inline:28px;border-radius:50%;background:#fff;opacity:.7}
@keyframes tm-marq{to{transform:translateX(-50%)}}

/* ---------- 2. Ofertas ---------- */
.sec-tmoff{background:#fff}
.tm-bento{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.tm-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;overflow:hidden;isolation:isolate;container-type:inline-size;padding:clamp(24px,2.6vw,36px);border-radius:32px}
.tm-name{margin:16px 0 0;font:800 clamp(24px,2.3vw,32px)/1.1 var(--f-title);letter-spacing:-.03em}
/* La cifra y su texto van siempre en columna: así la altura no cambia mientras la cifra cuenta */
.tm-big{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0 0;font:800 clamp(60px,7vw,108px)/.9 var(--f-title);letter-spacing:-.06em}
.tm-big small{font:700 clamp(15px,1.5vw,19px)/1.1 var(--f-title);letter-spacing:-.01em;opacity:.92}
/* La cifra se ajusta al ancho de su tarjeta (no al de la ventana): así nunca se sale de la caja, con la ventana que sea */
@supports (font-size:1cqw){.tm-big{font-size:clamp(56px,30cqw,108px)}.tm-main .tm-big{font-size:clamp(64px,27cqw,140px)}}
.tm-card .btn{margin-top:auto}
.tm-main{background:var(--g-mag);color:#fff;box-shadow:0 60px 100px -50px rgba(226,0,116,.85)}
.tm-main .promo-bg i{right:30%;top:78%;width:min(120vw,720px)}
/* Fotos de producto sobre un escenario claro (el fondo de las fotos de T-Mobile es gris muy claro) */
.tm-stage{position:relative;width:100%;margin-top:24px;border-radius:24px;background:#f5f5f7;overflow:hidden;box-shadow:0 24px 50px -30px rgba(0,0,0,.6)}
.tm-stage img{display:block;width:100%;height:auto;max-width:none}
.tm-main .btn{margin:22px 0 24px}
.tm-main .tm-stage{display:flex;flex:1;margin-top:0}
.tm-main .tm-stage img{height:100%;min-height:190px;object-fit:cover;object-position:50% 34%}
.tm-stage-fit{aspect-ratio:4/3}
.tm-stage-fit img{height:100%;object-fit:contain;padding:10px}
.tm-stage-top{aspect-ratio:4/3}
.tm-stage-top img{height:100%;object-fit:cover;object-position:50% 0}
.tm-mult{mix-blend-mode:multiply}
.tm-dark{background:var(--g-dark);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 40px 80px -50px rgba(0,0,0,.8)}
.tm-dark .tm-big{background:linear-gradient(180deg,#fff 20%,var(--brand-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tm-dark .tm-big small{-webkit-text-fill-color:#fff;color:#fff}
.tm-light{background:var(--mist);color:var(--text);box-shadow:inset 0 0 0 1px var(--line)}
.tm-light .tm-pill{background:var(--brand)}
.tm-light .tm-name{color:var(--ink)}
.tm-light .tm-big{color:var(--brand)}
.tm-light .tm-big small{color:var(--muted)}
.tm-minis{display:grid;gap:18px}
.tm-mini{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(20px,2.2vw,28px);border-radius:28px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line),0 18px 40px -30px rgba(226,0,116,.55);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tm-thumb{display:grid;place-items:center;width:100%;aspect-ratio:16/10;border-radius:20px;background:#f5f5f7;overflow:hidden}
.tm-thumb img{width:100%;height:100%;max-width:none;object-fit:contain;padding:8px}
.tm-thumb-cover img{object-fit:cover;object-position:50% 16%;padding:0}
.tm-mini h3{margin:16px 0 0;font:800 20px/1.15 var(--f-title);letter-spacing:-.02em;color:var(--ink)}
.tm-mini p{margin:8px 0 18px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.tm-mini b{color:var(--brand)}
.tm-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:600 14.5px/1 var(--f-body);color:var(--brand)}
.tm-link .ico{width:1.1em;height:1.1em;transition:transform .4s var(--ease)}
.tm-mini-hot{background:var(--g-mag);box-shadow:0 30px 60px -36px rgba(226,0,116,.9)}
.tm-mini-hot h3,.tm-mini-hot p,.tm-mini-hot .tm-link,.tm-mini-hot b{color:#fff}
.tm-mini-hot .tm-ico{background:#fff;color:var(--brand);box-shadow:0 14px 28px -12px rgba(60,0,30,.5)}
@media (hover:hover){.tm-mini:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 36px 60px -34px rgba(226,0,116,.7)}.tm-link:hover .ico{transform:translateX(4px)}}
@media (min-width:560px){.tm-minis{grid-template-columns:1fr 1fr}}
@media (min-width:900px){
  .tm-bento{grid-template-columns:1.15fr 1fr 1fr}
  .tm-minis{grid-column:1/-1}
}
@media (min-width:1000px){.tm-minis{grid-template-columns:repeat(4,1fr)}}

/* ---------- 3. Cámbiate y ahorra ---------- */
.sec-tmsave .sec-head .lead{max-width:44ch}
.tm-pair{position:relative;display:grid;gap:18px}
.tm-panel{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,40px);border-radius:34px}
.tm-panel h3{margin:18px 0 0;font:800 clamp(28px,3vw,40px)/1.05 var(--f-title);letter-spacing:-.04em}
.tm-fam{background:var(--g-mag);color:#fff;box-shadow:0 50px 90px -40px rgba(226,0,116,.9)}
.tm-fix{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:14px 0 0}
.tm-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}
.tm-fix small{font:600 17px/1 var(--f-body);color:rgba(255,255,255,.88)}
.tm-fam .tm-list .ico{background:#fff;color:var(--brand)}
.tm-fam .btn{margin-top:auto}
.tm-byod{background:#fff;color:var(--text);box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
.tm-byod .tm-pill{background:var(--brand)}
.tm-byod h3{color:var(--ink)}
.tm-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:14px 0 0;color:var(--ink)}
.tm-price b{min-width:3ch;font:800 clamp(64px,7vw,104px)/.9 var(--f-title);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--brand)}
.tm-price small{font:600 17px/1 var(--f-body);color:var(--muted)}
.tm-byod .tm-text b{color:var(--brand)}
.tm-byod .btn{margin-top:auto}
@media (min-width:900px){.tm-pair{grid-template-columns:1fr 1fr;gap:22px}}

/* ---------- 4. Planes ---------- */
.sec-tmplans{background:#f5f5f7}
.sec-tmplans .sec-head .lead{max-width:44ch}
.tm-plans{display:grid;gap:18px}
.tm-plan{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);border-radius:32px;background:#fff;color:var(--text);box-shadow:0 30px 60px -44px rgba(0,0,0,.5),inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.tm-plan h3{margin:0;font:800 clamp(22px,2.2vw,28px)/1.1 var(--f-title);letter-spacing:-.03em;color:var(--brand)}
.tm-plan .price{justify-content:flex-start;margin:16px 0 0}
.tm-plan .price b{font-size:clamp(46px,4.6vw,64px)}
.tm-plan .tm-list{margin:20px 0 28px}
.tm-plan .btn{margin-top:auto}
.tm-plan.is-top{background:var(--g-mag);color:#fff;box-shadow:0 50px 90px -40px rgba(226,0,116,.85)}
.tm-plan.is-top h3,.tm-plan.is-top .price b{color:#fff}
.tm-plan.is-top .price small{color:rgba(255,255,255,.88)}
.tm-plan.is-top .tm-list .ico{background:#fff;color:var(--brand)}
.tm-plan .plan-flag{align-self:flex-start;margin-bottom:14px;background:#fff;color:var(--brand)}
@media (hover:hover){.tm-plan:hover{transform:translateY(-6px);box-shadow:0 44px 70px -40px rgba(0,0,0,.55),inset 0 0 0 1px rgba(226,0,116,.4)}.tm-plan.is-top:hover{box-shadow:0 56px 90px -36px rgba(226,0,116,1)}}
@media (min-width:900px){.tm-plans{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 5. Beneficios ---------- */
.sec-tmben{background:#fff}
.tm-ben{display:grid;gap:16px;margin-top:clamp(34px,4.4vw,56px)}
.tm-b{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.4vw,30px);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)}
.tm-b .tm-tag{margin-top:18px;padding:6px 12px;border-radius:999px;background:#fff;color:var(--brand);font:700 11px/1 var(--f-body);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line)}
.tm-b h3{margin:12px 0 0;font:800 clamp(21px,2vw,25px)/1.12 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.tm-b p{margin:8px 0 0;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (hover:hover){.tm-b:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 30px 50px -36px rgba(226,0,116,.6)}}
@media (min-width:640px){.tm-ben{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.tm-ben{grid-template-columns:repeat(4,1fr)}}

/* ---------- 6. Internet 5G ---------- */
.sec-tmnet{padding-block:clamp(48px,6vw,96px);background:var(--mist)}
.tm-net{position:relative;display:grid;gap:36px;align-items:center;padding:clamp(30px,5vw,64px) clamp(24px,5vw,72px);border-radius:clamp(30px,4vw,48px);background:var(--g-mag);color:#fff;overflow:hidden;isolation:isolate;box-shadow:0 60px 100px -50px rgba(226,0,116,.8)}
.tm-net .promo-bg i{right:16%;top:50%}
.tm-net-copy{position:relative;display:grid;justify-items:start}
.tm-net-copy .h2{margin-top:18px;max-width:14ch;font-size:clamp(30px,4.2vw,56px);color:#fff}
.tm-net-copy .tm-text{max-width:42ch;font-size:16px;color:rgba(255,255,255,.92)}
.tm-net-copy .btn{margin-top:28px}
.tm-net-pic{width:min(100%,460px);margin-top:30px;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(60,0,30,.6)}
.tm-net-pic img{display:block;width:100%;height:auto}
.tm-net-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,3vw,36px);border-radius:30px;background:#fff;color:var(--text);box-shadow:0 40px 80px -30px rgba(60,0,30,.7)}
.tm-net-card .tm-pill{margin-top:18px;background:var(--brand)}
.tm-net-photo{width:100%;border-radius:20px;overflow:hidden;aspect-ratio:16/9}
.tm-net-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.tm-net-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin:16px 0 0}
.tm-net-big b{min-width:3ch;font:800 clamp(64px,7vw,100px)/.9 var(--f-title);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:var(--brand)}
.tm-net-big small{font:600 17px/1 var(--f-body);color:var(--muted)}
.tm-net-txt{margin:10px 0 0;font:600 17px/1.4 var(--f-body);color:var(--ink)}
.tm-net-card .tm-legal{margin-bottom:22px}
@media (min-width:900px){.tm-net{grid-template-columns:1.05fr .95fr;gap:48px}}

/* ---------- Soporte para clientes: banda blanca a todo el ancho, solo informativa (su unica accion es llamar) ---------- */
.sec-tmsup{background:#fff}
.tm-sup-top{display:grid;gap:clamp(30px,4vw,48px);align-items:end}
.tm-sup-top .tm-head .h2 + .lead{margin-top:16px;max-width:50ch}
.tm-sup-call{display:grid;justify-items:start;padding-top:26px;border-top:4px solid var(--brand)}
.tm-call-l{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.tm-call-n{display:block;margin-top:12px;font:800 clamp(28px,8.6vw,44px)/1 var(--f-title);letter-spacing:-.04em;white-space:nowrap;color:var(--brand);transition:color .3s}
@media (hover:hover){.tm-call-n:hover{color:var(--ink)}}
.tm-call-s{margin:14px 0 22px;max-width:40ch;font-size:15px;line-height:1.6;color:var(--muted)}
.tm-help{display:grid;gap:16px;margin:clamp(34px,4.4vw,56px) 0 0;padding:0;list-style:none}
.tm-help li{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.4vw,30px);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)}
.tm-help h3{margin:18px 0 0;font:800 clamp(19px,1.8vw,22px)/1.15 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.tm-help p{margin:8px 0 0;max-width:36ch;font-size:14.5px;line-height:1.6;color:var(--muted)}
.tm-sup-tip{margin:clamp(24px,3vw,36px) 0 0;max-width:62ch;font-size:14px;line-height:1.55;color:var(--muted)}
@media (hover:hover){.tm-help li:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 30px 50px -36px rgba(226,0,116,.6)}}
@media (min-width:640px){.tm-help{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.tm-sup-top{grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,88px)}.tm-call-n{font-size:clamp(32px,3.4vw,48px)}}
@media (min-width:1000px){.tm-help{grid-template-columns:repeat(3,1fr);gap:20px}}

/* ---------- 7. Cómo cambiarte: recorrido de tres pasos ---------- */
.tm-steps-head{display:grid;justify-items:center;text-align:center}
.tm-steps-head .h2{margin-top:18px;max-width:20ch}
.tm-track{--g:22px;position:relative;display:grid;gap:var(--g);margin:clamp(40px,5vw,64px) 0 0;padding:0;list-style:none}
/* Móvil: línea vertical con los pasos a la derecha */
.tm-st{position:relative;display:grid;grid-template-columns:56px minmax(0,1fr);gap:16px;align-items:start}
.tm-st-node{position:relative;z-index:1;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#1b1b1f;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)}
.tm-st.is-on .tm-st-node{background:var(--g-mag);color:#fff;box-shadow:0 0 0 7px rgba(226,0,116,.22),0 16px 34px -10px rgba(226,0,116,.9);transform:scale(1.06)}
.tm-st:not(:last-child)::before,.tm-st:not(:last-child)::after{content:"";position:absolute;left:26.5px;top:28px;bottom:calc(-1 * (var(--g) + 28px));width:3px;border-radius:3px}
.tm-st:not(:last-child)::before{background:rgba(255,255,255,.14)}
.tm-st:not(:last-child)::after{background:linear-gradient(180deg,#ff4fa8,#e20074);transform:scaleY(0);transform-origin:50% 0;transition:transform .7s var(--ease)}
.tm-st:has(+ .tm-st.is-on)::after{transform:scaleY(1)}
.tm-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}
.tm-st.is-on .tm-st-card{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,79,168,.5),0 30px 60px -40px rgba(226,0,116,.8)}
.tm-st-card h3{margin:18px 0 0;font:800 clamp(20px,2vw,24px)/1.15 var(--f-title);letter-spacing:-.03em;color:#fff}
.tm-st-card p{margin:10px 0 0;max-width:34ch;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.78)}
.tm-st-tags{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.tm-st-tags li{padding:7px 12px;border-radius:999px;background:rgba(226,0,116,.2);box-shadow:inset 0 0 0 1px rgba(255,79,168,.45);font:600 12.5px/1 var(--f-body);color:#fff}
.tm-st-card p.tm-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)}
.tm-st-pill .ico{width:16px;height:16px;stroke-width:3}
.tm-steps-cta{display:flex;justify-content:center;margin-top:clamp(32px,4vw,52px)}
.vg7-motion .tm-st:not(.is-on) .tm-st-card{opacity:.55}
/* Pantalla ancha: tres columnas unidas por una línea horizontal */
@media (min-width:900px){
  .tm-track{grid-template-columns:repeat(3,1fr)}
  .tm-st{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
  .tm-st-card{width:100%;height:100%}
  .tm-st:not(:last-child)::before,.tm-st:not(:last-child)::after{left:50%;top:26.5px;bottom:auto;width:calc(100% + var(--g));height:3px}
  .tm-st:not(:last-child)::after{transform:scaleX(0);transform-origin:0 50%}
  .tm-st:has(+ .tm-st.is-on)::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .tm-rings i{animation:none;opacity:.5;transform:translate(0,-50%) scale(.7)}
  .tm-ticker-track{width:auto;flex-wrap:wrap;animation:none}
  .tm-ticker ul[aria-hidden]{display:none}
  .tm-ticker li{padding:12px 0}
  .tm-mini,.tm-plan,.tm-b,.tm-help li,.tm-st-node,.tm-st-card,.tm-st::after{transition:none}
}