.entrada{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 88% 0%, color-mix(in srgb,var(--celeste) 20%,transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--papel-alto) 0%, var(--papel) 100%);
  padding:clamp(44px,5.6vw,80px) 0 clamp(36px,4.5vw,56px);
}
.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:22px;
}
.ceja::before{content:""; width:28px; height:1.5px; background:var(--azul); flex:none}
.entrada h1{font-size:clamp(34px,4.3vw,54px); font-weight:800; letter-spacing:-.02em; max-width:20ch}
.entrada-bajada{margin-top:20px; font-size:18px; color:var(--tinta-media); max-width:58ch}
.entrada-bajada b{color:var(--tinta); font-weight:700}

.carrito{display:grid; gap:clamp(20px,3vw,36px); align-items:start}
@media (min-width:1000px){.carrito{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.configura{background:var(--papel-alto); border:1px solid var(--linea); border-radius:var(--radio); box-shadow:var(--sombra); padding:clamp(22px,3vw,32px)}
.configura h2{font-size:21px; font-weight:800; letter-spacing:-.025em}
.configura-sub{margin-top:6px; font-size:14.5px; color:var(--tinta-tenue)}

.bosquejo-nota{margin:0 0 20px; max-width:72ch; padding:10px 14px; border-radius:10px; background:color-mix(in srgb,var(--oro) 20%,transparent); border:1px solid color-mix(in srgb,var(--oro) 55%,transparent); font-size:13px; line-height:1.5; color:var(--tinta-media)}
.bosquejo-nota b{color:var(--tinta)}

.paso-titulo{margin-top:26px; font-family:var(--dato); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--tinta-tenue)}
.paso-titulo.primero{margin-top:0}

.planes-seccion{padding-top:clamp(12px,2vw,24px)}
.planes-banda{
  position:relative; overflow:visible; border-radius:clamp(20px,3vw,32px); border:1px solid var(--linea);
  background:
    radial-gradient(60% 70% at 100% 0%, color-mix(in srgb,var(--celeste) 26%,transparent) 0%, transparent 62%),
    radial-gradient(50% 60% at 0% 100%, color-mix(in srgb,var(--azul) 9%,transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--papel-alto) 0%, var(--azul-lavado) 100%);
  padding:clamp(30px,4.4vw,56px) clamp(22px,4vw,56px) clamp(34px,4.6vw,60px);
}
.planes-banda .paso-titulo{color:var(--azul); margin-top:0}
.planes-banda .titulo-seccion{margin-top:8px}
.tabla{display:grid; grid-template-columns:minmax(140px,.55fr) 1fr 1fr; grid-template-rows:repeat(5,auto); column-gap:clamp(14px,2vw,22px); margin-top:clamp(30px,4vw,44px)}
.rotulos,.col{display:grid; grid-row:1 / span 5; grid-template-rows:subgrid}
.rotulos .celda{padding:16px 0 14px; border-top:1px solid color-mix(in srgb,var(--azul) 16%,transparent)}
.rotulos .cabeza{border-top:0}
.rotulo{font-family:var(--dato); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue); line-height:1.5}
.col{
  position:relative; border:2px solid transparent; border-radius:18px; background:var(--papel-alto); color:var(--tinta); cursor:pointer;
  box-shadow:0 1px 2px rgba(20,30,56,.06), 0 22px 44px -22px rgba(20,30,56,.32);
  transition:transform .28s var(--curva), box-shadow .28s var(--curva), border-color .2s;
}
.col:hover{transform:translateY(-3px)}
.col.elegida{border-color:var(--azul); transform:translateY(-8px); box-shadow:0 2px 4px rgba(20,30,56,.08), 0 34px 60px -24px rgba(20,30,56,.42), 0 0 0 6px color-mix(in srgb,var(--azul) 12%,transparent)}
.col:focus-visible{outline:3px solid color-mix(in srgb,var(--azul) 40%,transparent); outline-offset:3px}
@media (prefers-reduced-motion:reduce){.col,.col.elegida,.col:hover{transform:none; transition:none}}
.col .celda{padding:14px 20px; border-top:1px solid var(--linea); font-size:14.5px; line-height:1.5; color:var(--tinta-media)}
.col .celda b{color:var(--tinta); font-weight:700}
.col .cabeza{border-top:0; padding:24px 20px 20px}
.col-nombre{font-size:20px; font-weight:800; letter-spacing:-.025em; color:var(--tinta)}
.col-quien{margin-top:6px; font-size:14px; color:var(--tinta-media); line-height:1.45; min-height:2.9em}
.col-precio{font-family:var(--cifra); margin-top:14px; font-size:clamp(30px,3.2vw,38px); font-weight:800; letter-spacing:.02em; line-height:1; font-variant-numeric:tabular-nums; color:var(--tinta)}
.col .cabeza{container-type:inline-size}
.col-precio{font-size:min(clamp(30px,3.2vw,38px), max(12px, calc(18.44cqi - 8.23px)))}
.col-precio:lang(en){font-size:min(clamp(30px,3.2vw,38px), max(12px, calc(14.29cqi - 8.46px)))}
.col-precio small{font-size:14px; font-weight:600; letter-spacing:0; color:var(--tinta-tenue)}
.col-precio > span{margin-right:-.04em}
.col-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)}
.col-precio-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}
.col-elegir{margin-top:18px; width:100%; justify-content:center; cursor:pointer}
.col-elegido{display:none; margin-top:18px; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 22px; border-radius:11px; font-weight:700; font-size:15px; color:var(--azul); background:var(--azul-lavado)}
.col-elegido svg{width:16px; height:16px}
.col.elegida .col-elegir{display:none}
.col.elegida .col-elegido{display:inline-flex}
.col-marca{
  position:absolute; top:-15px; left:50%; transform:translateX(-50%); z-index:1; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:999px;
  background:var(--oro); color:#1B1500; font-family:var(--dato); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:0 6px 16px -8px rgba(20,30,56,.45);
}
.col-marca svg{width:13px; height:13px}
@media (max-width:759px){
  .tabla{grid-template-columns:1fr; grid-template-rows:none; row-gap:26px}
  .rotulos{display:none}
  .col{grid-row:auto; grid-template-rows:none}
  .col[data-plan="empresa"]{order:-1}
  .col.elegida,.col:hover{transform:none}
  .col .celda[data-rotulo]::before{content:attr(data-rotulo); display:block; font-family:var(--dato); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--tinta-tenue); margin-bottom:3px}
}

