/* globales */

* {
      box-sizing: border-box;    
      margin: 0;
      padding: 0;
      font-family: "Poppins", sans-serif;
    }

   html {
      font-size: 80%; 
      box-sizing: border-box; /* no afecta el tamaño del elemento*/
    }

    *, *:before, *:after {
      box-sizing: inherit;
      margin: 0;
      padding: 0;
    }

    body {
      background: #fdfcf7;
      color: #333;
      line-height: 1.6;
      background-image: linear-gradient(to top, #6f8F88 0%, #fff 100%);
      overflow-x: hidden;
      width: 100%;
      }

      h1 {font-size: 2.8rem; }
      h2 {font-size: 2rem; }
      h3 {font-size: 1.5rem; }  
      h1,h2,h3 {
          margin-bottom: 20px;
          color: #fff;
          text-align: center;
      }

      img, video, iframe, embed {
        max-width: 100%;
        height: auto;
      }
/* encabezado, Navegación y logo */
    header {
      background: #fff;
      padding: 20px;
      border-bottom: 2px solid #eee;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* And this in another */
    }

    .logo {
      font-weight: 700;
      font-size: 1.5rem;
      color: #e76f51;
    }

    .logo_imagen {
      max-width: 10rem;
      height: auto; /* Usamos 'auto' para mantener la proporción de la imagen */
    }

    /* DESKTOP NAVIGATION */

    .navegacion-principal {
      display: block;
    }

    .navegacion-principal ul {
      list-style: none;
      display: flex;
      gap: 30px;
      margin: 0;
      padding: 0;
      }

    .navegacion-principal a {
      text-decoration: none;
      color: #333;
      font-weight: 500;
      padding: 8px 15px;
      border-radius: 5px;
      transition: background-color 0.3s ease, color 0.3s ease;
      }

    .navegacion-principal a:hover {
        background-color: #6f8F88;
        color: #fff;
    }
    /* MOBILE NAVIGATION (Hamburger & Full-screen Menu) */
    .nav-toggle {
      display: none; /* Hide the button by default on desktop */
      border: none;
      background: transparent;
      cursor: pointer;
      padding: 10px;
      z-index: 200; /* aseguro que quede arriba del menú */
    }

    .hamburger {
      display: block;
      width: 25px;
      height: 3px;
      background-color: #333;
      border-radius: 5px;
      position: relative;
      transition: all 0.3s ease;
    }

    .hamburger::before,
    .hamburger::after {
      content: '';
      display: block;
      width: 25px;
      height: 3px;
      background-color: #333;
      position: absolute;
      border-radius: 5px;
      transition: all 0.3s ease;
    }

    .hamburger::before {top: -8px; }
    .hamburger::after {top: 8px; }

    /* Open/Close Animation */
    .nav-toggle.open .hamburger {background: transparent; }
    .nav-toggle.open .hamburger::before {top: 0; transform: rotate(45deg); }
    .nav-toggle.open .hamburger::after {top: 0; transform: rotate(-45deg); }
  
    /* Overlay oscuro detrás del menú */
    .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      z-index: 50; /* Debajo del menú */
    }
    /* Cuando el overlay está activo */
    .overlay.active {
      opacity: 1;
      visibility: visible;
    }

    /* MEDIA QUERIES FOR MOBILE*/
   @media (max-width: 768px) {
      .nav-toggle {
        display: block; /* Show hamburger on mobile*/
      }

      .navegacion-principal {
        position: fixed;
        top: 0;
        right: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.95);
        transform: translateX(100%); /*Initially hide the menu*/
        transition: transform 0.5s ease-in-out;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99;
      }

      /*Show the menu when the button is clicked*/
      .navegacion-principal.active {
        transform: translateX(0);
      }

      .navegacion-principal ul {
        flex-direction: column;
        text-align: center;
        gap: 40px;
      }
      
      .navegacion-principal a {
        font-size: 1.5rem;
        padding: 15px 25px;
      }
    }

    /* HERO */
    .hero {
      background-image: url(../img/Portadanueva.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center; /* Asegura que la imagen se vea bien en todos los anchos */
      height: 100vh; /* CAMBIO: Altura de pantalla completa para un efecto más moderno */
      display: flex; /* Usamos flexbox directamente en el contenedor principal */
      justify-content: center;
      align-items: center;
      text-align: center;
      color: #fff;
      position: relative;
    }

    /* Capa de superposición para mejorar el contraste */
    .hero::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* CAMBIO: Usamos un gradiente sutil para un efecto más profesional */
        background: rgba(0, 0, 0, 0.4);
        z-index: 1; /* Asegura que la capa esté sobre la imagen */
    }

    /* Contenido del Hero */
    .contenido-hero {
      position: relative; /* Asegura que el contenido esté sobre la capa */
      z-index: 2; /* Mayor que la capa de superposición */
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px; /* Agregamos un poco de padding general */
    }

    .hero-logo {
      width: 120px; /* Tamaño del logo en móviles */
      height: auto;
      animation: fadeIn 1s ease-in-out;  /* Animación de entrada para un efecto más dinámico */
    }

    .hero-texto { animation: slideInUp 1s ease-in-out; /* Agrupamos el h1 y el p */ }

    .hero-texto h1 {
        font-size: 2.2rem;
        font-weight: bold;
        margin: 0;
    }
    .hero-texto p {
        font-size: 1.1rem;
        margin: 10px 0 0 0;
    }
    /* Estilo del botón (Mantengo el tuyo y agrego hover) */
    .boton {
      background-color: #6f8F88;
      color: #fff;
      padding: 15px 40px;
      text-decoration: none;
      text-transform: uppercase;
      font-weight: bold;
      border-radius: 8px;
      transition: background-color 0.3s ease, transform 0.3s ease;
      width: 80%; /* El botón ocupa un porcentaje del ancho */
      text-align: center;
      animation: fadeIn 2s ease-in-out;
    }

    .boton:hover {
        background-color: #5d7a71;
        transform: scale(1.05); /* Efecto de crecimiento al pasar el mouse */
    }

    /* Animaciones */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
      }

    @keyframes slideInUp {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
      }

  /* Media Query para Escritorio */    
    @media (min-width: 760px) {
        .hero {
            height: 80vh; /*Altura adaptable a la vista de escritorio*/
        }
        .contenido-hero {
          gap: 30px;
        }
        .hero-logo {
            width: 120px;
        }
        .hero-texto h1 {
            font-size: 3.5rem;
        }
        .hero-texto p {
            font-size: 1.5rem;
        }
        .boton {
            width: auto;
            padding: 1rem 3rem;
        }
    }


