/* ==============================================================
   Fundación DespertArte — Sistema de diseño
   Variables, reinicio y utilidades compartidas por el sitio
   público y el panel de administración.
   ============================================================== */

:root {
    /* ---- Colores principales (documento de marca) ---- */
    --rosa:          #ef2e5a;
    --amarillo:      #fff10f;
    --blanco:        #ffffff;

    /* ---- Secundarios derivados ----
       El rosa de marca tiene dos limitaciones de contraste medidas:
         · como texto sobre blanco  → 3.9:1  (AA exige 4.5)
         · como fondo con texto blanco → 4.03:1  (AA exige 4.5)
       Por eso se derivan dos tonos y cada uno tiene un uso definido:
         --rosa        decorativo (bordes, íconos, theme-color)
         --rosa-boton  fondo de botón con texto blanco  → 4.64:1
         --rosa-texto  texto sobre fondo claro          → 5.96:1 */
    --rosa-boton:    #e02350;
    --rosa-oscuro:   #c01f45;
    --rosa-texto:    #c01f45;
    --rosa-suave:    #fde8ee;
    --rosa-borde:    #f9c4d2;

    /* Añadidos del rediseño de 2026-08:
         --rosa-hondo   profundidad dentro de las bandas de color
         --rosa-lavado  fondo teñido de rosa; alterna con el blanco en lugar
                        del crema y es lo que da presencia al rosa sin
                        recurrir a texto pequeño, que no cumpliría contraste */
    --rosa-hondo:    #a81a3c;
    --rosa-lavado:   #fff0f4;

    --amarillo-oscuro: #d4c800;
    --amarillo-suave:  #fffbcc;

    /* ---- Neutros ---- */
    --tinta:         #1a1320;
    --tinta-suave:   #3d3446;
    --gris:          #6b6472;
    --gris-claro:    #a39daa;
    /* El borde no es gris puro: lleva un sesgo hacia el rosa de marca, así
       las tarjetas se leen como parte del sistema y no como caja neutra. */
    --borde:         #f0e3e8;
    --borde-suave:   #f0edf2;
    /* Verde salvia con sesgo amarillo: Cajamarca es municipio agrícola y
       está rodeado de montaña, y este tono lee a cultivo más que a menta.
       Reemplazó al crema #fdf6e8 en agosto de 2026.

       El tono no puede oscurecerse mucho más: sobre este fondo se usa
       --gris (#6b6472) para texto secundario, que aquí da 4,85:1. Con un
       verde por debajo del 79 % de luminosidad ese gris baja de 4,5:1 y
       deja de cumplir AA. */
    --verde:         #e7f0dc;

    /* Alias heredado. Se conserva para que cualquier regla o dato que
       todavía diga «crema» siga pintando el color correcto en vez de
       quedarse sin fondo. No usar en código nuevo. */
    --crema:         var(--verde);

    /* Fondo de las cajas laterales de noticias. Tiene su propio token, y
       no el de las secciones, porque la fundación lo elige aparte desde
       Ajustes → Colores.

       Arranca en #e02350 y no en el rosa de marca #ef2e5a porque encima
       van enlaces de 14 px en blanco: sobre #ef2e5a el blanco da 4,03:1
       y no llega al 4,5:1 que exige un texto pequeño; #e02350 da 4,64:1. */
    --lateral:       #e02350;
    --fondo:         #ffffff;
    --fondo-alt:     #faf8fb;

    /* ---- Estados ---- */
    --exito:         #1a7f4b;
    --exito-suave:   #e3f5eb;
    --error:         #c01f45;
    --error-suave:   #fde8ee;
    --aviso:         #9a6b00;
    --aviso-suave:   #fff6e0;
    --info:          #1c5f8a;
    --info-suave:    #e4f1f9;

    /* ---- Tipografía ----
       Franklin Gothic Heavy no tiene licencia web; Libre Franklin es su
       reinterpretación libre y se usa como fuente principal. */
    --fuente-titulos: 'Libre Franklin', 'Franklin Gothic Heavy', 'Arial Black', 'Segoe UI', sans-serif;
    --fuente-texto:   'Libre Franklin', 'Franklin Gothic Book', 'Segoe UI', system-ui, sans-serif;

    --texto-xs:   0.75rem;
    --texto-sm:   0.875rem;
    --texto-base: 1rem;
    --texto-lg:   1.125rem;
    --texto-xl:   1.375rem;
    --texto-2xl:  1.75rem;
    --texto-3xl:  2.25rem;
    --texto-4xl:  3rem;
    --texto-5xl:  3.75rem;

    /* ---- Espaciado ---- */
    --e-1:  0.25rem;
    --e-2:  0.5rem;
    --e-3:  0.75rem;
    --e-4:  1rem;
    --e-5:  1.5rem;
    --e-6:  2rem;
    --e-7:  3rem;
    --e-8:  4rem;
    --e-9:  6rem;

    /* ---- Formas ---- */
    --radio-sm:   4px;
    --radio:      8px;
    --radio-md:   14px;
    --radio-lg:   16px;
    /* Forma del rediseño del sitio público. Es un token aparte y no un
       cambio de --radio-lg porque ese lo usan los paneles del admin, que
       no entran en este rediseño. */
    --radio-xl:   28px;
    --radio-full: 999px;

    --sombra-sm:  0 1px 2px rgba(26, 19, 32, 0.06);
    --sombra:     0 2px 8px rgba(26, 19, 32, 0.08);
    --sombra-md:  0 6px 20px rgba(26, 19, 32, 0.10);
    --sombra-lg:  0 16px 40px rgba(26, 19, 32, 0.14);

    --ancho-max:     1200px;
    --ancho-texto:   68ch;
    --transicion:    180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================
   Reinicio
   ============================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* compensa el encabezado fijo */
}

