/*
 * Viva Telecom: estilos compartidos de la página Xfinity (los piden sus bloques como "vgtb-xfinity"; trae proveedor.css como dependencia).
 * Del prototipo disenos/viva-telecom/xfinity.css.
 *
 * Colores de la página Xfinity (los de la página original: morado #5A23B9, morado oscuro #3D1881, negro, lavanda #F1ECF8 y el degradado #6822FF a #BD29F2).
 * Se aplican solo al header y al <main> de esa página (el tema pone la clase xf-page en el body) y a cada bloque Xfinity (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 morado.
 */

/* ---------- Colores ---------- */
:is(.xf-page .site-header, .xf-page main, [data-vg7^="xfinity-"]){
  --ink:#0b0615;--ink-2:#150a2b;--deep:#050208;--navy:#2a0d63;
  --brand:#5a23b9;--brand-2:#a97bff;--soft:#cdb4ff;--sky:#e7dcfb;--mist:#f1ecf8;
  --text:#26203a;--muted:#5d5775;--line:rgba(90,35,185,.2);
  --elec:#6822ff;--mag:#bd29f2;--lav:#f1ecf8;--cream:#f1ecf8;
  --glow:104,34,255;--glow-2:61,24,129;
  --g-vio:linear-gradient(135deg,#6822ff 0%,#8a2bf0 55%,#bd29f2 100%);
  --g-deep:linear-gradient(135deg,#6822ff 0%,#5a23b9 42%,#2a0d63 100%);
}
:is(.xf-page .site-header, .xf-page main, [data-vg7^="xfinity-"]) .btn:not(.btn-white, .btn-ghost, .btn-line){box-shadow:0 14px 34px -12px rgba(104,34,255,.8)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-ghost{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-white{color:var(--brand);box-shadow:0 14px 34px -14px rgba(10,0,40,.6)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-white::before{background:rgba(90,35,185,.1)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .btn-line{box-shadow:inset 0 0 0 1.5px var(--brand)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .eyebrow{background:rgba(90,35,185,.1)}
:is(.xf-page main, [data-vg7^="xfinity-"]) .on-dark .eyebrow,
:is(.xf-page main, [data-vg7^="xfinity-"]).on-dark .eyebrow{color:#fff;background:rgba(169,123,255,.22)}
.xf-page .site-header.is-solid{background:rgba(11,6,21,.92)}

/* Formulario de la página (bloque Formulario de contacto): mismo marcado, en morado */
.xf-page main .sec-form{background:var(--g-deep)}
.xf-page main .form-call{background:rgba(11,6,21,.4)}
.xf-page main .card-form{box-shadow:0 60px 100px -40px rgba(30,5,90,.75)}
.xf-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='%235a23b9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.xf-page main .fld input:focus,.xf-page main .fld select:focus{box-shadow:0 0 0 4px rgba(90,35,185,.16)}
.xf-page main .sec-form .form-call .chip-ico{color:var(--brand)}
.xf-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){.xf-page main .form-call:hover{background:rgba(11,6,21,.58)}}

/* ---------- 1. Hero ---------- */
.hero-xf{padding-bottom:clamp(64px,7vw,110px)}
.hero-xf .hero-bg{background:radial-gradient(55% 60% at 78% 40%,rgba(104,34,255,.5),transparent 72%),radial-gradient(45% 45% at 2% 100%,rgba(61,24,129,.75),transparent 70%)}
.xf-ribbons{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.xf-ribbons path{fill:none;stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:240 1900;stroke-dashoffset:2140;animation:xf-flow 11s linear infinite;animation-delay:calc(var(--k,0) * -3.6s)}
.xf-ribbons path:nth-child(2){--k:1;stroke-width:2}
.xf-ribbons path:nth-child(3){--k:2;stroke-width:4;opacity:.65}
@keyframes xf-flow{to{stroke-dashoffset:0}}
.xf-hero-in{position:relative;display:grid;gap:44px;align-items:center}
.xf-hero-copy{display:grid;justify-items:start}
.hero-xf .hero-title{font-size:clamp(42px,6vw,84px);line-height:1;max-width:11ch}
.xf-tag{margin:20px 0 0;font:700 clamp(18px,1.9vw,24px)/1.25 var(--f-title);letter-spacing:-.02em;color:var(--soft)}
.hero-xf .hero-lead{margin-top:12px;max-width:44ch}
.xf-buy{display:flex;flex-wrap:wrap;align-items:center;gap:20px 30px;margin-top:30px}
.xf-price{display:flex;align-items:flex-end;gap:10px;margin:0}
.xf-price b{font:800 clamp(58px,6.6vw,92px)/.86 var(--f-title);letter-spacing:-.05em;background:linear-gradient(180deg,#fff 30%,var(--soft));-webkit-background-clip:text;background-clip:text;color:transparent}
.xf-price small{padding-bottom:6px;font:500 14px/1.3 var(--f-body);color:rgba(255,255,255,.8)}
.xf-fine{margin:18px 0 0;font-size:13.5px;color:rgba(255,255,255,.66)}

.xf-visual{position:relative;justify-self:center;width:min(100%,500px)}
.xf-photo{position:relative;aspect-ratio:4/5;overflow:hidden;isolation:isolate;border-radius:clamp(30px,4vw,48px);box-shadow:0 60px 100px -40px rgba(104,34,255,.7);outline:1px solid rgba(255,255,255,.16);outline-offset:-1px}
.xf-photo img{position:absolute;left:0;top:-8%;width:100%;height:116%;max-width:none;object-fit:cover;object-position:66% 50%}
.xf-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(42,13,99,0) 42%,rgba(42,13,99,.72)),linear-gradient(135deg,rgba(104,34,255,.3),transparent 60%)}
.xf-chip{position:absolute;display:flex;align-items:center;gap:12px;max-width:calc(100% - 20px);padding:11px 18px 11px 11px;border-radius:20px;background:rgba(255,255,255,.95);border:0;color:var(--ink);box-shadow:0 24px 50px -20px rgba(20,0,70,.75);font:500 13px/1.25 var(--f-body)}
.xf-chip b{display:block;font:800 17px/1.1 var(--f-title);letter-spacing:-.02em}
.xf-c1{top:6%;left:10px}
.xf-c2{top:44%;right:10px}
.xf-c3{bottom:6%;left:10px}
@media (min-width:600px){.xf-c1{left:-6%}.xf-c2{right:-7%}.xf-c3{left:-3%}}
@media (min-width:960px){
  .xf-hero-in{grid-template-columns:1.05fr .95fr;gap:56px}
  .xf-visual{justify-self:end}
}

/* ---------- 2. Listo en 15 minutos ---------- */
.sec-xfgo{background:var(--mist)}
.xf-go{display:grid;gap:44px;align-items:center}
.xf-go-copy{display:grid;justify-items:start}
.xf-go-copy .h2{margin-top:18px;max-width:15ch}
.xf-go-copy .lead{margin:16px 0 0;max-width:30ch;font-size:clamp(18px,1.7vw,22px);font-weight:500;color:var(--text)}
.xf-go-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin-top:30px}
.xf-fine-dark{font-size:13.5px;color:var(--muted)}
.xf-panel{position:relative;display:grid;gap:26px;padding:clamp(24px,3.4vw,44px);border-radius:clamp(30px,4vw,48px);background:#fff;box-shadow:0 40px 80px -50px rgba(60,20,140,.5)}
.xf-clock{position:relative;width:min(100%,250px);aspect-ratio:1;margin-inline:auto}
.xf-ring{display:block;width:100%;height:100%;transform:rotate(-90deg)}
.xf-ring circle{fill:none;stroke-width:12;stroke-linecap:round}
.xf-ring-bg{stroke:rgba(90,35,185,.13)}
.xf-ring-fg{stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--p,1) * 100)}
.xf-clock-num{position:absolute;inset:0;display:grid;place-content:center;margin:0;text-align:center}
.xf-clock-num b{font:800 clamp(64px,8vw,90px)/.9 var(--f-title);letter-spacing:-.05em;color:var(--ink)}
.xf-clock-num small{margin-top:6px;font:600 13px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--brand)}
.xf-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.xf-step{display:flex;align-items:center;gap:14px;padding:12px 18px 12px 12px;border-radius:20px;background:var(--mist);transition:opacity .5s,transform .5s var(--ease),box-shadow .5s}
.xf-step b{display:block;font:800 18px/1.15 var(--f-title);letter-spacing:-.02em;color:var(--ink)}
.xf-step small{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.vg7-motion .xf-step:not(.is-on){opacity:.4;transform:scale(.98)}
.xf-step.is-on{box-shadow:0 14px 30px -18px rgba(90,35,185,.7)}
@media (min-width:600px){.xf-steps{grid-template-columns:repeat(3,1fr)}.xf-step{flex-direction:column;align-items:flex-start;padding:18px}}
@media (min-width:960px){.xf-go{grid-template-columns:.9fr 1.1fr;gap:64px}}

/* ---------- 3. Wi-Fi Gigabit + streaming ---------- */
.sec-xfgig{padding-block:clamp(48px,6vw,96px)}
.xf-gig{position:relative;display:grid;gap:40px;align-items:center;padding:clamp(30px,5vw,64px) clamp(24px,5vw,72px);border-radius:clamp(30px,4vw,48px);background:var(--g-deep);color:#fff;overflow:hidden;box-shadow:0 60px 100px -50px rgba(104,34,255,.8)}
.xf-gig .promo-bg i{right:18%;top:50%}
.xf-gig-copy{position:relative;display:grid;justify-items:start}
.xf-gig-copy .h2{margin-top:16px;max-width:15ch;font-size:clamp(30px,4vw,54px);color:#fff}
.xf-gig-price{display:flex;align-items:baseline;gap:10px;margin:14px 0 18px}
.xf-gig-price b{font:800 clamp(72px,9vw,128px)/.88 var(--f-title);letter-spacing:-.06em;color:#fff}
.xf-gig-price small{font:600 clamp(20px,2vw,26px)/1 var(--f-title);color:var(--soft)}
.xf-gig-lead{margin:0;max-width:36ch;font-size:16px;color:rgba(255,255,255,.88)}
.xf-feat{display:grid;gap:11px;margin:16px 0 30px;padding:0;list-style:none}
.xf-feat li{display:flex;align-items:flex-start;gap:11px;font-size:15.5px;line-height:1.45}
.xf-feat .ico{width:21px;height:21px;padding:4px;margin-top:1px;border-radius:50%;background:#fff;color:var(--brand);stroke-width:3;flex:none}
.xf-gig-pic{position:relative;display:grid;justify-items:center}
.xf-sheet{width:min(100%,520px);padding:clamp(12px,1.8vw,20px);border-radius:28px;background:var(--lav);box-shadow:0 40px 80px -30px rgba(10,0,50,.75);transform:rotate(2deg)}
.xf-sheet img{width:100%;border-radius:16px;mix-blend-mode:multiply}
@media (min-width:860px){.xf-gig{grid-template-columns:1fr 1fr;gap:36px}}

/* ---------- 4. Tus servicios ---------- */
.sec-xfsv{background:var(--mist)}
.xf-sv-head{display:grid;justify-items:start}
.xf-sv-head .h2{margin-top:18px;max-width:18ch}
.xf-sv-grid{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.xf-sv{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(22px,2.6vw,32px);border-radius:32px;background:#fff;box-shadow:0 10px 40px -26px rgba(60,20,140,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xf-sv-pic{width:100%;aspect-ratio:6/5;display:grid;place-items:center;margin-bottom:18px;border-radius:22px;background:#fff;overflow:hidden}
.xf-sv-pic img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.xf-sv h3{margin:0;font:800 clamp(22px,2.2vw,28px)/1.1 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.xf-sv p{margin:10px 0 24px;max-width:34ch;font-size:15.5px;line-height:1.6;color:var(--muted)}
.xf-sv .btn{margin-top:auto}
@media (hover:hover){.xf-sv:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(60,20,140,.55)}}
@media (min-width:860px){.xf-sv-grid{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 5. Planes ---------- */
.sec-xfplans .sec-head .lead{max-width:44ch}
.xf-plans{position:relative;display:grid;gap:16px}
.xf-plan{position:relative;display:flex;flex-direction:column;padding:clamp(24px,2.8vw,36px);border-radius:32px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xf-plan.is-top{background:var(--g-vio);box-shadow:0 50px 90px -40px rgba(104,34,255,.95)}
.xf-plan .plan-flag{position:absolute;top:24px;right:24px;background:#fff;color:var(--brand)}
.xf-sig{display:flex;align-items:flex-end;gap:6px;height:46px}
.xf-sig i{display:block;width:11px;border-radius:4px;background:rgba(255,255,255,.18);transform-origin:50% 100%}
.xf-sig i:nth-child(1){height:28%}.xf-sig i:nth-child(2){height:52%}.xf-sig i:nth-child(3){height:76%}.xf-sig i:nth-child(4){height:100%}
.xf-sig i.on{background:linear-gradient(180deg,#d9c4ff,#8a5cf0)}
.xf-plan.is-top .xf-sig i{background:rgba(255,255,255,.28)}
.xf-plan.is-top .xf-sig i.on{background:#fff}
.xf-speed{display:flex;align-items:baseline;gap:10px;margin:20px 0 0}
.xf-speed b{font:800 clamp(52px,5.4vw,76px)/.9 var(--f-title);letter-spacing:-.05em;color:#fff}
.xf-speed small{font:700 clamp(18px,1.8vw,24px)/1 var(--f-title);letter-spacing:-.02em;color:var(--soft)}
.xf-plan.is-top .xf-speed small{color:rgba(255,255,255,.88)}
.xf-plan .price{justify-content:flex-start;margin:18px 0 22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.16)}
.xf-plan .price b{color:#fff;font-size:clamp(40px,4vw,54px)}
.xf-plan .price small{color:rgba(255,255,255,.8)}
.xf-plan .xf-feat{margin:0 0 28px}
.xf-plan .btn{margin-top:auto}
.xf-note{margin:clamp(22px,3vw,34px) 0 0;font-size:13px;color:rgba(255,255,255,.62)}
@media (hover:hover){.xf-plan:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24),0 40px 70px -40px rgba(0,0,0,.8)}.xf-plan.is-top:hover{box-shadow:0 56px 90px -36px rgba(104,34,255,1)}}
@media (min-width:900px){.xf-plans{grid-template-columns:repeat(3,1fr);gap:20px}}

/* ---------- Soporte para clientes: franja lavanda con los temas y franja morada a todo el ancho para llamar; solo informativa (no lleva al formulario) ---------- */
.xf-sup{background:var(--mist)}
.xf-sup-top{padding-block:clamp(72px,9vw,132px) clamp(52px,6vw,88px)}
.xf-sup-head{display:grid;justify-items:center;text-align:center}
.xf-sup-head .h2{margin-top:18px;max-width:20ch}
.xf-sup-head .h2 + .lead{margin-top:16px;max-width:56ch}
.xf-help{display:grid;gap:18px;margin:clamp(34px,4.4vw,56px) 0 0;padding:0;list-style:none}
.xf-help li{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,32px);border-radius:28px;background:#fff;box-shadow:0 10px 40px -26px rgba(60,20,140,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.xf-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--g-vio);color:#fff;box-shadow:0 14px 28px -12px rgba(104,34,255,.8)}
.xf-ico .ico{width:24px;height:24px}
.xf-help h3{margin:20px 0 0;font:800 clamp(19px,1.8vw,22px)/1.2 var(--f-title);letter-spacing:-.025em;color:var(--ink)}
.xf-help p{margin:8px 0 0;max-width:36ch;font-size:15px;line-height:1.6;color:var(--muted)}
.xf-sup-tip{margin:clamp(26px,3.4vw,40px) auto 0;max-width:60ch;text-align:center;font-size:14px;line-height:1.55;color:var(--muted)}
.xf-callband{background:var(--g-deep);color:#fff}
.xf-callrow{display:grid;gap:26px;align-items:center;padding-block:clamp(44px,5.5vw,76px)}
.xf-call-l{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--soft)}
.xf-call-n{display:block;margin-top:12px;font:800 clamp(28px,8.6vw,56px)/1 var(--f-title);letter-spacing:-.04em;white-space:nowrap;color:#fff;transition:color .3s}
@media (hover:hover){.xf-call-n:hover{color:var(--soft)}.xf-help li:hover{transform:translateY(-6px);box-shadow:0 40px 70px -40px rgba(60,20,140,.55)}}
.xf-call-s{margin:14px 0 0;max-width:46ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.84)}
@media (min-width:700px){.xf-help{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.xf-callrow{grid-template-columns:1fr auto;gap:48px}.xf-call-n{font-size:clamp(40px,4.6vw,64px)}}
@media (min-width:1000px){.xf-help{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 6. Más beneficios ---------- */
.sec-xfmore{background:#fff}
.xf-more-head{display:grid;justify-items:start}
.xf-more-head .h2{margin-top:18px;max-width:14ch}
.xf-cards{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.xf-pc{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;min-height:clamp(580px,62vw,680px);padding:clamp(24px,2.6vw,34px);border-radius:32px;overflow:hidden;background:var(--ink);color:#fff;box-shadow:0 40px 70px -46px rgba(30,5,90,.8)}
.xf-pc>img{position:absolute;left:0;top:-6%;z-index:-2;width:100%;height:112%;max-width:none;object-fit:cover;object-position:50% 100%}
.xf-pc::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(24,6,70,.86) 0%,rgba(24,6,70,.5) 38%,transparent 66%)}
.xf-pill{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}
.xf-pc h3{margin:16px 0 0;max-width:15ch;font:800 clamp(24px,2.3vw,31px)/1.08 var(--f-title);letter-spacing:-.035em;color:inherit}
.xf-pc p:not(.xf-pill){margin:10px 0 0;max-width:28ch;font-size:15px;line-height:1.55;color:rgba(255,255,255,.9)}
.xf-pc .btn{margin-top:22px}
.xf-pc-b{background:#fff;color:var(--ink);box-shadow:0 30px 70px -46px rgba(30,5,90,.55),inset 0 0 0 1px var(--line)}
.xf-pc-b::after{background:none}
.xf-pc-b>img{top:auto;bottom:0;height:auto;object-fit:contain;object-position:50% 100%}
.xf-pc-b .xf-pill{background:var(--mist);color:var(--brand)}
.xf-pc-b p:not(.xf-pill){color:var(--muted)}
.xf-pc-b .xf-pc-fine{font-size:12.5px;line-height:1.5}
@media (min-width:860px){.xf-cards{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 7. Sports, News y TV ---------- */
.sec-xftv{padding-block:0 clamp(56px,7vw,110px);background:#fff}
.xf-tv{position:relative;isolation:isolate;display:grid;overflow:hidden;border-radius:clamp(30px,4vw,48px);background:#4f14f0;color:#fff;box-shadow:0 60px 100px -50px rgba(79,20,240,.85)}
.xf-tv>img{order:2;width:100%;aspect-ratio:1.05;object-fit:cover;object-position:92% 50%;-webkit-mask-image:linear-gradient(180deg,transparent,#000 22%);mask-image:linear-gradient(180deg,transparent,#000 22%)}
.xf-tv-copy{order:1;position:relative;display:grid;justify-items:start;padding:clamp(28px,5vw,64px) clamp(24px,5vw,64px) 6px}
.xf-tv-copy .h2{margin-top:18px;max-width:17ch;font-size:clamp(28px,3.8vw,50px);color:#fff}
.xf-tv-lead{margin:16px 0 0;max-width:42ch;font-size:clamp(15px,1.3vw,17px);line-height:1.65;color:rgba(255,255,255,.9)}
.xf-tv-lead b{font:800 1.15em/1 var(--f-title);color:#fff}
.xf-tv-buy{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:28px}
.xf-tv-buy .xf-price b{font-size:clamp(56px,6vw,84px)}
.xf-legal{max-width:78ch;margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--muted)}
@media (min-width:900px){
  .xf-tv{min-height:560px;align-items:center}
  .xf-tv>img{position:absolute;inset:0;z-index:-1;height:100%;aspect-ratio:auto;object-position:100% 50%;-webkit-mask-image:none;mask-image:none}
  .xf-tv-copy{max-width:min(56%,640px);padding:clamp(40px,5vw,72px)}
}

/* ---------- Formulario ---------- */
.xf-page main .sec-form .form-call{margin-top:30px}
.xf-page main .sec-form .form-copy .lead{max-width:48ch}

@media (prefers-reduced-motion:reduce){
  .xf-ribbons path{animation:none;stroke-dashoffset:1500}
  .xf-sv,.xf-step,.xf-help li{transition:none}
}