/* Ancho fluido + tope + aire lateral en px. Los escalones del padding ya no
   están aquí: viven en `--container-pad` (variables.css), que es también lo
   que usan la cabecera y el megamenú. Una sola vertical para todo el sitio. */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
    box-sizing: border-box;
}

/* Contenedor estrecho para bloques de texto suelto —un aviso, unos enlaces
   cruzados—. Estaba declarado en store.css, que solo se carga en la página de
   la tienda física: usarlo en cualquier otra página no hacía nada, y por eso
   en la ficha de producto habían acabado poniéndose anchos a mano con
   `style="max-width: 880px"`. Redefine la variable en vez de fijar el
   `max-width` para que también la hereden los contenedores de dentro. */
.container--narrow { --container-max: 820px; }

.section { padding-block: var(--section-pad); }
.section--sm { padding-block: var(--section-pad-sm); }
.section--soft { background: var(--color-bg-soft); }

.grid-2, .grid-3, .grid-4 {
    display: grid;
    gap: var(--space-3);
}
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }

@media (min-width: 640px) {
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
    .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.stack > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-4); }

.divider-decor {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-2); color: var(--color-gold);
    font-size: var(--fs-lg);
    margin-block: var(--space-3);
}
.divider-decor::before, .divider-decor::after {
    content: ''; flex: 1; max-width: 80px;
    height: 1px; background: var(--color-gold-dark);
    opacity: 0.5;
}

.section-title {
    text-align: center;
    margin-bottom: var(--space-5);
}
.section-title h2 {
    display: inline-block;
    position: relative;
}

/* Cabecera y pie: aquí NO.
 * ---------------------------------------------------------------------------
 * Estaban declarados también en header.css y footer.css, que se cargan
 * después y por tanto ganaban. O sea: estas reglas no pintaban nada y a la vez
 * eran una trampa, porque bastaba reordenar dos <link> para que el sitio se
 * quedara con el fondo claro del tema de la tienda de CBD.
 * Cada uno vive en su hoja. Lo detecta `php scripts/css-duplicados.php`. */
.site-footer {
    /* Lo único que no estaba en footer.css. */
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── El pie ya no se declara aquí ─────────────────────────────────────────
   Debajo había un bloque «FOOTER REVAMPED» de 180 líneas heredado de la
   tienda de CBD. Dos problemas, no uno:

   1. La mitad eran clases MUERTAS —`.footer-head`, `.footer-payments`,
      `.footer-bottom`, `.footer-divider`, `.footer-col__note`— que ya no
      existen en `partials/footer.php`. Cero vistas las usaban.
   2. La otra mitad competía con footer.css: `.footer-trust`, `.footer-grid`
      y `.footer-col ul` declaradas dos veces, con colores del tema CLARO
      —`--color-gold`, `--color-text-muted`— sobre un pie verde casi negro.
      Ganaba footer.css por orden de carga, o sea que el pie se veía bien por
      la suerte de que su <link> va el último. Y `.footer-col ul{padding:0}`
      sí ganaba por especificidad y se comía el respiro bajo los títulos.

   El pie entero vive en footer.css. Lo detecta `php scripts/css-duplicados.php`.
   ─────────────────────────────────────────────────────────────────────── */

/* El formulario de la newsletter de los POPUPS —no del pie, en el pie no hay—
   se queda a ancho completo con el botón debajo: en una ventana estrecha
   ponerlos en la misma fila deja un campo de correo de 120 px. Va acotado a
   `.first-pop__form` para no volver a chocar con el del pie. */
.first-pop__form.newsletter-form .input {
    width: 100%;
    margin-bottom: 8px;
}

.newsletter-msg { font-size: 0.82rem; margin-top: 8px; }