/*
 * bloques/_base/base.css
 * Utilidades compartidas por todos los bloques. Cargado una sola vez
 * por página cuando hay al menos un bloque en pantalla.
 *
 * - Anchos: .bl-contenedor (max-width centrado) / .bl-fluido (100%)
 * - Animaciones: clases .bl-anim-* disparadas por base.js via .is-in-view
 */

.bl-contenedor,
.bl-fluido {
    position: relative;
    box-sizing: border-box;
    /* Sin background por defecto: el bloque es transparente y deja ver
       el fondo de la página. El campo `color_fondo` lo sobreescribe
       vía style inline cuando se asigna. */
}

.bl-contenedor {
    width: 100%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.bl-fluido {
    width: 100%;
}

/* ── Animaciones al entrar en viewport ────────────────────────────────── */

[data-anim] {
    opacity: 0;
    transition: opacity 700ms ease-out, transform 700ms ease-out;
    will-change: opacity, transform;
}

[data-anim="fade-in"]   { opacity: 0; }
[data-anim="slide-up"]  { opacity: 0; transform: translateY(40px); }
[data-anim="zoom"]      { opacity: 0; transform: scale(0.92); }

[data-anim].is-in-view {
    opacity: 1;
    transform: none;
}

/* ── Tipografía mínima dentro de bloques ──────────────────────────────── */

.bl-cuerpo h1,
.bl-cuerpo h2,
.bl-cuerpo h3 { margin: 0 0 .5em; }

.bl-cuerpo p { margin: 0 0 1em; line-height: 1.5; }

/* Los botones (.boton .boton-primary / .boton-secondary / .boton-blanco-borde)
   los aporta el CSS público del proyecto. Las plantillas de bloques deben
   emitir esas clases — aquí no duplicamos estilos. */