/* ================================
   Estilos base (versión escritorio)
   ================================ */

   main {
    font-family: Arial, sans-serif;
  }
  
  /* Contenedor de dos columnas */
  .info-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    background-color: #fff;
    max-height: 450px;
    padding: 50px 5%;
    position: relative; /* Para uso de background en mobile */
  }
  
  .info-section .info-image {
    width: 40%;
    overflow: hidden;
    height: 450px;
  }
  
  .info-section .info-image img {
    width: 100%;
    height: auto;
    display: block;
    transform: translateY(-10%);
  }
  
  .info-section .info-text {
    width: 60%;
    flex: 1;
  }
  
  .info-section .info-text .text-space {
    margin: auto;
    max-width: 460px;
    display: flex;
    flex-direction: column;
  }
  
  .info-section hr {
    width: 80%;
    align-self: center;
  }
  
  .info-section .info-text h2 {
    font-size: 1.5rem;
    margin-bottom: 15px;
    color: #043B63;
  }
  
  .info-section .info-text p {
    text-align: justify;
    font-family: system-ui;
    font-size: 16px;
    font-weight: 300;
    color: #043B63;
    margin-bottom: 15px;
    line-height: 25px;
  }
  
  #cvl-f {
    font-family: adobe-caslon-w01-smbd, serif;
    font-weight: bold;
  }
  
  #final-text {
    text-align: center;
    font-size: 18px;
    font-weight: 400;
  }
  
  .info-section .info-text hr {
    margin: 15px 0;
    border: none;
    border-top: 1px solid #ccc;
  }
  
  /* =====================================
     Estilos responsive para dispositivos móviles
     ===================================== */
  @media (max-width: 768px) {
    .info-section {
      flex-direction: column;
      max-height: none;
      padding: 20px;
      gap: 20px;
    }
    
    /* Ocultamos el contenedor de imagen para mobile */
    .info-section .info-image {
      display: none;
    }
    
    /* Usamos la imagen como fondo en cada sección:
       - La primera sección (sin la clase "alternate") usará img1.
       - La sección con clase "alternate" usará img2. */
    .info-section:not(.alternate) {
      background: 
        /* Capa de overlay para mejorar legibilidad */
        linear-gradient(
          to bottom,
          rgb(255,255,255) 0%,
          rgba(255,255,255, 0.9) 20%,
          rgba(255,255,255,0.9) 40%,
          rgba(255,255,255, 0.9) 60%,
          rgb(255,255,255) 80%
        ),
        url("../img/img1.png") no-repeat center/cover;
    }
    
    .info-section.alternate {
      background: 
        linear-gradient(
          to bottom,
          rgb(255,255,255) 0%,
          rgba(255,255,255, 0.9) 20%,
          rgba(255,255,255,0.9) 40%,
          rgba(255,255,255, 0.9) 50%,
          rgb(255,255,255) 70%
        ),
        url("../img/img2.png") no-repeat center/cover;
    }
    
    /* Ajustamos el bloque de texto para que destaque sobre el fondo */
    .info-section .info-text {
      width: 100%;
      background: transparent;
      padding: 20px;
      box-sizing: border-box;
    }
    
    .info-section .info-text .text-space {
      max-width: 100%;
      text-align: left;
    }
    
    .info-section hr {
      width: 100%;
    }
  }
  
  /* Ajustes adicionales para pantallas muy pequeñas */
  @media (max-width: 480px) {
    .info-section .info-text p {
      font-size: 14px;
      line-height: 1.4;
    }
    
    #final-text {
      font-size: 16px;
    }
    
    .info-section {
      padding: 15px;
      margin-top: 0px
    }
    
    .info-section .info-text {
      padding: 15px;
    }
  }