body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  background: #f5f5f5;
}

/* Tamaño y colores de titulos h1 */
h1 {
  font-size: 36px;
  margin-bottom: 40px;
}

.about-title,
.values-title {
  color: #2f4055;
}

.services-title {
  color: #8fbf6f;
}


/* HEADER */
.header {
  display: flex;
  justify-content: space-between;
  padding: 20px;
  background: white;
}

/* Tamaño del logo */
.header img {
  width: 300px;
}

.nav-menu {
  display: flex;
  align-items: center;
}

.nav-menu a {
  margin-left: 15px;
  padding: 15px 20px;
  text-decoration: none;
  color: #555;
}

/* Hover con verde pistacho para links de menu */
.link-menu:hover {
  background: #8fbf6f;
  color: white;
  border-radius: 5px;
  transition: background 0.3s ease, color 0.3s ease;
}

.boton-contacto button {
  background: #8fbf6f;
  border: none;
  padding: 15px 30px;
  color: white;
}

/* Hover para boton contacto que agranda el boton y pone dedo en puntero */
.boton-contacto button:hover,
.boton-submit:hover {
  transform: scale(1.2);
  cursor: pointer;
  transition: transform 0.3s ease;
  background-color: #2f4055;
}

/* HERO */
.hero {
  height: 100vh;
  background: url("img/fundacion1.jpg") center/cover no-repeat;
  position: relative;
}

.overlay {
  background: rgba(0, 0, 0, 0.4);
  color: white;
  height: 100%;
  display: flex;
  /* Texto ladeado a la izquierda */
  justify-content: flex-start;
  align-items: center;


  /* align-items: center;
  justify-content: center; */
}

/* Letra estilo jumbotron sin grosor */
.hero-text {
  font-size: 48px;
  font-weight: normal;
  margin-left: 100px;
}

/* ABOUT */
.about {
  background: #8fbf6f;
  padding: 90px 90px 150px;
  text-align: center;
}

.about-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.about-text {
  /* Crea la línea vertical */
  border-left: 5px solid #e0e0e0;
  /* Color gris suave del mockup */
  /* Espacio entre la línea y el texto */
  padding-left: 25px;
  /* Margen opcional para separar de otros elementos */
  margin: 20px 0;
}

/* CARRUSEL */
.slide-container {
  margin: 0 auto 20px;
  max-width: 500px;
  position: relative;
}

.slide-container input {
  display: none;
}

.slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Evita que las flechas se salgan del contenedor */
}

/* Mantiene la proporción del carrusel */
.slideshow::after {
  content: '';
  display: block;
  padding-bottom: 66.6%;
  /* Proporción 3:2 aproximada */
}

.slides {
  position: absolute;
  width: 100%;
  height: 100%;
}

.slide {
  display: block;
  /* Ahora siempre es block */
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  /* Pero invisible */
  visibility: hidden;
  /* Y no interactuable */
  transition: opacity 0.6s ease-in-out, visibility 0.6s;
  /* La magia ocurre aquí */
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

/* Mostrar slide activo */
#slide-1:checked~.slideshow .slides .slide:nth-child(1),
#slide-2:checked~.slideshow .slides .slide:nth-child(2),
#slide-3:checked~.slideshow .slides .slide:nth-child(3),
#slide-4:checked~.slideshow .slides .slide:nth-child(4),
#slide-5:checked~.slideshow .slides .slide:nth-child(5),
#slide-6:checked~.slideshow .slides .slide:nth-child(6),
#slide-7:checked~.slideshow .slides .slide:nth-child(7) {
  opacity: 1;
  /* Se vuelve opaco */
  visibility: visible;
  /* Se vuelve visible */
  z-index: 1;
  /* Se pone por encima de los que se están ocultando */
}



/* --- LOGICA DE FLECHAS --- */

.arrows {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  /* Nadie puede clickear por defecto */
  z-index: 0;
}

/* Activar solo el grupo de flechas del slide seleccionado */
#slide-1:checked~.slideshow .a-1,
#slide-2:checked~.slideshow .a-2,
#slide-3:checked~.slideshow .a-3,
#slide-4:checked~.slideshow .a-4,
#slide-5:checked~.slideshow .a-5,
#slide-6:checked~.slideshow .a-6,
#slide-7:checked~.slideshow .a-7 {
  opacity: 1;
  pointer-events: auto;
  /* Habilitamos el click solo aquí */
  z-index: 10;
}