body {
    font-family: var(--fuente-texto);
    font-size: var(--texto-base);
    line-height: 1.65;
    color: var(--tinta-suave);
    background: var(--fondo);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
}

img,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* <picture> es solo un envoltorio para elegir el formato: se saca de la
   maquetación para que la imagen siga siendo hija directa de su contenedor
   y las reglas escritas para <img> sigan valiendo (alturas al 100 %,
   posiciones absolutas, rejillas). */
picture {
    display: contents;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

p,
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente-titulos);
    font-weight: 800;
    line-height: 1.15;
    color: var(--tinta);
    letter-spacing: -0.02em;
}

h1 { font-size: clamp(2rem, 5vw, var(--texto-5xl)); }
h2 { font-size: clamp(1.6rem, 3.5vw, var(--texto-3xl)); }
h3 { font-size: clamp(1.25rem, 2.5vw, var(--texto-2xl)); }
h4 { font-size: var(--texto-xl); }
h5 { font-size: var(--texto-lg); }

a {
    color: var(--rosa-texto);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--transicion);
}

a:hover {
    color: var(--tinta);
}

ul, ol {
    padding-left: 1.25rem;
}

hr {
    border: none;
    border-top: 1px solid var(--borde);
    margin: var(--e-6) 0;
}

/* Foco visible y consistente: requisito de accesibilidad */
:focus-visible {
    outline: 3px solid var(--rosa);
    outline-offset: 2px;
    border-radius: var(--radio-sm);
}

::selection {
    background: var(--amarillo);
    color: var(--tinta);
}

/* Quien pide menos movimiento, no lo recibe */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==============================================================
   Estructura
   ============================================================== */

.contenedor {
    width: 100%;
    max-width: var(--ancho-max);
    margin-inline: auto;
    padding-inline: var(--e-4);
}

@media (min-width: 768px) {
    .contenedor {
        padding-inline: var(--e-6);
    }
}

.contenedor-estrecho {
    max-width: 780px;
}

.seccion {
    padding-block: var(--e-8);
}

@media (min-width: 768px) {
    .seccion {
        padding-block: var(--e-9);
    }
}