/* Sección "Nosotros" */
.nosotros-seccion {
  background-color: #f7f9fc;  /*Fondo suave y claro*/
  padding: 60px 20px;
  font-family: 'Raleway', sans-serif; /*Usamos la fuente que ya tenías */
}

.nosotros-contenedor {
  display: flex;
  flex-direction: column; /* Por defecto, apilamos el texto y la imagen en móvil */
  align-items: center;
  gap: 40px; /* Espacio entre la imagen y el texto */
  width: 100%;
  margin: 0 auto;
}

.nosotros-imagen {
  width: 100%;
  text-align: center;
}

.imagen-equipo {
  max-width: 100%;
  height: auto;
  border-radius: 15px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.imagen-equipo:hover { transform: translateY(-5px);  /*Efecto de elevación al pasar el mouse*/ }

.nosotros-contenido {
  flex: 1; /*Permite que el texto crezca */
  text-align: center; 
  max-width: 700px;
}

.nosotros-contenido h2 {
  font-size: 2.2rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px;
}

.nosotros-contenido p {
  font-size: 1rem;
  color: #555;
  line-height: 1.6;
}
.sobre_nosotros {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 20px;
}
/* Media Query para escritorio */
@media (min-width: 768px) {
  .nosotros-contenedor {
    flex-direction: row; /*En escritorio, colocamos la imagen y el texto uno al lado del otro*/
    justify-content: center;
    text-align: left;
    max-width: 1200px; /*Aplica el ancho fijo solo en pantallas grandes*/
  }
  .nosotros-imagen {
    width: 50%;
  }
  .nosotros-contenido {
    width: 50%;
    text-align: left;
  }
}

/* team */
    .team {
      width: 90%; /* Ancho ajustado para el diseño horizontal */
      /*max-width: 69rem;*/
      margin: 0 auto; /* Centrar el contenedor en la página */
      padding: 20px; /* Reducimos el padding en móviles */
      box-sizing: border-box;
      display: flex; /*La clave para poner los elementos uno al lado del otro*/
      flex-direction: column; /* Apilamos los elementos en columna */
      gap: 20px; /* Espacio entre los miembros del equipo */
      margin-top: 20px; /* Espacio superior */
      font-family: 'Poppins', sans-serif;
    }
    /* Contenedor del lado izquierdo (biografía) */
    .izquierdo {
      flex: 1; /*Permite que este bloque ocupe el espacio restante */
      background-color: #ffffff;
      padding: 20px;
      border-radius: 10px;
      display: flex; /*Usamos flexbox para organizar el contenido interno*/
      flex-direction: column;  /*Aseguramos que los elementos internos estén en columna*/
      gap: 15px;
    }
    .member {
      display: flex;
      flex-direction: column; /* Apilamos la foto y el texto en columna */
      align-items: center; /* Centramos los elementos */
      gap: 15px;
      text-align: center; /* Alinea los elementos en la parte superior */
      /*gap: 25px;*/
      margin-bottom: 25px;
      flex-direction: column;
      align-items: safe;
      background: transparent;     
      padding: 20px;
      border-radius: 8px;
    }
    .foto-perfil {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid #8bb6ac; /* Borde de color que hace juego */
      transition: transform 0.3s ease;
    }

    .foto-perfil:hover { transform: scale(1.05);/* Efecto al pasar el mouse */ }

    .info-texto {
      display: flex;
      flex-direction: column;
      gap: 10px; /* Espacio entre los elementos de texto */
      text-align: center;
    }

    .info-texto h4 {
      font-size: 14px;
      font-weight: 600;
      margin: 0; /* Espacio debajo del título */
    }

    /* Estilos para el nombre */
    .nombre {
        margin: 0; /* Elimina el margen por defecto del h3 */
        font-size: 1.5rem; /* Opcional: ajusta el tamaño del nombre */
    }

    /* Estilos para la firma */
    .especialidad {
        font-size: 0.8rem; /* Hace el texto más pequeño */
        font-weight: bold; /* Ya lo tenías, lo mantenemos */
        margin: 0; /* Elimina el margen por defecto del párrafo */
        margin-top: -9px; /* Añade un pequeño margen para separar del nombre */
    }

    .descripcion {
      font-size: 12px;
      font-weight: 200;
      color: #000000;
      line-height: 1.4; /* Espaciado entre líneas para mejor lectura */
      margin: 0;
      text-align: center;
    }

    .nombre {
      font-size: 12px;
      font-weight: bold;
      color: #000000;
      margin: 0;
      text-align: center; /* Centramos el nombre en móviles */
    }

    /* Seccion de "Qué es lo que hago" */
    .seccion-inferior-horizontal {
      background-color: #6f8F88;
      border-radius: 10px; /* Bordes redondeados */
      padding: 20px;
      color: #ffffff;
      margin-top: 10px; /*Añadimos un margen para separarlo del bloque de arriba */
      width: auto; /* Ancho fijo para este bloque, puedes ajustar */
      flex-shrink: 0; /*Evita que este elemento se encoja */
    }

    .titulo-seccion {
      font-size: 16px;
      font-weight: 600;
      margin: 0 0 10px 0; /* Espacio debajo del título */
    }

    .texto-seccion {
       font-size: 12px;
       line-height: 1.5;
       margin: 0;
    }

    /* Media query para pantallas más grandes (Tablet/Desktop) */
@media (min-width: 768px) {
  .team {
    max-width: 69rem; /*Aplica el ancho fijo solo en pantallas grandes*/
    flex-direction: row; /*Volvemos a la disposición horizontal*/
    justify-content: center; /*Centra las tarjetas en el contenedor*/
    align-items: stretch; /*Hace que todas las tarjetas tengan la misma altura*/
    gap: 40px;
    padding: 40px;
    margin-top: 40px;
  }

  .seccion-inferior-horizontal {
    width: 30rem; /* Ancho fijo para este bloque, puedes ajustar */
  }

}

/* servicios */

.servicios-seccion {
  background-image: url(../img/imagen-servicios.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center; /* Asegura que la imagen se centre */
  /*height: 390px;*/
  position: relative;
  padding: 60px 20px; /* Espacio arriba y abajo de la sección */
  overflow: hidden; /* Evita cualquier desbordamiento */
}

.servicios-seccion::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb( 0 0 0 / 40%); /* nueva forma*/
    width: 100%;
    height: 100%;
}

.seccion-servicios {
  position: relative; /* Asegura que el contenido esté encima de la capa oscura */
  z-index: 1; /* Coloca el contenido por encima del ::before */
  text-align: center; /* Centra el título "Nuestros Servicios" */
}

/* Título de la sección "Nuestros Servicios" */
.seccion-servicios h2 {
  color: #ffffff;
  /* text-align: center; Centrar el título */
  margin-bottom: 50px; /* Espacio debajo del título */
  font-weight: bold;
  font-size: 2.5rem; /* Título un poco más grande para más impacto */
}

/* Contenedor que alinea las tarjetas de servicio */
.contenedor-servicios {
  display: flex;
  flex-direction: column; /*Apila las tarjetas verticalmente en móviles */
  /*justify-content: center; Centra las tarjetas horizontalmente */
  align-items: center; /* Centra las tarjetas cuando se apilan */
  gap: 30px; /* Espacio entre las tarjetas */
}

/* Estilos de cada tarjeta de servicio */
.servicio {
  /*background-color: #6f8F88; Color de fondo turquesa como en la imagen 2 */
  background-color: rgba(111, 143, 136, 0.8); /* Puedes ajustar la opacidad del fondo de las tarjetas también */
  padding: 30px;
  border-radius: 15px; /* Bordes redondeados */
  max-width: 320px; /* Ancho máximo para cada tarjeta */
  width: 100%; /* Asegura que la tarjeta ocupe el ancho completo del contenedor en móviles */
  text-align: left; /* Alinea el texto a la izquierda como en la imagen 2 */
  color: #fff; /* Color de texto blanco */
  border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Sombra suave para efecto de elevación */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones para los efectos */
}

.servicio:hover {
    background-color: #6f8F88; /* Color sólido al pasar el mouse */
    transform: translateY(-10px) scale(1.02); /* Se eleva y crece un poco */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Sombra más fuerte al elevarse */
}

/* Estilos para los títulos de cada servicio */
.servicio h3 {
  color: #fff; /* Título en color blanco */
  font-size: 1.3rem;
  margin-top: 0; /* Elimina el margen superior por defecto */
  font-weight: bold;
}

/* Estilos para la descripción de cada servicio */
.servicio p {
  font-size: 1rem;
  line-height: 1.6;  /* Mayor espacio entre líneas para mejor lectura */
}

/* Media query para pantallas más grandes (Tablet/Desktop) */

@media (min-width: 768px) {
    .servicios-seccion {
      padding: 80px 20px; /*Más padding en escritorios*/
    }
    .contenedor-servicios {
      flex-direction: row; /* Coloca las tarjetas en fila en escritorio*/
      justify-content: center; /*Centra las tarjetas cuando son 3*/
      align-items: stretch; /*Asegura que todas las tarjetas tengan la misma altura*/
      gap: 40px; /*Más espacio entre tarjetas en escritorio*/
    }
    .servicio {
      width: auto; /*Permite que el ancho se ajuste al max-width de 300px*/
      flex: 1; /* se adaptan de forma uniforme */
    }
  }

/* porfolio */
/* Estilos generales de la sección */
.portfolio {
    background-color: #d8e0ec; /* Fondo más claro para mayor contraste */
    padding: 60px 20px;
    font-family: 'Poppins', sans-serif;
    text-align: center;
}

.portfolio-titulo {
  border-radius: 1rem;
}

/* Franja blanca del título */
.franja-blanca {
    background-color: #ffffff;
    color: #0000;
    padding: 20px;
    text-align: center;
    border-bottom: 2px solid #e0e0e0; /* Sutil línea divisoria */
    margin-bottom: 20px;
}

.franja-blanca h2 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #000000;
    margin: 0;
}

