/* /planes/ · página de pruebas (8-oct-2026): sólo lo que portada-v1.css no trae. Una idea por sección y poco texto:
   una tarjeta lleva tipo, nombre, precio, una cifra y un botón. Tamaños: 14 · 16 · 18 · 20 · 22 · 42 (× --u), los de la portada; nada baja.
   Curvas: sólo --ease-ui (interfaz). Sin movimiento propio: la capa movimiento-v1.* se añade desde fuera, y con movimiento reducido no se mueve nada. */

/* ── portada de planes: una frase, sin pantalla entera (los planes asoman ya en la primera) ─────── */
.pg-planes .hero { min-height:0; padding-top:clamp(108px, 15svh, 180px); padding-bottom:clamp(36px, 5svh, 64px) }
.pg-planes .aviso-et { cursor:default; padding:0 calc(20 * var(--u)); background:rgba(255, 255, 255, .82) }
.pg-planes .aviso-et:hover { border-color:var(--line); color:var(--ink-3) }
.pg-planes .hero .lede { margin-top:clamp(18px, 2.4svh, 30px); max-width:24em }

/* ── las cuatro tarjetas ──────────────────────────────────────────────────────────────────────── */
.sec-planes { padding-top:0; padding-bottom:clamp(40px, 5vw, 88px) }
.pl-cards { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:clamp(28px, 3vw, 40px) clamp(14px, 1.6vw, 28px); align-items:stretch }
.pl-card { position:relative; display:flex; flex-direction:column; padding:calc(30 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)); border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra);
  outline:2px solid transparent; outline-offset:5px; transition:outline-color .15s var(--ease-ui) }