.carrito-seccion{margin-top:clamp(40px,5vw,64px)}
.configura-cabeza{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.cambiar{font-size:14px; font-weight:600; color:var(--azul); text-decoration:none; white-space:nowrap; padding-top:6px}
.cambiar:hover{text-decoration:underline; text-underline-offset:3px}
.marca-elegida{width:18px; height:18px; border-radius:50%; border:2px solid var(--linea-fuerte); display:grid; place-items:center; flex:none}
.elegida .marca-elegida{border-color:var(--azul); background:var(--azul)}
.elegida .marca-elegida::after{content:""; width:7px; height:7px; border-radius:50%; background:#fff}

.periodo{display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-top:12px; background:var(--azul-lavado); border:1px solid var(--linea); border-radius:999px; padding:5px}
.periodo button{
  font-family:inherit; font-size:15.5px; font-weight:700; letter-spacing:-.01em; cursor:pointer;
  color:var(--tinta-media); background:transparent; border:none; border-radius:999px; padding:12px 18px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px; transition:background .2s var(--curva), color .2s, box-shadow .2s;
}
.periodo button[aria-pressed="true"]{background:var(--papel-alto); color:var(--azul); box-shadow:var(--sombra)}
.periodo .ahorro{font-family:var(--dato); font-size:10.5px; font-weight:500; letter-spacing:.06em; color:var(--oro-hondo); background:color-mix(in srgb,var(--oro) 28%,transparent); border-radius:999px; padding:3px 8px}

.tarifa{margin-top:14px; border-radius:14px; padding:18px 22px; background:var(--azul-lavado)}
.tarifa-cuerpo{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; transition:opacity .16s var(--curva), transform .16s var(--curva)}
.tarifa-cuerpo.cambiando{opacity:0; transform:translateY(4px)}
.tarifa-nombre{font-size:17px; font-weight:800; letter-spacing:-.02em; color:var(--tinta)}
.tarifa-detalle{font-size:16px; color:var(--tinta-media); line-height:1.5}
.tarifa-detalle b{color:var(--azul); font-weight:800}
.iva{margin-top:6px; font-family:var(--dato); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-tenue)}
.iva-carrito{margin:4px 0 0; color:var(--banda-tenue)}
.tamano{margin-top:12px; display:grid; gap:12px}
.bloque{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:14px 16px; border:1px solid var(--linea); border-radius:12px; background:var(--papel)}
.bloque h3{font-size:15px; font-weight:700}
.bloque p{margin-top:3px; font-size:13.5px; color:var(--tinta-media)}
.bloque p b{font-family:var(--cifra); color:var(--azul); font-variant-numeric:tabular-nums}
.paso{display:inline-flex; align-items:center; gap:4px; background:var(--papel-alto); border:1.5px solid var(--linea-fuerte); border-radius:999px; padding:3px}
.paso button{width:32px; height:32px; border-radius:50%; border:none; background:transparent; color:var(--azul); font-size:18px; font-weight:700; cursor:pointer; display:grid; place-items:center; transition:background .15s}
.paso button:hover{background:var(--azul-lavado)}
.paso button:disabled{color:var(--linea-fuerte); cursor:not-allowed; background:transparent}
.paso output{min-width:52px; text-align:center; font-family:var(--cifra); font-size:14px; font-weight:500; color:var(--tinta); font-variant-numeric:tabular-nums}
.h3-nota{font-weight:500; color:var(--tinta-tenue); font-size:.86em}
.ahorro-bloque b{color:var(--azul)}
.salto{display:none; margin-top:10px; padding:10px 12px; border-radius:10px; background:var(--azul-lavado); font-size:13px; line-height:1.5; color:var(--tinta)}
.salto.viva{display:block}
.salto button{font:inherit; font-weight:700; color:var(--azul); background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.tope{margin-top:8px; font-size:13px; color:var(--tinta-tenue)}
.tope b{color:var(--tinta)}
@media (max-width:639px){
  .periodo .ahorro{display:none}
  .bloque{grid-template-columns:1fr; gap:10px}
  .bloque .paso{justify-self:stretch; justify-content:space-between; padding:4px}
  .paso button{width:40px; height:40px}
}
.tamano-nota{font-size:13px; color:var(--tinta-tenue); margin-top:2px}

.resumen{background:linear-gradient(150deg, var(--banda) 0%, var(--banda-honda) 100%); color:var(--banda-tinta); border-radius:var(--radio); padding:clamp(22px,3vw,30px); position:sticky; top:96px}
.resumen h2{color:var(--banda-tenue); text-transform:uppercase; font-family:var(--dato); font-weight:500; letter-spacing:.12em; font-size:11px}
.resumen-lineas{margin-top:18px; display:grid; gap:10px}
.resumen-lineas div{display:flex; justify-content:space-between; gap:14px; font-size:14.5px; color:var(--banda-tenue)}
.resumen-lineas div b{font-family:var(--cifra); color:var(--banda-tinta); font-weight:600; font-variant-numeric:tabular-nums; text-align:right}
.resumen-total{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14)}
.resumen-total .al-mes{font-size:14px; color:var(--banda-tenue)}
.resumen-total .cifra{font-family:var(--cifra); font-size:clamp(40px,4.2vw,52px); font-weight:800; letter-spacing:.02em; line-height:1.05; color:var(--oro); font-variant-numeric:tabular-nums; margin-top:6px}
.resumen-total{container-type:inline-size}
.resumen-total .cifra{font-size:min(clamp(40px,4.2vw,52px), max(12px, calc(15.72cqi - 7.89px)))}
.resumen-total .cifra:lang(en){font-size:min(clamp(40px,4.2vw,52px), max(12px, calc(12.6cqi - 8.42px)))}
.resumen-total .cifra small{font-size:16px; font-weight:600; letter-spacing:0; color:var(--banda-tenue)}
.resumen-total .cifra > span{margin-right:-.04em}
.resumen-total .hoy{margin-top:8px; font-size:12px; color:var(--banda-tenue)}
.resumen-total .hoy b{font-family:var(--cifra); color:var(--banda-tinta); font-weight:600; font-variant-numeric:tabular-nums}
.resumen .campo{margin-top:18px}
.resumen .dos{display:grid; gap:12px}
@media (min-width:420px){.resumen .dos{grid-template-columns:1fr 1fr}}
.resumen .dos .campo{margin-top:0}
.resumen label span{font-weight:500; color:var(--banda-tenue); opacity:.8}
.resumen .campo-ayuda{margin-top:6px; font-size:12px; color:var(--banda-tenue)}
.resumen-datos{margin-top:18px; display:grid; gap:12px}
.resumen label{display:block; font-size:12.5px; font-weight:600; color:var(--banda-tenue); margin-bottom:7px}
.resumen input{width:100%; font-family:inherit; font-size:15px; color:var(--tinta); background:var(--papel-alto); border:1.5px solid transparent; border-radius:10px; padding:12px 14px}
.resumen input:focus{outline:none; border-color:var(--celeste)}
.resumen .campo-error{display:none; margin-top:6px; font-size:12.5px; color:#F2A79A}
.resumen .campo.mal .campo-error{display:block}
.resumen .boton-claro{width:100%; justify-content:center; margin-top:14px; background:var(--celeste); color:#0B1226; font-size:16px; padding:15px 20px}
.resumen .boton-claro:hover{transform:translateY(-2px)}
.resumen .boton-claro[disabled]{opacity:.6; cursor:progress; transform:none}
.resumen-seguro{list-style:none; margin:14px 0 0; padding:12px 0 0; border-top:1px solid color-mix(in srgb,var(--banda-tinta) 14%,transparent); display:grid; gap:7px}
.resumen-seguro li{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; line-height:1.45; color:var(--banda-tinta)}
.resumen-seguro svg{width:15px; height:15px; flex:none; margin-top:1px; color:var(--celeste)}
.resumen-nota{margin-top:12px; font-size:12.5px; color:var(--banda-tenue); line-height:1.5}
.resumen-nota a{color:var(--celeste); text-decoration:none}
.resumen-estado{display:none; margin-top:16px; padding:14px 16px; border-radius:12px; background:rgba(255,255,255,.08); font-size:14.5px; line-height:1.5}
.resumen-estado.viva{display:block}
.resumen-estado b{color:#fff}
.resumen.en-espera .solo-compra{display:none}

.mini-carrito{
  position:fixed; right:20px; bottom:20px; z-index:26; width:min(360px,calc(100vw - 24px));
  display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"volver datos" "pagar pagar"; gap:8px 12px; align-items:start;
  background:linear-gradient(150deg, var(--banda) 0%, var(--banda-honda) 100%); color:var(--banda-tinta);
  border-radius:16px; padding:14px 16px 14px; box-shadow:var(--sombra-alta);
  opacity:0; transform:translateY(14px) scale(.98); pointer-events:none;
  transition:opacity .28s var(--curva), transform .32s var(--curva), bottom .2s;
}
.mini-carrito.viva{opacity:1; transform:none; pointer-events:auto}
.mini-volver{grid-area:volver; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; border:1px solid color-mix(in srgb,var(--banda-tinta) 22%,transparent); color:var(--banda-tinta); text-decoration:none; margin-top:2px}
.mini-volver svg{width:12px; height:12px}
.mini-volver:hover{background:color-mix(in srgb,var(--banda-tinta) 10%,transparent)}
.mini-datos{grid-area:datos; min-width:0}
.mini-plan{margin:0; font-family:var(--dato); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--banda-tenue); line-height:1.4}
.mini-precio{font-family:var(--cifra); margin:2px 0 0; font-size:22px; font-weight:800; letter-spacing:.02em; line-height:1.1; color:var(--oro); font-variant-numeric:tabular-nums; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap}
.mini-datos{container-type:inline-size}
.mini-precio{font-size:min(22px, max(12px, calc(16.29cqi - 7.8px)))}
.mini-precio:lang(en){font-size:min(22px, max(12px, calc(12.97cqi - 7.97px)))}
.mini-precio small{font-size:13px; font-weight:600; letter-spacing:0; color:var(--banda-tenue)}
.mini-precio > b{font-weight:inherit; margin-right:-.02em}
.mini-iva{font-family:var(--dato); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--banda-tenue); font-weight:500}
.mini-pagar{grid-area:pagar; margin-top:4px; width:100%; justify-content:center; padding:11px 16px; font-size:14.5px; cursor:pointer; border:0; background:var(--celeste); color:#0B1226}
.mini-pagar:hover{transform:translateY(-1px)}
@media (max-width:639px){.mini-carrito{right:10px; left:64px; bottom:10px; width:auto}}
@media (prefers-reduced-motion:reduce){.mini-carrito{transition:none; transform:none}}

.aviso-pago{border:0; padding:0; background:transparent; max-width:min(520px,calc(100vw - 32px)); width:100%}
.aviso-pago::backdrop{background:rgba(5,25,42,.55); backdrop-filter:blur(3px)}
.aviso-pago-caja{margin:0; background:var(--papel-alto); color:var(--tinta); border-radius:var(--radio); padding:clamp(24px,4vw,36px); box-shadow:var(--sombra-alta); text-align:center}
.aviso-pago-icono{width:52px; height:52px; border-radius:50%; margin:0 auto 16px; display:grid; place-items:center; background:var(--azul-lavado); color:var(--azul)}
.aviso-pago-icono svg{width:26px; height:26px}
.aviso-pago h3{font-size:clamp(20px,2.4vw,24px); font-weight:800; margin:0 0 10px; letter-spacing:-.02em}
.aviso-pago p{margin:0; font-size:15.5px; line-height:1.6; color:var(--tinta-media)}
.aviso-pago p a{color:var(--azul); font-weight:600; text-decoration:none}
.aviso-pago-acciones{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px}
.aviso-pago-acciones .boton{cursor:pointer}

.incluye{display:grid; gap:14px 28px; margin-top:38px}
@media (min-width:720px){.incluye{grid-template-columns:1fr 1fr}}
.incluye li{list-style:none; display:flex; gap:12px; align-items:flex-start; font-size:16px; color:var(--tinta); line-height:1.5}
.incluye li svg{width:20px; height:20px; flex:none; margin-top:2px}
.incluye li small{display:block; font-size:14px; color:var(--tinta-media)}
.incluye ul{margin:0; padding:0; display:contents}

.frente{display:grid; gap:1px; margin-top:38px; background:var(--linea); border:1px solid var(--linea); border-radius:var(--radio); overflow:hidden}
@media (min-width:720px){.frente{grid-template-columns:1fr 1fr}}
.frente-col{background:var(--papel-alto); padding:26px 28px}
.frente-col h3{font-size:19px; font-weight:800; letter-spacing:-.02em; margin-bottom:12px}
.frente-col li{list-style:none; font-size:15.5px; color:var(--tinta-media); padding:8px 0; border-top:1px solid var(--linea)}
.frente-col li b{color:var(--tinta)}
.frente-col ul{margin:0; padding:0}

.dudas{display:grid; gap:16px; margin-top:38px}
@media (min-width:860px){.dudas{grid-template-columns:repeat(3,1fr)}}
.duda{padding-top:18px; border-top:2px solid var(--azul)}
.duda h3{font-size:16.5px; font-weight:700; margin-bottom:8px}
.duda p{font-size:15px; color:var(--tinta-media); line-height:1.6}
.duda a{color:var(--azul); text-decoration:none; font-weight:600}