/* ═══════════════════════════════════════════════════════════
   OPTVE — hoja compartida
   Orden: tokens · base · cabecera · escenas · piezas · pie
   El movimiento se controla con --p (0→1) que el motor de
   scroll escribe en cada escena; el CSS solo lo lee.
   ═══════════════════════════════════════════════════════════ */

:root{
  --cian:#21A8E0; --cian-cl:#4FD2F5; --acento:#1EE8DE;
  --fondo:#04070E; --fondo2:#070C15; --sup:#0B131E;
  --tx:#EEF6FB; --tx2:#9DB0C1; --tx3:#7C93A6;
  --linea:rgba(255,255,255,.10); --linea2:rgba(255,255,255,.05);
  --sobre-cian:#02131A;
  --velo-foto:linear-gradient(180deg,transparent 40%,rgba(4,7,14,.52) 70%,rgba(4,7,14,.93));
  --sombra:0 40px 90px -40px rgba(0,0,0,.9);
  --grid:rgba(255,255,255,.045);
  --chip:#FFFFFF;              /* pastilla para logos de marca */
  --video-op:.24;
}
html[data-tema="claro"]{
  --cian:#0B6C97; --cian-cl:#0B6E9B; --acento:#0B7A72;
  --fondo:#F4F7FB; --fondo2:#E9F0F7; --sup:#FFFFFF;
  --tx:#08131F; --tx2:#46596A; --tx3:#586E7F;
  --linea:rgba(8,19,31,.14); --linea2:rgba(8,19,31,.07);
  --sobre-cian:#FFFFFF;
  --velo-foto:linear-gradient(180deg,transparent 36%,rgba(6,14,24,.40) 68%,rgba(6,14,24,.80));
  --sombra:0 40px 90px -46px rgba(9,42,66,.42);
  --grid:rgba(8,19,31,.05);
  --chip:transparent;
  --video-op:.42;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--tx);
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  transition:background .45s ease,color .45s ease;
}
h1,h2,h3{font-family:"Space Grotesk","Plus Jakarta Sans",sans-serif;font-weight:700;margin:0;letter-spacing:-.04em;line-height:.96}
p{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
img{max-width:100%;display:block}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.env{max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,56px)}
.eyebrow{color:var(--cian-cl);font-weight:500}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.reticula{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:calc(100vw / 12) 100%;
}
.reticula::after{content:"";position:absolute;inset:0;background:radial-gradient(72% 52% at 50% 40%,transparent,var(--fondo) 96%)}

/* ── Cabecera ──────────────────────────────────────────── */
.barra{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; gap:28px;
  padding:16px clamp(20px,4vw,56px);
  border-bottom:1px solid transparent;
  transition:background .4s ease,border-color .4s ease;
}
html[data-tema="oscuro"] .barra .menu a,
html[data-tema="oscuro"] .barra .tel,
html[data-tema="oscuro"] .barra .tema{color:#FFFFFF}
html[data-tema="oscuro"] .barra .menu a:hover{color:#FFFFFF;opacity:.75}
.barra.pegada{background:color-mix(in srgb,var(--fondo) 84%,transparent);backdrop-filter:blur(14px) saturate(1.4);border-bottom-color:var(--linea2)}
.barra img{height:30px;width:auto}
.menu{display:flex;gap:26px;margin-left:14px}
.menu a{font-size:14px;font-weight:600;color:var(--tx2);transition:color .25s;position:relative;padding:4px 0}
.menu a:hover{color:var(--tx)}
.menu a[aria-current="page"]{color:var(--tx)}
.menu a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cian),var(--acento))}
.barra-fin{margin-left:auto;display:flex;align-items:center;gap:12px}
.tel{font-size:14px;font-weight:700;letter-spacing:-.01em}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:999px;font-size:14px;font-weight:700;
  border:1px solid var(--linea);
  transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s,box-shadow .3s;
}
.btn:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--cian) 50%,transparent)}
.btn-full{background:linear-gradient(120deg,var(--cian),var(--acento));color:var(--sobre-cian);border-color:transparent}
.btn-full:hover{box-shadow:0 14px 34px -12px color-mix(in srgb,var(--cian) 70%,transparent);border-color:transparent}
.tema{width:38px;height:38px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;transition:border-color .3s,transform .3s;flex:0 0 auto}
.tema:hover{border-color:var(--cian-cl);transform:rotate(18deg)}
.tema svg{width:16px;height:16px}
html[data-tema="claro"] .icono-sol{display:none}
html:not([data-tema="claro"]) .icono-luna{display:none}
/* El menú no se esconde: se compacta. Demis quiere las cinco secciones siempre visibles. */
@media(max-width:1180px){.tel{display:none}.menu{gap:18px;margin-left:6px}}
@media(max-width:900px){
  .barra{gap:14px;padding:12px clamp(14px,3vw,24px);flex-wrap:wrap}
  .barra img{height:24px}
  .menu{order:3;width:100%;margin:2px 0 0;gap:0;justify-content:space-between;
        overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:13px;padding:6px 10px;white-space:nowrap}
  .barra-fin{gap:8px}
  .barra-fin .btn-full{padding:10px 16px;font-size:13px}
}

/* ── Cabecera de página interior ───────────────────────── */
.encabezado{position:relative;z-index:2;padding:clamp(120px,17vh,190px) 0 clamp(40px,6vh,64px);border-bottom:1px solid var(--linea2)}
.encabezado h1{font-size:clamp(40px,7vw,92px);text-transform:uppercase;letter-spacing:-.045em}
.encabezado .intro{margin-top:24px;max-width:520px;font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:var(--tx2)}
.miga{display:flex;gap:10px;align-items:center;color:var(--tx3);margin-bottom:26px}
.miga a:hover{color:var(--cian-cl)}

