.entrada{
  position:relative; overflow:hidden;
  background:
    radial-gradient(78% 62% at 84% 4%, color-mix(in srgb,var(--celeste) 22%,transparent) 0%, transparent 60%),
    radial-gradient(64% 56% at 4% 96%, color-mix(in srgb,var(--azul) 12%,transparent) 0%, transparent 58%),
    linear-gradient(180deg, var(--papel-alto) 0%, var(--papel) 100%);
  padding:clamp(44px,5.6vw,84px) 0 clamp(52px,6.4vw,92px);
}
.entrada::before{
  content:""; position:absolute; inset:-80px 0; pointer-events:none;
  transform:translateY(var(--desplaza,0px)); will-change:transform;
  background-image:
    repeating-linear-gradient(to right, color-mix(in srgb,var(--azul) 8%,transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(to bottom, color-mix(in srgb,var(--azul) 8%,transparent) 0 1px, transparent 1px 64px);
  mask-image:radial-gradient(120% 90% at 12% 0%, #000 0%, transparent 68%);
}
.entrada > .env{position:relative; z-index:1}
.entrada-rejilla{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(40px,5vw,60px)}
@media (min-width:1020px){
  .entrada-rejilla{grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr); align-items:center}
}
.ceja{
  font-family:var(--dato); font-size:11.5px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--azul);
  display:flex; align-items:center; gap:11px; margin-bottom:24px;
}
.ceja::before{content:""; width:28px; height:1.5px; background:var(--azul); flex:none}
.entrada h1{font-size:clamp(34px,4.1vw,52px); font-weight:800; letter-spacing:-.02em}
.entrada-bajada{margin-top:22px; font-size:18px; color:var(--tinta-media); max-width:54ch}
.entrada-acciones{display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:34px}

.entrada-micro{margin-top:14px; font-family:var(--dato); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-tenue); display:flex; flex-wrap:wrap; gap:6px 14px}
.entrada-micro span::before{content:"✓"; color:var(--azul); margin-right:6px; font-weight:700}

.razones{display:grid; gap:18px; margin-top:34px}
@media (min-width:760px){.razones{grid-template-columns:repeat(2,1fr); gap:24px}}
.razon{display:flex; flex-direction:column; padding:24px 24px 22px; background:var(--papel-alto); border:1px solid var(--linea); border-radius:var(--radio); transition:transform .24s var(--curva), box-shadow .24s var(--curva), border-color .24s}
.razon:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta); border-color:var(--linea-fuerte)}
.razon h3{font-size:21px; font-weight:800; letter-spacing:-.025em}
.razon p{margin-top:10px; font-size:15.5px; color:var(--tinta-media); line-height:1.6}
.razon a{margin-top:auto; padding-top:16px; font-size:14.5px; font-weight:700; color:var(--azul); text-decoration:none; display:inline-flex; align-items:center; gap:6px}
.razon a:hover{text-decoration:underline; text-underline-offset:3px}
.razon a svg{width:14px; height:14px; transition:transform .18s var(--curva)}
.razon a:hover svg{transform:translateX(3px)}

