/*Calcular alturas del top-header y main-header*/
:root {
    --top-header-height: 0px;
    /*--main-header-height: 138.86px;*/ /*old value for expanded*/
    --main-header-height: 46.38px;
    --menu-section-height: 36.89px;
}
/* ≥ 611px */
@media (min-width: 611px) {
    :root {
        
        /*--main-header-height: 143.86px;*/ /*old value for expanded*/
        -main-header-height: 51.38px;
    }
}
/* ≥ 770px */
@media (min-width: 770px) {
    :root {
        -main-header-height: 45px;
        --menu-section-height: 56px; /* para el main menu*/ 
    }
}
/* ≥ 874px */
@media (min-width: 874px) {
    :root {
        
        --main-header-height: 45px;
    }
}
:root {
    --header-total-height: calc(
        var(--top-header-height) + var(--main-header-height)
    );
    --header-min-height: var(--main-header-height);
}




/* Bloquea scroll mientras carga */
body.is-loading {
  overflow: hidden;
}

/* Desaparece el loader cuando la clase ha cambiado a loader-hidden*/
.loader-hidden .site-loader {
  display: none !important;
}

/* Loader full screen */
.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  transition: opacity .6s ease, visibility .6s ease;
}


/* Cuando termina carga */
body:not(.is-loading) .site-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Fondo */
.site-loader picture,
.site-loader img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.site-loader img {
  object-fit: cover;
}

/* Contenido centrado */
.loader-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  font-family: system-ui, sans-serif;
}

.loader-svg {
  animation: loader-rotate 1.2s linear infinite;
}

.loader-circle {
  stroke-dasharray: 90 150;
  stroke-dashoffset: 0;
  animation: loader-dash 1.5s ease-in-out infinite;
}

@keyframes loader-rotate {
  to { transform: rotate(360deg); }
}

@keyframes loader-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: -125;
  }
}



/* Texto */
.loader-text {
  font-size: 14px;
  letter-spacing: 1px;
  opacity: .85;
}



/*CSS critico para el Hero*/

/* HEADER */
.site-header {
  position: relative;
  z-index: 10;
}


/* ==============================
   FAST HERO – TEXTO SOBRE IMAGEN
============================== */


.fast-hero {
  position: relative;
  aspect-ratio: 16 / 9; /* aspect radio desktop*/
  width: 100%;
  max-height: calc(100svh - var(--header-total-height));
  overflow: hidden;
  /*min-height: 70svh; /* viewport estable */
  display: flex;
  align-items: center;
  padding: clamp(3rem, 6vw, 6rem);
  overflow: hidden;
  background-color: #111; /* fallback */
}

/*Mobile*/
@media (max-width: 767px) {
  .fast-hero {
    aspect-ratio: 4/5;
    width: 100%;
    overflow: hidden;
    max-height: calc(
        100svh - var(--header-total-height, var(--main-header-height, 150px))
    );
    /*min-height: 70svh;*/
    /*min-height: unset; /* viewport estable */
  }
}



/* Imagen de fondo */
.fast-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.fast-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay para legibilidad */
.fast-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(0 0 0 / 65%),
    rgba(0,0,0,.62)
  );
  z-index: 1;
  pointer-events: none;
  contain: layout paint;
}

/* Contenido */
.fast-hero__content {
  position: relative;
  z-index: 2;
  max-width: 560px;
  color: #fff;
  /*max-width: 80%;*/
}

.fast-hero__content h1 {
  font-size: clamp(1.5rem, 4vw, 2.7rem);
  margin-bottom: .75rem;
  min-height: 1em;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
}

.fast-hero__content p {
  font-size: clamp(1.2rem, 4vw, 1.4rem) !important;
  opacity: .9;
  font-family: 'Source Sans 3', sans-serif !important;
  font-weight: 400 !important;
  min-height: 1em;
}


.fast-hero__content a {
  font-size: clamp(1.5rem, 4vw, 1.9rem) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
}

