/* ─────────────────────────────────────────────────────────────────────────────
   La portada.

   Va encima de landing.css, que pone la paleta, la tipografía y los botones
   (.rdy-btn). Aquí solo está lo de esta página, y además se pisan —siempre
   dentro de `.portada`— la barra, el pie y los botones, que en landing.css son
   los de una página de venta: píldoras, degradados y resplandores.

   El tono es el del panel de dentro: fondo plano, superficies mates, líneas de
   1 px y tipografía firme. El color del cliente aparece en el botón principal y
   poco más; todo sale de --rdy-primary, que `partials/marca-colores.ejs`
   reescribe con su MARCA_COLOR. No hay ni un color de marca escrito a mano.
   ───────────────────────────────────────────────────────────────────────────── */

.portada {
  /* Superficies propias, más apagadas que las de landing.css: aquí no hay nada
     que tenga que brillar. */
  --p-superficie: #14141b;
  --p-superficie-2: #1a1a23;
  --p-linea: rgba(255, 255, 255, .09);
  --p-linea-fuerte: rgba(255, 255, 255, .17);

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* landing.css solo se lo pone a `.landing`, y esta página no lo es. */
.portada * { box-sizing: border-box; }
.portada a { text-decoration: none; color: inherit; }
.portada img { max-width: 100%; display: block; }

.portada-main { flex: 1; }
.p-wrap { width: min(1100px, calc(100% - 40px)); margin-inline: auto; }

/* ── Lo que se le pisa a landing.css ──────────────────────────────────────── */

/* Botones: rectángulos con esquina blanda, sin degradado y sin sombra de color.
   El primario es el color del cliente, plano. */
.portada .rdy-btn {
  border-radius: 9px;
  padding: 11px 18px;
  font-size: .93rem;
  font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.portada .rdy-btn:hover { transform: none; }
.portada .rdy-btn-lg { padding: 13px 22px; font-size: .97rem; }

.portada .rdy-btn-primary { background: var(--rdy-primary); box-shadow: none; }
.portada .rdy-btn-primary:hover {
  box-shadow: none;
  /* Si el navegador no entiende color-mix se queda el color plano de arriba:
     el botón no se ilumina al pasar por encima, y no pasa nada. */
  background: color-mix(in oklab, var(--rdy-primary) 88%, #ffffff);
}
.portada .rdy-btn-ghost { background: transparent; border-color: var(--p-linea-fuerte); }
.portada .rdy-btn-ghost:hover { background: rgba(255, 255, 255, .06); }

/* El selector de idioma se dibuja a sí mismo (partials/language-switcher.ejs)
   con forma de píldora, para ir a juego con los botones de landing.css. Aquí ya
   no son píldoras, así que se cuadra también. */
.portada .rdy-lang-btn { border-radius: 9px; padding: 11px 16px; font-size: .92rem; }
.portada .rdy-lang-btn:hover { transform: none; }
.portada .rdy-lang-menu { border-radius: 10px; }

/* La barra: fina, opaca y sin desenfoque. */
.portada .lnav {
  background: var(--rdy-bg);
  border-bottom: 1px solid var(--p-linea);
  backdrop-filter: none;
}
.portada .lnav-inner { height: 62px; }
.portada .lnav-brand { font-size: 1.04rem; font-weight: 700; }
.portada .lnav-brand img { width: 28px; height: 28px; border-radius: 7px; }

/* El pie, a una sola línea: landing.css lo dibuja con dos separadores (el suyo
   y el de .lfooter-bottom) porque allí arriba había cuatro columnas. */
.portada .lfooter { background: transparent; border-top: 0; padding: 0; }
.portada .lfooter-bottom {
  margin-top: 0;
  padding: 20px 0;
  border-top: 1px solid var(--p-linea);
}

/* ── El acceso ────────────────────────────────────────────────────────────── */

.p-acceso { padding: clamp(44px, 7vh, 76px) 0 clamp(40px, 6vh, 64px); }

.p-acceso-rejilla { display: grid; gap: 30px; align-items: center; grid-template-columns: minmax(0, 1fr); }
/* La segunda columna solo existe cuando hay estado que enseñar (hay puente al
   bot); si no, la identidad ocupa el ancho ella sola. */
.p-acceso-rejilla.con-estado { grid-template-columns: minmax(0, 1fr) 296px; }

.p-logo {
  width: 52px; height: 52px; border-radius: 12px; object-fit: cover;
  margin-bottom: 18px; border: 1px solid var(--p-linea);
}

.p-identidad h1 {
  margin: 0 0 6px;
  font-size: clamp(1.85rem, 4vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.15;
}
.p-lema { margin: 0 0 12px; font-size: 1rem; font-weight: 500; color: var(--rdy-text-dim); }
.p-desc { margin: 0 0 26px; max-width: 52ch; line-height: 1.65; font-size: .97rem; color: var(--rdy-text-dim); }

.p-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.p-nota { margin: 16px 0 0; font-size: .85rem; color: var(--rdy-text-faint); }

/* ── La tarjeta de estado ─────────────────────────────────────────────────── */

.p-estado {
  padding: 16px 18px;
  border: 1px solid var(--p-linea);
  border-radius: 12px;
  background: var(--p-superficie);
}
.p-estado h2 {
  margin: 0 0 4px;
  font-size: .72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--rdy-text-faint);
}
.p-estado dl { margin: 0; }
.p-fila {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--p-linea);
  font-size: .91rem;
}
.p-fila dt { color: var(--rdy-text-dim); }
.p-fila dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }

/* Verde y ámbar apagados: se leen de un vistazo sin encender la página. */
.p-senal { width: 7px; height: 7px; border-radius: 50%; background: var(--rdy-text-faint); flex: none; }
.es-linea .p-senal { background: #3fb950; }
.es-caido .p-senal { background: #d29922; }
.es-caido { color: var(--rdy-text-dim); }

/* ── Secciones ────────────────────────────────────────────────────────────── */

.p-seccion { padding: clamp(38px, 6vh, 60px) 0; border-top: 1px solid var(--p-linea); }

.p-cab { margin-bottom: 20px; }
.p-cab h2 { margin: 0 0 6px; font-size: 1.12rem; font-weight: 650; letter-spacing: -.012em; }
.p-cab p  { margin: 0; font-size: .92rem; color: var(--rdy-text-dim); }

/* ── Lo que trae ──────────────────────────────────────────────────────────── */

/* Cuatro columnas fijas, no `auto-fill`: los módulos del catálogo son 16 y así
   las filas salen enteras. Con columnas automáticas caían de cinco en cinco y
   el último se quedaba solo en su fila, que es justo lo que se ve. */
.p-modulos { display: grid; gap: 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.p-modulo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--p-linea); border-radius: 9px;
  background: var(--p-superficie);
  font-size: .9rem; font-weight: 500;
}
.p-modulo i {
  width: 16px; flex: none; text-align: center; font-size: .88rem;
  color: var(--rdy-text-faint);
  /* Un punto de marca, sin llegar al color entero: son dieciséis iconos. */
  color: color-mix(in srgb, var(--rdy-primary) 55%, var(--rdy-text-faint));
}

/* ── A mano ───────────────────────────────────────────────────────────────── */

.p-esenciales { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.p-esencial {
  display: block;
  padding: 16px 17px;
  border: 1px solid var(--p-linea); border-radius: 11px;
  background: var(--p-superficie);
  transition: background .15s ease, border-color .15s ease;
}
.p-esencial:hover { background: var(--p-superficie-2); border-color: var(--p-linea-fuerte); }
.p-esencial h3 {
  margin: 0 0 6px;
  display: flex; align-items: center; gap: 9px;
  font-size: .96rem; font-weight: 600;
}
.p-esencial h3 i { color: var(--rdy-text-faint); font-size: .88rem; width: 15px; text-align: center; }
.p-esencial p { margin: 0; font-size: .88rem; line-height: 1.55; color: var(--rdy-text-dim); }

/* ── Pantallas estrechas ──────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .p-acceso-rejilla.con-estado { grid-template-columns: minmax(0, 1fr); }
  .p-modulos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .p-acciones .rdy-btn { width: 100%; justify-content: center; }
  .p-modulos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portada .lfooter-bottom { flex-direction: column; gap: 8px; }
  .portada .lfooter-bottom a { margin: 0 14px 0 0; }
}