/* BASE GENERAL */
    body {
      /* Fondo oscuro con iluminación superior */
      background: radial-gradient(circle at top, #232323 0%, #000 60%);
      color: white;
      font-family: 'Roboto', sans-serif;
    }

    /* Textura sutil para evitar fondo plano */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      background: url('https://www.transparenttextures.com/patterns/asfalt-light.png');
      opacity: 0.06;
      pointer-events: none;
      /* no bloquea interacción */
    }

    /* TIPOGRAFÍA */
    h1,
    h2 {
      color: #b08d57;
      text-align: center;
    }

    /* Línea decorativa bajo títulos */
    h2 {
      position: relative;
      margin-bottom: 40px;
    }

    h2::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: -10px;
      transform: translateX(-50%);
      width: 0;
      height: 2px;
      background: #b08d57;
      opacity: 0;
      transition: all 0.8s ease;
    }

    /* Activación de línea + glow */
    h2.visible::after {
      width: 80px;
      opacity: 1;
      box-shadow: 0 0 8px rgba(201, 167, 77, 0.4);
    }

    /* ANIMACIONES */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.8s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* HERO (cabecera) */
    .hero {
      position: relative;
      padding: 100px 20px;
      background: url("../img/AD/archivo/techo.webp") center/cover no-repeat;
      border-bottom: 1px solid #b08d57;
      z-index: 2;
    }

    /* Oscurecido para mejorar legibilidad */
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.7));
      z-index: 1;
    }

    .hero h1 {
      font-size: 2.8rem;
      letter-spacing: 1px;
      opacity: 1;
      color:#f6c67e
    }

    .hero p {
      color: #fffdfd;
      margin-top: 10px;
    }

    /* BLOQUES DE CONTENIDO */
    .bloque {
      background: linear-gradient(145deg, #111, #0a0a0a);
      padding: 15px;
      border-left: 3px solid #b08d57;
      margin-bottom: 20px;
      transition: all 0.3s ease;
    }

    /* Hover con profundidad */
    .bloque:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 15px rgba(201, 167, 77, 0.15);
    }

    /* Imágenes dentro de bloques */
    .bloque img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
      border-radius: 4px;
      transition: 0.3s;
    }

    /* TEXTO GENERAL */
    .texto {
      text-align: center;
      max-width: 800px;
      margin: auto;
      color: #ccc;
      font-size:1.15rem;
    }

    /* IMÁGENES GENERALES */
    img {
      object-position: center top;
    }

    .antes-img {
      filter: grayscale(60%) brightness(.9);
    }

    .despues-img:hover {
      transform: scale(1.03);
    }

    /* COMPARATIVA ANTES / DESPUÉS */
    .comparativa-card {
      position: relative;
      cursor: pointer;
    }

    /* Contenedor con proporción fija */
    .img-wrapper {
      position: relative;
      overflow: hidden;
      aspect-ratio: 16/10;
    }

    /* Imágenes superpuestas */
    .img-despues,
    .img-antes {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center center;
    }

    /* Transición de imagen anterior */
    .img-antes {
      transition: opacity .5s;
    }

    /* Hover o click  (desaparece "antes")*/
    .comparativa-card:hover .img-antes,
    .comparativa-card.active .img-antes {
      opacity: 0;
    }

    /* ETIQUETAS (ANTES / DESPUÉS) */
    .label-custom {
      position: absolute;
      top: 10px;
      padding: 4px 10px;
      font-size: 0.75rem;
      border-radius: 20px;
      backdrop-filter: blur(4px);
      z-index: 10;

      opacity: 0;
      transform: translateY(-5px);
      transition: all 0.4s ease;
    }

  /* Estado inicial */
.label-antes {
  opacity: 1;
}

.label-despues {
  opacity: 0;
}

/* Hover */
.comparativa-card:hover .label-antes,
.comparativa-card.active .label-antes {
  opacity: 0;
}

