/* ============================================================
   COMPRAS TRES CANTOS — Sistema de Diseño Base
   Versión 1.1 · Mayo 2026
   Cargar en todas las páginas del sistema

   CAMBIOS v1.1 (refactor pre-produccion):
   - Variables nuevas --texto-panel-* para PWA cliente y panel comercio
   - Bloque comun .ocultar-astra-wp movido aqui desde panel.css,
     comercio.css y cartel-comercio.css
   - .header-sistema interno de paneles definido aqui
   - .btn-pwa, .btn-pwa-icono, .btn-pwa-texto, .btn-pwa-sub y sus
     hovers movidos aqui desde panel.css y comercio.css
   - .btn-pwa-inactivo movido aqui desde panel.css
   - .btn-volver movido aqui desde panel.css y comercio.css
   - .campo-grupo input/select con altura fija 48px (arregla el
     select cortado en /registro-comercio/)
   - .campo-checkbox arreglado para ser mobile-friendly
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@400;500;600;700&display=swap');

/* ── Variables ── */
:root {
    /* Colores de acento */
    --color-acento:        #11AA99;
    --color-acento-hover:  #1A1A1A;
    --color-acento-suave:  #E6F7F5;
    --color-acento-medio:  #8DD4CC;

    /* Fondos */
    --fondo-blanco:        #FFFFFF;
    --fondo-gris-claro:    #F4F4F4;
    --fondo-arena:         #F7F5F2;
    --fondo-gris-medio:    #EAEAEA;
    --fondo-footer:        #1C1C1C;

    /* Textos */
    --texto-principal:     #1A1A1A;
    --texto-secundario:    #666666;
    --texto-suave:         #999999;
    --texto-blanco:        #FFFFFF;

    /* Estados */
    --color-error:         #C62828;
    --fondo-error:         #FDECEA;
    --borde-error:         #F44336;
    --color-exito:         #2E7D32;
    --fondo-exito:         #E8F5E9;
    --borde-exito:         #4CAF50;
    --color-warning:       #E65100;
    --fondo-warning:       #FFF3E0;
    --borde-warning:       #FF9800;

    /* Bordes y sombras */
    --borde-color:         #DEDEDE;
    --borde-radio:         8px;
    --borde-radio-grande:  14px;
    --sombra-suave:        0 2px 8px rgba(0,0,0,0.07);
    --sombra-media:        0 4px 16px rgba(0,0,0,0.10);
    --sombra-fuerte:       0 8px 32px rgba(0,0,0,0.14);

    /* Tipografía base (sistema completo) */
    --fuente:              'Inter', Arial, sans-serif;
    --fuente-titulo:       'Playfair Display', Georgia, serif;
    --texto-xs:            12px;
    --texto-sm:            14px;
    --texto-base:          16px;
    --texto-md:            18px;
    --texto-lg:            22px;
    --texto-xl:            28px;
    --texto-2xl:           36px;
    --texto-3xl:           48px;

    /* ── Tipografia especifica para paneles (Mejora P1.3) ──
       Variables solo aplicadas dentro de .pwa-wrap y .comercio-wrap.
       Suben el tamano de fuente entre 12% y 37% para mejorar la
       legibilidad en mostrador y movil. NO afecta al resto del sitio
       (home, formulario de registro, paginas Gutenberg, etc.).        */
    --texto-panel-xs:      14px;   /* sub-textos de boton, leyendas (antes 12px) */
    --texto-panel-sm:      16px;   /* avisos, leyendas suaves         (antes 14px) */
    --texto-panel-base:    18px;   /* texto principal, parrafos       (antes 16px) */
    --texto-panel-md:      20px;   /* titulos en boton, subtitulos    (antes 18px) */
    --texto-panel-lg:      24px;   /* h2 de pantallas secundarias     (antes 22px) */
    --texto-panel-xl:      28px;   /* saludo principal del comercio   (igual)     */
    --texto-panel-importe: 28px;   /* input grande de importe (sumar) (antes 16px) */

    /* Espaciado */
    --espacio-xs:          4px;
    --espacio-sm:          8px;
    --espacio-md:          16px;
    --espacio-lg:          24px;
    --espacio-xl:          40px;
    --espacio-2xl:         64px;

    /* Ancho máximo */
    --ancho-max:           1100px;
    --ancho-formulario:    560px;
}

