/* ========== ALPRODUCCIONES HERO (video background) ========== */

/* Contenedor principal del bloque */
.al-hero{
  position: relative;
  min-height: 92vh;        /* altura del hero */
  overflow: hidden;
  background: #05070b;     /* fallback si no carga el video */
}

/* Contenedor de fondo (queda “detrás” del texto) */
.al-hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* Video a pantalla completa */
.al-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);  /* evita bordes blancos por escalado */
}

/* Overlay oscuro premium para legibilidad */
.al-hero__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 20% 20%, rgba(0,170,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.78), rgba(0,0,0,.40));
}

/* Asegura que el texto quede por arriba del video */
.al-hero .container-text{
  position: relative;
  z-index: 2;
  min-height: 92vh;
}

/* Tarjeta “glass” (blur) donde va el copy */
.al-hero__content{
  background: rgba(10,12,16,.42);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Botón: toque premium aunque uses Bootstrap */
.al-hero .al-btn{
  margin-top: 14px;
  border-radius: 14px;
  padding: 10px 16px;
  transition: transform .15s ease, opacity .15s ease;
}

.al-hero .al-btn:hover{
  transform: translateY(-1px);
  opacity: .95;
}

/* Si el builder mete un <img> en el fondo, lo anulamos */
.al-hero__bg img{
  display: none !important;
}

/* Responsive */
@media (max-width: 640px){
  .al-hero{ min-height: 86vh; }
  .al-hero .container-text{ min-height: 86vh; }
  .al-hero__content{ padding: 22px !important; }
}
/* ========== ABOUT – ALPRODUCCIONES ========== */

.al-about{
  position: relative;
  background: #05070b;
  color: #fff;
}

/* Texto */
.al-about__text{
  display: flex;
}

.al-about__title{
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1.1;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.al-about__desc{
  font-size: 1.05rem;
  line-height: 1.55;
  opacity: .9;
  max-width: 520px;
}

/* Imagen tratada como bloque premium */
.al-about__media{
  position: relative;
  overflow: hidden;
}

.al-about__image{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 360px;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}

/* Overlay para coherencia visual */
.al-about__overlay{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(600px 400px at 70% 30%, rgba(0,120,255,.18), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.65));
}

/* Mobile */
@media (max-width: 768px){
  .al-about{
    grid-template-columns: 1fr !important;
  }

  .al-about__image{
    min-height: 260px;
  }

  .al-about__text{
    order: 2;
  }
/* ========= SERVICES – ALPRODUCCIONES (premium + centrado) ========= */

.al-services{
  position: relative;
  overflow: hidden;

  /* Fondo centrado y prolijo */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;     /* ✅ centralizado */
  background-attachment: scroll;

  /* Look general */
  padding: clamp(48px, 6vw, 86px) 0 !important;
  background-color: #05070b; /* fallback */
}

/* Overlay para domar la imagen (fuego) y mejorar lectura */
.al-services__overlay{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 550px at 18% 28%, rgba(0,170,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.55));
}

/* Pone contenido arriba del overlay */
.al-services__head,
.al-services__grid{
  position: relative;
  z-index: 1;
}

/* ===== Tipografía / jerarquía ===== */
.al-services__title{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  text-transform: none;
}

.al-services__sub{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 450;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.55;
  opacity: .90;
  max-width: 780px;
  margin: 0;
}

/* Grid: espacio y “respiración” */
.al-services__grid{
  gap: 18px;
}

/* ===== Cards glass premium ===== */
.al-card{
  display: flex;
  gap: 14px;
  align-items: flex-start;

  padding: 18px 18px;
  border-radius: 18px;

  background: rgba(8,10,14,.46);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 30px rgba(0,0,0,.25);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.al-card:hover{
  transform: translateY(-4px);
  border-color: rgba(0,170,255,.35);
  background: rgba(8,10,14,.56);
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
}

/* Icon badge más fino */
.al-card__icon{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  background: rgba(0,170,255,.10);
  border: 1px solid rgba(0,170,255,.22);
}

.al-card__icon i{
  font-size: 16px;
  opacity: .95;
}

/* Textos de card */
.al-card__title{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 750;
  font-size: 1.12rem;
  line-height: 1.2;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.al-card__desc{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 430;
  margin: 0;
  opacity: .90;
  line-height: 1.55;
}

/* Ajustes responsive */
@media (max-width: 992px){
  .al-services{ padding: 52px 0 !important; }
}

@media (max-width: 640px){
  .al-services{ padding: 44px 0 !important; }
  .al-card{ padding: 16px; }
}
.al-services{
  background-size: 95% auto;
  background-position: center 10%;
  background-repeat: no-repeat;
}
/* FORZADO POR ID DEL BUILDER */
div[data-ss-id="0nKEYE8QomnKck6Jf8F1m"]{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* ===== FIX DEFINITIVO ENCUADRE FONDO SERVICIOS (SitioSimple) ===== */

/* 1) Fuerza el encuadre en el bloque exacto (incluye cuando el builder mete wrappers) */
div[data-ss-id="0nKEYE8QomnKck6Jf8F1m"].al-services,
div[data-ss-id="0nKEYE8QomnKck6Jf8F1m"] .al-services{
  background-size: contain !important;          /* imagen completa */
  background-position: center center !important; /* centrada */
  background-repeat: no-repeat !important;
}

/* 2) Por si el builder crea una capa/pseudo-elemento para el fondo */
div[data-ss-id="0nKEYE8QomnKck6Jf8F1m"]::before,
div[data-ss-id="0nKEYE8QomnKck6Jf8F1m"]::after{
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}