/* ============================================================
   Secciones: fondos, espaciados y anchos que antes estaban
   configurados en los contenedores de Elementor.
   ============================================================ */
.sec { position: relative; isolation: isolate; display: flex; flex-direction: column; }
.sec-inner { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: var(--content-width, 1600px); margin: 0 auto; }
/* Capa de color sobre la foto/textura de fondo */
.sec--overlay::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--overlay); opacity: var(--overlay-opacity, 1); border-radius: inherit; }
/* Fondos fijos (efecto parallax) solo en escritorio, como en Elementor */
.sec--fixed { background-position: center; background-repeat: no-repeat; background-size: cover; }
@media (min-width: 1025px) and (hover: hover) { .sec--fixed { background-attachment: fixed; } }

/* 1. Hero (fondo animado metálico en assets/js/hero-glitch.js) */
.sec-hero { min-height: 100vh; margin-top: -80px; padding-top: 80px; background: #0a0a0a; border-radius: 0 0 0 5px; overflow: hidden; }
.sec-hero .hero-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; }
.sec-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(141deg, rgba(0,0,0,.86) 30%, rgba(2,26,0,.55) 100%); }

/* 2. Marquee + Massvocacy */
.sec-massv { padding-bottom: 100px; background-image: linear-gradient(163deg, #000 78%, #010c00 100%); border-radius: 0 0 80px 80px; }
.sec-massv .blk-massv { padding-top: 60px; }

/* 3. Nosotros (manifiesto) */
.sec-nosotros { --content-width: 1300px; padding-block: 80px; background-image: url('../img/textura-mercurio-liquido.webp'); --overlay: linear-gradient(193deg, #000 49%, rgba(0,0,0,.95) 100%); }

/* 4. Plataforma (diferenciales) */
.sec-plataforma { padding-block: 100px; background-image: linear-gradient(295deg, #000 78%, #010c00 100%); }

/* 5. Proceso */
.sec-proceso { padding-block: 80px; background-image: url('../img/textura-metal-1.webp'); --overlay: linear-gradient(193deg, #000 49%, rgba(0,0,0,.93) 100%); --overlay-opacity: .94; }

/* 6. Clientes */
.sec-clientes { padding-block: 80px; background: #000; }

/* 7. Contacto */
.sec-contacto { min-height: 100vh; padding-block: 100px; background-color: #f4efe6; background-image: url('../img/textura-metal-2.webp'); --overlay: linear-gradient(214deg, #000 57%, rgba(0,5,0,.97) 100%); border-radius: 0 0 0 5px; }

/* 8. Footer */
.sec-footer { background: #000; }
.sec-footer .sec-inner { max-width: 100%; }

@media (max-width: 1024px) { .sec-massv { border-radius: 0 0 40px 40px; } }
@media (max-width: 767px) {
  .sec-hero { padding-top: 150px; }
  .sec-massv { border-radius: 0; }
  .sec-massv .sec-inner { padding-inline: 20px; }
  .sec-nosotros, .sec-plataforma, .sec-proceso, .sec-clientes { padding: 50px 20px; }
  .sec-contacto { padding: 0 20px; }
}