/* ═══════════════════════════════════════════════════════════════════════════════════════
   1on1Spanish · pricing.css — hoja de la página /pricing
   Maqueta el Figma `/pricing — Desktop 1440` (284:2) y `Móvil — /pricing 390` (294:39).
   Mismas reglas que home.css: cero colores a mano, todo por token, y las cotas del diseño
   en px porque los bloques están medidos contra el Figma.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.pricing {
  --pr-ancho: 1440px;
  --pr-lateral: 72px;
}

.pricing .p1__inner,
.pricing .p2__inner,
.pricing .p3__inner,
.pricing .p4__inner,
.pricing .p5__inner,
.pricing .p6__inner,
.pricing .p7__inner,
.pricing .p8__inner {
  max-width: var(--pr-ancho);
  margin-inline: auto;
  padding-inline: var(--pr-lateral);
}

/* ── P1 · Hero + tarifas ──────────────────────────────────────────────────────────────
   Las cuatro tarifas tienen que entrar en el primer pantallazo (petición del cliente,
   12-ago): por eso el hero es corto y el aire está medido, no improvisado. */

.p1 { background: var(--c-crema-calida); }

.p1__inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 40px 48px;
}

.p1__titular {
  margin: 0;
  max-width: 62rem;
  font-size: var(--t-h1);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p1__entrada {
  margin: 0;
  max-width: 56rem;
  font-size: var(--t-lead);
  color: var(--c-navy);
}

.p1__garantias {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-top: var(--e-1);
}

/* La oferta es el único elemento saturado de la página, aquí y en P4. */
.p1__oferta {
  margin: 0;
  align-self: flex-start;
  background: var(--c-acento);
  color: var(--c-blanco);
  font-size: var(--t-muletilla);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: var(--r-pill);
}

.p1__etiqueta {
  margin: var(--e-3) 0 0;
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-pizarra);
}

.p1__planes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  align-items: stretch;
}

.p1__plan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--e-4);
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-lg);
  padding: 28px 24px;
}

/* El plan destacado se marca con el navy de marca, no con color saturado: el único
   elemento que puede gritar en esta página es la oferta del primer mes. */
.p1__plan--destacado { border: 2px solid var(--c-navy); }

.p1__cuerpo,
.p1__pie {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}

.p1__badge {
  align-self: flex-start;
  margin: 0;
  background: var(--c-crema-calida);
  color: var(--c-navy);
  font-size: var(--t-muletilla);
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  border-radius: var(--r-pill);
}

