/*
Theme Name: Hello Elementor Child
Theme URI: https://matiasrodriguez.cl
Author: Matías Rodríguez
Template: hello-elementor
Version: 1.1
*/

/* ================================
   Fuentes locales (solo Recoleta)
   Ruta: /themes/hello-elementor-child/assets/fonts/
   ================================ */
@font-face{
  font-family: "Recoleta";
  src: url("assets/fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 100;            /* alias (usa Regular) */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Recoleta";
  src: url("assets/fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 400;            /* Regular */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Recoleta";
  src: url("assets/fonts/Recoleta-Bold.woff2") format("woff2");
  font-weight: 600;            /* Bold usado como 600 */
  font-style: normal;
  font-display: swap;
}
/* Aliases por si Elementor pide pesos que no existen */
@font-face{
  font-family: "Recoleta";
  src: url("assets/fonts/Recoleta-Regular.woff2") format("woff2");
  font-weight: 500;            /* map a Regular */
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Recoleta";
  src: url("assets/fonts/Recoleta-Bold.woff2") format("woff2");
  font-weight: 700;            /* map a Bold */
  font-style: normal;
  font-display: swap;
}

/* ================================
   Aplicación global rápida
   ================================ */
html, body {
  font-family: "Recoleta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, serif;
  font-weight: 400;
}
p, li, button, input, textarea {
  font: inherit;
}
h1, h2, h3, h4, h5, h6 {
  font-family: "Recoleta", system-ui, -apple-system, "Segoe UI", Roboto, Arial, serif;
  font-weight: 600; /* usamos 600 (Bold mapeado) */
}

/* ==========================================================================
   Home Carousel
   Widget: Elementor > Diapositivas
   Clase del widget: carrusel-home
   ^MR. 9 NOV 25
   ========================================================================== */

.carrusel-home {
  /* Alto del gradiente (puedes cambiarlo sin tocar más reglas) */
  --mr-top-gradient-height: 200px;
}

/* Asegura contexto de posicionamiento y evita fugas si hay efectos de zoom */
.carrusel-home .elementor-main-swiper,
.carrusel-home .swiper,
.carrusel-home .swiper-container {
  position: relative;
  overflow: hidden;
}

/* Capa del gradiente: negro -> transparente en la parte superior (full width) */
.carrusel-home .elementor-main-swiper::before,
.carrusel-home .swiper::before,
.carrusel-home .swiper-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--mr-top-gradient-height);
  background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none; /* no bloquea flechas ni links */
  z-index: 2;           /* sobre la imagen, bajo el contenido */
}

/* Garantiza que títulos / botones del slide queden sobre el gradiente */
.carrusel-home .elementor-slide-content {
  position: relative;
  z-index: 3;
}

/* Opcional: altura menor del gradiente en móviles */
@media (max-width: 767px) {
  .carrusel-home {
    --mr-top-gradient-height: 140px;
  }
}