/*parallax*/
    
.parallax-teatro{
   background-image: url("../img/AD/tecnicoSonido.webp");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   min-height: 800px;
   background-attachment: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
}


.parallax-teatro2{
   background-image: url("../img/AD/tecnico2.webp");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   height: 100vh;
   
   background-attachment: fixed;
   display: flex;
   align-items: center;
   justify-content: center;
}


.gold-line {
  width: 65%;
  height: 3px;
  background-color: #b08d57; /* dorado */
  border: none;
  margin: 20px auto; /* centrado */
}

    /*    ESTILOS GENERALES DE LA WEb  */

    /* 
   body = afecta a TODA la página.
   Aquí definimos:
   - tipografía general
   - color de fondo
   - color del texto
   - separación entre líneas
*/

    body {
      font-family: 'Roboto', sans-serif;

      /* Fondo oscuro elegante */
      background-color: rgb(249, 244, 238);
      ;

      /* Color principal del texto */
      color: #f2f2f2;

      /* Espaciado vertical entre líneas */
      line-height: 1.6;
    }


    /* 
   .container = contenedor principal de toda la web.
   Sirve para que el contenido:
   - no ocupe toda la pantalla
   - quede centrado
*/

    .container {

      /* ancho flexible */
      width: 90%;

      /* límite máximo */
      max-width: 1200px;

      /* centrado automático */
      margin: 40px auto;
    }



    /* =========================================================
   HERO PRINCIPAL
   ========================================================= */

    /*
   .hero = cabecera visual superior.

   position: relative
   permite colocar elementos absolutos dentro.

   overflow: hidden
   evita que sobresalgan elementos.
*/

    .hero {


      background-image: url('../img/AD/lamInA/apaisada2d.webp');
      background-size: cover;
      background-repeat: no-repeat;
      /* espacio interior */
      padding: 60px 40px;

      border-radius: 12px;

      margin-bottom: 30px;
    }

 
    /* Título principal */

    .hero h1 {
      font-size: 3rem;
      margin-bottom: 10px;
    }


    /* Texto descriptivo */

    .hero p {
      font-size: 1.1rem;

      /*
     opacity baja un poco el contraste
     para que el título destaque más.
  */
      opacity: 0.9;
    }


    /*    BOTÓN DESCARGA PDF   */

    .download-btn {

      /*
     inline-block permite:
     - padding
     - márgenes
     - tamaño personalizado
  */
      display: inline-block;

      margin-top: 25px;

      padding: 14px 24px;

      /*
     Dorado institucional
  */
      background: #b08d57;

      color: #111;

      text-decoration: none;

      border-radius: 6px;

      font-weight: bold;
      
      /*
     Animación suave al hover
  */
      transition: background 0.3s ease;
    }


    /* Estado hover = cuando pasamos el ratón */

    .download-btn:hover {
      background: #d1a96e;
    }



    /*    SECCIONES GENERAL  */

    .section {

      /* Fondo ligeramente más claro que el body */
      background: #1a1a1a;

      /*
     borde muy suave
     ayuda a separar visualmente bloques
  */
      border: 1px solid rgba(255, 255, 255, 0.06);

      padding: 30px;

      margin-bottom: 25px;

      border-radius: 12px;

      /*
     sombra muy sutil
  */
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }


    /* Títulos de sección */

    .section h2 {

      margin-bottom: 20px;

      color: #b08d57;

      /*
     línea decorativa inferior
  */
      border-bottom: 1px solid rgba(212, 175, 55, 0.25);

      padding-bottom: 10px;
    }



    /*    GRID RESPONSIVE */

    /*
   display:grid
   crea un sistema de columnas moderno.

   auto-fit:
   ajusta automáticamente las columnas.

   minmax:
   mínimo 280px
   máximo 1fr (fracción del espacio)
*/

    .grid {
      display: grid;

      grid-template-columns:
        repeat(auto-fit, minmax(280px, 1fr));

      gap: 20px;
    }



    /*  LISTAS */

    section ul {
      padding-left: 20px;
    }

    section li {
      margin-bottom: 8px;
    }


    /*  PLANOS DESTACADOS   */

    .plan-highlight {
      position: relative;

      overflow: hidden;

      border-radius: 12px;

      background: #f0f0f0;

      border: 1px solid #ddd;
    }


    /* Imagen del plano */

    .plan-highlight img {
      width: 100%;

      display: block;

      /* transición suave para zoom */
      transition: transform 0.4s ease;
    }


    /* Hover sobre imagen */

    .plan-highlight:hover img {

      /* zoom ligero */
      transform: scale(1.03);
    }



    /* OVERLAY SOBRE LAS IMÁGENES */

    /* Overlay = capa encima de imagen.
   position:absolute:
   se coloca dentro del contenedor.
*/

    .plan-overlay {
      position: absolute;

      bottom: 0;
      left: 0;

      width: 100%;

      /* degradado oscuro
     permite leer texto sobre imagen  */
      background:
        linear-gradient(to top,
          rgba(0, 0, 0, 0.60),
          rgba(0, 0, 0, 0.01));

      color: black;

      padding: 20px;
    }




    /*    CAJAS DE INFORMACIÓN    */

   .info-box {
  position: relative;
  overflow: hidden;

  background: #202020;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 20px;

  transition: all 0.3s ease;
}

