/**
 * sesio.css — Capa de marca sobre la plantilla Appever.
 *
 * La plantilla viene compilada con Tailwind v4, donde TODO el acento rojo
 * se resuelve a través de la variable --color-red-500 (y su escala). Basta
 * con redefinir esas variables para que el rojo original pase a ser el azul
 * de Sesio, sin tocar una sola clase del markup.
 *
 * Paleta de marca:
 *   #005187 primario · #4d82bc medio · #84b6f4 claro · #c4dafa muy claro
 *
 * Se carga DESPUÉS de tailwind.css/output.css.
 */

:root,
:root.light,
:root.dark {
    /* Escala "red" reasignada al azul de marca. El 500 es el acento que usa
       la plantilla en botones, iconos y títulos de sección. */
    --color-red-50:  #f2f7fd;
    --color-red-100: #e3edfb;
    --color-red-200: #c4dafa;
    --color-red-300: #a5c7f7;
    --color-red-400: #84b6f4;
    --color-red-500: #005187;
    --color-red-600: #004876;
    --color-red-700: #003c63;
    --color-red-800: #00304f;
    --color-red-900: #00243b;
    --color-red-950: #001827;

    /* El rojo del corazón del footer y algún detalle suelto. */
    --color-red-700: #003c63;
}

/* Tipografía de marca: la plantilla usa Manrope; el resto del sistema usa
   Montserrat. Se mantiene Montserrat para que la landing y el panel se lean
   como el mismo producto. */
body,
.font-manrope {
    font-family: 'Montserrat', ui-sans-serif, system-ui, sans-serif;
}

/* El botón "back to top" y el switcher heredan el acento por variable, pero
   el gradiente del bloque de FAQs está escrito con utilidades from/via/to,
   que en v4 también resuelven por variable. No hace falta tocarlo. */

/* Ajuste fino: los títulos de sección en azul sobre fondo blanco ganan algo
   de peso visual respecto al rojo original, así que se recorta el tracking. */
h4, h5, h6 {
    letter-spacing: -0.01em;
}

/* Utilidades que la plantilla NO compiló.
   El CSS de Appever viene pre-construido con Tailwind v4 y solo incluye las
   clases que su propio markup usaba; `grid-cols-3` nunca se generó porque
   ninguna de sus páginas la utilizaba. La rejilla de planes sí la necesita,
   y aquí no hay paso de build, así que se declaran a mano respetando los
   breakpoints de la plantilla (md = 720px, lg = 992px). */
.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (width >= 720px) {
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
@media (width >= 992px) {
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Esquina de la etiqueta "Más elegido" del plan destacado. */
.rounded-bl-md {
    border-bottom-left-radius: 0.375rem;
}