.seccion--clara  { background: var(--fondo); }
.seccion--verde  { background: var(--verde); }

/* Alias heredado: las secciones guardadas con variante «crema» antes del
   cambio siguen pintándose bien aunque no se hayan migrado todavía. */
.seccion--crema  { background: var(--verde); }
.seccion--oscura { background: var(--tinta); color: rgba(255, 255, 255, 0.86); }

/* Fondos del rediseño. --lavada es el rosa teñido que alterna con el
   blanco; --amarilla es el cierre de página. */
.seccion--lavada { background: var(--rosa-lavado); }

.seccion--amarilla {
    position: relative;
    overflow: hidden;
    background: var(--amarillo);
    color: var(--tinta);
}

/* Sobre amarillo, el texto siempre es oscuro: 15,4:1. Un botón amarillo
   encima desaparecería, así que en esta franja pasa a tinta. */
.seccion--amarilla h1,
.seccion--amarilla h2,
.seccion--amarilla h3 {
    color: var(--tinta);
}

.seccion--amarilla .boton--amarillo,
.seccion--amarilla .boton--claro {
    background: var(--tinta);
    color: var(--blanco);
}

.seccion--amarilla .boton--amarillo:hover,
.seccion--amarilla .boton--claro:hover {
    background: var(--tinta-suave);
    color: var(--blanco);
}

.seccion--amarilla a:not(.boton) {
    color: var(--tinta);
}

.seccion--oscura h1,
.seccion--oscura h2,
.seccion--oscura h3,
.seccion--oscura h4 {
    color: var(--blanco);
}

/* Los botones traen su propio par fondo/texto ya verificado: la regla de
   enlaces no debe pisarlos, o un botón amarillo terminaría con texto
   amarillo encima. */
.seccion--oscura a:not(.boton) {
    color: var(--amarillo);
}

/* ==============================================================
   Botones
   ============================================================== */

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e-2);
    padding: 0.85rem 1.75rem;
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-decoration: none;
    border-radius: var(--radio-full);
    border: 2px solid transparent;
    transition: background var(--transicion), color var(--transicion),
                border-color var(--transicion), transform var(--transicion),
                box-shadow var(--transicion);
    white-space: nowrap;
}

/* Se quitó text-transform: uppercase. En versalitas, «Conoce nuestros
   proyectos» ocupa un 15 % más y era la etiqueta que forzaba el ancho
   mínimo de la portada en móvil. */

.boton:active {
    transform: translateY(1px);
}

.boton:disabled,
.boton[aria-disabled='true'] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Blanco sobre --rosa-boton: 4.64:1, cumple AA */
.boton--primario {
    background: var(--rosa-boton);
    color: var(--blanco);
    box-shadow: 0 10px 24px rgba(239, 46, 90, 0.26);
}

.boton--primario:hover {
    background: var(--rosa-hondo);
    color: var(--blanco);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(239, 46, 90, 0.34);
}

/* El :active de .boton ya baja 1 px; sin esto, el hover lo contradice */
.boton--primario:active {
    transform: translateY(0);
}

/* El amarillo solo lleva texto oscuro encima */
.boton--amarillo {
    background: var(--amarillo);
    color: var(--tinta);
}

.boton--amarillo:hover {
    background: var(--amarillo-oscuro);
    color: var(--tinta);
}

.boton--contorno {
    border-color: var(--rosa);
    color: var(--rosa-texto);
    background: transparent;
}

.boton--contorno:hover {
    background: var(--rosa-boton);
    color: var(--blanco);
}

.boton--claro {
    background: var(--blanco);
    color: var(--tinta);
}

.boton--claro:hover {
    background: var(--amarillo);
    color: var(--tinta);
}

.boton--neutro {
    background: var(--borde-suave);
    color: var(--tinta);
}

.boton--neutro:hover {
    background: var(--borde);
    color: var(--tinta);
}

.boton--peligro {
    background: var(--error);
    color: var(--blanco);
}

