/* =========================================
   BASE DEL MÓDULO (USA VARIABLES DINÁMICAS)
   ========================================= */
.modulo-tintado {
  min-height: 100vh;
  background: var(--bg, #ffffff);   /* usa la variable dinámica */
  color: var(--fg, #111);           /* usa la variable dinámica */
  transition: background 1s ease, color 1s ease;
  font-family: "Uncut Sans", sans-serif;
}

/* =========================================
   SECCIONES A PANTALLA COMPLETA + CENTRADAS
   ========================================= */
.modulo-tintado .mt-section {
  height: 100vh;
  min-height: 100vh;
  padding: 60px 20.5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
}

/* =========================================
   IMAGEN TIPO BANNER (ANCHO TOTAL + ALTURA FIJA)
   ========================================= */
.modulo-tintado .mt-image {
  width: 100%;             /* Ocupa todo el ancho del contenedor */
  max-width: 100%;         /* Elimina restricciones previas de tamaño */
  height: 260px;           /* Altura fija idéntica para todas las fotos */
  object-fit: cover;       /* Recorta inteligentemente para rellenar el espacio sin deformar */
  margin-top: 30px;
  margin-bottom: 0;
  border-radius: 8px;      /* Opcional: suaviza los bordes si buscas un toque más moderno */
  transition: filter 1s ease;
  filter: var(--tint);     /* Usa la variable de color dinámica */
}

/* =========================================
   COLORES BASE (SIN VARIANTES)
   ========================================= */
.mt-section[data-color="light"]  { --bg:#fff;     --fg:#111; --tint:grayscale(0%) brightness(1); }
.mt-section[data-color="gold"]   { --bg:#F1C40F;  --fg:#000; --tint:sepia(60%) hue-rotate(10deg) saturate(200%); }
.mt-section[data-color="red"]    { --bg:#D5583A;  --fg:#fff; --tint:sepia(80%) hue-rotate(-20deg) saturate(250%); }
.mt-section[data-color="black"]  { --bg:#000;     --fg:#fff; --tint:grayscale(100%) brightness(.6); }

/* =========================================
   TIPOGRAFÍA
   ========================================= */
.modulo-tintado .mt-title {
  font-family: "Jakarta", sans-serif;
  font-weight: 800;
  font-size: 4rem;
  margin-top: 20px;
  margin-bottom: 20px;
  line-height: 1.1;
}

.modulo-tintado .mt-subtitle {
  font-family: "Uncut Sans", sans-serif;
  font-weight: 600;
  font-size: 2rem;
  margin-top: 60px;
  margin-bottom: 20px;
}

.modulo-tintado .mt-text {
  font-size: 1.4rem;
  max-width: 700px;
  line-height: 1.6;
}

.modulo-tintado .mt-button {
  display: inline-block;
  padding: 12px 24px;
  background: #000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  margin: 20px auto 40px auto;
  text-align: center;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
  .modulo-tintado .mt-section { padding: 40px 8vw; }
  .modulo-tintado .mt-title { font-size: 2.6rem; }
  .modulo-tintado .mt-subtitle { font-size: 1.4rem; }
  .modulo-tintado .mt-text { font-size: 1.1rem; }
  .modulo-tintado .mt-image { margin-top: 20px; max-width: 100%; }
}

/* =========================================
   VARIANTE PREMIUM: GLASS FADE (ESTABLE)
   ========================================= */
.modulo-tintado.glass {
  position: relative;
  background: var(--bg); /* el color dinámico SIEMPRE visible */
  overflow: hidden;
  transition:
    backdrop-filter 0.8s ease,
    background 0.8s ease,
    color 0.8s ease;
}

/* Capa de cristal encima del color */
.modulo-tintado.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(22px) saturate(180%);
  background: rgba(255, 255, 255, 0.18); /* más visible */
  pointer-events: none;
  z-index: 0;
}

/* El contenido va por encima del cristal */
.modulo-tintado.glass .mt-section,
.modulo-tintado.glass .mt-section * {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* =========================================
   VARIANTE PREMIUM: SOFT GRADIENT TINT
   ========================================= */
.modulo-tintado.gradient .mt-section {
  background: transparent;
}

.modulo-tintado.gradient .mt-section[data-color="light"] {
  --bg: linear-gradient(120deg, #ffffff, #f7f7f7);
  --fg: #111;
  --tint: grayscale(0%) brightness(1);
}

.modulo-tintado.gradient .mt-section[data-color="gold"] {
  --bg: linear-gradient(120deg, #F1C40F, #e4b30d);
  --fg: #000;
  --tint: sepia(60%) hue-rotate(10deg) saturate(200%);
}

.modulo-tintado.gradient .mt-section[data-color="red"] {
  --bg: linear-gradient(120deg, #D5583A, #b8452d);
  --fg: #fff;
  --tint: sepia(80%) hue-rotate(-20deg) saturate(250%);
}

.modulo-tintado.gradient .mt-section[data-color="black"] {
  --bg: linear-gradient(120deg, #000000, #1a1a1a);
  --fg: #fff;
  --tint: grayscale(100%) brightness(.6);
}