/* =========================================================
   FIAS 2026 · Portada (overrides) · v7

   OBJETIVOS
   - Evitar logo duplicado en escritorio
   - Anclar el titular/iglesia (PNG) a la base del hero
   - Evitar desbordes del PNG sobre el fondo

   ORDEN DE CARGA
   Este CSS debe cargarse el ÚLTIMO.
   ========================================================= */

:root{
  --fias-cream: #f6f2e4;
  --fias-dark:  #a1917a;
  --fias-red:   #e20613;
}

html{ scroll-behavior: smooth; }

body, td, th{
  font-family: 'Montserrat', sans-serif;
}

body{
  background: var(--fias-cream);
}

/* Evita franja bajo cabecera (si quedara algún ajuste previo) */
.comun{ margin-top: 0 !important; }

/* Header siempre por encima */
header{ z-index: 9999; position: relative; }
#cssmenu{ z-index: 10000; }

/* =========================================================
   LOGOS (desktop vs móvil) – evita duplicado
   Usar en HTML:
     <img class="fias-logo fias-logo--desktop" ...>
     <img class="fias-logo fias-logo--mobile" ...>
   ========================================================= */
.fias-logo--desktop{ display: block; }
.fias-logo--mobile{ display: none; }

@media (max-width: 991px){
  .fias-logo--desktop{ display: none !important; }
  .fias-logo--mobile{ display: block !important; }
}

/* =========================================================
   HERO (carousel) – JPG + PNG
   ========================================================= */
#myCarousel{
  margin: 0 !important;
  background: var(--fias-cream);
  overflow: hidden; /* recorte global */
}

#myCarousel .carousel-inner,
#myCarousel .item{
  overflow: hidden; /* anti-desborde PNG */
}

#myCarousel .item{
  position: relative;
  background: var(--fias-cream);
}

/* Fondo (JPG) natural (sin absolute ni min-height extra) */
#myCarousel .carousel-inner > .item > img.hero-bg,
#myCarousel .carousel-inner > .item > img.img-responsive{
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  display: block;
}

/* El .container dentro del slide no debe limitar el overlay */
#myCarousel .item > .container{
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Caption ocupa todo el hero y se ancla abajo */
#myCarousel .carousel-caption{
  position: absolute;
  inset: 0;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left;
  text-shadow: none;
  display: flex;
  align-items: flex-end;   /* ✅ pegado a la base */
  justify-content: flex-start;
  z-index: 3;
}

/* Overlay (PNG) ocupa el alto del hero y se alinea a la base */
#myCarousel .carousel-caption img.hero-layer,
#myCarousel .carousel-caption img{
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: 50% 100%; /* ✅ bottom */
  display: block;
  pointer-events: none;
}

/* Neutraliza ajustes antiguos del carrusel en móvil */
@media (max-width: 767px){
  .carousel{ margin-top: 0 !important; background-color: transparent !important; }
  .carousel .item{ min-height: 0 !important; }
  .carousel-inner>.item>img{ position: relative !important; top:auto !important; left:auto !important; }
}

/* =========================================================
   Social
   ========================================================= */
/*.social{ top: 240px; }
@media (max-width: 767px){
  .social{ display: none; }
}*/

/* =========================================================
   Vídeo
   ========================================================= */
.videoWrapper{ outline: none !important; }
.videoWrapper{
  background: #111;
  border: 14px solid var(--fias-cream);
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}

/* =========================================================
   Bloques inferiores
   ========================================================= */
.bloque-1.programa{ background-color: var(--fias-dark) !important; }
.bloque-1.programa p{ color: var(--fias-cream) !important; }

@media (max-width: 767px){
  .bloque-1{ height: 175px; }
  .programa a{ padding-top: 24px; }
}

/* Menú activo */
#op0-nav a{ color:#fff !important; background: var(--fias-red) !important; }

/* =========================================================
   CARRUSEL · corrección de transición y estabilidad (Bootstrap 3)
   Motivos habituales del “salto”:
   - Falta/override de reglas .next/.prev en position:absolute (dobla la altura durante el slide)
   - Falta de reglas transform-3d (jitter/tirones)
   Alcance: SOLO #myCarousel (mínima intrusión)
   ========================================================= */

/* Evita que durante la transición .next/.prev ocupen flujo y “dupliquen” altura */
#myCarousel .carousel-inner > .next,
#myCarousel .carousel-inner > .prev{
  position: absolute;
  top: 0;
  width: 100%;
}

/* Suavizado del desplazamiento (3D) */
@media all and (transform-3d), (-webkit-transform-3d){
  #myCarousel .carousel-inner > .item{
    -webkit-transition: -webkit-transform .6s ease-in-out;
    transition: transform .6s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
  }
  #myCarousel .carousel-inner > .item.next,
  #myCarousel .carousel-inner > .item.active.right{
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    left: 0;
  }
  #myCarousel .carousel-inner > .item.prev,
  #myCarousel .carousel-inner > .item.active.left{
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    left: 0;
  }
  #myCarousel .carousel-inner > .item.next.left,
  #myCarousel .carousel-inner > .item.prev.right,
  #myCarousel .carousel-inner > .item.active{
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

/* Imágenes siempre proporcionales */
#myCarousel .carousel-inner > .item > img{
  width: 100%;
  height: auto;
  display: block;
}