.boton--peligro:hover {
    background: #9c1837;
    color: var(--blanco);
}

.boton--sm {
    padding: 0.45rem 1rem;
    font-size: var(--texto-xs);
}

.boton--lg {
    padding: 1rem 2rem;
    font-size: var(--texto-base);
}

.boton--bloque {
    width: 100%;
}

/* ==============================================================
   Formularios

   Vive en base.css, no en admin.css, porque el sitio público también
   tiene formularios (contacto, búsqueda de noticias). Estando solo en
   admin.css, esos campos se dibujaban con el estilo por defecto del
   navegador: etiquetas en línea, cajas de 201 px y bordes «inset».
   ============================================================== */

.campo {
    margin-bottom: var(--e-4);
}

.campo__etiqueta {
    display: block;
    margin-bottom: var(--e-2);
    font-weight: 700;
    color: var(--tinta);
    font-size: var(--texto-sm);
}

.campo__requerido {
    color: var(--error);
    margin-left: 2px;
}

.campo__control,
.campo select,
.campo textarea,
.campo input[type='text'],
.campo input[type='email'],
.campo input[type='url'],
.campo input[type='tel'],
.campo input[type='number'],
.campo input[type='password'],
.campo input[type='date'],
.campo input[type='datetime-local'],
.campo input[type='search'] {
    display: block;
    width: 100%;
    max-width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: var(--texto-sm);
    color: var(--tinta);
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}

.campo__control:hover,
.campo input:hover,
.campo select:hover,
.campo textarea:hover {
    border-color: var(--gris-claro);
}

.campo__control:focus,
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    outline: none;
    border-color: var(--rosa);
    box-shadow: 0 0 0 3px var(--rosa-suave);
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: var(--gris-claro);
    opacity: 1; /* Firefox la baja a 0.54 y el texto queda ilegible */
}

.campo textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.6;
}

.campo select {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6472' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    background-size: 18px;
    padding-right: 2.4rem;
}

/* En pantallas táctiles el texto sube a 16 px: por debajo de ese tamaño
   Safari de iOS amplía la página al enfocar el campo y la deja descuadrada.
   La altura mínima de 44 px es el objetivo táctil recomendado.
   Se incluye (pointer: coarse) porque una tableta en vertical mide 768 px
   y quedaba fuera de la consulta por ancho, pero se usa con el dedo. */
@media (max-width: 767px), (pointer: coarse) {
    .campo__control,
    .campo select,
    .campo textarea,
    .campo input:not([type='checkbox']):not([type='radio']) {
        font-size: var(--texto-base);
        min-height: 44px;
    }

    .campo textarea {
        min-height: 140px;
    }
}

.campo__ayuda {
    margin-top: var(--e-2);
    font-size: var(--texto-xs);
    color: var(--gris);
}

.campo__error {
    display: block;
    margin-top: var(--e-2);
    font-size: var(--texto-xs);
    font-weight: 600;
    color: var(--error);
}

.campo--error input,
.campo--error select,
.campo--error textarea,
.campo--error .campo__control {
    border-color: var(--error);
    background: var(--error-suave);
}

.campo--error input:focus,
.campo--error select:focus,
.campo--error textarea:focus {
    box-shadow: 0 0 0 3px rgba(192, 31, 69, 0.14);
}

/* ---- Casillas e interruptores ---- */

.casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    cursor: pointer;
}

.casilla input[type='checkbox'],
.casilla input[type='radio'] {
    width: 20px;
    height: 20px;
    margin: 0;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--rosa-boton);
    cursor: pointer;
}

.casilla__texto {
    font-size: var(--texto-sm);
}

.casilla__descripcion {
    display: block;
    margin-top: 2px;
    font-size: var(--texto-xs);
    color: var(--gris);
}

/* ---- Disposición ---- */

