/* Estilos generales */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body {
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: #fcfaf2;
  }
  
  header {
    background-color: #ff6e5c;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    position: fixed;
    top: 0;
    z-index: 1000;
  }
  
  header .logo img {
    height: 65px;
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .banner-container {
      margin-top: 80px; /* Espacio de 80px arriba del banner */
      display: flex;
      align-items: center;
      background: url('../imagenes/img-center-plan-joven-white.jpg') no-repeat center center/cover;
      height: 75vh;
      padding: 20px;
      color: #273181;
      position: relative;
  }
  
  .banner-left {
      flex: 1;
      margin-right: 20px;
  }
  
  .banner-left h1 {
      font-size: 34px; /* Título más grande en dispositivos móviles */
      margin: 0;
      color: #ff6e5c;
    width: 300px; 
  }
  
  .banner-left .separator {
      width: 50%;
      height: 2px;
      background-color: #ff6e5c;
      margin: 10px 0;
  }
  
  .banner-left p {
      font-size: 30px;
      margin: 0;
      color: #ff6e5c;
  }
  
  .form-container {
      background-color: rgba(255, 255, 255, 0.6); /* Transparente */
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
      max-width: 90%; /* Ancho del formulario ajustado */
      width: auto; /* Asegura el ancho del contenido */
      margin-top: 20px; /* Separación del banner */
  }
  
  .form-group {
      margin-bottom: 15px;
  }
  
  .form-group input {
      padding: 10px;
      background-color: #ff6e5c; /* Fondo oscuro */
      border: 1px solid #ff6e5c;
      border-radius: 5px;
      font-size: 1rem;
      color: white; /* Texto blanco */
      transition: all 0.3s ease;
  }
  
  .form-group input:focus {
      background-color: #eef1f8; /* Fondo azul claro al hacer clic */
      border-color: #273181;
      outline: none;
      color: #273181;
  }
  
  .form-group .captcha {
      font-size: 1rem;
      font-weight: bold;
      color: #aa1300; 
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 40px;
  }
  
  .form-container button {
      width: 100%;
      padding: 10px;
      background-color: transparent; /* Sin relleno inicialmente */
      color: black; /* Texto azul */
      border: 2px solid #000; /* Borde azul */
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.3s ease; /* Animación suave para el cambio de estilo */
  }
  
  .form-container button:hover,
  .form-container button:focus {
      background-color: #ff6e5c; /* Relleno azul al pasar el mouse o enfocar */
      color: white; /* Texto blanco */
      border-color: #ff6e5c; /* Asegura que el borde coincida */
  }
  
  .form-container button:active {
      background-color: #a31e0d; /* Relleno azul más oscuro al hacer clic */
      color: white; /* Texto blanco */
      border-color: #a31e0d; /* Borde más oscuro */
  }
  
  .form-group input::placeholder {
      color: white; /* Cambia el color del placeholder a blanco */
  }
  
  /* Responsive */
  @media (max-width: 768px) {
      .banner-container {
          flex-direction: column; /* Ajuste para celular */
          height: auto; /* Banner más alto en dispositivos móviles */
      }
      .banner-left {
          margin-bottom: 20px;
          text-align: center;
      }
      .banner-left h1 {
          font-size: 28px; /* Título más adecuado para pantallas pequeñas */
         width: 100%; 
        
      }
    
    .banner-left p {
      font-size: 35px;
      width: 100%; 
      background-color: rgba(255, 255, 255, 0.6); /* Transparente */
      text-align: center;
  }
      .banner-left .separator {
          width: 50%;
          margin: 10px auto; /* Línea centrada */
        
      }
  }
  
  
  
  
  
      p {
              font-family: 'Josefin Sans', sans-serif;
              font-weight: 700;
              text-transform: uppercase;
              text-align: left;
          }
  
          .linea {
              z-index: -1;
              margin: 20px 0; /* Margen para separar las líneas de los bloques */
              position: relative;
              width: 50px; /* El ancho de la línea */
              height: 1px; /* La altura de la línea horizontal */
              background-color: #ff6e5c; /* Color de la línea */
              transform: rotate(90deg); /* Rotar la línea 90 grados */
              transform-origin: center; /* Asegura que la línea rote alrededor de su centro */
              margin-left: auto;
              margin-right: auto;
          }
  
          .bloque {
              width: 80%;
              margin: 40px auto;
              padding: 20px;
              border-radius: 8px;
              color: white;
              text-align: center;
              background-color: #ff6e5c;
          }
  
          #bloque-2, #bloque-3 {
              width: 70%;
              margin: 40px auto;
          }
  
          #bloque-2 strong, #bloque-3 strong {
              text-align: center;
              display: block;
              margin-bottom: 10px;
          }
  
          .gallery-container {
              background-color: #ff6e5c;
              padding: 20px;
              border-radius: 8px;
              color: white;
              text-align: center;
              margin: 40px auto;
              width: 80%;
          }
  
          .gallery-container h2 {
              margin: 0 0 20px;
              font-size: 24px;
          }
  
          .gallery {
              display: flex;
              justify-content: center;
              gap: 20px;
              flex-wrap: wrap;
          }
  
          .gallery-item {
              text-align: center;
              transition: transform 0.3s ease;
              width: 200px;
              display: flex;
              flex-direction: column;
          }
  
          .gallery-item:hover {
              transform: scale(1.1);
          }
  
          .gallery-item img {
              width: 100%;
              height: 150px;
              object-fit: cover;
              border-radius: 8px 8px 0 0;
          }
  
          .gallery-item .info {
              background-color: white;
              padding: 15px;
              border-radius: 0 0 8px 8px;
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
              flex-grow: 1;
              display: flex;
              flex-direction: column;
              justify-content: center;
          }
  
          .gallery-item .info h3 {
              margin: 0;
              font-size: 18px;
              color: #333;
          }
  
          .gallery-item .info p {
              margin: 5px 0 0;
              font-size: 14px;
              color: #555;
          }
  
          .gallery {
              align-items: stretch;
          }
  
  
  .bloque-full {
        display: flex;
        width: 100%;
        height: 300px; /* Altura fija para PC */
        position: relative; /* Necesario para el comportamiento en móviles */
      }
  
      .imagen {
        flex: 1;
        background-image: url('../imagenes/img-cuidados.png');
        background-size: cover;
        background-position: center;
      }
  
      .texto {
        flex: 1;
        background-color: #ff6e5c;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 20px;
        z-index: 1; /* Asegura que el texto esté delante de la imagen */
      }
  
      .texto h1 {
        margin: 0;
        font-size: 36px;
      }
  
      .texto hr {
        margin: 10px 0;
        width: 50%;
        border: 1px solid white;
      }
  
      .texto p {
        margin: 0;
        font-size: 20px;
      }
  
      /* Diseño para pantallas pequeñas (móviles) */
      @media (max-width: 768px) {
        .bloque-full {
          flex-direction: column; /* Imagen y texto uno sobre otro */
          height: 300px; /* Ocupa toda la altura de la ventana */
        }
  
        .imagen {
          position: absolute; /* Imagen detrás del texto */
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 0;
          opacity: 0.4; /* Hace que la imagen sea semitransparente */
        }
  
        .texto {
          background-color: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente */
          flex: none;
          width: 100%;
          height: 100%; /* Ocupa todo el alto de la pantalla */
          position: relative;
          z-index: 1;
        }
  
        .texto h1 {
          font-size: 36px; /* Ajuste del tamaño del texto para móviles */
        }
  
        .texto p {
          font-size: 18px;
        }
      }
  
  
  
  .conteiner {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              height: 100%;
              text-align: center;
              background-color: #fbeee6;
            
          }
  
          /* Estilo específico para h1 dentro de .conteiner */
          .conteiner h1 {
              margin-top: 40px;
              margin-bottom: 50px;
              font-size: 36px;
              color: #ff6e5c; /* Cambié el color a blanco para el h1 */
          }
  
          .buttons-container {
              display: flex;
              flex-direction: column; /* Por defecto los botones estarán en columna */
              justify-content: center;
              align-items: center;
              width: 100%;
              max-width: 400px;
            margin-bottom: 50px;
          }
  
          .button {
              background-color: #fae5d3;
              border: 2px solid #ff6e5c;
              border-radius: 8px;
              width: 200px;
              text-align: center;
              padding: 20px;
              margin: 10px 0; /* Espacio entre los botones */
              transition: transform 0.3s ease;
          }
  
          .button img {
              width: 80px;
              height: 80px;
              margin-bottom: 15px;
              transition: transform 0.3s ease;
          }
  
          .button:hover {
              transform: scale(1.1);
          }
  
          .button:hover img {
              transform: scale(1.2);
          }
  
          .button h3 {
              font-size: 18px;
              color: #333;
          }
  
          /* Media query para pantallas grandes (PC) */
          @media (min-width: 880px) {
              .buttons-container {
                  flex-direction: row; /* Los botones estarán en fila en pantallas grandes */
                  justify-content: space-between;
                  width: 80%; /* Ajusta el contenedor de los botones */
                  max-width: 1200px; /* Puedes cambiar este valor para más espacio */
              }
  
              .button {
                  width: 200px; /* Mantiene el tamaño de los botones */
                  margin: 0 15px; /* Espacio entre botones en horizontal */
              }
  
              .button img {
                  width: 100px; /* Aumenta el tamaño de las imágenes en pantallas grandes */
                  height: 100px;
              }
  
              .button h3 {
                  font-size: 20px; /* Aumenta el tamaño del texto */
              }
          }
  
          /* Media query para pantallas pequeñas (móviles) */
          @media (max-width: 879px) {
              .buttons-container {
                  width: 100%;
                  max-width: 100%;
                  padding: 10px;
              }
  
              .button {
                  width: 80%; /* Los botones ocuparán más ancho en pantallas pequeñas */
                  margin: 10px 0;
              }
  
              .button img {
                  width: 70px; /* Imágenes más pequeñas en pantallas móviles */
                  height: 70px;
              }
  
              .button h3 {
                  font-size: 16px; /* Ajusta el tamaño del texto */
              }
          }
  
  
  
   /* Bloque contenedor principal */
      .bloque-contenedor {
        width: 100%;
        background-color: #ff6e5c;
        color: white;
        padding: 20px 10px;
        text-align: center;
        margin-bottom: 50px;
      }
  
      .bloque-contenedor h1 {
        margin-bottom: 20px;
        font-size: 24px;
      }
  
      /* Contenedor de botones específico */
      .bloque-contenedor .boton-container {
        display: flex;
        justify-content: center;
        gap: 15px;
      }
  
      .bloque-contenedor .boton-boedo {
        width: 200px;
        height: 200px;
        margin: 20px;
        border: none;
        overflow: hidden;
        border-radius: 8px;
        transition: transform 0.3s ease;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #e46d95;
      }
  
      .bloque-contenedor .boton-boedo:nth-child(1) {
        background-color: #e46d95; 
      }
  
      .bloque-contenedor .boton-boedo:nth-child(2) {
        background-color: #ffffff; 
      }
  
