/* ===== Variables y estilos base ===== */
:root{
  --verde-oscuro:#14532d;
  --verde-medio:#15803d;
  --verde-claro:#a7f3d0;
  --beige:#f5f0e8;
  --texto:#1f2933;
  --blanco:#ffffff;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  max-width: 100%;
  overflow-x: hidden;
}

body{
  margin:0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--texto);
  background:var(--beige);
  line-height:1.6;
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

/* ===== Navegación ===== */
.top-header{
  position:relative;
}

.main-nav{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.6rem 1.5rem;
  background:linear-gradient(135deg, var(--verde-oscuro), var(--verde-medio));
  color:var(--blanco);
  box-shadow:0 4px 10px rgba(0,0,0,0.25);
}

/* ===== LOGO (único, sin duplicados) ===== */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--blanco);
  font-weight:800;
  letter-spacing:0.06em;
  min-width: 0;
}

.logo img{
  height:42px;
  width:auto;
  flex: 0 0 auto;
}

.logo-text{
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Links nav desktop */
.nav-links{
  display:flex;
  gap:1.5rem;
  list-style:none;
  margin:0;
  padding:0;
}

/* ============================
   ESTILO PROFESIONAL DE BOTÓN
   ============================ */							   
.nav-links a{
  position: relative;
  color: var(--blanco);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.45rem 1rem;     /* Tamaño tipo botón */
  border-radius: 999px;      /* Forma redondeada de pastilla */
  transition:
      background 0.3s ease,
      color 0.3s ease,
      transform 0.25s ease,
      box-shadow 0.3s ease;
}

.nav-links a:hover{
  background: var(--verde-claro);    /* Fondo clarito */
  color: var(--verde-oscuro);        /* Texto fuerte y visible */
  transform: translateY(-2px);       /* Elevación sutil */
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Toggle móvil */
.nav-toggle{
  display:none;
}

.nav-toggle-label{
  display:none;
  cursor:pointer;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
  display:block;
  width:22px;
  height:2px;
  background:var(--blanco);
  border-radius:999px;
  position:relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
  content:"";
  position:absolute;
  left:0;
}

.nav-toggle-label span::before{ top:-6px; }
.nav-toggle-label span::after{ top:6px; }

/* ===== Hero ===== */
.hero{
  margin-top:80px;
  min-height:80vh;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:linear-gradient(135deg, #d9f99d, #bbf7d0);
}

.hero-slider{
  position:absolute;
  inset:0;
  z-index:0;
}

.hero-slider .slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}

.hero-slider .slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.hero-slider .slide.active{ opacity:1; }

.hero-overlay{
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 1rem;
  color: var(--blanco);
  max-width: 720px;
}

.hero-overlay h1{
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-shadow:
    0 4px 12px rgba(0,0,0,0.7),
    0 0 4px rgba(0,0,0,0.9);
}

.hero-overlay p{
  font-size: 1.3rem;
  font-weight: 400;
  text-shadow:
    0 3px 10px rgba(0,0,0,0.7),
    0 0 3px rgba(0,0,0,0.9);
}

.btn-cta{
  display:inline-block;
  padding:0.75rem 1.6rem;
  border-radius:999px;
  background:var(--verde-claro);
  color:var(--verde-oscuro);
  text-decoration:none;
  font-weight:700;
  font-size:0.95rem;
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(0,0,0,0.3);
  background:#a5f3fc;
}

/* ===== Secciones genéricas ===== */
.section{
  padding:4rem 1.5rem;
}

.section:nth-of-type(even){
  background:#ecfdf3;
}

.section-inner{
  max-width:1100px;
  margin:0 auto;
}

.section h2{
  font-size:2rem;
  margin-bottom:1rem;
  text-align:center;
  color:var(--verde-oscuro);
}

.section p{ font-size:0.98rem; }

/* ===== Quiénes somos ===== */
.quienes p{
  text-align:center;
  max-width:900px;
  margin:0 auto;
}

.quienes-galeria{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.5rem;
  margin-top:2rem;
}

.quienes-galeria img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:1rem;
  box-shadow:0 8px 22px rgba(15,23,42,0.25);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.quienes-galeria img:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 14px 30px rgba(15,23,42,0.3);
}

/* ===== Cards genéricas ===== */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.75rem;
  margin-top:2rem;
}

