/*Calcular alturas del top-header y main-header*/
:root {
    --top-header-height: 44px;
    --main-header-height: 138.86px;
    --menu-section-height: 36.89;
}
/* ≥ 611px */
@media (min-width: 611px) {
    :root {
        
        --main-header-height: 143.86px;
    }
}
/* ≥ 770px */
@media (min-width: 770px) {
    :root {
        
        --menu-section-height: 56px; /* para el main menu*/ 
    }
}
/* ≥ 874px */
@media (min-width: 874px) {
    :root {
        
        --main-header-height: 155.8px;
    }
}
: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,
    rgba(0,0,0,.65),
    rgba(0,0,0,.35)
  );
  z-index: 1;
  pointer-events: none;
  contain: layout paint;
}

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

.fast-hero__content h1 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin-bottom: .75rem;
  min-height: 1em;
}

.fast-hero__content p {
  font-size: 1.1rem;
  opacity: .9;
  min-height: 1em;
}

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

  .fast-hero__content {
    max-width: 100%;
  }
}


.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 h1 {
  font-weight: 700;
  letter-spacing: .5px;
}


.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);
}



/* 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;
}