.franja-blanca p {
    font-size: 1rem;
    color: #000000;
    margin-top: 5px;
}

/* Contenedor principal de cada cliente */
.portfolio-cliente {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 14px;
    background-color: #ffffff; /* Fondo blanco para la tarjeta del cliente */
    border-radius: 15px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* Sombra suave para darle profundidad */
    padding: 40px 20px;
}

.instagram-mockup {
    width: 250px;
}

.portfolio-info {
    width: 100%;
    max-width: 500px;
}

.portfolio-info h4 {
    color: #333;
    font-size: 1.8rem; /* Aumenta el tamaño para que sea más prominente */
    margin-bottom: 10px; /* Reduce el margen para acercarlo a la descripción */
    text-align: center;
}

.proyecto-descripcion p {
    color: #555; /* Un color un poco más oscuro para mejor legibilidad */
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

/* Grid de imágenes para feed y stories */
.portfolio-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px; /* Aumenta el margen para separarlo del texto */
    width: 100%;
}

.grid-section h5 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center; /* Centra los títulos Feed y Historias */
    color: #333; /* Color de texto más oscuro */
}

.grid-images {
    display: grid;
    gap: 10px;
}

.grid-images-feed {
    grid-template-columns: repeat(2, 1fr);
}

.grid-images-stories {
    grid-template-columns: repeat(3, 1fr);
}