/* Responsive */
@media (max-width: 1023px) {
  .fast-hero {
    justify-content: center;
    text-align: center;
  }

  /*.fast-hero__content {
    max-width: 80%;
  }*/
}


.fast-hero__content h1 {
  
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.9),
     1px -1px 0 rgba(0,0,0,.9),
    -1px  1px 0 rgba(0,0,0,.9),
     1px  1px 0 rgba(0,0,0,.9);

  /*-webkit-text-stroke: 1px rgba(0,0,0,.9);*/
}


.fast-hero__content p {
  text-shadow:
    -0.5px -0.5px 0 rgba(0,0,0,.7),
     0.5px -0.5px 0 rgba(0,0,0,.7),
    -0.5px  0.5px 0 rgba(0,0,0,.7),
     0.5px  0.5px 0 rgba(0,0,0,.7);
}


/*Convertir a en boton dentro del hero*/
/* ==============================
   CTA BUTTON – HERO
============================== */

.fast-hero__content a {
  display: inline-block;
  margin-top: 1.8rem;
  padding: 14px 26px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1.4rem;
  text-decoration: none;
  background: #0366bc;/* WhatsApp */
  color: #cbcbcb;
  box-shadow: 0 10px 25px rgba(229, 16, 16, 0.35);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Hover efecto pro */
.fast-hero__content a:hover {
  color: #e2e1e1;
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 15px 35px rgba(151, 5, 5, 0.5);
}

/* Click efecto */
.fast-hero__content a:active {
  transform: scale(0.97);
}

/* Efecto brillo animado */
.fast-hero__content a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.6),
    rgba(255,255,255,0.2)
  );
  transform: skewX(-25deg);
}

/* Animación del brillo */
.fast-hero__content a:hover::before {
  left: 125%;
  transition: all 0.75s ease;
}

/* Animación pulso (urgencia visual) */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(36, 105, 252, 0.6);
  }
  70% {
    box-shadow: 0 0 0 12px rgba(53, 53, 248, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(85, 73, 251, 0);
  }
}

.fast-hero__content a {
  animation: pulse 2.5s infinite;
}

/* Mobile ajustes */
@media (max-width: 767px) {

  .fast-hero {
    /*min-height: 400px;*/
    min-height: 500px; /* ✅ Cambiar de 400px a 500px */
    display: flex;
    align-items: flex-end;    /* 👈 Empuja el contenido hacia abajo */
    justify-content: center;  /* Mantiene el contenido centrado horizontalmente */
    padding-bottom: 10px;     /* 👈 La distancia exacta que pediste al fondo */
    padding-left: 10px;       /* Margen lateral de seguridad */
    padding-right: 10px;      /* Margen lateral de seguridad */
  }
  
  .fast-hero__content {
    /*bottom: -90px;*/
    position: static; /* ✅ AGREGAR */
    margin: 0 auto; /* ✅ AGREGAR */
    max-width: 80%;
    text-align: left;
  }
  
  .fast-hero__content a {
    width: 100%;
    max-width: 250px;
    text-align: center;
    padding: 16px;
    font-size: 1.2rem;
    margin-top: 1.5rem;
  }

}

@media (min-width: 768px) {
  .fast-hero {
    position: relative;
    align-items: flex-end;  /* Botón al fondo */
  }

  .fast-hero__content {
    position: absolute;
    bottom: 50px;           /* ← Ajusta este valor */
    left: 50px;             /* ← Espacio desde izquierda */
  }
}



/* Eliminar espacio del breadcrumb Newsmatic */
/* Quitar padding/margen del contenedor del breadcrumb */
#breadcrumbs-width-section .newsmatic-container {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
}

#breadcrumbs-width-section .newsmatic-breadcrumb-wrap  {
  margin-left: 0.5rem !important;
}



/**********************************************************
Para el loader y la identificacion de carga del CSS, debe 
estar al final del css
**********************************************************/

/* Señal para loader / CSS base */
.fast-hero {
  --hero-css-ready: 1;
}


/* ===== BASE CSS READY ===== */
body {
  --base-css-ready: 1;
}