.form-rejilla {
    display: grid;
    gap: 0 var(--e-4);
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .form-rejilla--2 { grid-template-columns: 1fr 1fr; }
    .form-rejilla--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Reparto automático, para listas de campos cuyo número no se conoce al
   escribir la plantilla. A diferencia de --2 y --3 no necesita consulta de
   medios: el `min(100%, …)` hace que en pantalla angosta cada campo ocupe
   la fila entera, y a partir de ahí se añaden columnas solas.
   El ancho de referencia se cambia por campo con --columna-min. */
.form-rejilla--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--columna-min, 260px)), 1fr));
}

/* Un campo que no se deja partir en columnas: áreas de texto y cualquier
   control que necesite el ancho completo para leerse. */
.form-rejilla__completo {
    grid-column: 1 / -1;
}

/* Las columnas de la rejilla no deben poder crecer más allá de su reparto:
   un campo con contenido largo, si no, ensancha la columna y desborda. */
.form-rejilla > * {
    min-width: 0;
}

.form-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e-3);
    padding-top: var(--e-4);
    margin-top: var(--e-4);
    border-top: 1px solid var(--borde);
}

.form-acciones--derecha {
    justify-content: flex-end;
}

/* ==============================================================
   Etiquetas y distintivos
   ============================================================== */

.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    padding: 0.2rem 0.7rem;
    font-size: var(--texto-xs);
    font-weight: 700;
    line-height: 1.6;
    border-radius: var(--radio-full);
    background: var(--borde-suave);
    color: var(--tinta-suave);
    text-decoration: none;
}

.etiqueta--rosa     { background: var(--rosa-suave);     color: var(--rosa-texto); }
.etiqueta--amarilla { background: var(--amarillo-suave); color: #7a6f00; }
.etiqueta--exito    { background: var(--exito-suave);    color: var(--exito); }
.etiqueta--error    { background: var(--error-suave);    color: var(--error); }
.etiqueta--aviso    { background: var(--aviso-suave);    color: var(--aviso); }
.etiqueta--info     { background: var(--info-suave);     color: var(--info); }

/* ==============================================================
   Avisos
   ============================================================== */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: var(--e-3);
    padding: var(--e-4);
    border-radius: var(--radio);
    border-left: 4px solid;
    font-size: var(--texto-sm);
    margin-bottom: var(--e-4);
}

.aviso p { margin: 0; }