/* ── Reset ── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-weight: 300;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    color: var(--texto-principal);
    background-color: var(--fondo-blanco);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-acento);
    text-decoration: none;
    transition: color 0.2s;
}

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

/* ── Tipografía ── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fuente);
    font-weight: 700;
    line-height: 1.2;
    color: var(--texto-principal);
}

h1 { font-size: var(--texto-2xl); }
h2 { font-size: var(--texto-xl); }
h3 { font-size: var(--texto-lg); }
h4 { font-size: var(--texto-md); }

p {
    color: var(--texto-secundario);
    line-height: 1.7;
}

/* ── Layout ── */
.contenedor {
    max-width: var(--ancho-max);
    margin: 0 auto;
    padding: 0 var(--espacio-lg);
}

.seccion {
    padding: var(--espacio-2xl) 0;
}

.seccion-gris {
    background-color: var(--fondo-gris-claro);
}

/* ============================================================
   OCULTAR ELEMENTOS DE ASTRA / WORDPRESS DENTRO DE LOS PANELES
   ----------------------------------------------------------------
   Las paginas que usan plantilla PHP propia (panel cliente, panel
   comercio, cartel comercio, recuperar acceso) deben ocultar todo
   lo que Astra inyecta por defecto: cabecera, footer, breadcrumbs,
   wrapper de pagina, etc.

   En lugar de duplicar este bloque en cada CSS, lo definimos una
   sola vez aqui. Cualquier plantilla que necesite ocultar Astra
   solo tiene que existir bajo .pwa-wrap, .comercio-wrap, .cartel-wrap
   o .recuperar-wrap (todos los wrappers de los paneles).

   Selector multiple para cubrir las 4 zonas. Sin :is() ni :where()
   por compatibilidad con navegadores antiguos.
   ============================================================ */
.pwa-wrap ~ * .ast-header-break-point .main-header-bar,
.pwa-wrap ~ * .site-header,
body:has(.pwa-wrap) #ast-desktop-header,
body:has(.pwa-wrap) #ast-mobile-header,
body:has(.pwa-wrap) .ast-footer-overlay,
body:has(.pwa-wrap) .site-footer,
body:has(.pwa-wrap) .entry-header,
body:has(.pwa-wrap) .ast-breadcrumbs-wrapper,
body:has(.pwa-wrap) .ast-single-post .entry-header,
body:has(.comercio-wrap) #ast-desktop-header,
body:has(.comercio-wrap) #ast-mobile-header,
body:has(.comercio-wrap) .ast-footer-overlay,
body:has(.comercio-wrap) .site-footer,
body:has(.comercio-wrap) .entry-header,
body:has(.comercio-wrap) .ast-breadcrumbs-wrapper,
body:has(.comercio-wrap) .ast-single-post .entry-header,
body:has(.cartel-wrap) #ast-desktop-header,
body:has(.cartel-wrap) #ast-mobile-header,
body:has(.cartel-wrap) .ast-footer-overlay,
body:has(.cartel-wrap) .site-footer,
body:has(.cartel-wrap) .entry-header,
body:has(.cartel-wrap) .ast-breadcrumbs-wrapper {
    display: none !important;
}

/* Fallback: si el navegador no soporta :has(), cada plantilla puede
   anadir la clase .ocultar-chrome-wp en el body para conseguir el
   mismo efecto. Es defensivo: hoy todos los navegadores objetivo
   (Chrome 105+, Safari 15.4+) ya soportan :has(). */
.ocultar-chrome-wp .ast-header-break-point .main-header-bar,
.ocultar-chrome-wp .site-header,
.ocultar-chrome-wp #ast-desktop-header,
.ocultar-chrome-wp #ast-mobile-header,
.ocultar-chrome-wp .ast-footer-overlay,
.ocultar-chrome-wp .site-footer,
.ocultar-chrome-wp .entry-header,
.ocultar-chrome-wp .ast-breadcrumbs-wrapper,
.ocultar-chrome-wp .ast-single-post .entry-header {
    display: none !important;
}

/* ============================================================
   HEADER INTERNO DE LOS PANELES (cliente y comercio)
   Cabecera vertical con logo grande + texto "COMPRAS3C.COM" debajo.
   Antes estaba duplicada como override en panel.css y comercio.css.
   ============================================================ */
.pwa-wrap .header-sistema,
.comercio-wrap .header-sistema {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--espacio-xs);
    padding: var(--espacio-md) 0;
    border-bottom: 1px solid var(--borde-color);
    margin-bottom: var(--espacio-lg);
    position: static !important;
    background-color: var(--fondo-blanco);
}

.pwa-wrap .header-logo,
.comercio-wrap .header-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--espacio-xs);
}