.planes-franja{
  margin-top:0; border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden;
  background:
    radial-gradient(60% 70% at 100% 0%, color-mix(in srgb,var(--celeste) 24%,transparent) 0%, transparent 62%),
    linear-gradient(180deg, var(--papel-alto) 0%, var(--azul-lavado) 100%);
  padding:clamp(26px,4vw,44px); display:grid; gap:clamp(20px,3vw,36px); align-items:center;
}
@media (min-width:900px){.planes-franja{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.planes-franja h2{font-size:clamp(26px,3vw,36px); font-weight:800; letter-spacing:-.03em; max-width:16ch}
.planes-franja .entradilla{margin-top:14px; font-size:16px}
.planes-franja .boton{margin-top:22px}
@media (max-width:420px){.planes-franja .boton{white-space:normal}}
.planes-dos{display:grid; gap:14px}
@media (min-width:560px){.planes-dos{grid-template-columns:1fr 1fr}}
.plan-mini{position:relative; background:var(--papel-alto); border:1.5px solid var(--linea); border-radius:16px; padding:20px 20px 18px; box-shadow:var(--sombra)}
.plan-mini.recomendado{border-color:var(--azul)}
.plan-mini-marca{position:absolute; top:-12px; left:18px; padding:4px 10px; border-radius:999px; background:var(--oro); color:#1B1500; font-family:var(--dato); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase}
.plan-mini h3{font-size:17px; font-weight:800; letter-spacing:-.02em}
.plan-mini-precio{font-family:var(--cifra); margin-top:10px; font-size:clamp(26px,2.6vw,32px); font-weight:800; letter-spacing:.02em; line-height:1; font-variant-numeric:tabular-nums}
.plan-mini{container-type:inline-size}
.plan-mini-precio{font-size:min(clamp(26px,2.6vw,32px), max(12px, calc(18.44cqi - 7.72px)))}
.plan-mini-precio:lang(en){font-size:min(clamp(26px,2.6vw,32px), max(12px, calc(14.29cqi - 7.92px)))}
.plan-mini-precio small{font-size:13px; font-weight:600; letter-spacing:0; color:var(--tinta-tenue)}
.plan-mini-precio > span{margin-right:-.04em}
.plan-mini-precio .desde{display:block; margin:0 0 6px; font-family:var(--dato); font-size:10.5px; font-weight:400; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-tenue)}
.plan-mini-nota{margin-top:6px; font-family:var(--dato); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-tenue); text-wrap:balance}
.plan-mini p.plan-mini-base{margin-top:12px; padding-top:12px; border-top:1px solid var(--linea); font-size:13.5px; color:var(--tinta-media); line-height:1.5}
.plan-mini p.plan-mini-base b{color:var(--tinta)}

.visor-puerta{display:flex; justify-content:center; margin-top:22px}


.figura{
  margin:0; background:var(--papel-alto); border:1px solid var(--linea);
  border-radius:var(--radio); box-shadow:var(--sombra-alta); overflow:hidden;
}
.figura-cabeza{padding:22px 26px 6px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
.figura-cabeza h2{font-size:18px; font-weight:700; letter-spacing:-.022em}
.figura-cabeza p{font-size:13.5px; color:var(--tinta-tenue); margin-top:6px}
.figura-pista{
  font-family:var(--dato); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--tinta-tenue); white-space:nowrap; padding-top:4px;
}
.figura-lienzo{padding:6px 16px 0; overflow-x:auto}
.figura svg{display:block; width:100%; height:auto; min-width:560px}
@media (max-width:639px){
  .figura-lienzo{overflow:visible; padding:6px 8px 0}
  .figura svg{min-width:0}
  .figura svg .eje-texto,.figura svg .sonda-txt{font-size:18px}
  .figura svg .mes{font-size:20px}
  .figura svg .leyenda-texto{font-size:16px}
  .figura svg .nota-suave,.figura svg .sonda-mes{font-size:17px}
  .figura svg .nota-fuerte{font-size:20px}
  .figura svg .umbral-texto{display:none}
}
figcaption{
  padding:15px 26px 19px; font-size:13px; color:var(--tinta-media);
  border-top:1px solid var(--linea); background:var(--azul-lavado);
}
figcaption b{color:var(--tinta); font-weight:700}

.malla{stroke:var(--linea); stroke-width:1}
.eje-texto{fill:var(--tinta-tenue); font-family:var(--cifra); font-size:11px; font-variant-numeric:tabular-nums}
.mes{fill:var(--tinta-tenue); font-family:var(--display); font-size:11.5px; text-anchor:middle}
.linea-serie{fill:none; stroke-width:2.9; stroke-linecap:round; stroke-linejoin:round}
.serie-con{stroke:var(--azul)}
.serie-sin{stroke:var(--alerta)}
.umbral{stroke:var(--oro); stroke-width:1.75; stroke-dasharray:7 5; fill:none}
.umbral-texto{fill:var(--oro-hondo); font-family:var(--cifra); font-size:11px; text-anchor:end; font-weight:500; font-variant-numeric:tabular-nums}
.leyenda-texto{fill:var(--tinta-media); font-family:var(--display); font-size:12px}
.marca-punto{fill:var(--papel-alto); stroke:var(--alerta); stroke-width:2.9}
.nota-guia{stroke:var(--tinta-tenue); stroke-width:1; fill:none}
.nota-fuerte{fill:var(--tinta); font-family:var(--display); font-size:13px; font-weight:700}
.nota-suave{fill:var(--tinta-media); font-family:var(--display); font-size:12px}
.horquilla{stroke:var(--alerta); stroke-width:1.25; fill:none}

.trazo{stroke-dasharray:1500; stroke-dashoffset:1500; animation:trazar 1.35s var(--curva) forwards}
.trazo-2{animation-delay:.18s}
@keyframes trazar{to{stroke-dashoffset:0}}
.aparece{opacity:0; animation:aparecer .6s ease-out 1.1s forwards}
@keyframes aparecer{to{opacity:1}}
.pulso{fill:none; stroke:var(--alerta); stroke-width:2; opacity:0; transform-origin:256.5px 199.6px; transform-box:view-box;
  animation:latir 1.4s ease-out 1.75s 1}
@keyframes latir{0%{opacity:.7; transform:scale(1)} 100%{opacity:0; transform:scale(3.2)}}

.sonda{opacity:0; transition:opacity .18s var(--curva); pointer-events:none}
.sonda.viva{opacity:1}
.sonda-guia{stroke:var(--tinta-tenue); stroke-width:1; stroke-dasharray:3 3}
.sonda-punto{stroke-width:2.4; fill:var(--papel-alto)}
.sonda-caja{fill:var(--papel-alto); stroke:var(--linea-fuerte); stroke-width:1; rx:6}
.sonda-mes{fill:var(--tinta); font-family:var(--display); font-size:12px; font-weight:700}
.sonda-txt{fill:var(--tinta-media); font-family:var(--cifra); font-size:11px; font-variant-numeric:tabular-nums}
.sonda-txt.con{fill:var(--azul)} .sonda-txt.sin{fill:var(--alerta)}
.zona-mes{fill:transparent; cursor:crosshair}

.confianza{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 32px;
  padding:24px 0; border-bottom:1px solid var(--linea);
}
.estrellas{color:var(--oro); font-size:15px; letter-spacing:.14em}
.confianza-dato{font-size:14.5px; color:var(--tinta-media)}
.confianza-dato b{color:var(--tinta); font-weight:700}
.publicos{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.publico{
  font-family:var(--dato); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tinta-media); background:var(--azul-lavado);
  border:1px solid var(--linea); border-radius:999px; padding:6px 14px;
}
.sellos{padding:34px 0 6px}
.sellos-rotulo{
  font-family:var(--dato); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tinta-tenue); text-align:center; margin-bottom:22px;
}
.sellos-fila{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:clamp(28px,5vw,64px)}
.sellos-fila img{
  height:38px; width:auto; opacity:.62; filter:saturate(.15);
  transition:opacity .28s var(--curva), filter .28s var(--curva), transform .28s var(--curva);
}
.sellos-fila img:hover{opacity:1; filter:saturate(1); transform:translateY(-2px)}