.pl-et { font-size:var(--fs-s); font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1.3; color:var(--ink-3) }
.pl-nombre { margin-top:calc(8 * var(--u)); font-size:calc(22 * var(--u)); font-weight:500; line-height:1.25; letter-spacing:-.015em }
.pl-precio { margin-top:calc(22 * var(--u)); display:flex; flex-direction:column; gap:calc(6 * var(--u)) }
.pl-precio b { font-size:calc(42 * var(--u)); font-weight:500; line-height:1.05; letter-spacing:-.035em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.pl-precio span { font-size:var(--fs-s); line-height:1.4; color:var(--ink-3) }
.pl-uso { margin:calc(24 * var(--u)) 0 calc(28 * var(--u)); padding-top:calc(20 * var(--u)); border-top:1px solid var(--line); font-size:var(--fs-b); line-height:1.4; color:var(--ink-3); text-wrap:pretty }
.pl-uso b { font-weight:500; color:var(--ink) }
.pl-card .pill { width:100%; margin-top:auto }
/* el recomendado: tinta (la única tarjeta oscura) */
.pl-rec { background:var(--ink); color:#f7f8fa }
.pl-rec .pl-et, .pl-rec .pl-precio span { color:#a9aeb8 }
.pl-rec .pl-uso { border-top-color:rgba(255, 255, 255, .16); color:#c4c8d0 }
.pl-rec .pl-uso b { color:#fff }
.pl-rec .pill-white:hover { background:#fff; border-color:#fff; box-shadow:0 0 0 3px rgba(255, 255, 255, .22) }
/* el que el selector recomienda: un marco y una etiqueta; sin selector no existe */
.pl-tag { display:none; position:absolute; z-index:2; top:calc(-16 * var(--u)); left:50%; translate:-50% 0; align-items:center; height:calc(32 * var(--u)); padding:0 calc(16 * var(--u)); border-radius:999px;
  background:var(--ink); color:#fff; box-shadow:0 0 0 3px var(--bg); font-size:var(--fs-s); font-weight:500; white-space:nowrap }
.pl-card.pl-sel { outline-color:var(--ink) }
.pl-card.pl-sel .pl-tag { display:inline-flex }
.pl-nota { margin-top:clamp(28px, 3vw, 48px); text-align:center; font-size:var(--fs-b); line-height:1.5; color:var(--ink-3) }

/* ── el selector ──────────────────────────────────────────────────────────────────────────────── */
.sec-elige { padding-top:clamp(40px, 5vw, 96px) }
.sel { width:min(100%, calc(1040 * var(--u))); margin:clamp(32px, 3.6vw, 56px) auto 0; padding:clamp(24px, 2.6vw, 48px); border-radius:calc(28 * var(--u)); background:#fff; box-shadow:var(--sombra) }
.sel-fila { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 56px) }
.sel-cab { display:flex; align-items:baseline; justify-content:space-between; gap:calc(14 * var(--u)); margin-bottom:calc(4 * var(--u)) }
.sel-cab label { font-size:var(--fs-b); font-weight:500; line-height:1.3; color:var(--ink-3) }
.sel-cab output { flex:none; font-size:calc(30 * var(--u)); font-weight:500; line-height:1.1; letter-spacing:-.025em; font-variant-numeric:tabular-nums; color:var(--ink) }
.sel input[type="range"] { --p:0%; -webkit-appearance:none; appearance:none; display:block; width:100%; height:calc(44 * var(--u)); min-height:32px; margin:0; padding:0; background:transparent; cursor:pointer; touch-action:pan-y }
.sel input[type="range"]:focus { outline:none }
.sel input[type="range"]::-webkit-slider-runnable-track { height:calc(6 * var(--u)); min-height:5px; border-radius:999px;
  background:linear-gradient(var(--ink), var(--ink)) 0 0 / var(--p) 100% no-repeat, #8b919d }
.sel input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; box-sizing:border-box; width:calc(30 * var(--u)); height:calc(30 * var(--u)); min-width:26px; min-height:26px; margin-top:calc(-12 * var(--u));
  border-radius:50%; border:3px solid #fff; background:var(--ink); box-shadow:0 0 0 1px rgba(14, 15, 18, .22), 0 8px 16px -6px rgba(14, 15, 18, .55); transition:transform .15s var(--ease-ui) }
.sel input[type="range"]:active::-webkit-slider-thumb { transform:scale(1.08) }
.sel input[type="range"]:focus-visible::-webkit-slider-thumb { outline:2px solid var(--ink); outline-offset:3px }
.sel input[type="range"]::-moz-range-track { height:calc(6 * var(--u)); min-height:5px; border-radius:999px; background:#8b919d }
.sel input[type="range"]::-moz-range-progress { height:calc(6 * var(--u)); min-height:5px; border-radius:999px; background:var(--ink) }
.sel input[type="range"]::-moz-range-thumb { box-sizing:border-box; width:calc(30 * var(--u)); height:calc(30 * var(--u)); min-width:26px; min-height:26px; border-radius:50%; border:3px solid #fff; background:var(--ink);
  box-shadow:0 0 0 1px rgba(14, 15, 18, .22), 0 8px 16px -6px rgba(14, 15, 18, .55) }
.sel input[type="range"]:focus-visible::-moz-range-thumb { outline:2px solid var(--ink); outline-offset:3px }
.sel-res { margin-top:clamp(24px, 2.6vw, 40px); padding-top:clamp(20px, 2vw, 32px); border-top:1px solid var(--line); min-height:calc(132 * var(--u)); display:flex; flex-direction:column; justify-content:center }
.sel-vacio { font-size:var(--fs-l); line-height:1.4; color:var(--ink-3) }
.sel-res[data-estado="listo"] .sel-vacio, .sel-res[data-estado="vacio"] .sel-dato { display:none }
.sel-et { font-size:var(--fs-s); font-weight:600; letter-spacing:.07em; text-transform:uppercase; line-height:1.3; color:var(--ink-3) }
.sel-dato { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:calc(22 * var(--u)) }
.sel-dato .sel-et { flex:0 0 100%; margin-bottom:calc(6 * var(--u)) }
.sel-n { font-size:calc(42 * var(--u)); font-weight:500; line-height:1.1; letter-spacing:-.035em }
.sel-p { font-size:var(--fs-b); line-height:1.4; color:var(--ink-3) }
.sel-mas { display:none; margin-top:calc(10 * var(--u)); font-size:var(--fs-b); line-height:1.4; color:var(--ink-3) }
.sel-res[data-fin="si"] .sel-mas { display:block }
.sel-res[data-estado="vacio"] .sel-mas { display:none }
.sel-orient { margin-top:calc(12 * var(--u)); font-size:var(--fs-s); line-height:1.4; color:var(--ink-3) }

/* ── dudas: dos, cortas ───────────────────────────────────────────────────────────────────────── */
.sec-dudas { padding-top:clamp(40px, 5vw, 96px) }
.pl-dudas { width:min(100%, calc(1040 * var(--u))); margin:clamp(32px, 3.6vw, 56px) auto 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, 3vw, 56px) }
.pl-duda { padding-top:calc(24 * var(--u)); border-top:1px solid var(--line-2) }
.pl-duda h3 { font-size:calc(22 * var(--u)); font-weight:500; line-height:1.25; letter-spacing:-.015em }
.pl-duda p { margin-top:calc(10 * var(--u)); font-size:var(--fs-l); line-height:1.5; color:var(--ink-3); text-wrap:pretty }

/* ── tableta y móvil ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) { .pl-cards { grid-template-columns:repeat(2, minmax(0, 1fr)) } }
@media (max-width: 640px) {
  .pg-planes .hero { padding-top:112px; padding-bottom:32px }
  .pl-cards { grid-template-columns:minmax(0, 1fr) }
  .pl-card { padding:26px 24px 24px }
  .pl-precio b { font-size:40px }
  .sel { padding:22px 20px 20px }
  .sel-fila, .pl-dudas { grid-template-columns:minmax(0, 1fr) }
  .sel-cab output { font-size:28px }
  .sel-n { font-size:40px }
}