.card{
  background:var(--blanco);
  border-radius:1.1rem;
  padding:1.5rem 1.25rem;
  box-shadow:0 6px 18px rgba(15,23,42,0.12);
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 26px rgba(15,23,42,0.16);
}

.card i{
  font-size:2.4rem;
  color:var(--verde-medio);
  margin-bottom:0.75rem;
}

.card h3{
  margin:0.5rem 0;
  color:var(--verde-oscuro);
  font-size:1.1rem;
}

/* ===== Misión / Visión ===== */
.mv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:2rem;
}

.mv-box{
  background:var(--blanco);
  border-radius:1.1rem;
  padding:1.75rem 1.5rem;
  box-shadow:0 6px 18px rgba(15,23,42,0.12);
}

.mv-box h2{
  text-align:left;
  margin-top:0;
}

/* ===== Nuestra Labor (galería) ===== */
.labor-intro{
  max-width:900px;
  margin:0 auto 2rem;
  text-align:center;
}

.labor-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px,1fr));
  gap:1.5rem;
}

.labor-item{ margin:0; }

.labor-item img{
  width:100%;
  height:230px;
  object-fit:cover;
  border-radius:1rem;
  box-shadow:0 8px 22px rgba(15,23,42,0.25);
  transition:transform 0.25s ease, box-shadow 0.25s ease;
}

.labor-item img:hover{
  transform:translateY(-3px) scale(1.01);
  box-shadow:0 14px 30px rgba(15,23,42,0.3);
}

/* ===== Contacto ===== */
.contacto-grid{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr);
  gap:2.5rem;
  align-items:flex-start;
}

.contacto-datos{
  list-style:none;
  padding:0;
  margin:0;
}

.contacto-datos li{
  margin-bottom:0.5rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.contacto-datos i{ color:var(--verde-medio); }

.contacto-form{
  background:var(--blanco);
  padding:1.75rem 1.5rem;
  border-radius:1.1rem;
  box-shadow:0 6px 18px rgba(15,23,42,0.12);
}

.contacto-form label{
  display:block;
  font-size:0.9rem;
  font-weight:600;
  margin-top:0.75rem;
}

.contacto-form input,
.contacto-form textarea{
  width:100%;
  border-radius:0.75rem;
  border:1px solid #d1d5db;
  padding:0.65rem 0.75rem;
  margin-top:0.25rem;
  font-size:0.95rem;
  font-family:inherit;
}

.contacto-form textarea{ resize:vertical; }

.contacto-form button{
  margin-top:1rem;
  width:100%;
  border:none;
  border-radius:999px;
  padding:0.75rem 1rem;
  background:var(--verde-medio);
  color:var(--blanco);
  font-weight:700;
  font-size:0.98rem;
  cursor:pointer;
  transition:background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 8px 20px rgba(22,163,74,0.35);
}

.contacto-form button:hover{
  background:#16a34a;
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(22,163,74,0.45);
}

/* ===== Footer ===== */
.site-footer{
  background:linear-gradient(135deg, #052e16, #1e293b);
  color:var(--blanco);
  padding:2.5rem 1.5rem 1.2rem;
}

.footer-inner{
  max-width:1100px;
  margin:0 auto 1.5rem;
  display:grid;
  grid-template-columns:2fr 1.2fr 1.3fr;
  gap:2rem;
}

.footer-col ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-col a{
  color:var(--verde-claro);
  text-decoration:none;
  font-size:0.95rem;
}

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

.footer-bottom{
  text-align:center;
  font-size:0.85rem;
  opacity:0.85;
}

/* ===== Botón volver arriba ===== */
.btn-top{
  position:fixed;
  right:1.2rem;
  bottom:1.2rem;
  width:42px;
  height:42px;
  border-radius:999px;
  border:none;
  background:var(--verde-medio);
  color:var(--blanco);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.35);
  cursor:pointer;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
  z-index:900;
}

.btn-top.visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ===== PORTAFOLIO ===== */
.portfolio-carousel{
  position: relative;
  max-width: 1100px;
  margin: 20px auto 10px;
}

.portfolio-viewport{
  width: 100%;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  height: min(70vh, 650px);
}

.portfolio-slide{
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
}

.portfolio-slide.active{ display: block; }

.portfolio-slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.portfolio-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: grid;
  place-items: center;
}