.arrows label {
  position: absolute;
  top: 0;
  width: 50px;
  /* Tamaño del área de la flecha */
  height: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrows .prev {
  left: 0;
}

.arrows .next {
  right: 0;
}

/* Dibujo de las flechas */
.arrows label::after {
  content: '';
  width: 15px;
  height: 15px;
  border: solid white;
  border-width: 3px 3px 0 0;
  display: block;
}

.arrows .prev::after {
  transform: rotate(-135deg);
}

.arrows .next::after {
  transform: rotate(45deg);
}

/* Paginación Activa */
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.pagination label {
  width: 12px;
  height: 12px;
  background: #ccc;
  border-radius: 50%;
  margin: 0 5px;
  cursor: pointer;
  transition: background 0.3s ease;
}

#slide-1:checked~.pagination label[for="slide-1"],
#slide-2:checked~.pagination label[for="slide-2"],
#slide-3:checked~.pagination label[for="slide-3"],
#slide-4:checked~.pagination label[for="slide-4"],
#slide-5:checked~.pagination label[for="slide-5"],
#slide-6:checked~.pagination label[for="slide-6"],
#slide-7:checked~.pagination label[for="slide-7"] {
  background: #333;
}

.about-text {
  color: #2f4055;
  font-size: 24px;
  line-height: 1.6;
}


/* .about img {
  width: 250px;
  border-radius: 5px;
  object-fit: cover;
} */

/* SERVICES */
.services {
  background: #3f5873;
  color: white;
  padding: 120px;
  text-align: center;

  margin-top: -80px;
  /* 👈 ESTO ES LO QUE TE FALTABA */
  clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}

