:root {
      --negro: #0f0f0f;
      --negro-suave: #1c1c1c;
      --blanco: #ffffff;
      --gris-claro: #f5f5f5;
      --dorado-claro: #c79d63;
      --dorado-oscuro: #8b6f47;
    }

    /* Estilo general del documento */

    body {
      font-family: fuenteEventos;   
      text-align: justify;

    }

    h2,
    h5 {
      font-family: 'Oswald', sans-serif;
      color: #c79d63;
    }

    .act-title {
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 2rem;
      color: var(--dorado-claro);
      margin-bottom: 10px;
    }

    /*  ESTRUCTURA DE BLOQUES */

    /* Cada bloque de teatro o sección */
    .teatro-bloque {
      padding: 90px 0;
      /* separación vertical */
      border-bottom: 1px solid #e5e2dc;
      /* línea separadora */
    }

    .teatro-bloque:nth-child(even) {
      background: #fafafa;
    }

    /*  TARJETAS DE CONTENIDO */

    /* Contenedor de texto */
    .card-custom {
      background: var(--negro);
      color: var(--blanco);
      padding: 2.2rem;
      border-radius: 12px;
      border: 1px solid rgba(199, 157, 99, 0.2);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }

    /*  TEXTOS */

    /* Títulos de sección */
    .section-title {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 25px;
      color: var(--dorado-claro);
      letter-spacing: 1px;
    }

    /* Fechas */
    .teatro-fecha {
      display: inline-block;
      font-size: 0.9rem;
      color: var(--dorado-claro);
      margin-bottom: 10px;
      letter-spacing: 1px;
    }

    /* Subtítulos */
    .subtitulo {
      font-weight: 600;
      margin-top: 1.2rem;
      margin-bottom: 0.4rem;
      color: var(--blanco);
      font-size: 0.95rem;
      text-transform: uppercase;
      opacity: 0.8;
    }

    /* Texto general */
    .card-custom p {
      line-height: 1.6;
      color: var(--blanco);
      margin-bottom: 1rem;
      font-size: 0.96rem;
      max-width: 620px;
      margin-left: auto;
      margin-right: auto;
    }

    /*  IMÁGENES */

    /* Contenedor de imágenes */
    .teatro-media {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    /* Imagen individual */
    .teatro-img {
      width: 100%;
      height: 300px;
      object-fit: cover;
      border-radius: 10px;
      filter: brightness(0.95);
      transition: all 0.3s ease;
    }

    /* Hover (ligero zoom) */
    .teatro-img:hover {
      transform: scale(1.03);
      filter: brightness(1);
    }

    /* 
 BLOQUES DESTACADOS
 */

    /* Curiosidades */
    .curiosidad {
      background: #111;
      border-left: 4px solid #b18b57;
      padding: 1rem;
      border-radius: 8px;
      margin-top: 0.5rem;
      color: #ddd;
      font-size: 0.95rem;
    }

    /* Citas históricas */
    .cita-historica {
      background: #111;
      border-left: 4px solid #b18b57;
      font-style: italic;
      font-size: 0.95rem;
      padding: 1rem;
      margin-top: 0.5rem;
      border-radius: 8px;
      color: #ddd;
    }

    /* ENLACES */

    .enlace-historia {
      display: inline-block;
      font-weight: 600;
      color: var(--dorado-claro);
      text-decoration: none;
    }

    .enlace-historia:hover {
      color: var(--dorado-oscuro);
      text-decoration: underline;
    }

    .enlace-secundario {
      display: inline-block;
      margin-top: 0.3rem;
      font-size: 0.9rem;
      color: #aaa;
      text-decoration: none;
    }

    .enlace-secundario:hover {
      text-decoration: underline;
    }

    /*  SEPARADORES */

    hr {
      border: none;
      height: 1px;
      background: rgba(199, 157, 99, 0.3);
      margin: 1rem 0;
    }

    /*  PARALLAX (Ayuntamiento) */

    /* Imagen fija al hacer scroll */
    .parallax-ayto {
      height: 500px;
      background-image: url("https://images.trvl-media.com/place/553248621533071585/b9c938f5-9f44-4a4a-a500-d0c9ca45cad9.jpg");
      background-attachment: fixed;
      background-size: cover;
      background-position: center;

    }

    /* Texto del parallax */
    .parallax-ayto h2 {
      color: var(--dorado);
      font-size: 1.5rem;
      letter-spacing: 1px;
      opacity: 0;
      transform: translateY(20px);
      transition: all 1s ease;
      font-weight: 500;
    }

    /* Animación cuando aparece */
    .parallax-ayto.visible h2 {
      opacity: 1;
      transform: translateY(0);
    }

    /* Línea decorativa */
    .parallax-ayto h2::after {
      content: "";
      display: block;
      width: 60px;
      height: 2px;
      background: var(--dorado);
      margin: 10px auto 0;
    }



    /*  SECCIÓN FINAL */

    .mapa-final {
      background: var(--negro);
      color: var(--blanco);
      padding: 80px 0;
      text-align: center;
    }

    /*  RESPONSIVE */

    @media (max-width: 768px) {


      .hero-ruta h1 {
        font-size: 2rem;
      }

      .card-custom {
        padding: 1.5rem;
      }

      /* Parallax desactivado en móvil */
      .parallax-ayto {
        height: 50vh;
        min-height: 300px;
        background-attachment: scroll;
        background-size: cover;
        background-position: center top;
        background-color: #000;
      }

    }

    /*  ACCESIBILIDAD */

    @media (prefers-reduced-motion: reduce) {




      .teatro-img:hover {
        transform: none;
      }

    }

    /* Contenedor más estrecho en intro */
    .container.py-5 {
      max-width: 900px;
    }

    /* ESTILO DE LOS botones */

    .nav-pills .nav-link {
      color: #b08d57;
      border: 2px solid #b08d57;
      margin: 5px;
      font-weight: bold;
      margin: 5px;
    }

    .nav-pills .nav-link.active {
      background: #c79d63;
      color: black;
    }

    .nav-pills .nav-link:hover {
      background: black;
      color: #c79d63;

      transition: 0.3s;
    }


    /* Scroll chulo */
    .card-custom::-webkit-scrollbar {
      width: 6px;
    }

    /*texto pie de foto*/

    .caption {
      font-size: 0.75rem;
      color: #7a7777;
      font-style: italic;
      margin-top: 5px;
    }

    @media (min-width: 992px) {
      .caption {
        font-size: 0.9rem;
      }
    }

    .card-custom {
      border-right: 7px solid #c79d63;
      ;
    }

    .card-custom::after {
      box-shadow: 0 0 10px #c79d63;

    }
  .susana{
  z-index: 1254;
  }
    /***alineacioncarousel**/
    .carousel-item,
    .carousel-item .row {
      height: 100%;
    }

    .carousel-item:last-child {
      background: #f5f5f5;
    }

    .carousel-item:last-child .section-title {
      font-size: 2.2rem;
    }

    .carousel-item:last-child div[style*="background"] {
      padding-top: 80px;
    }

    .carousel-item:last-child p {
      color: #ddd;
    }

    /***offcanvas***/
    .offcanvas-body p {
      font-size: 0.95rem;
      line-height: 1.6;
      color: #ddd;
    }

    .offcanvas h6 {
      font-size: 1rem;
      margin-bottom: 0.5rem;
    }

    .offcanvas {
      border-left: 3px solid #c79d63;
      box-shadow: -5px 0 20px rgba(0, 0, 0, 0.4);
    }

    
    .offcanvas img:hover {
      opacity: 1;
    }

    /**icono**/
    .decoracion {
      display: flex;
      align-items: center;
      gap: 12px;
      opacity: 0.6;
      max-width: 300px;
      margin: 0 auto 20px;

    }
 .decoracion2 {
      display: flex;
      align-items: center;
      gap: 12px;
  
      max-width: 300px;
      margin: 0 auto 20px;

    }




    .decoracion span {
      flex: 1;
      height: 1.5px;
      background: #c79d63;
      opacity: 0.7;

    }

     .decoracion2 span {
      flex: 1;
      height: 1.5px;
      background: black;
      opacity: 0.7;

    }
    

       .teatro-icono2 {
      font-size: 3.2rem;
       color: #cea46a;
    
      transition: all 0.3s ease;
    }

    .teatro-icono2:hover {
      
      transform: scale(1.4) rotate(15deg);
        
         color: black;
    }

.teatro-icono {
      font-size: 2.2rem;
      color: #cea46a;
      opacity: 0.9;
      transition: all 0.3s ease;
    }


    .teatro-icono:hover {
      color: #e0b878;
      transform: scale(1.2) rotate(15deg);
    }

    .red-clase {
      border-right: 5px solid #c79d63;
      /* ancho | tipo | color */
    }


  /* BOTÓN DORADO CONTINUAR RECORRIDO TEATRAL */

  .btn-recorrido {
      border: 2px solid #b08d57;
      color: #b08d57;
      padding: 12px 28px;
      background: transparent;
      transition: all .3s ease;
  }

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

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