/* ═══ PORTADA ══════════════════════════════════════════ */
.portada{position:relative;z-index:1}
.portada-fondo{position:absolute;inset:0;z-index:0;pointer-events:none}
.acto{
  position:relative;z-index:2;
  min-height:100svh;display:flex;align-items:center;
}
/* El segundo acto dura: se queda fijo mientras el vídeo avanza y suelta
   antes del final, para que el metraje cierre con la pantalla limpia. */
.acto-largo{display:block;min-height:0;height:240vh}
.acto-largo > .acto-fijo{
  position:sticky;top:0;height:100svh;
  display:flex;align-items:center;
}
.respiro{height:290vh}
.cola{height:220vh}
.portada .env{position:relative;z-index:2;width:100%}
.titular{font-size:clamp(50px,10.2vw,158px);text-transform:uppercase;color:var(--tx)}
.titular .fila{display:block;overflow:hidden}
.titular .fila > span{display:block;transform:translateY(105%);animation:subir 1.15s cubic-bezier(.16,1,.3,1) forwards}
.titular .fila:nth-child(2) > span{animation-delay:.12s}
@keyframes subir{to{transform:translateY(0)}}
.fibrado{color:var(--cian-cl)}
html[data-tema="claro"] .fibrado{background-image:none;filter:none;color:var(--cian-cl)}
.bajada{max-width:440px;margin-top:28px;font-size:clamp(15px,1.35vw,18px);line-height:1.6;color:var(--tx2);opacity:0;animation:aparecer .9s .5s ease forwards}
.acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px;opacity:0;animation:aparecer .9s .66s ease forwards}
@keyframes aparecer{to{opacity:1}}

.hud{position:absolute;left:0;right:0;bottom:0;z-index:5;border-top:1px solid var(--linea2)}
.hud-in{display:flex;align-items:center;gap:22px;padding:14px 0;color:var(--tx3)}
.hud-in > *{white-space:nowrap}
.hud-sep{flex:1;height:1px;background:var(--linea2)}
.cue{display:flex;align-items:center;gap:9px;color:var(--cian-cl)}
.cue i{display:block;width:1px;height:22px;background:linear-gradient(180deg,transparent,var(--cian-cl));animation:cae 1.9s ease-in-out infinite}
@keyframes cae{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:800px){.hud-in .ocultable{display:none}}

/* ═══ MEDIDOR ══════════════════════════════════════════ */
.medidor{position:relative;height:270vh;z-index:2}
.medidor-fijo{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden}
.medidor-rej{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px,6vw,86px);align-items:center;width:100%}
@media(max-width:940px){.medidor-rej{grid-template-columns:1fr;gap:34px}}
.cifra{font-family:"Space Grotesk";font-weight:700;font-size:clamp(84px,16vw,230px);line-height:.84;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
.cifra small{font-size:.2em;letter-spacing:.02em;color:var(--tx2);margin-left:.12em;vertical-align:super}
.medidor h2{font-size:clamp(26px,3.3vw,48px);margin-top:20px}
.medidor .nota{margin-top:18px;max-width:400px;color:var(--tx2);font-size:16px;line-height:1.6}

.canales{display:flex;flex-direction:column;gap:24px}
.canal-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:16px}
.canal-cab b{font-size:14px}
.canal-cab span{font-family:"Space Grotesk";font-size:21px;font-weight:700;font-variant-numeric:tabular-nums}
.pista{height:12px;border-radius:99px;background:var(--linea2);overflow:hidden}
.relleno{height:100%;border-radius:99px;width:0;background:linear-gradient(90deg,var(--cian),var(--acento))}
.relleno-otros{background:var(--tx3)}
.veredicto{
  margin-top:6px;padding:20px 24px;border-radius:16px;
  border:1px solid color-mix(in srgb,var(--acento) 34%,transparent);
  background:color-mix(in srgb,var(--acento) 8%,transparent);
  font-size:15px;line-height:1.6;color:var(--tx2);
  opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s;
}
.veredicto.on{opacity:1;transform:none}

/* ═══ MANIFIESTO ═══════════════════════════════════════ */
.manifiesto{position:relative;height:230vh;z-index:2}
.manif-fijo{position:sticky;top:0;height:100svh;display:flex;align-items:center}
.manif-txt{font-family:"Space Grotesk";font-weight:600;font-size:clamp(26px,4.2vw,60px);line-height:1.16;letter-spacing:-.03em;max-width:20ch}
.pal{opacity:clamp(.2, calc((var(--p,0) * var(--n) - var(--i)) * .6 + .2), 1);transition:opacity .18s linear}
.pal.br{color:var(--cian-cl)}