.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.card {
  background: white;
  color: black;
  padding: 20px;
  border-radius: 10px;
  width: 200px;
  /* agregar sombra al card más marcada*/
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* Animación al pasar el mouse */
.card,
.value {
  transition: transform 0.3s ease,
    box-shadow 0.3s ease;
}

.card:hover,
.value:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* VALUES */
.values {
  background: #8fbf6f;
  padding: 90px;
  text-align: center;

  margin-top: -80px;
  clip-path: polygon(0 50px, 100% 0, 100% 100%, 0 100%);
}

.values-cards {
  display: flex;
  justify-content: center;
  gap: 20px;

}

.value {
  background: white;
  width: 280px;
  height: 300px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.value img {
  border-radius: 10px;
  width: 230px;
  height: 250px;
}

/* CONTACT */
.contact {
  padding: 50px;
  text-align: center;
}

.contact form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contact input,
.contact textarea {
  width: 300px;
  margin: 10px;
  padding: 10px;
}

.contact button {
  background: #8fbf6f;
  border: none;
  padding: 15px 30px;
  color: white;
}

/* Inputs modernos */
.contact input,
.contact textarea {
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: all 0.3s ease;
}

/* Altura textarea */
.contact textarea {
  min-height: 140px;
  resize: vertical;
  font-family: inherit;
}

/* Efecto focus */
.contact input:focus,
.contact textarea:focus {
  border-color: #8fbf6f;
  box-shadow: 0 0 8px rgba(143, 191, 111, 0.4);
}

/* FOOTER */
.footer {
  background: #2f4055;
  color: white;
  text-align: center;
  padding: 20px;
}

/* Iconos RRSS */
footer .fa {
  padding: 15px;
  font-size: 27px;
  width: 35px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
  opacity: 0.7;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-youtube {
  background: #FF0000;
  color: white;
}

.fa-instagram {
  background: #405DE6;
  color: white;
}

.fa-whatsapp {
  background: #25D366;
  color: white;
}


/* Boton wsp */
.float-wa {
  position: fixed;
  width: 60px;
  height: 60px;
  bottom: 40px;
  right: 40px;
  background-color: #25d366;
  color: #FFF;
  border-radius: 50px;
  text-align: center;
  font-size: 30px;
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.float-wa.show {
  opacity: 1;
  visibility: visible;
}

/* ====================================
   MENU HAMBURGUESA MOBILE
   ==================================== */

/* Ocultamos checkbox porque solo se usa para lógica */
#menu-toggle {
  display: none;
}

/* El icono  NO aparece en desktop */
.hamburger {
  display: none;
}

/* ====================================
   RESPONSIVE CELULAR
   ==================================== */
   
@media (max-width: 768px) {

  /* 
    Header horizontal:
    logo izquierda
    hamburguesa derecha
  */
  .header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    position: relative;
    z-index: 1000;
  }

  /* Tamaño logo celular */
  .header img {
    width: 180px;
    margin-bottom: 0;
  }

  /* Mostramos hamburguesa */
  .hamburger {
    display: block;
    font-size: 35px;

    /* Cursor de mano */
    cursor: pointer;
    color: #2f4055;
  }

  /* Menu oculto por defecto */
  .nav-menu {
    display: none !important;
    flex-direction: column;
    /* Menu vertical */
    background: white;
    /* Fondo blanco */
    width: 100%;
    /* Ancho completo */
    position: absolute;
    /* Posicion absoluta debajo header */
    top: 100%;
    left: 0;
    padding: 20px 0;
    /* Espaciado interno */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    /* Sombra */
  }

  /* Cuando el checkbox está activado, mostramos el menu */
  #menu-toggle:checked~.nav-menu {
    display: flex !important;
  }

  /* Links del menu mobile */
  .nav-menu a {
    margin: 10px 0;
    text-align: center;
    width: 100%;
  }

  /* Boton contacto más pequeño */
  .boton-contacto button {
    width: 200px;
  }

  .hero {
    height: 60vh;
    /* Altura más cómoda para celular */
    background-position: center;
    /* Ajusta recorte de imagen en móvil */
  }

  .overlay {
    justify-content: center;
    /* Centra contenido */
    align-items: center;
    text-align: center;
  }

  .hero-text {
    font-size: 30px;
    /* Mucho más adaptable */
    margin-left: 0;
    /* Quitamos margen desktop */
    padding: 10px;
    /* Evita que se pegue a bordes */
    line-height: 1.3;
    /* Mejor lectura */
  }

  .about {
    padding: 60px 20px 100px;
    /* Mucho menos padding */
  }

  .about-title {
    font-size: 30px;
    /* Título más pequeño */
  }

  .about-container {
    grid-template-columns: 1fr;
    /* 1 sola columna */
    gap: 30px;
  }

  .about-text {
    font-size: 18px;
    /* Texto más pequeño */
    padding-left: 15px;
    /* Menos padding interno */
    border-left: 3px solid #e0e0e0;
    line-height: 1.6;
    /* Línea vertical más fina */

  }

  .slide-container {
    width: 100%;
  }

  .services {
    padding-top: 80px;
    /* Mucho menos padding */
    padding-bottom: 140px;
    margin-top: -40px;
    /* Menos margen negativo */
    clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
    /* En móvil el clip-path exagerado se ve feo */
  }

  .services-title {
    font-size: 28px;
  }

  .cards {
    flex-direction: column;
    /* Cards una debajo de otra */
    align-items: center;
    gap: 20px;
  }

  .card {
    width: 100%;
    /* Ocupa casi todo el ancho */
    max-width: 320px;
    /* Evita que sea gigante */
    padding: 25px 20px;
  }

  .card img {
    width: 100px;
  }

  .card h3 {
    font-size: 20px;
  }

  .card p {
    font-size: 16px;
    line-height: 1.5;
  }

  .values {
    /* Menos padding */
    padding: 70px 20px;
    /* Reduce solapamiento */
    margin-top: -40px;
    /* Corte diagonal más suave */
    clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
  }

  .values-title {
    font-size: 28px;
  }

  .values-cards {
    /* Cards verticales */
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .value {
    /* Responsive real */
    width: 100%;
    max-width: 320px;
    /* Quitamos altura rígida */
    height: auto;
    padding: 20px;
  }

  .value img {
    width: 100%;
    max-width: 250px;
    height: auto;
  }

  .value p {
    font-size: 18px;
    margin-top: 15px;
  }

  .contact {
    padding: 60px 20px;
  }

  .contact-title {
    font-size: 28px;
  }

  .contact form {
    width: 100%;
  }

  .contact input,
  .contact textarea {
    /* Ocupa casi todo el ancho */
    width: 100%;
    /* Evita tocar bordes */
    max-width: 320px;
    padding: 12px;
    font-size: 16px;
    /* Evita que iPhone haga zoom */
    box-sizing: border-box;
  }

  .contact textarea {
    min-height: 140px;
    resize: vertical;
  }

  .contact button {
    width: 100%;
    max-width: 320px;
    padding: 14px;
    font-size: 16px;
  }

  .footer {
    padding: 25px 15px;
  }

  footer .fa {
    font-size: 20px;
    width: 26px;
    padding: 10px;
    margin: 4px;
  }

  /* Texto copyright */
  .footer p {
    font-size: 14px;
    line-height: 1.5;
    margin-top: 15px;
  }
}

/* =========================
   RESPONSIVE PARA TABLETS
   Se activará cuando la pantalla
   sea menor o igual a 1024px
   ========================= */

@media (max-width: 1024px) {

  .header {
    flex-direction: column;
    align-items: center;
    /* Centra todos los elementos */
    padding: 20px 10px;
    /* Reduce padding lateral */
  }

  .header img {
    width: 220px;
    /* Reduce tamaño del logo */
    margin-bottom: 20px;
    /* Espacio debajo del logo */
  }

  /* Configuración del menú */
  .header nav {
    display: flex;
    /* Seguimos usando flex */
    flex-wrap: wrap;
    /* Permite que los links bajen de línea si no caben */
    justify-content: center;
    gap: 10px;
    /* Espacio entre links sin usar margin */
  }

  /* Ajustamos tamaño de links y quitamos margin-left porque ya usamos gap */
  .header nav a {
    margin-left: 0;
    /* Eliminamos separación antigua */
    padding: 12px 18px;
    /* Menos padding para tablets */
    font-size: 15px;
    /* Texto un poco más pequeño */
  }

  .boton-contacto button {
    padding: 12px 22px;
    /* Reduce tamaño del botón contacto */
  }

  .hero {
    height: 70vh;
    /* Menos altura */
    background-position: center;
    /* Mantiene imagen centrada */
  }

  .overlay {
    align-items: center;
    /* Centramos verticalmente */
    justify-content: center;
    /* Centramos horizontalmente */
    text-align: center;
  }

  .hero-text {
    font-size: 38px;
    /* Texto más pequeño */
    margin-left: 0;
    /* Eliminamos margen izquierdo */
    padding: 20px;
    /* Espacio interno */
  }

  .about {
    padding: 70px 40px 120px;
    /* Menos padding lateral */

  }

  .about-container {
    grid-template-columns: 1fr;
    /* Pasamos de 2 columnas a 1 */
    gap: 40px;
    /* Espacio entre texto y carrusel */
  }

  .about-text {
    margin: 0;
    /* Eliminamos margen lateral */
    font-size: 22px;
    /* Texto más cómodo */
    line-height: 1.5;
    /* Mejor lectura */
  }

  .slide-container {
    max-width: 100%;
    /* Carrusel más flexible */

  }

  .services {

    /* Menos padding */
    padding: 100px 40px;

    /*
      Reducimos corte diagonal
      para que no se vea exagerado
    */
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
  }

  .services-title {
    font-size: 32px;
    /* Título más adaptable */
  }

  .cards {
    gap: 25px;
    /* Espacio entre cards */
  }

  .card {
    width: 240px;
    /* Cards más flexibles */
    padding: 25px;
  }

  .card img {
    width: 120px;
    /* Imagen un poco más pequeña */
  }

  .values {
    padding: 80px 40px;
    clip-path: polygon(0 30px, 100% 0, 100% 100%, 0 100%);
    /* Clip diagonal más suave */
  }

  .values-title {
    /* Título más adaptable */
    font-size: 32px;
  }

  .values-cards {
    /* Permite bajar cards */
    flex-wrap: wrap;
    /* Espacio entre cards */
    gap: 25px;
  }

  .value {
    /* Más flexible */
    width: 260px;
    /*
    MUY IMPORTANTE:
    quitamos altura fija
  */
    height: auto;
    padding: 20px;
  }

  .value img {
    /* Imagen más adaptable */
    width: 100%;
    /* Evita deformación */
    height: auto;
    max-width: 220px;
  }

  .contact {
    padding: 40px;
    /* Menos padding */
  }

  .contact-title {
    font-size: 32px;
  }

  .contact input,
  .contact textarea {
    /*  Más ancho en tablet */
    width: 80%;
    /* Evita tamaños exagerados */
    max-width: 500px;
    font-size: 16px;
  }

  .contact textarea {
    min-height: 140px;
    /* Más espacio para escribir */
  }

  .contact button {
    padding: 14px 28px;
  }

  .footer {
    padding: 30px 20px;
  }

  /* Iconos un poco más pequeños */
  footer .fa {
    font-size: 24px;
    width: 30px;
    padding: 12px;
    margin: 4px;
  }

  /* Texto footer */
  .footer p {
    font-size: 15px;
    margin-top: 15px;
  }

}

/* =========================
   LOADER BOTON SUBMIT
   ========================= */

.boton-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* Spinner */
.loader {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255,255,255,0.4);
  border-top: 3px solid #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.contact input[readonly],
.contact textarea[readonly] {
  background-color: #e9e9e9;
  cursor: not-allowed;
}

/* Animación */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Mensaje alert tras submit */

.alert {
  width: 100%;
  max-width: 320px;

  margin: 0 auto 20px;
  padding: 15px 20px;

  border-radius: 6px;
  border: 1px solid transparent;

  font-size: 15px;
  font-weight: 500;
  text-align: left;

  box-sizing: border-box;

  animation: fadeIn 0.3s ease;
}

/* SUCCESS */
.alert-success {
  color: #0f5132;
  background-color: #d1e7dd;
  border-color: #badbcc;
}

/* Animación */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}