/*
 * Viva Telecom: estilos compartidos de la página EarthLink (los piden sus bloques como "vgtb-earthlink"; trae proveedor.css como dependencia).
 * Del prototipo disenos/viva-telecom/earthlink.css.
 *
 * Colores de EarthLink: azul petróleo #0075A3 (acentos y texto), naranja #F68D1F (botón principal y detalles) y negro azulado, con blanco y azul muy claro. Se aplican solo al header y al <main>
 * de esa página (el tema pone la clase el-page en el body) y a cada bloque EarthLink (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 colores de EarthLink.
 */

/* ---------- Colores ---------- */
:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]){
  --ink:#04141c;--ink-2:#0a2230;--deep:#020b10;--navy:#00506f;
  --brand:#0075a3;--brand-2:#2bb3e6;--soft:#8fd6f2;--sky:#d7f0fa;--mist:#eef7fb;--cream:#eef7fb;
  --text:#1f2f38;--muted:#566a76;--line:rgba(0,117,163,.2);
  --glow:43,179,230;--glow-2:0,80,111;
  --orange:#f68d1f;--orange-2:#ffb454;--orange-d:#b35a00;
  --g-el:linear-gradient(135deg,#0a93c8 0%,#0075a3 48%,#004e6e 100%);
  --g-or:linear-gradient(135deg,#ffa63d 0%,#f68d1f 55%,#e8780a 100%);
}
/* El botón naranja no toca a los blancos, fantasma ni de línea (si no, la regla del header, más específica, los pintaba de naranja) */
:is(.el-page .site-header, .el-page main, [data-vg7^="earthlink-"]) .btn:not(.btn-white, .btn-ghost, .btn-line){background:var(--g-or);color:var(--ink);box-shadow:0 14px 34px -12px rgba(246,141,31,.7)}
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.34)}
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-white{background:#fff;color:var(--brand);box-shadow:0 14px 34px -14px rgba(0,30,45,.6)}
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-white::before{background:rgba(0,117,163,.1)}
:is(.el-page main, [data-vg7^="earthlink-"]) .btn-line{background:transparent;color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand)}
@media (hover:hover){:is(.el-page main, [data-vg7^="earthlink-"]) .btn-line:hover{color:#fff}}
:is(.el-page main, [data-vg7^="earthlink-"]) .eyebrow{background:rgba(0,117,163,.1)}
:is(.el-page main, [data-vg7^="earthlink-"]) .on-dark .eyebrow,
:is(.el-page main, [data-vg7^="earthlink-"]).on-dark .eyebrow{color:#fff;background:rgba(43,179,230,.22)}
.el-page .site-header.is-solid{background:rgba(4,20,28,.9)}
.hero-el .hero-bg{background:radial-gradient(55% 60% at 78% 42%,rgba(0,117,163,.55),transparent 72%),radial-gradient(45% 45% at 2% 100%,rgba(0,60,84,.8),transparent 70%)}
/* Brillo de las secciones oscuras: el de proveedor.css sale más tenue que el del prototipo */
[data-vg7^="earthlink-"] .net-glow{background:radial-gradient(55% 45% at 22% 55%,rgba(var(--glow),calc(.2 + var(--f) * .28)),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 */
.el-page main .vz-sel b{color:var(--ink)}

/* Formulario de la página (bloque Formulario de contacto): mismo marcado, en azul petróleo */
.el-page main .sec-form{background:linear-gradient(135deg,#0a93c8 0%,#0075a3 42%,#00384f 100%)}
.el-page main .form-call{background:rgba(4,20,28,.4)}
.el-page main .card-form{box-shadow:0 60px 100px -40px rgba(0,30,45,.75)}
.el-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='%230075a3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")}
.el-page main .fld input:focus,.el-page main .fld select:focus{box-shadow:0 0 0 4px rgba(0,117,163,.16)}
.el-page main .sec-form .form-call .chip-ico{color:var(--brand)}
.el-page main .sec-form .form-call{margin-top:30px}
.el-page main .sec-form .form-copy .lead{max-width:48ch}
.el-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){.el-page main .form-call:hover{background:rgba(4,20,28,.58)}}
/* Verificador de código postal (los estilos .cov-fld y .cov-res vienen de cobertura.css) */
:is(.el-page main, [data-vg7^="earthlink-"]) .cov-fld input:focus{box-shadow:0 0 0 4px rgba(0,117,163,.16)}

/* Piezas que se repiten */
.el-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--g-el);color:#fff;box-shadow:0 14px 28px -12px rgba(0,117,163,.8);flex:none}
.el-ico .ico{width:24px;height:24px}
.el-head{display:grid;justify-items:start}
.el-head .h2{margin-top:18px;max-width:20ch}
.el-head .h2 + .lead{margin-top:16px;max-width:54ch}

/* ---------- 1. Hero ---------- */
.hero.hero-el{padding-bottom:clamp(64px,7vw,110px)}
.hero-el .hero-title em{color:var(--orange-2)}
.el-strands{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.el-strands path{fill:none;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:220 1900;stroke-dashoffset:2120;opacity:.55;animation:el-flow 12s linear infinite}
.el-strands path:nth-child(3){animation-delay:-3s;stroke-width:2}
.el-strands path:nth-child(4){animation-delay:-6s;stroke-width:3;opacity:.4}
.el-strands path:nth-child(5){animation-delay:-9s;stroke-width:2}
@keyframes el-flow{to{stroke-dashoffset:0}}
.el-hero-in{position:relative;display:grid;gap:44px;align-items:center}
.el-hero-copy{display:grid;justify-items:start}
.hero-el .hero-title{font-size:clamp(38px,5.4vw,76px);line-height:1;max-width:13ch}
.hero-el .hero-lead{max-width:48ch}
.el-zip{width:100%;max-width:560px;margin-top:30px}
.el-zip label{display:flex;align-items:center;gap:8px;margin-bottom:10px;font:700 14px/1.2 var(--f-body);color:#fff}
.el-zip label .ico{color:var(--orange-2)}
.el-zip .cov-res{margin-top:12px}
.el-points{display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0;list-style:none;font:500 14px/1.2 var(--f-body);color:rgba(255,255,255,.88)}
.el-points li{display:inline-flex;align-items:center;gap:8px}
.el-points .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--orange);color:var(--ink);stroke-width:3}
.el-fine{margin-top:22px;max-width:58ch;font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.6)}

.el-visual{position:relative;justify-self:center;width:min(100%,500px);padding:14px 0 58px}
.el-gauge{position:relative;padding:clamp(26px,4vw,40px) clamp(20px,3vw,34px) 26px;border-radius:clamp(30px,4vw,44px);background:linear-gradient(160deg,rgba(255,255,255,.11),rgba(255,255,255,.03));box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),0 60px 100px -40px rgba(0,117,163,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);text-align:center}
.el-gauge-svg{display:block;width:100%;height:auto;overflow:visible}
.el-g-ticks{fill:none;stroke:rgba(255,255,255,.3);stroke-width:26;stroke-dasharray:.5 3.5}
.el-g-track,.el-g-fill{fill:none;stroke-width:12;stroke-linecap:round}
.el-g-track{stroke:rgba(255,255,255,.12)}
.el-g-fill{stroke-dasharray:100;stroke-dashoffset:15;animation:el-gfill 1.8s var(--ease) .5s both}
.el-g-needle{transform-origin:160px 170px;transform:rotate(63deg);animation:el-needle 1.8s var(--ease) .5s both}
.el-g-needle line{stroke:#fff;stroke-width:4;stroke-linecap:round}
.el-g-needle circle{fill:var(--orange);stroke:#fff;stroke-width:3}
@keyframes el-gfill{from{stroke-dashoffset:100}to{stroke-dashoffset:15}}
@keyframes el-needle{from{transform:rotate(-90deg)}to{transform:rotate(63deg)}}
.el-gauge-num{display:flex;align-items:baseline;justify-content:center;gap:10px;margin:18px 0 0}
.el-gauge-num b{font:800 clamp(72px,9vw,112px)/.9 var(--f-title);letter-spacing:-.05em;color:#fff}
.el-gauge-num small{font:800 clamp(22px,2.4vw,30px)/1 var(--f-title);letter-spacing:.08em;color:var(--orange-2)}
.el-gauge-cap{margin:10px 0 0;font:500 14px/1.4 var(--f-body);color:rgba(255,255,255,.75)}
/* Celular: los tres chips van debajo del medidor; desde 600 px flotan alrededor */
.el-visual{display:grid;gap:12px;justify-items:start}
.el-gauge{width:100%}
.el-chip .chip-ico{background:var(--g-or);color:var(--ink)}
@media (min-width:600px){
  .el-visual{display:block}
  .el-chip{position:absolute;max-width:calc(100% - 20px)}
  .el-c1{top:0;left:-4%}
  .el-c2{top:62%;right:-3%}
  .el-c3{bottom:0;left:-2%}
}
@media (min-width:1400px){.el-c1{left:-8%}.el-c2{right:-9%}.el-c3{left:-4%}}
@media (min-width:960px){.el-hero-in{grid-template-columns:1.05fr .95fr;gap:56px}.el-visual{justify-self:end}}

/* ---------- 2. Ventajas ---------- */
.el-stats{background:#fff;box-shadow:0 1px 0 var(--line)}
.el-stats-list{display:grid;margin:0;padding:0;list-style:none}
.el-stats-list li{padding:30px 0;border-top:1px solid var(--line)}
.el-stats-list li:first-child{border-top:0}
.el-big{display:block;font:800 clamp(30px,2.7vw,38px)/1.05 var(--f-title);letter-spacing:-.045em;background:var(--g-el);-webkit-background-clip:text;background-clip:text;color:transparent}
.el-stat-h{margin:14px 0 0;font:800 17px/1.2 var(--f-title);letter-spacing:-.02em;color:var(--ink)}
.el-stats-list p{margin:8px 0 0;max-width:30ch;font-size:14px;line-height:1.55;color:var(--muted)}
@media (min-width:700px){
  .el-stats-list{grid-template-columns:repeat(2,1fr)}
  .el-stats-list li{padding:34px 28px 34px 0}
  .el-stats-list li:nth-child(2){border-top:0}
}
@media (min-width:1000px){
  .el-stats-list{grid-template-columns:repeat(var(--cols,4),1fr)}
  .el-stats-list li{padding:44px 24px;border-top:0;border-left:1px solid var(--line)}
  .el-stats-list li:first-child{padding-left:0;border-left:0}
}

/* ---------- 3. Planes de fibra ---------- */
.sec-elplans .sec-head .lead{max-width:44ch}
.el-plans{position:relative;display:grid;gap:30px 18px}
.el-plan{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,38px);border-radius:32px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.el-plan.is-top{background:var(--g-el);box-shadow:0 50px 90px -40px rgba(0,160,220,.7),inset 0 0 0 1px rgba(255,255,255,.2)}
.el-plan .plan-flag{position:absolute;top:-13px;left:clamp(26px,3vw,38px);background:var(--g-or);color:var(--ink)}
.el-tag{margin:0;font:600 12.5px/1.3 var(--f-body);letter-spacing:.07em;text-transform:uppercase;color:var(--orange-2)}
.el-plan.is-top .el-tag{color:#fff}
.el-speed{display:flex;align-items:baseline;gap:10px;margin:18px 0 0;font:700 18.72px/1.6 var(--f-body)}
.el-speed b{min-width:calc(var(--n,0) * 1ch);font:800 clamp(64px,6.4vw,92px)/.9 var(--f-title);letter-spacing:-.06em;font-variant-numeric:tabular-nums;color:#fff}
.el-speed small{font:700 clamp(20px,2vw,26px)/1 var(--f-title);letter-spacing:-.02em;color:var(--soft)}
.el-plan.is-top .el-speed small{color:rgba(255,255,255,.9)}
.el-meter{height:8px;margin:20px 0 4px;border-radius:8px;background:rgba(255,255,255,.14);overflow:hidden}
.el-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#2bb3e6,var(--orange));transform-origin:0 50%;transform:scaleX(var(--v,1))}
.el-plan.is-top .el-meter{background:rgba(255,255,255,.26)}
.el-plan.is-top .el-meter i{background:linear-gradient(90deg,#fff,var(--orange-2))}
.el-feat{display:grid;gap:12px;margin:22px 0 28px;padding:0;list-style:none}
.el-feat li{display:flex;align-items:flex-start;gap:11px;font-size:14.5px;line-height:1.45}
.el-feat .ico{width:20px;height:20px;padding:4px;margin-top:1px;border-radius:50%;background:var(--orange);color:var(--ink);stroke-width:3;flex:none}
.el-plan.is-top .el-feat .ico{background:#fff;color:var(--brand)}
.el-plan .btn{margin-top:auto}
.el-note{position:relative;margin-top:clamp(26px,3.4vw,40px);max-width:86ch;font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.62)}
@media (hover:hover){.el-plan:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28),0 40px 70px -40px rgba(0,0,0,.8)}.el-plan.is-top:hover{box-shadow:0 56px 90px -36px rgba(0,160,220,.9),inset 0 0 0 1px rgba(255,255,255,.28)}}
@media (min-width:900px){.el-plans{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 4. Elige tu conexion ---------- */
.sec-elways{background:var(--mist)}
.el-ways{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.el-way{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,2.6vw,32px);border-radius:30px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 12px 40px -28px rgba(0,60,90,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.el-way-tag{margin:20px 0 0;font:700 12px/1 var(--f-body);letter-spacing:.09em;text-transform:uppercase;color:var(--orange-d)}
.el-way h3{margin:10px 0 0;font:800 clamp(22px,2.2vw,28px)/1.1 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.el-way p:not(.el-way-tag){margin:10px 0 24px;max-width:32ch;font-size:15px;line-height:1.6;color:var(--muted)}
.el-way .btn{margin-top:auto}
@media (hover:hover){.el-way:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 36px 60px -36px rgba(0,117,163,.6)}}
@media (min-width:640px){.el-ways{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.el-ways{grid-template-columns:repeat(4,1fr);gap:20px}}

/* ---------- 5. Internet 5G para el hogar ---------- */
.sec-el5g{padding-block:clamp(48px,6vw,96px);background:#fff}
.el-5g{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-el);color:#fff;overflow:hidden;isolation:isolate;box-shadow:0 60px 100px -50px rgba(0,117,163,.8)}
.el-5g .promo-bg i{right:16%;top:50%}
.el-5g-copy{position:relative;display:grid;justify-items:start}
.el-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}
.el-5g-copy .h2{margin-top:18px;max-width:16ch;font-size:clamp(30px,4.2vw,54px);color:#fff}
.el-5g-sub{margin:14px 0 0;max-width:44ch;font-size:17px;line-height:1.6;color:rgba(255,255,255,.92)}
.el-list{display:grid;gap:12px;margin:22px 0 28px;padding:0;list-style:none}
.el-list li{display:flex;align-items:flex-start;gap:11px;font-size:15px;line-height:1.45}
.el-list .ico{width:20px;height:20px;padding:4px;margin-top:1px;border-radius:50%;background:#fff;color:var(--brand);stroke-width:3;flex:none}
.el-legal{max-width:52ch;margin:18px 0 0;font-size:12px;line-height:1.5;opacity:.8}
.el-5g-art{position:relative;display:grid;place-items:center;width:min(78%,400px);aspect-ratio:1;margin:8% auto;justify-self:center;border-radius:50%;background:radial-gradient(circle at 50% 42%,#ffa63d 0%,#e97f0f 56%,#b85c00 100%);box-shadow:0 50px 90px -40px rgba(0,30,50,.7)}
.g-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);transform:scale(1);opacity:0;animation:el-pulse 6s ease-out infinite}
.g-r2{animation-delay:-2s}.g-r3{animation-delay:-4s}
@keyframes el-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.42);opacity:0}}
.g-big{position:relative;margin:0;font:800 clamp(110px,18vw,176px)/.8 var(--f-title);letter-spacing:-.06em;color:#fff;text-shadow:0 20px 40px rgba(120,50,0,.4)}
.g-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,50,.6)}
.g-chip .ico{width:18px;height:18px}
.g-c1{left:-6%;top:12%}
.g-c2{right:-4%;bottom:12%}
@media (min-width:900px){.el-5g{grid-template-columns:1.1fr .9fr;gap:48px}.el-5g-art{width:min(100%,400px);margin:8%}}

/* ---------- 6. Internet para lo que haces todos los dias ---------- */
.sec-eluse{background:var(--mist)}
.el-uses{display:grid;gap:18px;margin-top:clamp(34px,4.4vw,56px)}
.el-use{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(26px,3vw,38px);border-radius:32px;background:#fff;box-shadow:inset 0 0 0 1px var(--line),0 24px 50px -38px rgba(0,60,90,.5);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.el-use h3{margin:22px 0 0;font:800 clamp(22px,2.2vw,28px)/1.1 var(--f-title);letter-spacing:-.03em;color:var(--ink)}
.el-use p{margin:10px 0 24px;max-width:36ch;font-size:15px;line-height:1.6;color:var(--muted)}
.el-link{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font:600 14.5px/1.3 var(--f-body);color:var(--brand)}
.el-link .ico{width:1.1em;height:1.1em;flex:none;transition:transform .4s var(--ease)}
@media (hover:hover){.el-use:hover{transform:translateY(-6px);box-shadow:inset 0 0 0 1.5px var(--brand),0 36px 60px -36px rgba(0,117,163,.6)}.el-link:hover .ico{transform:translateX(4px)}}
@media (min-width:860px){.el-uses{grid-template-columns:repeat(3,1fr);gap:22px}}

/* ---------- 7. Soporte para clientes: banda oscura a todo el ancho, centrada y con la llamada primero; solo informativa ---------- */
.sec-elsup{background:linear-gradient(180deg,#04141c 0%,#062b3b 100%)}
.el-sup-head{display:grid;justify-items:center;text-align:center}
.el-sup-head .h2{margin-top:18px;max-width:20ch}
.el-sup-head .h2 + .lead{margin-top:16px;max-width:56ch}
.el-sup-call{display:grid;justify-items:center;text-align:center;margin-top:clamp(30px,4vw,48px)}
.el-call-l{margin:0;font:700 12px/1 var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--orange-2)}
.el-call-n{display:block;margin-top:14px;font:800 clamp(30px,9.4vw,84px)/1 var(--f-title);letter-spacing:-.045em;white-space:nowrap;color:#fff;transition:color .3s}
@media (hover:hover){.el-call-n:hover{color:var(--orange-2)}}
.el-call-s{margin:16px 0 26px;max-width:46ch;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8)}
.el-help{display:grid;margin:clamp(44px,5.4vw,72px) 0 0;padding:0;list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.el-help li{display:flex;flex-direction:column;align-items:flex-start;padding:28px 0;border-top:1px solid rgba(255,255,255,.16)}
.el-help li:first-child{border-top:0}
.el-help .el-ico{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(246,141,31,.6);color:var(--orange-2)}
.el-help h3{margin:18px 0 0;font:800 clamp(18px,1.7vw,21px)/1.2 var(--f-title);letter-spacing:-.02em;color:#fff}
.el-help p{margin:8px 0 0;max-width:36ch;font-size:14.5px;line-height:1.6;color:rgba(255,255,255,.74)}
.el-sup-tip{margin:clamp(24px,3vw,36px) auto 0;max-width:60ch;text-align:center;font-size:14px;line-height:1.55;color:rgba(255,255,255,.7)}
@media (min-width:700px){
  .el-help{grid-template-columns:repeat(2,1fr);column-gap:clamp(28px,4vw,56px)}
  .el-help li:nth-child(2){border-top:0}
}
@media (min-width:1000px){
  .el-help{grid-template-columns:repeat(3,1fr)}
  .el-help li:nth-child(3){border-top:0}
}


@media (prefers-reduced-motion:reduce){
  .el-strands path{animation:none;stroke-dashoffset:1500}
  .el-g-fill,.el-g-needle{animation:none}
  .g-ring{animation:none;opacity:.5;transform:scale(1.2)}
  .el-plan,.el-way,.el-use,.el-call-n{transition:none}
}