/* ═══ RIEL DE FOTOS ════════════════════════════════════ */
.casa{position:relative;height:265vh;z-index:2}
.casa-fijo{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.casa-cab{padding:0 clamp(20px,4vw,56px);margin-bottom:24px;display:flex;align-items:flex-end;justify-content:space-between;gap:30px;flex-wrap:wrap}
.casa-cab h2{font-size:clamp(28px,4vw,56px)}
.riel{display:flex;gap:20px;padding:0 clamp(20px,4vw,56px);will-change:transform}
.placa{position:relative;flex:0 0 auto;width:clamp(300px,38vw,520px);aspect-ratio:4/3;border-radius:20px;overflow:hidden;border:1px solid var(--linea)}
.placa img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.placa::after{content:"";position:absolute;inset:0;background:var(--velo-foto)}
.placa-txt{position:absolute;left:24px;right:24px;bottom:20px;z-index:2}
.placa-txt h3{font-size:23px;color:#fff}
.placa-txt p{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:6px;line-height:1.5}
.placa-num{position:absolute;top:18px;left:22px;z-index:2;color:rgba(255,255,255,.66)}

/* ═══ PIEZAS ═══════════════════════════════════════════ */
.seccion{position:relative;z-index:2;padding:clamp(70px,10vh,130px) 0}
.cab{display:flex;align-items:flex-end;justify-content:space-between;gap:34px;margin-bottom:46px;flex-wrap:wrap}
.cab h2{font-size:clamp(30px,4.4vw,60px)}

/* Planes — tarjetas amplias con barra de velocidad relativa */
.planes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
/* Cuatro tarjetas de ~400 px no caben en el ancho normal del sitio, así
   que esta sección se ensancha lo justo. */
.planes-ancho{max-width:1780px}
@media (max-width:1500px){ .planes{grid-template-columns:repeat(2,minmax(0,1fr))} }
.plan{
  position:relative;display:flex;flex-direction:column;
  padding:36px 30px 30px;border-radius:22px;
  border:1px solid var(--linea);background:var(--sup);
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s,box-shadow .45s;
}
.plan:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--cian) 46%,transparent)}
.plan.top{border-color:color-mix(in srgb,var(--cian) 55%,transparent);box-shadow:var(--sombra)}
.plan-eti{
  position:absolute;top:0;left:30px;transform:translateY(-50%);
  padding:6px 14px;border-radius:99px;
  background:linear-gradient(120deg,var(--cian),var(--acento));color:var(--sobre-cian);
  font-size:10px;font-weight:800;letter-spacing:.14em;white-space:nowrap;
}
.plan .mb{font-family:"Space Grotesk";font-size:clamp(44px,4.4vw,60px);font-weight:700;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.plan .mb i{font-size:.3em;font-style:normal;color:var(--tx2);margin-left:.14em}
.plan .sim{margin-top:8px;font-size:12.5px;color:var(--cian-cl);font-weight:700;letter-spacing:.03em}
.plan .medida{margin-top:20px}
.plan .medida .pista{height:6px}
.plan .medida .relleno{transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.plan ul{list-style:none;padding:0;margin:24px 0 26px;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;font-size:14px;color:var(--tx2);line-height:1.45}
.plan li svg{flex:0 0 auto;margin-top:3px;width:14px;height:14px;stroke:var(--acento)}
.plan .precio{display:flex;align-items:baseline;gap:5px;margin-top:auto;padding-top:22px;border-top:1px solid var(--linea2)}
.plan .precio b{font-family:"Space Grotesk";font-size:31px;font-weight:700;letter-spacing:-.03em}
.plan .precio span{font-size:13px;color:var(--tx3)}
.plan .btn{width:100%;margin-top:20px}

/* Qué alcanza con cada velocidad */
.alcance{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:26px}
.alcance div{padding:22px 24px;border-radius:16px;border:1px solid var(--linea);background:var(--sup)}
.alcance b{display:block;font-family:"Space Grotesk";font-size:26px;letter-spacing:-.03em}
.alcance span{display:block;margin-top:7px;font-size:14px;color:var(--tx2);line-height:1.5}

/* Aparición al entrar en pantalla */
.rev{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rev.visto{opacity:1;transform:none}

/* Cinta */
.cinta{overflow:hidden;border-block:1px solid var(--linea2);padding:18px 0;position:relative;z-index:2}
.cinta-in{display:flex;gap:0;white-space:nowrap;width:max-content;animation:desfila 22s linear infinite}
.cinta-in span{display:flex;align-items:center;gap:40px;padding-right:40px;color:var(--tx3)}
.cinta-in b{color:var(--cian-cl)}
@keyframes desfila{to{transform:translateX(-50%)}}

/* Cobertura */
.cobertura{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,70px);align-items:center}
@media(max-width:940px){.cobertura{grid-template-columns:1fr}}
.buscador{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
.buscador input{flex:1;min-width:220px;padding:16px 20px;border-radius:14px;font:inherit;font-size:15px;background:var(--sup);border:1px solid var(--linea);color:var(--tx)}
.buscador input::placeholder{color:var(--tx3)}
.buscador input:focus{outline:2px solid var(--cian-cl);outline-offset:1px;border-color:transparent}
.mapa{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linea);background:var(--sup);aspect-ratio:4/3}
.mapa svg{width:100%;height:100%;display:block}
.mapa-hud{position:absolute;left:18px;top:16px;color:var(--tx3);z-index:2}
.hilo-red{fill:none;stroke:color-mix(in srgb,var(--cian) 55%,transparent);stroke-width:1.2;stroke-dasharray:5 7;animation:fluir 14s linear infinite}
@keyframes fluir{to{stroke-dashoffset:-240}}
.punto{fill:var(--acento)}
.halo{fill:none;stroke:var(--acento);opacity:.55;animation:late 3s ease-out infinite}
@keyframes late{0%{r:5;opacity:.6}100%{r:22;opacity:0}}

/* Pagos — el logo conserva sus colores sobre pastilla blanca */
.pagos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.pago{padding:30px 28px;border-radius:18px;border:1px solid var(--linea);background:var(--sup);transition:border-color .4s,transform .4s}
.pago:hover{border-color:color-mix(in srgb,var(--cian) 40%,transparent);transform:translateY(-6px)}
.pago-logo{
  display:inline-flex;align-items:center;justify-content:center;
  height:58px;padding:0 18px;margin-bottom:20px;
  border-radius:12px;background:var(--chip);
}
html[data-tema="claro"] .pago-logo{padding:0;border-radius:0}
.pago-logo img{height:34px;width:auto;object-fit:contain;mix-blend-mode:multiply}
html[data-tema="claro"] .pago-logo img{mix-blend-mode:normal}
.pago h3{font-size:19px}
.pago p{margin-top:9px;font-size:14px;color:var(--tx2);line-height:1.55}
.pago .dato{margin-top:14px;padding-top:14px;border-top:1px solid var(--linea2);color:var(--cian-cl)}

/* Sucursal y preguntas */
.sucursal{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
@media(max-width:940px){.sucursal{grid-template-columns:1fr}}
.tarjeta{padding:38px 34px;border-radius:22px;border:1px solid var(--linea);background:var(--sup);box-shadow:var(--sombra)}
.faq{border-top:1px solid var(--linea2)}
.faq details{border-bottom:1px solid var(--linea2)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:17px;font-weight:700}
.faq summary::-webkit-details-marker{display:none}
.faq summary:focus-visible{outline:2px solid var(--cian-cl);outline-offset:3px}
.faq summary svg{flex:0 0 auto;transition:transform .35s}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{padding:0 0 22px;max-width:72ch;color:var(--tx2);font-size:15px;line-height:1.65}

/* Accesos a las páginas interiores (home) */
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.puerta{
  position:relative;display:flex;flex-direction:column;justify-content:space-between;
  min-height:210px;padding:28px 26px;border-radius:20px;
  border:1px solid var(--linea);background:var(--sup);overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1),border-color .45s;
}
.puerta:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--cian) 50%,transparent)}
.puerta::before{
  content:"";position:absolute;inset:auto -30% -60% -30%;height:70%;
  background:radial-gradient(60% 100% at 50% 100%,color-mix(in srgb,var(--cian) 22%,transparent),transparent 70%);
  opacity:0;transition:opacity .45s;
}
.puerta:hover::before{opacity:1}
.puerta h3{font-size:26px;margin-top:14px}
.puerta p{margin-top:10px;font-size:14.5px;color:var(--tx2);line-height:1.55}
.puerta .flecha{display:flex;align-items:center;gap:9px;margin-top:22px;color:var(--cian-cl);font-weight:700;font-size:14px}
.puerta:hover .flecha svg{transform:translate(3px,-3px)}
.puerta .flecha svg{transition:transform .35s}

