/*
 * La portada de Piku · SIRE4 (PRD-578): el estilo del diseño aprobado
 * (specs/…/PRD-367-…/mockups/portada-diseno.html), con las variables de tokens.css (los tokens de la app,
 * PRD-500). Sólo --color-*, --space-*, --radius-* y --font-family-base: el tema oscuro sale de los tokens.
 * Escrito a mano; ningún estilo en línea (la CSP es style-src 'self').
 */

:root { color-scheme: light dark; }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 52px; }

body {
  margin: 0;
  background: var(--color-background-surface);
  color: var(--color-text-primary);
  font-family: var(--font-family-base);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Un enlace dentro de un párrafo se distingue por algo más que el color. */
p a { text-decoration: underline; }
a:focus-visible { outline: var(--stroke-thick, 2px) solid var(--color-border-focus); outline-offset: 2px; }

.contenedor { max-width: 980px; margin: 0 auto; padding: 0 var(--space-600); }
.cifras { font-variant-numeric: tabular-nums; }

/* El encabezado fijo */
.encabezado {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
  background: color-mix(in srgb, var(--color-background-surface) 85%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border-subtle);
}
.encabezado__fila { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-400); }

.marca { display: flex; align-items: baseline; gap: var(--space-200); color: var(--color-text-primary); }
.marca:hover { text-decoration: none; }
.marca__nombre { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.marca__producto { font-size: 14px; font-weight: 500; color: var(--color-text-secondary); }

/* Los botones: cápsulas de 44 px, uno prominente por pantalla */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--space-600);
  border-radius: var(--radius-full);
  background: var(--color-brand-background);
  color: var(--color-text-on-brand);
  font-size: 17px;
  font-weight: 600;
  white-space: nowrap;
}
.boton:hover { background: var(--color-brand-background-hover); text-decoration: none; }
.boton--chico { height: 36px; padding: 0 var(--space-400); font-size: 14px; }
.boton--neutro { background: var(--color-background-control); color: var(--color-text-primary); }
.boton--neutro:hover { background: var(--color-border-default); }

/* Las secciones */
.seccion { padding: 96px 0; }
.seccion--alterna { background: var(--color-background-surface-alt); }
.apilado { display: flex; flex-direction: column; gap: var(--space-800); }
.encabezado-seccion { display: flex; flex-direction: column; gap: var(--space-300); }
.reparto { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-800); flex-wrap: wrap; }

.etiqueta {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.etiqueta--marca { color: var(--color-brand-text); }
.titulo-seccion { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 700; letter-spacing: -0.02em; }
.bajada { margin: 0; max-width: 560px; font-size: 21px; line-height: 1.4; color: var(--color-text-secondary); }
.nota { margin: 0; font-size: 15px; color: var(--color-text-secondary); }

/* Arriba */
/* Sin padding abajo, como en el diseño (ahí iba la ventana de la app): la sección siguiente pone los 96 px. */
.arriba { padding: 88px 0 0; }
.arriba__columna { display: flex; flex-direction: column; gap: var(--space-600); }
.titular { margin: 0; max-width: 900px; font-size: 56px; line-height: 1.05; font-weight: 700; letter-spacing: -0.02em; }
.arriba__acciones { display: flex; flex-direction: column; gap: var(--space-300); align-items: flex-start; }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-200) var(--space-600); }
.enlace-fuerte { font-size: 17px; font-weight: 500; }

/* Los planes */
.planes__nota { margin: 0; max-width: 360px; font-size: 17px; color: var(--color-text-secondary); }
.planes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-400); align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-500);
  padding: var(--space-800) var(--space-600);
  border-radius: var(--radius-large);
  background: var(--color-background-surface-alt);
}
.plan__nombre { margin: 0; font-size: 20px; font-weight: 600; }
.plan__para { margin: var(--space-100) 0 0; font-size: 15px; color: var(--color-text-secondary); }
.plan__precio { margin: 0; display: flex; align-items: baseline; gap: var(--space-150); }
.plan__monto { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.plan__periodo { font-size: 15px; color: var(--color-text-secondary); }
.plan__datos { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--space-200) var(--space-400); font-size: 15px; }
.plan__datos dt { color: var(--color-text-secondary); }
.plan__datos dd { margin: 0; font-weight: 600; }
.plan__comprar { margin-top: auto; }
.plan__insignia {
  position: absolute;
  top: var(--space-600);
  right: var(--space-600);
  padding: var(--space-100) var(--space-300);
  border-radius: var(--radius-full);
  background: var(--color-brand-background);
  color: var(--color-text-on-brand);
  font-size: 13px;
  font-weight: 600;
}
/*
 * El plan del medio se distingue del resto. En claro, oscuro (como en el diseño). En oscuro no se invierte
 * (una tarjeta clara encandila de noche): el azul grisáceo de los tokens. Todo texto, a 4,5:1 o más.
 */
:root {
  --plan-destacado-fondo: var(--color-text-primary);
  --plan-destacado-texto: var(--color-background-surface);
  --plan-destacado-suave: var(--color-text-disabled);
}
:root[data-theme="dark"] {
  --plan-destacado-fondo: var(--color-background-surface-hover);
  --plan-destacado-texto: var(--color-text-primary);
  --plan-destacado-suave: var(--color-text-secondary);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plan-destacado-fondo: var(--color-background-surface-hover);
    --plan-destacado-texto: var(--color-text-primary);
    --plan-destacado-suave: var(--color-text-secondary);
  }
}
.plan--destacado { background: var(--plan-destacado-fondo); color: var(--plan-destacado-texto); }
.plan--destacado .plan__para,
.plan--destacado .plan__periodo,
.plan--destacado .plan__datos dt { color: var(--plan-destacado-suave); }
.planes__pie { margin: 0; font-size: 15px; color: var(--color-text-secondary); }

/* El pie */
.pie { border-top: 1px solid var(--color-border-subtle); padding: var(--space-800) 0; }
.pie__columna { display: flex; flex-direction: column; gap: var(--space-400); font-size: 13px; color: var(--color-text-secondary); }
.pie__columna p { margin: 0; }
.pie__fila { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-300) var(--space-600); }
.pie__legal { display: flex; flex-wrap: wrap; gap: var(--space-200) var(--space-500); }
.pie__legal a { color: var(--color-text-secondary); }

/* El celular: una columna */
@media (max-width: 760px) {
  .seccion { padding: 56px 0; }
  .arriba { padding: 40px 0 0; }
  .titular { font-size: 40px; }
  .titulo-seccion { font-size: 32px; }
  .planes { grid-template-columns: 1fr; }
  .reparto { flex-direction: column; align-items: flex-start; }
  .pie__fila { flex-direction: column; align-items: flex-start; }
  .solo-escritorio { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}