.p1__cadencia {
  margin: 0;
  font-size: var(--t-h4);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p1__precio {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}

/* Única página del sitio con el precio en grande (00-guia-editorial.md §5): aquí el
   usuario ha venido a comparar cifras y escondérselas genera más duda de la que ahorra. */
.p1__importe {
  font-size: var(--t-precio);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p1__periodo { font-size: var(--t-cuerpo); color: var(--c-pizarra); }
.p1__meta { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.p1__argumento { margin: 0; font-size: var(--t-tarjeta); color: var(--c-navy); }

/* Entre la cifra y el botón siempre van clases y precio por clase: nunca pegados. */
.p1__pie { border-top: 1px solid var(--c-borde); padding-top: var(--e-4); }

.p1__cta {
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  font-size: var(--t-tarjeta);
  border-radius: var(--r-pill);
}

/* Los tres planes no destacados llevan el botón en línea. El modificador se define aquí y
   no se hereda de home.css: esa hoja no se carga en esta página, y heredarla dejaba el
   texto en blanco sobre blanco (botones vacíos). */
.p1__cta--linea {
  background: var(--c-blanco);
  color: var(--c-acento);
  border-color: var(--c-acento);
}

.p1__cta--linea:hover {
  background: var(--c-acento);
  border-color: var(--c-acento);
  color: var(--c-blanco);
}

.p1__letra-pequena { margin: 0; font-size: var(--t-muletilla); color: var(--c-pizarra); }

.p1__ancla {
  margin: var(--e-1) 0 0;
  font-size: var(--t-tarjeta);
  color: var(--c-navy);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
}

.p1__ancla a { color: var(--c-acento); font-weight: 700; }

.p1__ayuda {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  background: var(--c-crema-oscura);
  border: 1px dashed var(--c-borde-calido);
  border-radius: var(--r-lg);
  padding: 24px 28px;
}

.p1__ayuda-titulo { margin: 0 0 4px; font-size: var(--t-h5); font-weight: 700; color: var(--c-navy); }
.p1__ayuda-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.p1__ayuda-cta { white-space: nowrap; border-radius: var(--r-pill); }

/* ── P2 · Why 25 minutes ─────────────────────────────────────────────────────────────── */

.p2 { background: var(--c-blanco); }

.p2__inner { padding-block: 72px; }

.p2__titular {
  margin: 0 0 var(--e-6);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p2__cols {
  display: grid;
  grid-template-columns: 1fr 560px;
  gap: 48px;
  align-items: center;
}

.p2__argumento p { margin: 0 0 var(--e-4); color: var(--c-pizarra); }
.p2__argumento p:last-child { margin-bottom: 0; }
.p2__lead { font-size: var(--t-lead); color: var(--c-navy) !important; }

.p2__comparativa {
  background: var(--c-crema-calida);
  border-radius: var(--r-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.p2__semana-titulo { margin: 0 0 var(--e-2); font-size: var(--t-muletilla); font-weight: 700; color: var(--c-navy); }

.p2__dias {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.p2__dia {
  background: var(--c-blanco);
  border: 1px solid var(--c-borde);
  border-radius: 10px;
  padding: 14px 0;
  text-align: center;
  font-size: var(--t-muletilla);
  font-weight: 700;
  color: var(--c-pizarra);
}

/* Gris = la clase que el estándar americano da una vez por semana; coral = las nuestras.
   El contraste entre las dos filas ES el argumento. */
.p2__dia--gris { background: #637482; border-color: #637482; color: var(--c-blanco); }
.p2__dia--coral { background: var(--c-coral); border-color: var(--c-coral); color: var(--c-navy); }

.p2__semana-nota { margin: var(--e-2) 0 0; font-size: var(--t-muletilla); color: var(--c-pizarra); }

/* ── P3 · Every plan includes ────────────────────────────────────────────────────────── */

.p3 { background: var(--c-blanco); border-top: 1px solid var(--c-borde); }

.p3__inner { padding-block: 72px; }

.p3__titular {
  margin: 0 0 var(--e-3);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p3__entrada { margin: 0 0 var(--e-6); font-size: var(--t-lead); color: var(--c-pizarra); }

.p3__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.p3__item {
  position: relative;
  background: var(--c-crema);
  border: 1px solid var(--c-borde);
  border-radius: var(--r-md);
  padding: 20px 20px 20px 46px;
  font-size: var(--t-tarjeta);
  color: var(--c-pizarra);
}

.p3__item::before {
  content: "✓";
  position: absolute;
  left: 20px;
  top: 18px;
  font-weight: 700;
  color: var(--c-ok);
}

.p3__item strong { color: var(--c-navy); font-weight: 700; }

/* ── P4 · Your first month is $1 ─────────────────────────────────────────────────────── */

.p4 { background: var(--c-crema); }

.p4__inner { padding-block: 56px; }

.p4__caja {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--c-acento);
  border-radius: var(--r-xl);
  padding: 40px 48px;
  color: var(--c-blanco);
}

.p4__titular { margin: 0 0 var(--e-3); font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-blanco); }
.p4__lead { margin: 0 0 var(--e-3); font-size: var(--t-lead); }
.p4__texto { margin: 0; font-size: var(--t-tarjeta); }

.p4__cta {
  flex: 0 0 auto;
  background: var(--c-blanco);
  border-color: var(--c-blanco);
  color: var(--c-acento);
  border-radius: var(--r-pill);
  padding: 18px 32px;
  white-space: nowrap;
}

.p4__cta:hover { background: var(--c-crema-calida); border-color: var(--c-crema-calida); color: var(--c-acento-hover); }

/* ── P5 · Cancel anytime ─────────────────────────────────────────────────────────────── */

.p5 { background: var(--c-blanco); }

.p5__inner { padding-block: 72px; }

.p5__titular {
  margin: 0 0 var(--e-6);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

.p5__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.p5__col {
  background: var(--c-crema-calida);
  border-radius: var(--r-md);
  padding: 24px;
}

.p5__col-titulo { margin: 0 0 var(--e-2); font-size: var(--t-h5); font-weight: 700; color: var(--c-navy); }
.p5__col-texto { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }

/* ── P6 · Respaldo ───────────────────────────────────────────────────────────────────── */

.p6 { background: var(--c-navy); color: var(--c-blanco); }

.p6__inner {
  padding-block: 44px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}

.p6__titular { margin: 0; font-size: var(--t-h5); font-weight: 700; color: var(--c-blanco); }
.p6__notas { margin: 0; font-size: var(--t-tarjeta); color: var(--c-ambar-suave); }
.p6__notas span { color: var(--c-texto-navy); }
.p6__cierre { margin: 0; font-size: var(--t-muletilla); color: var(--c-texto-navy); }

/* ── P7 · FAQ ────────────────────────────────────────────────────────────────────────── */

.p7 { background: var(--c-crema); }

.p7__inner { padding-block: 72px; max-width: 1000px; }

.p7__titular {
  margin: 0 0 var(--e-5);
  font-size: var(--t-h2);
  line-height: var(--i-titular);
  font-weight: var(--peso-extra);
  color: var(--c-navy);
}

/* ── P8 · Cierre ─────────────────────────────────────────────────────────────────────── */

.p8 { background: var(--c-blanco); }

.p8__inner {
  padding-block: 72px 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-4);
  text-align: center;
}

.p8__titular { margin: 0; font-size: var(--t-h2); line-height: var(--i-titular); font-weight: var(--peso-extra); color: var(--c-navy); }
.p8__texto { margin: 0; max-width: 44rem; font-size: var(--t-lead); color: var(--c-pizarra); }
.p8__cta { border-radius: var(--r-pill); padding: 18px 36px; }
.p8__alternativa { margin: 0; font-size: var(--t-tarjeta); color: var(--c-pizarra); }
.p8__alternativa a { color: var(--c-acento); font-weight: 700; }

/* ── Tablet ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .pricing { --pr-lateral: var(--e-6); }

  .p1__planes { grid-template-columns: repeat(2, 1fr); }
  .p2__cols { grid-template-columns: 1fr; gap: 32px; }
  .p3__lista { grid-template-columns: repeat(2, 1fr); }
  .p5__cols { grid-template-columns: 1fr; }
  .p4__caja { flex-direction: column; align-items: flex-start; }
  .p4__cta { width: 100%; text-align: center; }
}

/* ── Móvil (Figma `Móvil — /pricing 390`) ────────────────────────────────────────────── */

@media (max-width: 700px) {
  .pricing { --pr-lateral: 20px; }

  .p1__inner { padding-block: 24px 32px; gap: 12px; }
  .p1__titular { font-size: var(--t-h3); }
  .p1__entrada { font-size: var(--t-tarjeta); color: var(--c-pizarra); }

  /* El hero se recorta para que las tarifas entren cuanto antes: la entrada pierde el
     tramo largo y las garantías bajan por debajo de las tarjetas (siguen en la página,
     solo cambian de sitio). La oferta se queda arriba, que es la que empuja a comprar. */
  .p1__solo-ancho { display: none; }

  .p1__inner { display: flex; flex-direction: column; }
  .p1__oferta { width: 100%; text-align: center; }
  .p1__garantias { gap: var(--e-2); order: 2; margin-top: var(--e-3); }
  .p1__etiqueta { order: 1; }
  .p1__planes { order: 1; }
  .p1__ancla { order: 3; }
  .p1__ayuda { order: 4; }

  .p1__planes { grid-template-columns: 1fr; gap: 14px; }
  .p1__plan { padding: 20px; }

  /* En el pulgar lo que se compara es la frecuencia: cadencia y precio en la misma
     línea, y el importe deja de ser un titular suelto. */
  .p1__cuerpo { gap: var(--e-2); }
  .p1__cadencia { font-size: var(--t-h5); }
  .p1__importe { font-size: var(--t-h4); }
  .p1__plan--destacado .p1__badge { align-self: flex-start; }

  .p1__ayuda { flex-direction: column; align-items: stretch; padding: 20px; }
  .p1__ayuda-cta { width: 100%; text-align: center; }

  .p2__inner,
  .p3__inner,
  .p5__inner,
  .p7__inner { padding-block: 40px; }

  .p2__comparativa { padding: 20px 16px; }
  .p2__dias { gap: 6px; }
  .p2__dia { padding: 12px 0; }

  .p3__lista { grid-template-columns: 1fr; }
  .p4__inner { padding-block: 40px; }
  .p4__caja { padding: 28px 22px; border-radius: var(--r-lg); }
  .p6__inner { padding-block: 32px; }
  .p8__inner { padding-block: 40px 56px; }
  .p8__cta { width: 100%; }
}