/* Pie */
.pie{border-top:1px solid var(--linea2);padding:54px 0 38px;position:relative;z-index:2}
.pie-rej{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
@media(max-width:860px){.pie-rej{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.pie-rej{grid-template-columns:1fr}}
.pie h4{font-size:12px;letter-spacing:.18em;color:var(--tx3);margin:0 0 14px;font-weight:700;text-transform:uppercase}
.pie a{display:block;font-size:14.5px;color:var(--tx2);padding:5px 0;transition:color .25s}
.pie a:hover{color:var(--cian-cl)}
.pie-fin{margin-top:40px;padding-top:22px;border-top:1px solid var(--linea2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--tx3)}

/* WhatsApp flotante */
.wa{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#25D366;box-shadow:0 12px 30px -8px rgba(37,211,102,.6);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.wa:hover{transform:scale(1.09)}
.wa svg{width:29px;height:29px;fill:#fff}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .titular .fila > span{transform:none}
  .bajada,.acciones{opacity:1}
  .pal{opacity:1!important}
}

/* ── Cobertura: mapa real + zonas ──────────────────────── */
.zonas{
  display:flex;align-items:center;gap:11px;margin-top:24px;
  padding:15px 18px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--acento) 32%,transparent);
  background:color-mix(in srgb,var(--acento) 8%,transparent);
  font-size:14.5px;color:var(--tx2);line-height:1.45;
}
.zonas b{color:var(--tx)}
.punto-zona{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--acento);position:relative}
.punto-zona::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--acento);animation:late 2.8s ease-out infinite}
.mapa-caja{border-radius:22px;overflow:hidden;border:1px solid var(--linea);background:var(--sup)}
.mapa-barra{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 16px;border-bottom:1px solid var(--linea2);color:var(--tx3)}
.mapa-btn{padding:8px 14px;font-size:12.5px;color:var(--tx2)}
.mapa{aspect-ratio:4/3;position:relative}
.mapa svg{width:100%;height:100%;display:block}
.mapa-pie{padding:12px 16px;border-top:1px solid var(--linea2);color:var(--tx3);text-transform:none;letter-spacing:.02em;font-size:11.5px}
.mapa-caja.con-punto .mapa-pie{color:var(--acento)}