.comparativa-card:hover .label-despues,
.comparativa-card.active .label-despues {
  opacity: 1;
}

    .label-antes {
      left: 10px;
      background: rgba(8, 6, 6, 0.4);
      color: #ccc;
    }

    .label-despues {
      right: 10px;
      background: rgba(201, 167, 77, 0.4);
      color:#ccc;
      border: 1px solid #b08d57;
    }




    
    /* CAROUSEL */
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
      filter: invert(1);
    }

    .carousel-item {
      height: 100%;
    }

    .carousel-item h5 {
      margin-top: 15px;
    }

    .carousel-item p {
      font-size: 0.9rem;
      color: #ccc;
    }

    /* El bloque llena el slide */
    .carousel-item .bloque {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Imágenes técnicas */
    #carouselTecnico img {
      width: 100%;
      aspect-ratio: 16/9;
      object-fit: cover;
    }

    #carouselEspacios img {
      width: 100%;
      object-fit: cover;
    }

    /* Altura mínima del carrusel */
    .carousel-inner {
      min-height: 420px;
    }

    /* RESPONSIVE */
    @media(max-width:768px) {
      .bloque img {
        height: 160px;
      }
    }

    /* EFECTO LUZ EN SECCIONES*/
    section {
      position: relative;
      margin-bottom: 80px;
    }

    section::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at center, rgba(201, 167, 77, 0.06), transparent 70%);
      pointer-events: none;
      z-index: 0;
    }

    section>* {
      position: relative;
      z-index: 1;
    }

    /* SECCIÓN ARCHIVO (IMAGEN HISTÓRICA) */
    .archivo img {
      filter: grayscale(100%) contrast(1.1);
      transition: 0.3s;
    }

    .archivo img:hover {
      filter: grayscale(0%);
      transform: scale(1.02);
    }

    /* Imagen principal (documento) */
    .img-principal {
      max-width: 700px;
      width: 100%;
      margin: 0 auto 20px;
      display: block;
      border-radius: 6px;
      border: 1px solid rgba(201, 167, 77, 0.15);
      transition: all 0.3s ease;
    }

    /* Hover elegante */
    .img-principal:hover {
      transform: scale(1.02);
      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.6),
        0 0 12px rgba(201, 167, 77, 0.2);
    }

    /* BOTÓN PERSONALIZADO= */
    .btn-recorrido {
      border: 2px solid #b08d57;
      color: #b08d57;
      padding: 12px 28px;
      background: transparent;
      transition: all .3s ease;
    }

    .btn-recorrido:hover {
      background: #b08d57;
      color: white;
    }

    /*   PARALLAX CINEMATOGRÁFICO RESPONSIVE */

    .parallax-seccion {
      position: relative;

      height: 100vh;

      overflow: hidden;

      display: flex;
      align-items: center;
      justify-content: center;

      margin: 120px 0;
    }


    /* FONDO */
    .parallax-bg {
      position: absolute;

      top: -20%;
      left: 0;

      width: 100%;
      height: 140%;

      background:
        linear-gradient(to bottom,
          rgba(0, 0, 0, .5),
          rgba(0, 0, 0, .8)),
        url("../img/AD/archivo/techo.webp");

      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;

      transform: translateY(0) scale(1.1);

      will-change: transform;

      z-index: 0;
    }


    /* VIÑETA OSCURA */

    .parallax-seccion::after {
      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(circle at center,
          rgba(0, 0, 0, 0) 35%,
          rgba(0, 0, 0, .75) 100%);

      z-index: 1;
    }


    /* CONTENIDO */

    .parallax-contenido {
      position: relative;

      z-index: 2;

      text-align: center;

      padding: 10px;
    }


    /* MÓVIL */
.parallax-contenido {
    width: 95%;
}

/* TABLET */
@media (min-width: 768px){
    .parallax-contenido{
        width: 80%;
    }
}

/* ESCRITORIO */
@media (min-width: 1200px){
    .parallax-contenido {
        width: 100%;
        max-width: 1900px;
    }
}
    /* ETIQUETA */

    .parallax-etiqueta {
      display: block;

      margin-bottom: 15px;

      color: #b08d57;

      letter-spacing: 4px;

      font-size: 1.5rem;
    }


    /* TÍTULO */

    .parallax-contenido h2 {
      color: white;

      font-size: clamp(2rem, 4vw, 4rem);

      letter-spacing: 2px;

      text-transform: uppercase;

      text-shadow:
        0 4px 12px rgba(0, 0, 0, .6);
    }


    /* RESPONSIVE */

    @media(max-width:768px) {

      .parallax-seccion {
        height: 45vh;
      }

      .parallax-contenido h2 {
        font-size: 2rem;
      }

    }

    /* FRANJA EDITORIAL CLARA */

    .franja-editorial {
      background: #e9e4da;
      color: #1a1a1a;

      padding: 120px 20px;

      text-align: center;

      position: relative;

      overflow: hidden;
    }

    /* textura sutil */

    .franja-editorial::before {

      content: "";

      position: absolute;
      inset: 0;

      background:
        radial-gradient(circle at top,
          rgba(0, 0, 0, .03),
          transparent 70%);

      pointer-events: none;
    }

    /* contenido */

    .franja-editorial .container {

      max-width: 850px;

      position: relative;
      z-index: 2;
    }

    /* fecha */

    .franja-fecha {

      display: block;

      letter-spacing: 4px;

      font-size: .8rem;

      margin-bottom: 20px;

      color: #b08d57;
    }

    /* título */

    .franja-editorial h2 {

      color: #111;

      font-size: clamp(2rem, 4vw, 3.8rem);

      margin-bottom: 25px;

      font-weight: 300;

      letter-spacing: 1px;
    }

    /* línea decorativa */

    .franja-editorial h2::after {

      content: "";

      display: block;

      width: 80px;
      height: 2px;

      background: #b08d57;

      margin: 25px auto 0;
    }

    /* texto */

    .franja-editorial p {

      font-size: 1.05rem;

      line-height: 1.9;

      color: #333;

      max-width: 700px;

      margin: auto;
    }

    /* responsive */

    @media(max-width:768px) {

      .franja-editorial {

        padding: 80px 20px;
      }

      .franja-editorial h2 {

        font-size: 2rem;
      }

    }
/* SECCIÓN RECONSTRUCCIÓN */

.seccion-reconstruccion {

  background:
    radial-gradient(circle, #111 0%, #000 80%);
  padding: 140px 20px;
  border-radius: 20px;
  position: relative;
  overflow: hidden;

}
.seccion-reconstruccion::before {

  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center,
      rgba(201,167,77,.05),
      transparent 70%);
  pointer-events: none;

}
    .reconstruccion-img {
    
      width: 800px;
      max-width: 100%;
      display: block;
      margin: auto;
      border-radius: 8px;

      /* estado inicial */
      filter:
        grayscale(30%) brightness(.8) contrast(1.05) saturate(.85);
      transform: scale(1);
      transition:
        filter 2s ease,
        transform 1.2s ease,
        box-shadow 1.2s ease;

    }

    /* HOVER */

    .reconstruccion-img:hover {

      filter:
        grayscale(0%) brightness(1) contrast(1.09) saturate(1.3);
      transform: scale(1.1);
      box-shadow:
        0 0 40px rgba(201, 167, 77, .14),
        0 0 100px rgba(201, 167, 77, .08),
        0 25px 50px rgba(0, 0, 0, .55);

    }