.info-box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: #b08d57;
  transition: width 0.3s ease;
}

.info-box:hover::after {
  width: 100%;
}

.info-box:hover {
  transform: translateY(-4px);
}


.info-box:hover {
  transform: translateY(-6px);
  box-shadow:
    0 15px 35px rgba(0, 0, 0, 0.4),
    0 0 15px rgba(176, 141, 87, 0.2);
  border-color: rgba(176, 141, 87, 0.5);
}


.info-box h3 {
  transition: color 0.3s ease;
}

.info-box:hover h3 {
  color: #b08d57;
}



    /*    FOOTER   */

   



    /*    RESPONSIVE    */

    /*   @media aplica estilos
   sólo en pantallas pequeñas.*/

    @media (max-width: 768px) {

      /* reducimos tamaño del título */

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

      /* menos padding en móvil */

      .hero {
        padding: 40px 25px;
      }

      .section {
        padding: 20px;
      }
    }



    /*    CARD DE PLANOS   */

    .plano-card {

      position: relative;

      overflow: hidden;

      border-radius: 18px;

      /*
     cursor:pointer indica clicable
  */
      cursor: pointer;
    }



    /* Imagen principal */

    .plano-card img {

      width: 100%;

      /*
     altura fija visual
  */
      height: 380px;

      /*
     recorta elegantemente
     sin deformar imagen
  */
      object-fit: cover;

      display: block;
    }



    /*    BOTÓN "CLICK PARA AMPLIAR"  */

    .zoom-label {

      position: absolute;

      top: 16px;
      right: 16px;

      background: rgba(0, 0, 0, 0.55);

      backdrop-filter: blur(4px);

      color: white;

      font-size: 0.78rem;

      padding: 6px 12px;

      /*
     píldora redonda
  */
      border-radius: 999px;

      transition: 0.25s ease;
    }



    /* Hover del botón */

    .plano-card:hover .zoom-label {

      background: rgba(0, 0, 0, 0.75);

      /*
     pequeño movimiento elegante
  */
      transform: translateY(-2px);
    }



    /*    MODAL DE IMAGEN AMPLIADA  */

    /*
   Modal = ventana flotante fullscreen
*/

    .modal {

      /*
     oculto inicialmente
  */
      display: none;

      position: fixed;

      z-index: 9999;

      left: 0;
      top: 0;

      width: 100%;
      height: 100%;

      /*
     fondo oscuro semitransparente
  */
      background: rgba(0, 0, 0, 0.85);

      /*
     centrado perfecto con flex
  */
      justify-content: center;
      align-items: center;

      padding: 40px;
    }



    /* Imagen dentro del modal */

    .modal img {

      /*
     evita que salga de pantalla
  */
      max-width: 95%;
      max-height: 95%;

      border-radius: 12px;

      /*
     sombra elegante
  */
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    }