.portfolio-btn.prev{ left: -10px; }
.portfolio-btn.next{ right: -10px; }
.portfolio-btn:hover{ background: rgba(0,0,0,.7); }

.portfolio-dots{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:14px;
}

.portfolio-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.35);
  background: rgba(0,0,0,.12);
  cursor:pointer;
}

.portfolio-dot.active{ background: rgba(0,0,0,.55); }

/* ===== RESPONSIVE MÓVIL ===== */
@media (max-width: 768px){

  .main-nav{
    padding: .6rem 1rem;
  }

  .nav-toggle{ display:block; }
  .nav-toggle-label{ display:block; }

  .nav-links{
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(135deg, var(--verde-oscuro), var(--verde-medio));
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    padding: 1rem;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
    z-index: 1200;
  }

  .nav-links li{
    width: 100%;
    display:flex;
    justify-content:center;
  }

  .nav-links a{
    width: min(520px, 92%);
    text-align:center;
    border-radius: 14px;
    background: rgba(255,255,255,.10);
    padding: .75rem 1rem;
  }

  .nav-toggle:checked ~ .nav-links{
    max-height: calc(100vh - 56px);
  }

  .logo img{ height:34px; }
  .logo-text{ font-size:.95rem; }

  .contacto-grid{
    grid-template-columns: 1fr !important;
    gap: 1.25rem;
  }

  .contacto-form{
    width: 100%;
    padding: 1.25rem;
  }

  .contacto-form input,
  .contacto-form textarea{
    font-size: 16px;
  }

  .portfolio-carousel{ overflow:hidden; }
  .portfolio-btn{ display:none !important; }
  .portfolio-viewport{ height: min(55vh, 420px); }
}
/* ===== FIX LOGO HEADER (tamaño real) ===== */
.main-nav{
  height: 80px;              /* antes 64px */
  padding: 0 1rem;
}
.main-nav .logo img{
  height: 80px !important;   /* antes 40px */
  width: auto !important;
  max-width: 160px;          /* opcional: un poquito más */
  object-fit: contain;
  display:block;
}

/* móvil */

@media (max-width:768px){
  .main-nav{ height: 60px; }
  .main-nav .logo img{
    height: 40px !important;
    max-width: 130px;
  }
}

/* ===== AJUSTE HERO POR NAVBAR FIJO ===== */
.hero{
  margin-top: 80px; /* mismo alto del navbar */
}
/* ===== LOGO EN FOOTER ===== */
.footer-logo{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* cambia a center si lo quieres centrado */
  gap: 0.6rem;
}

.footer-logo img{
  width: 110px;
  height: auto;
}

.footer-logo p{
  font-size: 0.9rem;
  color: var(--verde-claro);
  line-height: 1.3;
}
/* ===== FOOTER ORGANIZADO EN UNA SOLA FILA ===== */
.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.5rem;
  flex-wrap: nowrap;
}

/* Columnas */
.footer-col{
  flex: 1;
  min-width: 180px;
}

/* Logo columna */
.footer-logo img{
  width: 110px;
  margin-bottom: 0.75rem;
}

/* Títulos */
.footer-col h3,
.footer-col h4{
  margin-bottom: 0.6rem;
  color: #ffffff;
}

/* Listas */
.footer-col ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li{
  margin-bottom: 0.4rem;
}

.footer-col a{
  color: var(--verde-claro);
  text-decoration: none;
}

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

/* Texto */
.footer-col p{
  margin: 0.3rem 0;
  line-height: 1.5;
}

/* ===== FOOTER RESPONSIVE (MÓVIL) ===== */
@media (max-width: 900px){
  .footer-inner{
    flex-wrap: wrap;
    text-align: center;
  }

  .footer-col{
    flex: 1 1 100%;
  }

  .footer-logo img{
    margin: 0 auto 1rem;
  }
}