/* ════════════════════════════════════════════════════════════════════
   PRECIOS — los cuatro planes, uno al lado del otro
   ════════════════════════════════════════════════════════════════════
   En la portada caben tres tarjetas y poco más. Quien está decidiendo
   necesita otra cosa: ver **qué cambia exactamente** al subir de plan,
   y eso es una tabla, no tres listas de tres viñetas.

   Decisiones que no son de estética:

   · **La tabla se convierte en fichas en el móvil.** Cuatro columnas en
     una pantalla de 390 px obligan a desplazar a lo ancho, que es la
     peor manera de comparar nada. Debajo de 900 px cada plan se lee
     entero, uno tras otro.
   · **El precio anual no se inventa:** es el mensual por diez, porque el
     plan anual sale por el precio de diez meses. El conmutador reescribe
     la cifra desde ese número, no desde una lista aparte que se podría
     desincronizar.
   · **Lo que no incluye un plan sale como raya, no como aspa.** Un aspa
     roja en catorce filas convierte la tabla en una lista de reproches.
   ════════════════════════════════════════════════════════════════════ */

.prhero{padding:112px 0 0}
.prhero h1{font-size:clamp(34px,5vw,60px);font-weight:800;letter-spacing:-.035em;
  line-height:1.03;max-width:15ch;margin:0}
.prhero .sub{margin:14px 0 0;max-width:56ch}

/* ── El conmutador mensual / anual ────────────────────────────── */
.prciclo{display:inline-flex;align-items:center;gap:4px;margin-top:24px;
  background:#EFEDE6;border-radius:14px;padding:4px}
.prciclo button{border:none;background:transparent;
  padding:9px 18px;font:inherit;font-size:14.5px;font-weight:700;
  border-radius:10px;color:var(--soft);cursor:pointer;
  transition:background .22s,color .22s,box-shadow .22s}
.prciclo button.on{background:var(--bone);color:var(--ink);
  box-shadow:0 1px 3px rgba(12,11,9,.12)}
.prciclo .ahorro{margin-left:7px;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;color:var(--deep)}

/* ── Los cuatro planes ────────────────────────────────────────── */
.prgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:34px;align-items:stretch}
@media(max-width:1080px){.prgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.prgrid{grid-template-columns:1fr}}

.prplan{position:relative;display:flex;flex-direction:column;background:#fff;
  border:1.5px solid var(--line);border-radius:20px;padding:26px 24px 24px}
.prplan .pn{font-weight:800;font-size:19px;letter-spacing:-.015em}
.prplan .pd{font-size:13.5px;color:var(--soft);line-height:1.5;margin:5px 0 0;
  min-height:40px}
.prplan .pa{font-weight:800;font-size:40px;letter-spacing:-.025em;
  margin:16px 0 0;line-height:1}
.prplan .pa span{font-size:15px;font-weight:600;color:var(--soft);
  letter-spacing:0}
.prplan .pa em{font-style:normal;font-size:15px;font-weight:600;
  color:var(--soft);letter-spacing:0;margin-right:5px}
.prplan .pc{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  color:var(--soft);margin-top:7px;min-height:14px}
.prplan .pl{font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  color:var(--char);background:#FBFAF5;border:1px solid var(--line);
  border-radius:9px;padding:8px 10px;margin:16px 0 18px;line-height:1.45}
.prplan .btn{margin-top:auto;width:100%;box-sizing:border-box}

.prplan.feat{background:var(--acc);border-color:var(--acc)}
.prplan.feat .pd{color:rgba(12,11,9,.66)}
.prplan.feat .pa span{color:rgba(12,11,9,.62)}
.prplan.feat .pc{color:rgba(12,11,9,.6)}
.prplan.feat .pl{background:rgba(12,11,9,.1);border-color:rgba(12,11,9,.14);
  color:var(--accL)}
.prplan.feat .tag{position:absolute;top:-12px;left:24px;background:var(--ink);
  color:var(--bone);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 12px;border-radius:8px;font-weight:800}