.visor{margin-top:44px}
.visor-pestanas{
  display:flex; flex-wrap:wrap; gap:6px; margin:0 auto 20px; justify-content:center;
  background:var(--azul-lavado); border:1px solid var(--linea);
  border-radius:999px; padding:6px; width:max-content; max-width:100%;
}
.visor-pestanas button{
  position:relative; overflow:hidden;
  font-family:inherit; font-size:14px; font-weight:600; letter-spacing:-.01em;
  color:var(--tinta-media); background:transparent; border:none; cursor:pointer;
  padding:9px 18px; border-radius:999px; white-space:nowrap;
  transition:background .2s var(--curva), color .2s var(--curva), box-shadow .2s var(--curva);
}
.visor-pestanas button:hover{color:var(--tinta)}
@media (max-width:639px){.visor-pestanas button{min-height:40px}}
.visor-pestanas button[aria-selected="true"]{background:var(--papel-alto); color:var(--azul); box-shadow:var(--sombra)}
.visor-progreso{
  position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px;
  background:var(--azul); transform:scaleX(0); transform-origin:left; opacity:0;
}
.visor.girando button[aria-selected="true"] .visor-progreso{opacity:.9; animation:avanzar var(--ritmo,5200ms) linear forwards}
.visor.girando.quieto button[aria-selected="true"] .visor-progreso{animation-play-state:paused}
@keyframes avanzar{from{transform:scaleX(0)} to{transform:scaleX(1)}}
.visor-marco{
  max-width:min(870px,100%); margin-inline:auto;
  transition:transform .35s var(--curva);
}
.visor:hover .visor-marco{transform:translateY(-3px)}
.visor-lienzo{
  position:relative; aspect-ratio:2408/1400;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
             linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  mask-composite:intersect;
}
.visor-lienzo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top left;
  border-radius:12px;
  opacity:0; transform:scale(1.015); transition:opacity .55s var(--curva), transform .9s var(--curva);
}
.visor-lienzo img.activa{opacity:1; transform:scale(1)}
.visor-pie{margin:18px auto 0; font-size:15px; color:var(--tinta-media); max-width:min(870px,100%); min-height:2.6em; transition:opacity .3s var(--curva)}
.visor-nota{max-width:min(870px,100%); margin-inline:auto}
.visor-nota{margin-top:10px; font-family:var(--dato); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-tenue)}



.voces{display:grid; gap:20px; margin-top:46px}
@media (min-width:760px){.voces{grid-template-columns:1fr 1fr}}
.voz{
  background:var(--papel-alto); border:1px solid var(--linea); border-radius:var(--radio);
  padding:28px 28px 26px; display:flex; flex-direction:column; gap:20px;
  transition:transform .24s var(--curva), box-shadow .24s var(--curva);
}
.voz:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.comillas{width:26px; height:26px; display:block; fill:var(--linea-fuerte)}
.voz p{font-size:15.5px; color:var(--tinta-media); line-height:1.66}
.voz-firma{display:flex; align-items:center; gap:14px; margin-top:auto; padding-top:18px; border-top:1px solid var(--linea)}
.retrato{width:54px; height:54px; border-radius:50%; flex:none; overflow:hidden; background:var(--azul-lavado); border:1px solid var(--linea)}
.retrato img{width:100%; height:100%; object-fit:cover; object-position:50% 42%; display:block; transition:transform .5s var(--curva)}
.voz:hover .retrato img{transform:scale(1.06)}
.voz-nombre{font-weight:700; font-size:15.5px; letter-spacing:-.02em}
.voz-cargo{font-size:13.5px; color:var(--tinta-tenue)}


@media (prefers-reduced-motion:reduce){
  .trazo{stroke-dashoffset:0; animation:none}
  .aparece{opacity:1; animation:none}
  .pulso{animation:none}
  .entrada::before{transform:none}
  .visor-progreso{animation:none !important; opacity:0 !important}
}