.pwa-wrap .header-logo img,
.comercio-wrap .header-logo img {
    width: 200px !important;
    height: 200px !important;
    border-radius: 8px;
}

.pwa-wrap .header-logo span,
.comercio-wrap .header-logo span {
    font-size: var(--texto-panel-sm);
    font-weight: 700;
    color: var(--texto-secundario);
    letter-spacing: 0.03em;
}

/* ── Botones ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-sm);
    padding: 12px 24px;
    border-radius: var(--borde-radio);
    font-family: var(--fuente);
    font-size: var(--texto-base);
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background-color 0.2s, transform 0.1s, box-shadow 0.2s;
    text-decoration: none;
    white-space: nowrap;
}

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

.btn-primario {
    background-color: var(--color-acento);
    color: var(--texto-blanco);
}

.btn-primario:hover {
    background-color: var(--color-acento-hover);
    color: var(--texto-blanco);
    box-shadow: var(--sombra-media);
}

.btn-secundario {
    background-color: transparent;
    color: var(--color-acento);
    border: 2px solid var(--color-acento);
}

/* Hover consistente con el resto del sistema:
   fondo gris claro + texto acento. Sin negros ni azules. */
.btn-secundario:hover {
    background-color: var(--fondo-gris-claro);
    color: var(--color-acento);
}

.btn-oscuro {
    background-color: var(--texto-principal);
    color: var(--texto-blanco);
}

.btn-oscuro:hover {
    background-color: #333;
    color: var(--texto-blanco);
}

.btn-grande {
    padding: 16px 32px;
    font-size: var(--texto-md);
    border-radius: var(--borde-radio-grande);
}

.btn-completo {
    width: 100%;
}

.btn:disabled {
    background-color: var(--texto-suave);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================================
   BOTONES PRINCIPALES DE LOS PANELES (.btn-pwa)
   ----------------------------------------------------------------
   Boton verde grande con icono arriba, titulo en grande y subtitulo
   pequeno. Usado en panel cliente PWA y panel comercio. Antes estaba
   duplicado en panel.css y comercio.css.

   Los iconos SVG usan stroke="currentColor", asi que el color del
   texto controla tambien el color de los iconos.
   ============================================================ */
.btn-pwa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    width: 100%;
    padding: var(--espacio-lg) var(--espacio-md);
    background-color: var(--color-acento);
    color: var(--texto-blanco);
    border: none;
    border-radius: var(--borde-radio-grande);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
    font-family: var(--fuente);
}

.btn-pwa:active {
    transform: translateY(1px);
}

/* Hover: solo cambia el fondo. El texto y los iconos SVG deben
   seguir siendo blancos. !important para ganar al hover global
   de Astra que aplica un color oscuro a botones y enlaces. */
.btn-pwa:hover {
    background-color: var(--color-acento-hover);
    color: var(--texto-blanco) !important;
}

/* Forzar color blanco tambien en los spans hijos del boton, por si
   Astra los selecciona individualmente en hover. */
.btn-pwa:hover .btn-pwa-texto,
.btn-pwa:hover .btn-pwa-sub,
.btn-pwa:hover .btn-pwa-icono,
.btn-pwa:hover svg {
    color: var(--texto-blanco) !important;
    stroke: var(--texto-blanco) !important;
}

.btn-pwa-icono {
    line-height: 1;
    margin-bottom: var(--espacio-xs);
}

/* Texto principal del boton: usa la variable de panel para que sea
   mas legible en mostrador y movil. */
.btn-pwa-texto {
    font-family: var(--fuente);
    font-size: var(--texto-panel-md);
    font-weight: 700;
}

/* Sub-texto del boton (leyenda corta debajo del titulo). */
.btn-pwa-sub {
    font-family: var(--fuente);
    font-size: var(--texto-panel-xs);
    font-weight: 400;
    opacity: 0.85;
}

/* Boton inactivo (visualmente atenuado, no clickable).
   Usado en el panel cliente cuando el cliente no tiene puntos
   suficientes para canjear. */
.btn-pwa-inactivo {
    background-color: var(--color-acento-medio);
    cursor: default;
    opacity: 0.6;
}

.btn-pwa-inactivo:hover {
    background-color: var(--color-acento-medio);
}

.btn-pwa-inactivo:active {
    transform: none;
}

/* ============================================================
   BOTON "VOLVER" EN PANTALLAS SECUNDARIAS DE LOS PANELES
   Pequeno, transparente, en la cabecera de cada pantalla secundaria.
   Antes duplicado en panel.css y comercio.css.
   ============================================================ */