/* ── La tabla ─────────────────────────────────────────────────── */
.prtabla{margin-top:60px}
.prtabla h2{font-size:clamp(24px,2.6vw,34px);font-weight:800;
  letter-spacing:-.025em;margin:0}
.prtabla > p{font-size:15.5px;color:var(--soft);margin:8px 0 0;max-width:60ch}

.prcomp{width:100%;border-collapse:collapse;margin-top:26px;
  font-size:14.5px;table-layout:fixed}
.prcomp th,.prcomp td{text-align:center;padding:13px 10px;
  border-bottom:1px solid var(--line)}
.prcomp th:first-child,.prcomp td:first-child{text-align:left;width:34%;
  color:var(--char);font-weight:600}
/* La cabecera se queda pegada arriba: en veinte filas, a mitad de tabla ya
   no se sabe qué columna es cuál. */
.prcomp thead th{position:sticky;top:70px;z-index:2;background:var(--bone);
  font-size:13px;font-weight:800;letter-spacing:-.01em;
  border-bottom:1.5px solid var(--line);padding-top:16px;padding-bottom:14px}
.prcomp thead th s{display:block;text-decoration:none;font-family:var(--mono);
  font-size:10px;letter-spacing:.06em;color:var(--soft);font-weight:500;
  margin-top:3px}
.prcomp thead th.feat{color:var(--deep)}
.prcomp tbody tr:hover{background:#FBFAF5}
.prcomp .gr td{background:#F3F1E9;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--soft);
  padding:10px;border-bottom:1px solid var(--line)}
.prcomp .si{display:inline-grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:var(--mist);color:var(--deep)}
.prcomp .si svg{width:12px;height:12px}
/* El «Sí» va dentro del tic para quien usa lector de pantalla: un ✓ suelto se
   lee como nada. Se esconde a la vista, no con `display:none`, que lo
   borraría también del lector. */
.prcomp .si .vo{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap}
.prcomp .no{color:#C4BFB3;font-size:17px;line-height:1}
.prcomp .val{font-weight:700;color:var(--ink)}

/* En móvil la tabla se parte en fichas: cada plan entero, uno tras otro. */
.prfichas{display:none;margin-top:26px;gap:14px;flex-direction:column}
.prficha{border:1.5px solid var(--line);border-radius:18px;background:#fff;
  padding:18px 18px 16px}
.prficha.feat{border-color:var(--acc)}
.prficha h3{font-size:17px;font-weight:800;margin:0 0 2px}
.prficha .pa{font-family:var(--mono);font-size:12px;color:var(--deep);
  margin-bottom:12px}
.prficha dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:9px 14px;
  font-size:14px}
.prficha dt{color:var(--soft)}
.prficha dd{margin:0;text-align:right;font-weight:700;color:var(--ink)}
.prficha .ok{color:var(--deep)}
@media(max-width:900px){
  .prcomp{display:none}
  .prfichas{display:flex}
}

/* ── La letra pequeña ─────────────────────────────────────────── */
.prnotas{margin-top:46px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.prnota{background:var(--bone);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px}
.prnota b{display:block;font-size:14.5px;font-weight:800;margin-bottom:5px}
.prnota p{margin:0;font-size:14px;color:var(--soft);line-height:1.6}
.prnota a{color:var(--deep);font-weight:700}

.prcta{margin:56px 0 0;border-radius:22px;background:
  radial-gradient(70% 120% at 0% 0%,rgba(14,159,110,.18),transparent 70%),
  #121714;
  color:#fff;padding:36px 34px;display:flex;align-items:center;gap:24px;
  flex-wrap:wrap}
.prcta h2{font-size:clamp(22px,2.4vw,30px);font-weight:800;
  letter-spacing:-.025em;margin:0 0 6px}
.prcta p{margin:0;color:#B8B3A8;font-size:15px;line-height:1.6;max-width:54ch}
.prcta .btn{margin-left:auto;flex:0 0 auto}
@media(max-width:760px){.prcta .btn{margin-left:0}}

@media(max-width:700px){.prhero{padding:92px 0 0}}