.grid-images img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Media Query para escritorio */
@media (min-width: 768px) {
    .portfolio-cliente {
        flex-direction: row-reverse;
        justify-content: center;
        align-items: center;
        gap: 80px;
        padding: 60px; /* Más padding en escritorio */
    }

    .instagram-mockup {
        width: 350px;
    }

    .portfolio-info {
        max-width: 600px;
        text-align: left;
    }

    .portfolio-info h4,
    .proyecto-descripcion p {
        text-align: left;
    }

    .grid-section h5 {
        text-align: left;
    }

    .portfolio-grid {
        flex-direction: row;
        gap: 40px;
        justify-content: flex-start;
        align-self: flex-start; /* Alinea la cuadrícula de imágenes a la izquierda */
    }
    
    .grid-images-feed {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-images-stories {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* CONTACTO - Código optimizado */
.contacto {
    background-color: #e9ecef;
    padding: 60px 20px;
    display: flex; /* Mantenemos flexbox en todos los tamaños */
    justify-content: center;
    align-items: center;
}

/* Contenedor principal */
.contacto-contenedor {
    display: flex;
    flex-direction: column; /* Apilado en móviles por defecto */
    width: 100%;
    background-color: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: 40px;
}

/* Imagen de contacto */
.contacto-imagen {
    display: none; /* Oculta en móviles */
}

.contacto-imagen img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Formulario */
.contacto-formulario {
    padding: 40px;
    text-align: center;
}

.contacto-formulario h2 {
    font-size: 2.2rem;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.contacto-formulario p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 30px;
}

/* Campos */
.formulario-grupo {
    display: flex;
    flex-direction: column; /* Siempre en columna en móviles */
    gap: 20px;
    margin-bottom: 20px;
}

.campo {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.campo label {
    font-size: 14px;
    font-weight: 600;
    color: #4b6691;
    margin-bottom: 5px;
}

.campo input,
.campo textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.campo input:focus,
.campo textarea:focus {
    outline: none;
    border-color: #4b6691;
    box-shadow: 0 0 0 3px rgba(75, 102, 145, 0.2);
}

.campo textarea {
    resize: vertical;
    min-height: 120px;
}

/* Botón */
.boton-contenedor {
    margin-top: 30px;
}

.boton-contenedor button {
    background-color: #6f8F88;
    color: #ffffff;
    padding: 15px 50px;
    border: none;
    border-radius: 8px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.boton-contenedor button:hover {
    background-color: #5d7a71;
    transform: translateY(-2px);
}

/* --- Escritorio / Tablets --- */
@media (min-width: 768px) {
    .contacto-contenedor {
        max-width: 1000px; /* Aplica el ancho máximo solo en tablets y escritorios */
        flex-direction: row; /* Imagen y formulario en fila */
    }

    .contacto-imagen {
        display: block;
        flex: 1.2;
    }

    .contacto-formulario {
        flex: 1;
        padding: 60px;
        text-align: left; /* Alinea texto a la izquierda en escritorio */
    }

    .formulario-grupo {
        flex-direction: row; /* Campos en fila */
        gap: 30px;
    }

    .campo {
        flex: 1;
    }
}

/* FOOTER - Código optimizado y corregido */
footer {
    background-color: #f7f9fc;
    padding: 40px 20px;
    font-family: 'Poppins', sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.footer-contenido {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.footer-logo-container {
    text-align: center;
}

.footer-info-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: center;
    text-align: center;
    font-size: 1rem;
    color: #555;
}

.footer-contactos {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.footer-contactos p, .footer-columna-ubicacion p {
    margin: 0;
}

.footer-contactos a {
    color: #4b6691;
    text-decoration: none;
    font-weight: 500;
}

.footer-contactos a:hover {
    text-decoration: underline;
}

.logos-redes {
    display: flex;
    gap: 15px;
    justify-content: center;
}

.logos-redes a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #333;
    color: #fff;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.logos-redes a:hover {
    background-color: #555;
    transform: translateY(-3px);
}

.footer-copyright {
    font-size: 0.8rem;
    color: #888;
    margin-top: 20px;
    text-align: center;
}

/* --- Media Query para escritorio --- */
@media (min-width: 768px) {
    footer {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas: 
            "top-row"
            "copyright";
        justify-items: center;
        padding: 60px 20px;
    }

    .footer-contenido {
        grid-area: top-row;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0;
    }

    .footer-secciones {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas: "logo info redes";
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .footer-logo-container {
        grid-area: logo;
        justify-self: start;
    }

    .footer-info-container {
        grid-area: info;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        justify-self: center;
    }
    
    .footer-contactos {
        flex-direction: row;
        gap: 20px;
    }

    .footer-ubicacion {
        text-align: center;
    }

    .logos-redes {
        grid-area: redes;
        justify-self: end;
        align-items: center;
    }

    .footer-copyright {
        grid-area: copyright;
        margin-top: 40px;
        text-align: center;
        width: 100%;
    }
}

/* BOTÓN WHATSAPP - Código optimizado */
/* Estilos para el botón de WhatsApp (Móvil) */
.whatsapp-btn {
    position: fixed; /* Lo fija en la pantalla */
    bottom: 20px; /* Separación del borde inferior */
    right: 20px; /* Separación del borde derecho */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    background-color: linear-gradient(135deg, #25d366, #128c7e);
    border-radius: 50%; /* Lo hace redondo */
    width: 60px; /* Tamaño del botón en móviles */
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease-in-out; /* CAMBIO: Añadimos una transición para el box-shadow */
    cursor: pointer; /* CAMBIO: Añadimos la animación de pulso */
    animation: pulse 2s infinite;
}
/* El ícono de WhatsApp */
.whatsapp-btn img {
    width: 35px; /* Tamaño del ícono de WhatsApp dentro del botón */
    height: 35px;
}
/* Efecto al pasar el mouse (para escritorio) */
.whatsapp-btn:hover {
    transform: scale(1.1); /* Efecto de crecimiento al pasar el mouse */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    animation: none; /* Desactivamos la animación al pasar el mouse */
}

/* Definición de la animación de pulso */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Media Query para Escritorio */
@media (min-width: 768px) {
    .whatsapp-btn {
        width: 70px; /* Tamaño un poco más grande en escritorios */
        height: 70px;
        bottom: 30px;
        right: 30px;
    }

    .whatsapp-btn img {
        width: 40px;
        height: 40px;
    }
}


/*frase motivadora*/

.frase-principal {
    margin-top: 10px;
    padding: 20px;
    text-align: center;
    background-color: #32a2b7;
    /* Estilos para el texto dentro del contenedor principal */
    color: #fff;
}

.frase-principal h2 {
    /* Eliminar el padding que estaba en el párrafo y lo aplicamos al título */
    padding: 40px 20px 0 20px; 
    font-size: 2.5rem;
    font-weight: bold;
}

.frase-principal p {
    font-size: 1.2rem;
    font-weight: 500;
    font-style: italic; /* Para que se vea como una cita */
    padding: 0 20px 40px 20px; /* El padding del párrafo de la cita */
}



/** enviar **/

.alerta {
  padding: 12px 16px;
  border-radius: 6px;
  margin-top: 15px;
  font-weight: 600;
  font-size: 15px;
  text-align: center;
}

.exito {
  background-color: #e6f9ec;
  color: #1a7f37;
  border: 1px solid #1a7f37;
}

.error {
  background-color: #fde8e8;
  color: #b91c1c;
  border: 1px solid #b91c1c;
}


/* Estilos para los iconos de redes sociales */
.logos-redes {
  display: flex;
  gap: 15px; /* Espacio entre los iconos */
  justify-content: center;
  align-items: center;
}

.logos-redes a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%; /* Borde circular */
    background-color: #6f8F88; /* Color de fondo */
    color: #fff; /* Color del icono */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.logos-redes a:hover {
    background-color: #555; /* Color de fondo al pasar el mouse */
    transform: translateY(-3px); /* Efecto de "levantar" */
}

.logos-redes a svg {
    width: 24px;
    height: 24px;
}