.btn-volver {
    background: transparent;
    border: none;
    color: var(--color-acento);
    font-family: var(--fuente);
    font-size: var(--texto-panel-sm);
    font-weight: 600;
    cursor: pointer;
    padding: var(--espacio-xs) var(--espacio-sm);
    border-radius: var(--borde-radio);
    white-space: nowrap;
    transition: background-color 0.2s;
}

.btn-volver:hover {
    background-color: var(--fondo-gris-claro);
    color: var(--color-acento);
    text-decoration: none;
}

/* ── Botón tipo enlace destacado (Mejora M6) ──
   Fondo blanco, borde y texto verde acento. Pareja del .btn-pwa
   pero invertida en colores. Uso: enlaces externos secundarios,
   donde la acción no es la principal del flujo (por ejemplo: ver
   listado de comercios, dejar reseña en Google, etc.).
   
   Estructura flex columna para permitir dos líneas (estrellas + texto)
   en botones tipo reseña Google. Padding md (no lg como .btn-pwa)
   para marcar jerarquía visual menor. */
.btn-pwa-enlace {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--espacio-xs);
    width: 100%;
    padding: var(--espacio-md) var(--espacio-md);
    background-color: var(--fondo-blanco);
    color: var(--color-acento);
    border: 1.5px solid var(--color-acento);
    border-radius: var(--borde-radio-grande);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
    text-align: center;
    text-decoration: none;
    font-family: var(--fuente);
    font-size: var(--texto-base);
    font-weight: 600;
}

.btn-pwa-enlace:hover {
    background-color: var(--color-acento-suave);
    color: var(--color-acento);
    text-decoration: none;
}

.btn-pwa-enlace:active {
    transform: translateY(1px);
}

/* ── Formularios ── */
.campo-grupo {
    margin-bottom: var(--espacio-lg);
}

.campo-grupo label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: var(--texto-sm);
    color: var(--texto-principal);
    letter-spacing: 0.01em;
}

/* Inputs y select del sistema.
   Cambio v1.1: altura fija de 48px y line-height 1.5 para que el
   select de /registro-comercio/ deje de aparecer cortado. Antes
   esto solo estaba definido en registro.css y no aplicaba a la
   pagina Gutenberg de comercio. */
.campo-grupo input[type="text"],
.campo-grupo input[type="email"],
.campo-grupo input[type="date"],
.campo-grupo input[type="number"],
.campo-grupo input[type="tel"],
.campo-grupo select,
.campo-grupo textarea {
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    border: 1.5px solid var(--borde-color);
    border-radius: var(--borde-radio);
    font-family: var(--fuente);
    font-size: var(--texto-base);
    line-height: 1.5;
    color: var(--texto-principal);
    background-color: var(--fondo-blanco);
    transition: border-color 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}

/* Textarea NO debe tener altura fija (necesita crecer con el contenido). */
.campo-grupo textarea {
    height: auto;
    min-height: 96px;
    line-height: 1.6;
}

.campo-grupo input:focus,
.campo-grupo select:focus,
.campo-grupo textarea:focus {
    outline: none;
    border-color: var(--color-acento);
    box-shadow: 0 0 0 3px rgba(17, 170, 153, 0.12);
}

.campo-grupo input.error,
.campo-grupo select.error {
    border-color: var(--borde-error);
}

.campo-grupo small,
.campo-ayuda {
    display: block;
    margin-top: 5px;
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}

/* Select personalizado */
.campo-grupo select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}

/* ============================================================
   CHECKBOX (RGPD y similares)
   ----------------------------------------------------------------
   Cambio v1.1: el bloque ahora es mobile-friendly. El label se
   ajusta al ancho disponible y hace wrap del texto largo en lugar
   de salirse del contenedor por la derecha.

   Cambio v1.2: eliminado word-break: break-word y flex-wrap: nowrap
   del label. Combinados con enlaces <a> internos producian un bug
   visual donde cada palabra aparecia en su propia columna. Solo se
   mantiene overflow-wrap: break-word para partir palabras solo si
   realmente no caben (URLs largas, etc.).
   ============================================================ */
.campo-checkbox {
    display: flex;
    gap: var(--espacio-sm);
    align-items: flex-start;
    margin-bottom: var(--espacio-lg);
    width: 100%;
}

.campo-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    accent-color: var(--color-acento);
    cursor: pointer;
}

.campo-checkbox label {
    flex: 1;
    min-width: 0;
    font-size: var(--texto-sm);
    color: var(--texto-secundario);
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: break-word;
}