.aviso--success { background: var(--exito-suave); border-color: var(--exito); color: #10502f; }
.aviso--error   { background: var(--error-suave); border-color: var(--error); color: #8a1734; }
.aviso--warning { background: var(--aviso-suave); border-color: var(--aviso); color: #6b4a00; }
.aviso--info    { background: var(--info-suave);  border-color: var(--info);  color: #14455f; }

/* ==============================================================
   Contenido enriquecido (salida de los editores)
   ============================================================== */

.contenido-rico {
    max-width: var(--ancho-texto);
    font-size: var(--texto-lg);
    line-height: 1.75;
}

.contenido-rico > * + * {
    margin-top: var(--e-4);
}

.contenido-rico h2 {
    margin-top: var(--e-7);
    font-size: var(--texto-2xl);
}

.contenido-rico h3 {
    margin-top: var(--e-6);
    font-size: var(--texto-xl);
}

.contenido-rico ul,
.contenido-rico ol {
    padding-left: 1.5rem;
}

.contenido-rico li + li {
    margin-top: var(--e-2);
}

.contenido-rico img {
    border-radius: var(--radio);
    margin-block: var(--e-5);
}

.contenido-rico blockquote {
    padding: var(--e-4) var(--e-5);
    border-left: 4px solid var(--amarillo);
    background: var(--verde);
    border-radius: 0 var(--radio) var(--radio) 0;
    font-style: italic;
    color: var(--tinta);
}

.contenido-rico table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--texto-sm);
}

.contenido-rico th,
.contenido-rico td {
    padding: var(--e-2) var(--e-3);
    border: 1px solid var(--borde);
    text-align: left;
}

.contenido-rico th {
    background: var(--borde-suave);
    font-weight: 700;
}

/* Las tablas anchas se desplazan dentro de su caja, no en toda la página */
.tabla-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==============================================================
   Utilidades
   ============================================================== */

/* Oculta a la vista pero lo mantiene para los lectores de pantalla.
   Lleva !important porque es una utilidad que debe imponerse sobre
   cualquier regla de componente: sin esto, un `.campo textarea { width:100% }`
   le gana por especificidad y el elemento «oculto» termina midiendo toda
   la pantalla y provocando desbordes. */
.solo-lectores {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Enlace para saltar al contenido: aparece solo al tabular */
.saltar-contenido {
    position: absolute;
    top: -100px;
    left: var(--e-4);
    z-index: 1000;
    padding: var(--e-3) var(--e-4);
    background: var(--tinta);
    color: var(--blanco);
    border-radius: 0 0 var(--radio) var(--radio);
    text-decoration: none;
    transition: top var(--transicion);
}

.saltar-contenido:focus {
    top: 0;
    color: var(--blanco);
}

/* ==============================================================
   Revelado al entrar en pantalla

   El ocultamiento se aplica SOLO si el JS está corriendo: la clase .js
   la pone un script en línea del layout antes de pintar. Sin esa
   compuerta, un error de JS dejaría en blanco todo lo que lleve
   .revelar, que es la mayor parte de la página de inicio.
   ============================================================== */

.js .revelar {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
                transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .revelar.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .js .revelar {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.texto-centrado { text-align: center; }
.texto-sm       { font-size: var(--texto-sm); }
.texto-xs       { font-size: var(--texto-xs); }
.texto-gris     { color: var(--gris); }
.texto-rosa     { color: var(--rosa-texto); }
.negrita        { font-weight: 700; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: var(--e-2); }
.mt-3 { margin-top: var(--e-3); }
.mt-4 { margin-top: var(--e-4); }
.mt-5 { margin-top: var(--e-5); }
.mt-6 { margin-top: var(--e-6); }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: var(--e-2); }
.mb-3 { margin-bottom: var(--e-3); }
.mb-4 { margin-bottom: var(--e-4); }
.mb-5 { margin-bottom: var(--e-5); }
.mb-6 { margin-bottom: var(--e-6); }

.flex        { display: flex; }
.flex-col    { flex-direction: column; }
.items-center{ align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--e-2); }
.gap-3 { gap: var(--e-3); }
.gap-4 { gap: var(--e-4); }
.flex-wrap { flex-wrap: wrap; }

.oculto { display: none !important; }

@media (max-width: 767px) {
    .oculto-movil { display: none !important; }
}

@media (min-width: 768px) {
    .oculto-escritorio { display: none !important; }
}

/* Encabezado de sección reutilizable */
.encabezado-seccion {
    max-width: 720px;
    margin-bottom: var(--e-6);
}

.encabezado-seccion--centrado {
    margin-inline: auto;
    text-align: center;
}

.encabezado-seccion__superior {
    display: inline-block;
    margin-bottom: var(--e-2);
    font-family: var(--fuente-titulos);
    font-size: var(--texto-sm);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rosa-texto);
}

.encabezado-seccion p {
    margin-top: var(--e-3);
    font-size: var(--texto-lg);
    color: var(--gris);
}

.seccion--oscura .encabezado-seccion__superior { color: var(--amarillo); }
.seccion--oscura .encabezado-seccion p         { color: rgba(255, 255, 255, 0.75); }

/* Subrayado decorativo de títulos */
.titulo-subrayado {
    position: relative;
    display: inline-block;
}

/* Marcador amarillo: pasa a ser una franja gruesa POR DETRÁS de la palabra,
   como resaltada a mano, en vez de un subrayado fino por debajo. */
.titulo-subrayado::after {
    content: '';
    position: absolute;
    left: -0.06em;
    right: -0.06em;
    bottom: 0.06em;
    height: 0.32em;
    background: var(--amarillo);
    z-index: -1;
    border-radius: 3px;
}