/* ── Cobertura: resultado de la consulta ───────────────── */
.resultado{
  display:none;margin-top:16px;padding:18px 20px;border-radius:16px;
  border:1px solid var(--linea);background:var(--sup);
}
.resultado.on{display:block;animation:asomar .5s cubic-bezier(.16,1,.3,1) both}
@keyframes asomar{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.resultado b{display:block;font-family:"Space Grotesk";font-size:19px;letter-spacing:-.02em}
.resultado span{display:block;margin-top:7px;font-size:14.5px;color:var(--tx2);line-height:1.55}
.resultado.r-si{border-color:color-mix(in srgb,var(--acento) 55%,transparent);background:color-mix(in srgb,var(--acento) 10%,transparent)}
.resultado.r-si b{color:var(--acento)}
.resultado.r-aliada{border-color:color-mix(in srgb,var(--cian) 50%,transparent);background:color-mix(in srgb,var(--cian) 9%,transparent)}
.resultado.r-aliada b{color:var(--cian-cl)}
.resultado.r-no b,.resultado.r-duda b{color:var(--tx)}

.wa-linea{margin-top:12px;width:100%;color:var(--tx2)}
.wa-linea:hover{border-color:#25D366;color:var(--tx)}
.wa-linea svg{color:#25D366}

/* Mientras el navegador pide permiso de ubicación */
.mapa-btn.cargando{opacity:.6;pointer-events:none}
.mapa-btn.cargando svg{animation:gira 1s linear infinite}

/* El esquema SVG sólo se ve si Google Maps no cargó */
.mapa-caja:not(.sin-mapa) .mapa > svg{display:none}
.mapa > div{width:100%;height:100%}

/* ═══════════════════════════════════════════════════════════
   TÉCNICAS DE ALTO IMPACTO
   Aprendidas de las fichas premium de MotionSite (ago 2026).
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · Portada con el vídeo ligado al scroll (patrón novaai) ──
   El vídeo no se reproduce solo: el scroll adelanta el metraje. Y no
   congela la página: el texto pasa por delante con el scroll normal
   mientras el vídeo se queda fijo detrás.                          */
.portada-video{
  position:sticky; top:0; display:block;
  width:100%; height:100svh; object-fit:cover;
}
/* Sin velo, sin resplandor y sin halo: el metraje se ve tal cual.
   El contraste se resuelve colocando el texto donde el encuadre está
   limpio — la franja alta da 8:1 y la baja 2:1, porque el cable cruza
   por abajo— y no tapando el vídeo.                                */
/* El titular va blanco en los dos temas, así que se coloca de la mitad
   del encuadre hacia abajo: ahí el cable oscurece el fondo y el blanco
   contrasta. Justo al revés que el texto oscuro, que pedía la franja
   alta. La posición del texto es la herramienta, no el velo.        */
.acto{align-items:center;padding-top:clamp(40px,6vh,80px)}
.acto-largo > .acto-fijo{align-items:center;padding-top:0}
html[data-tema] .acto-largo .titular,
html[data-tema] .acto-largo .bajada{
  color:#FFFFFF; -webkit-text-fill-color:#FFFFFF;
  text-shadow:0 2px 8px rgba(2,10,16,.5);
}
html[data-tema] .acto-largo .eyebrow{color:#FFFFFF;font-weight:700}
.acto .bajada{color:#FFFFFF;font-weight:600;font-size:19px;max-width:44ch;
  text-shadow:0 1px 3px rgba(2,10,16,.55)}
/* El botón secundario cae sobre la parte baja del encuadre, donde el
   cable oscurece el fondo a 1,8:1. Con relleno sólido deja de depender
   del metraje que tenga detrás. */
.acto:not(.acto-largo) .btn:not(.btn-full){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.acto-largo .btn:not(.btn-full){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55);color:#fff}
html[data-tema="oscuro"] .acto .btn:not(.btn-full){background:color-mix(in srgb,var(--fondo) 88%,transparent)}
.acto .eyebrow{color:#000000;font-weight:700}
html[data-tema] .acto:not(.acto-largo) .titular,
html[data-tema] .acto:not(.acto-largo) .fibrado{
  color:#FFFFFF; -webkit-text-fill-color:#FFFFFF;
  text-shadow:0 2px 6px rgba(2,10,16,.45);
}

/* "Como baja" va del mismo negro que el resto del titular.

   Historial de esta línea, para no volver a caer: la regla del tema
   `html[data-tema="claro"] .fibrado` gana en especificidad a `.acto
   .fibrado`, así que reimpone `color:transparent` con
   `background-clip:text`; y sobre texto transparente cualquier sombra
   se cuela por el hueco de la letra y la rellena. Por eso hace falta
   `html[data-tema]` y anular el recorte de forma explícita.        */
html[data-tema] .acto .fibrado{
  background:none; background-image:none;
  -webkit-background-clip:border-box; background-clip:border-box;
  filter:none; text-shadow:none;
  color:var(--tx); -webkit-text-fill-color:var(--tx);
  animation:subir 1.15s cubic-bezier(.16,1,.3,1) .12s forwards;
}

html[data-tema="oscuro"] .acto .eyebrow{color:#7FD9EE}

.titular-2{font-size:clamp(38px,5.8vw,92px)}

.medidor-fijo > .env{position:relative;z-index:2}

/* ── 3 · Doble marquesina en direcciones opuestas ─────────── */
.cinta-doble{position:relative;z-index:2;border-block:1px solid var(--linea2);padding:14px 0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.cinta-doble .cinta-in{animation-duration:26s}
.cinta-doble .rev-dir .cinta-in{animation-direction:reverse;animation-duration:34s}
.cinta-doble .fila-cinta{overflow:hidden}

/* ── 4 · Glassmorphism (el recurso más repetido de todos) ─── */
.vidrio{
  background:color-mix(in srgb,var(--sup) 62%,transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border:1px solid color-mix(in srgb,var(--tx) 12%,transparent);
  box-shadow:0 20px 60px -30px color-mix(in srgb,var(--cian) 45%,transparent);
}
.plan{background:color-mix(in srgb,var(--sup) 70%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3)}

/* ── 5 · Degradado dentro de la tipografía (patrón AERO) ──── */
html[data-tema="claro"] .fibrado{color:var(--cian-cl)}
@keyframes barrer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media(max-width:900px){
  html[data-tema="claro"] .portada-txt{max-width:100%}
}

/* ── Red propia ─────────────────────────────────────────────────
   Aquí vive ahora el nudo de fibra: enmarcado y a tamaño contenido,
   donde su resolución da de sobra. El panel va tintado para que
   `multiply` funda el fondo blanco del vídeo con el marco.        */
.red-rej{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px,5vw,74px); align-items:center;
}
.marco-video{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  border:1px solid var(--linea2);
  background:
    radial-gradient(ellipse 70% 70% at 50% 46%,
      color-mix(in srgb, var(--cian) 9%, transparent), transparent 70%),
    color-mix(in srgb, var(--cian) 5%, var(--fondo));
}
.marco-video video{
  display:block; width:100%; aspect-ratio:16/10; object-fit:cover;
  mix-blend-mode:multiply;
}
html[data-tema="oscuro"] .marco-video{background:#0A1520}
html[data-tema="oscuro"] .marco-video video{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg)}
.marco-video figcaption{
  position:absolute; left:16px; bottom:14px;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx3);
  background:color-mix(in srgb, var(--fondo) 78%, transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--linea2); border-radius:999px; padding:6px 13px;
}
.red-txt h2{font-size:clamp(28px,3.6vw,52px);line-height:1.05}
.red-txt .nota{margin-top:20px;max-width:420px;color:var(--tx2);font-size:16px;line-height:1.65}
.red-datos{
  list-style:none; margin:30px 0 0; padding:0;
  display:grid; gap:1px; background:var(--linea2);
  border:1px solid var(--linea2); border-radius:14px; overflow:hidden;
}
.red-datos li{
  display:flex; align-items:baseline; gap:14px;
  padding:14px 18px; background:var(--fondo);
}
.red-datos b{color:var(--cian);font-size:13px;letter-spacing:.1em;text-transform:uppercase;min-width:96px}
.red-datos span{color:var(--tx2);font-size:13.5px}
@media (max-width:860px){ .red-rej{grid-template-columns:1fr} }

/* ── Banda cinematográfica a sangre (patrón WISA) ────────────────
   Una sola sección oscura en una página blanca: el contraste es
   deliberado, y es donde el render de velocidad se ve como debe. */
.banda-cine{
  position:relative; overflow:hidden; z-index:2;
  min-height:clamp(420px,64vh,640px);
  display:flex; align-items:center;
  background:#04121C;
}
.banda-video{position:absolute;inset:0;z-index:0}
.banda-video video{
  width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.05 + var(--p,0) * .12));
  opacity:.85;
}
.banda-cine::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg,rgba(4,18,28,.94) 0%,rgba(4,18,28,.72) 42%,rgba(4,18,28,.18) 78%),
    linear-gradient(180deg,rgba(4,18,28,.65) 0%,transparent 26%,transparent 74%,rgba(4,18,28,.65) 100%);
}
.banda-txt{position:relative;z-index:2;color:#EAF4FA}
.banda-txt .eyebrow{color:#6FD3EC}
.banda-txt h2{font-size:clamp(30px,4.4vw,62px);line-height:1.04;color:#fff}
.banda-txt p{margin-top:20px;max-width:430px;font-size:16.5px;line-height:1.62;color:#A9C4D3}

/* ── Cabecera de página con render de fondo ──────────────────────── */
.encabezado.con-video{position:relative;overflow:hidden}
.enc-video{position:absolute;inset:0;z-index:0;pointer-events:none}
.enc-video video{width:100%;height:100%;object-fit:cover;opacity:.9}
.encabezado.con-video::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(93deg,var(--fondo) 0%,var(--fondo) 34%,
      color-mix(in srgb,var(--fondo) 55%,transparent) 58%,transparent 86%),
    linear-gradient(180deg,transparent 40%,var(--fondo) 100%);
}
.encabezado.con-video .env{position:relative;z-index:2}
html[data-tema="oscuro"] .enc-video video{filter:invert(1) hue-rotate(180deg) brightness(.9);opacity:.5}

/* ── La foto de cada plan, como en el sitio original ───────────────── */
.plan-foto{
  margin:-2px -2px 22px; border-radius:14px 14px 0 0; overflow:hidden;
  background:color-mix(in srgb, var(--cian) 6%, var(--fondo));
}
.plan-foto img, .plan-foto video{
  /* height:auto es obligatorio: el <video> trae width/height como atributos
     HTML y ese height cuenta como estilo, de modo que aspect-ratio se
     ignora mientras la altura no sea auto. Sin esta linea la caja sale
     vertical (290x520) en vez de apaisada. */
  display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
  transition:transform .7s cubic-bezier(.16,1,.3,1);
}
.plan:hover .plan-foto img, .plan:hover .plan-foto video{transform:scale(1.05)}
.plan.top .plan-foto{border-radius:14px 14px 0 0}

/* ── Páginas legales ─────────────────────────────────────────────
   Texto largo para leer, no para hojear: columna estrecha, interlínea
   holgada y jerarquía clara entre apartados.                      */
/* El texto se estrecha por dentro, no la caja: así el margen izquierdo
   sigue alineado con la cabecera y con el resto del sitio. */
.legal > .env > *{max-width:790px}
.legal .actualizado{color:var(--tx3);margin-bottom:38px}
.legal h2{
  font-size:clamp(19px,2.1vw,25px); line-height:1.25; margin:44px 0 14px;
  padding-top:26px; border-top:1px solid var(--linea2);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p{margin:0 0 15px;color:var(--tx2);font-size:16px;line-height:1.72}
.legal p b{color:var(--tx)}
.legal a{color:var(--cian-cl);text-decoration:underline;text-underline-offset:3px}
.lista-legal{margin:4px 0 18px;padding-left:20px;color:var(--tx2);font-size:16px;line-height:1.72}
.lista-legal li{margin-bottom:9px}
.lista-legal b{color:var(--tx)}

.tabla-legal{
  width:100%; border-collapse:collapse; margin:18px 0 22px;
  border:1px solid var(--linea2); border-radius:12px; overflow:hidden;
  font-size:14.5px;
}
.tabla-legal th{
  text-align:left; padding:12px 14px; background:color-mix(in srgb,var(--cian) 7%,var(--fondo));
  color:var(--tx); font-size:12px; letter-spacing:.09em; text-transform:uppercase;
}
.tabla-legal td{padding:12px 14px;border-top:1px solid var(--linea2);color:var(--tx2);vertical-align:top}

/* Lo que OPTVE todavía tiene que rellenar salta a la vista. */
.pendiente{
  background:#FFF3C4; color:#5A4200; padding:2px 7px; border-radius:5px;
  font-weight:600; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
html[data-tema="oscuro"] .pendiente{background:#5A4200;color:#FFE9A3}

.nota-legal{
  margin-top:38px; padding:18px 20px; border-radius:12px;
  border:1px solid var(--linea2); background:color-mix(in srgb,var(--cian) 4%,var(--fondo));
}
.pie-legal{display:flex;gap:18px}
.pie-legal a{color:var(--tx3)}
.pie-legal a:hover{color:var(--cian-cl)}

/* ── Medios de pago ──────────────────────────────────────────────── */
.pago{position:relative;display:flex;flex-direction:column}
.pago.destacado{border-color:var(--cian-cl);box-shadow:0 0 0 1px var(--cian-cl) inset}
.pago-eti{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--cian-cl);color:#fff;border-radius:999px;
  padding:5px 14px;font-size:10.5px;letter-spacing:.13em;font-weight:700;white-space:nowrap;
}
.pago-lista{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:11px}
.pago-lista li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--tx2);line-height:1.45}
.pago-lista svg{width:17px;height:17px;flex:0 0 17px;margin-top:1px;stroke:var(--cian-cl);fill:none}
.pago-btn{margin-top:auto;width:100%;justify-content:center;padding-top:13px;padding-bottom:13px}
.pago-lista + .pago-btn{margin-top:22px}

.pago-codigo,.pago-ruta{
  margin-top:18px;padding:16px 18px;border-radius:12px;
  background:color-mix(in srgb,var(--cian) 8%,var(--fondo));
  border:1px solid var(--linea2);
}
.pago-codigo{text-align:center}
.pago-codigo span,.pago-ruta span{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--tx3)}
.pago-codigo b{display:block;margin-top:6px;font-size:34px;letter-spacing:.02em;color:var(--cian-cl);font-family:var(--mono,inherit)}
.pago-ruta p{margin:8px 0 0;font-size:14px;line-height:1.6;color:var(--tx)}
.pago-ruta i{color:var(--cian-cl);font-style:normal;padding:0 2px}

.aviso-pago{
  margin-top:40px;padding:24px 26px;border-radius:16px;
  border:1px solid var(--linea2);
  background:color-mix(in srgb,var(--cian) 5%,var(--fondo));
}
.aviso-pago h4{display:flex;align-items:center;gap:10px;margin:0 0 16px;font-size:16px}
.aviso-pago h4 svg{width:19px;height:19px;stroke:var(--cian-cl);fill:none}
.aviso-rej{display:grid;grid-template-columns:1fr 1fr;gap:20px 34px}
.aviso-rej p{margin:0;font-size:14.5px;line-height:1.62;color:var(--tx2)}
.aviso-rej b{color:var(--tx)}
@media (max-width:760px){ .aviso-rej{grid-template-columns:1fr} }

/* ── Página de ayuda ─────────────────────────────────────────────── */
.ayuda > *{max-width:860px}
.ayuda-bloque{margin:44px 0 18px}
.ayuda-bloque:first-child{margin-top:0}
.ayuda-bloque h2{
  font-size:clamp(19px,2.2vw,26px);
  padding-bottom:14px;border-bottom:1px solid var(--linea2);
}
.ayuda-contacto{
  margin-top:52px;padding:30px 32px;border-radius:18px;
  border:1px solid var(--linea2);
  background:color-mix(in srgb,var(--cian) 6%,var(--fondo));
}
.ayuda-contacto h3{font-size:21px}
.ayuda-contacto p{margin-top:11px;color:var(--tx2);font-size:15.5px;line-height:1.62;max-width:52ch}
.ayuda-contacto .acciones{margin-top:22px}
.ayuda-tel{margin-top:18px;color:var(--tx3);font-size:12.5px;letter-spacing:.1em}

.puente-ayuda{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  padding:30px 32px;border-radius:18px;
  border:1px solid var(--linea2);background:var(--sup);
}

/* El teléfono de la barra, en escritorio, copia en vez de marcar. */
.tel-copiable{cursor:pointer}
.tel-copiable.copiado{color:var(--cian-cl)}

/* ══════════════════════════════════════════════════════════════════
   MÓVIL
   El sitio nació pensado para pantalla ancha. Aquí se recoge todo lo
   que en vertical no cabe o no se lee: la portada se acorta, las
   rejillas de dos y cuatro columnas pasan a una, y lo que se apoyaba
   en el lado derecho del encuadre se recentra.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 760px){

  /* ── Portada ──────────────────────────────────────────────────
     En vertical el recorrido de scroll por pantalla es mucho menor,
     así que la escena se acorta: con las alturas de escritorio harían
     falta ocho deslizamientos para pasar el vídeo. */
  .respiro{height:120vh}
  .cola{height:110vh}
  .acto-largo{height:170vh}
  .acto{padding-top:clamp(72px,11vh,110px)}
  .titular{font-size:clamp(34px,10.5vw,58px)}
  .titular-2{font-size:clamp(30px,9vw,50px)}
  .acto .bajada{font-size:16.5px;max-width:100%}
  .acto .acciones{flex-wrap:wrap;gap:10px}
  .acto .acciones .btn{flex:1 1 100%;justify-content:center}
  /* El encuadre es apaisado: en vertical hay que fijar el punto de
     interés o se pierde el objeto. */
  .portada-video{object-position:62% 50%}

  /* ── Cabecera ─────────────────────────────────────────────────
     El teléfono sobra en móvil: el botón de contratar y el flotante
     de WhatsApp ya dan la vía de contacto. */
  .barra{padding:10px 16px;gap:10px}
  .barra .tel{display:none}
  .barra img{height:22px}
  .menu{
    order:3; width:100%;
    display:flex; gap:6px;
    overflow-x:auto; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    margin:2px -16px -4px; padding:0 16px 6px;
  }
  .menu::-webkit-scrollbar{display:none}
  .menu a{font-size:13.5px;padding:5px 2px;white-space:nowrap}
  .barra-fin{gap:8px}

  /* ── Medidor ──────────────────────────────────────────────────
     Las dos columnas no caben: la cifra arriba y las barras debajo. */
  .medidor{height:220vh}
  .medidor-rej{grid-template-columns:1fr;gap:26px}
  .cifra{font-size:clamp(64px,22vw,110px)}
  .medidor .nota{max-width:100%}
  .canal-cab b{font-size:12.5px}

  /* ── Rejillas de dos columnas ─────────────────────────────────── */
  .planes{grid-template-columns:1fr;gap:16px}
  .pagos{grid-template-columns:1fr}
  .red-rej,.aviso-rej{grid-template-columns:1fr;gap:24px}
  .puertas{grid-template-columns:1fr}
  .pie-rej{grid-template-columns:1fr 1fr;gap:28px}
  .pie-fin{flex-direction:column;align-items:flex-start;gap:10px}
  .pie-legal{gap:14px}

  /* ── Banda cinematográfica ────────────────────────────────────── */
  .banda-cine{min-height:clamp(340px,62vh,460px)}
  .banda-txt h2{font-size:clamp(26px,8vw,40px)}
  .banda-txt p{max-width:100%}
  .banda-cine::after{
    background:
      linear-gradient(180deg,rgba(4,18,28,.55) 0%,rgba(4,18,28,.30) 40%,rgba(4,18,28,.88) 100%);
  }

  /* ── Planes ───────────────────────────────────────────────────── */
  .plan{padding:22px 20px}
  .plan-foto{margin:-2px -2px 18px}
  .mb{font-size:clamp(46px,15vw,70px)}

  /* ── Textos largos ────────────────────────────────────────────── */
  .legal > .env > *{max-width:100%}
  .legal h2{font-size:19px;margin:34px 0 12px;padding-top:20px}
  .tabla-legal{font-size:13px}
  .tabla-legal th,.tabla-legal td{padding:9px 10px}
  .ayuda > *{max-width:100%}
  .ayuda-contacto{padding:24px 20px}
  .ayuda-contacto .acciones{flex-direction:column;align-items:stretch}
  .puente-ayuda{flex-direction:column;align-items:flex-start;padding:24px 20px}
  .manif-txt{font-size:clamp(21px,6.4vw,32px)}
  .encabezado h1{font-size:clamp(32px,9.5vw,52px)}

  /* ── Detalles ─────────────────────────────────────────────────── */
  .cab.rev,.cab{flex-direction:column;align-items:flex-start;gap:16px}
  .marco-video figcaption{left:12px;bottom:10px;font-size:10px;padding:5px 10px}
  .pago-codigo b{font-size:30px}
}

/* Una tabla nunca debe empujar la página a lo ancho. */
@media (max-width: 560px){
  .tabla-legal{display:block;overflow-x:auto;white-space:nowrap}
  .aviso-pago{padding:20px 18px}
}

/* ── Resultado de la consulta de cobertura ───────────────────────
   Tres desenlaces, como en el sitio original: cobertura propia,
   cobertura de la empresa aliada, o todavía nada.                */
.resultado.on{
  margin-top:24px; padding:34px 30px; border-radius:18px;
  border:1px solid var(--linea2); background:var(--sup);
  text-align:center; box-shadow:var(--sombra);
}
.resultado.r-propia{border-color:color-mix(in srgb,#12A594 55%,transparent)}
.resultado.r-aliada,.resultado.r-fuera{border-color:color-mix(in srgb,#E5484D 45%,transparent)}
.res-icono{
  width:66px;height:66px;margin:0 auto 20px;border-radius:50%;
  display:grid;place-items:center;
}
.res-icono svg{width:32px;height:32px}
.res-si{background:color-mix(in srgb,#12A594 14%,transparent);color:#0E8578}
.res-no{background:color-mix(in srgb,#E5484D 12%,transparent);color:#D93B41}
.res-duda{background:color-mix(in srgb,var(--cian) 14%,transparent);color:var(--cian-cl)}
.resultado h3{font-size:clamp(20px,2.5vw,27px);line-height:1.2;margin:0}
.resultado > p{
  margin:12px auto 0; max-width:52ch;
  font-size:16px; line-height:1.6; color:var(--tx2);
}
.resultado > p b{color:var(--tx)}
.res-buenas{color:var(--cian-cl)}
.res-dir{
  margin-top:22px; padding:16px 20px; border-radius:12px;
  background:color-mix(in srgb,var(--cian) 7%,var(--fondo));
}
.res-dir b{display:block;font-size:14px;color:var(--tx)}
.res-dir span{display:block;margin-top:5px;font-size:14.5px;color:var(--tx2);line-height:1.5}
.res-acciones{
  margin-top:24px; display:flex; gap:12px;
  justify-content:center; flex-wrap:wrap;
}
.res-acciones .btn{display:inline-flex;align-items:center;gap:9px}
.res-acciones svg{width:16px;height:16px;flex:0 0 16px}
@media (max-width:620px){
  .resultado.on{padding:26px 20px}
  .res-acciones{flex-direction:column}
  .res-acciones .btn{width:100%;justify-content:center}
}