.bloque-contenedor .boton-boedo:nth-child(3) {
  background-color: #5eafca; /* Azul oscuro */
}
  
      .bloque-contenedor .boton-boedo img {
        width: 80%;
        height: 80%;
        object-fit: contain;
      }
  
      .bloque-contenedor .boton-boedo:hover {
        transform: scale(1.2);
      }
  
      /* Responsividad */
      @media (max-width: 600px) {
        .bloque-contenedor {
          padding: 10px;
        }
  
        .bloque-contenedor h1 {
          font-size: 30px;
        }
  
        .bloque-contenedor .boton-container {
          flex-direction: column;
          gap: 10px;
          align-items: center;
        }
  
        .bloque-contenedor .boton-boedo {
          width: 220px; /* Ajusta el ancho en móvil */
          height: auto;
          margin: 10px 0;
          aspect-ratio: 1; /* Mantiene la proporción cuadrada */
        }
      }
  
  
  
  footer {
              font-family: Arial, sans-serif;
          }
  
          /* Primer div dentro del footer */

.footer-white{
               background-color: #ff6e5c;
    color:white;
    text-align:center;
    padding:20px;
}
        
     .footer-white .bold {
      font-weight: bold;
  }
  
.footer-white p{
    margin:5px 0;
    text-align:center;
}
  
  .footer-white .small-text {
      font-size: 12px; /* Hace el texto más pequeño */
  }
  
  
          /* Segundo div dentro del footer */
.footer-dark {
    background-color: #222222;
    color: #b6b5b3;
    text-align: center;
    padding: 20px 0;
    font-size: 14px;
}
          
          .footer-dark a {
              color: #dfdfdf;
              text-decoration: none;
          }
          .footer-dark a:hover {
              text-decoration: underline;
          }

.footer-legal a{
    color:#5e5e5e;
    text-decoration:underline;
    transition:0.2s;
}

.footer-legal a:hover{
    color:#202020;
    text-decoration:underline;
}