/* ── Mensajes de estado ── */
.mensaje {
    padding: 14px 18px;
    border-radius: var(--borde-radio);
    font-size: var(--texto-sm);
    line-height: 1.5;
    margin-bottom: var(--espacio-lg);
    display: none;
}

.mensaje.visible {
    display: block;
}

.mensaje.error {
    background-color: var(--fondo-error);
    border: 1px solid var(--borde-error);
    color: var(--color-error);
}

.mensaje.exito {
    background-color: var(--fondo-exito);
    border: 1px solid var(--borde-exito);
    color: var(--color-exito);
}

.mensaje.warning {
    background-color: var(--fondo-warning);
    border: 1px solid var(--borde-warning);
    color: var(--color-warning);
}

/* ── Cards ── */
.card {
    background-color: var(--fondo-blanco);
    border-radius: var(--borde-radio-grande);
    border: 1px solid var(--borde-color);
    padding: var(--espacio-xl);
    box-shadow: var(--sombra-suave);
}

.card-acento {
    border-top: 3px solid var(--color-acento);
}

/* ── Badge / Etiqueta ── */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: var(--texto-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-acento {
    background-color: var(--color-acento-suave);
    color: var(--color-acento);
}

.badge-gris {
    background-color: var(--fondo-gris-medio);
    color: var(--texto-secundario);
}

/* ── Barra de progreso ── */
.barra-progreso-wrap {
    background-color: var(--fondo-gris-medio);
    border-radius: 20px;
    height: 10px;
    overflow: hidden;
    margin: var(--espacio-sm) 0;
}

.barra-progreso {
    height: 100%;
    border-radius: 20px;
    background-color: var(--color-acento);
    transition: width 0.4s ease;
}

.barra-progreso.incompleta {
    background-color: #D32F2F;
}

/* ── Divider ── */
.divider {
    border: none;
    border-top: 1px solid var(--borde-color);
    margin: var(--espacio-xl) 0;
}

/* ── QR ── */
.qr-container {
    text-align: center;
    padding: var(--espacio-lg);
}

.qr-container img {
    margin: 0 auto;
    border-radius: var(--borde-radio);
    border: 1px solid var(--borde-color);
    padding: var(--espacio-sm);
    background: white;
}

/* ── Header base (para páginas del sistema) ── */
.header-sistema {
    background-color: var(--fondo-blanco);
    border-bottom: 1px solid var(--borde-color);
    padding: var(--espacio-md) var(--espacio-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-logo {
    font-size: var(--texto-md);
    font-weight: 800;
    color: var(--texto-principal);
    letter-spacing: -0.02em;
}

.header-logo span {
    color: var(--color-acento);
}

/* ── Footer base ── */
.footer-sistema {
    background-color: var(--fondo-gris-claro);
    border-top: 1px solid var(--borde-color);
    padding: var(--espacio-lg);
    text-align: center;
    font-size: var(--texto-xs);
    color: var(--texto-suave);
}

/* ── Pantalla de carga ── */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--texto-suave);
    font-size: var(--texto-sm);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--fondo-gris-medio);
    border-top-color: var(--color-acento);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--espacio-md);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ── Utilidades ── */
.texto-centro { text-align: center; }
.texto-acento { color: var(--color-acento); }
.texto-suave  { color: var(--texto-suave); }
.texto-sm     { font-size: var(--texto-sm); }
.negrita      { font-weight: 700; }
.mt-sm        { margin-top: var(--espacio-sm); }
.mt-md        { margin-top: var(--espacio-md); }
.mt-lg        { margin-top: var(--espacio-lg); }
.mb-sm        { margin-bottom: var(--espacio-sm); }
.mb-md        { margin-bottom: var(--espacio-md); }
.mb-lg        { margin-bottom: var(--espacio-lg); }
.oculto       { display: none !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
    :root {
        --texto-2xl: 28px;
        --texto-xl:  22px;
        --texto-lg:  19px;
        --espacio-2xl: 48px;
    }

    .contenedor {
        padding: 0 var(--espacio-md);
    }
}

@media (max-width: 480px) {
    :root {
        --texto-2xl: 24px;
        --texto-xl:  20px;
        --espacio-2xl: 36px;
    }

    .btn-grande {
        padding: 14px 24px;
        font-size: var(--texto-base);
    }
}

/* ── Ocultar título en página de inicio ── */
.home .entry-title,
.home .page-title,
.home .ast-page-title,
.page-id-21 .entry-title,
.page-id-21 .page-title {
    display: none !important;
}