/* ===== CONTACTO (FOOTER VERDE) ===== */
    footer.contacto{
      background: linear-gradient(135deg, rgba(2,179,123,.96), rgba(10,127,163,.96));
      color:#f0fdf4; border-top:none;
    }
    footer.contacto .titulo{ color:#fff }
    footer.contacto .sub{ color:rgba(255,255,255,.9) }
    .contact-panels{ display:grid; gap:clamp(16px,2.6vw,28px); grid-template-columns: 1.1fr .9fr; align-items:start; }
    @media (max-width:980px){ .contact-panels{ grid-template-columns:1fr } }
    .quick-grid{ display:grid; gap:14px; justify-items:center; grid-template-columns:repeat(auto-fit,minmax(72px,1fr)); }
    .icon-btn{ width:72px; height:72px; border-radius:999px; display:grid; place-items:center; border:1px solid var(--bd,#e8f2ef); background:#fff; color:#0b2b23; box-shadow:0 8px 20px rgba(2,179,123,.10); transition:transform .16s, box-shadow .16s }
    .icon-btn i{ font-size:28px; line-height:1 }
    .icon-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 28px rgba(2,179,123,.16) }

    .info-cards{ display:grid; gap:12px; grid-template-columns:1fr 1fr }
    @media (max-width:700px){ .info-cards{ grid-template-columns:1fr } }
    .info-card{ background:#fff; border:1px solid #e8f2ef; border-radius:16px; padding:16px; display:flex; gap:12px; align-items:flex-start; box-shadow:0 8px 20px rgba(2,179,123,.06) }
    .info-icon{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff }
    .info-card h4{ margin:.1rem 0 .25rem; color:#07281f; font-weight:800 }
    .info-card p{ margin:0; opacity:.85 }

    .form-card{ background:#fff; border:1px solid #e8f2ef; border-radius:16px; padding:18px; box-shadow:0 10px 24px rgba(2,179,123,.08) }
    .form{ display:grid; gap:.8rem; grid-template-columns:1fr 1fr }
    .input{ background:#fff; border:1px solid #e8f2ef; border-radius:12px; padding:12px 12px; outline:0; color:#0b2b23 }
    .form textarea{ grid-column:1 / -1; min-height:130px }
    .form .cta{ grid-column:1 / -1; text-align:center; background:linear-gradient(90deg,var(--brand),var(--brand2)); color:#fff }

    /* Paletas suaves por marca */
    .brand-tel{ --bd:#e7f2ef }
    .brand-mail{ --bd:#dfe7ff }
    .brand-wa{ --bd:#beece0 }
    .brand-fb,.brand-msgr{ --bd:#cde1ff }
    .brand-ig{ --bd:#ffd2ee }
    .brand-x{ --bd:#e5e7eb }
    .brand-yt{ --bd:#ffd5d5 }
    .brand-li{ --bd:#cfeaf6 }
    .brand-tt{ --bd:#d6f5f2 }
    .brand-tg{ --bd:#cfe8ff }
    .brand-web{ --bd:#e7f2ef }

    /* Franja inferior del footer */
    .footnote{ background: linear-gradient(135deg, #0a7fa3, #096a87); border-top:1px solid rgba(255,255,255,.25); color:#e6fffa; }
    .footnote-inner{
      display:flex; gap:8px; align-items:center; justify-content:space-between;
      padding:14px 0; font-size:.94rem;
    }
    .footnote a{ color:#fff }
    .footnote a:hover{ text-decoration:underline }

   /* Desktop */
@media (min-width:821px){
  .nav-toggle{ display:none !important; }
  .menu{ display:flex !important; gap:.6rem; flex-wrap:wrap; justify-content:center }
}

/* Móvil */
@media (max-width:820px){
  .nav-toggle{
    display:inline-flex; align-items:center; gap:.5rem;
  }
  .menu{
    display:none; width:100%; margin-top:.55rem;
    flex-direction:column; align-items:center; gap:.5rem;
    order:2;
  }
  .menu.open{ display:flex; }
  .chip{ width:100%; text-align:center }
  .nav-cta{ width:100%; order:3 }
}


     @media (max-width:420px){
     header.hero{ position:relative; overflow:hidden; background:none; color:inherit; height:auto; padding:0 }
    .hero-img{
      width:100%;
      height: clamp(70px, 80vw, 1180px);
      object-fit:cover; object-position:center; display:block; filter:saturate(104%);
    }
  }
  /* === NAV sticky con blur === */
nav.main-nav{
  position: sticky;
  top: 0;
  z-index: 1000;
  /* fondo translúcido para que funcione el blur */
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid rgba(232,242,239,.9);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
nav.main-nav.is-scrolled{
  background: rgba(255,255,255,.94);
  box-shadow: 0 10px 24px rgba(2,179,123,.12);
  border-color: #e8f2ef;
}

/* Evita que el sticky tape el inicio de cada sección al navegar por anclas */
section[id], footer[id]{ scroll-margin-top: 84px; }
/* Contraste dentro de tarjetas blancas del footer */
footer.contacto .info-card,
footer.contacto .form-card { 
  color: #0b2b23; /* texto base oscuro */
}

footer.contacto .info-card h4,
footer.contacto .form-card h3 {
  color: #07281f; /* títulos oscuros */
}

/* Enlaces dentro de las tarjetas */
footer.contacto .info-card a,
footer.contacto .form-card a {
  color: #0a7fa3;
  text-decoration: underline;
}

/* Placeholders del formulario en el footer */
footer.contacto .form-card ::placeholder {
  color: #64748b;
  opacity: 1;
}

/* ====== CONTACTO: responsive sólido ====== */

/* 1) Grid principal: 1 columna por defecto; 2 columnas en desktop */
.contact-panels{
  display:grid;
  gap:clamp(16px,2.6vw,28px);
  grid-template-columns: 1fr;           /* móvil/tablet */
  align-items:start;
}
@media (min-width: 980px){
  .contact-panels{ grid-template-columns: 1.1fr .9fr } /* desktop */
}

/* 2) Prioriza el formulario arriba en móvil (opcional) */
@media (max-width: 979.98px){
  .contact-panels > .form-card{ order:1 }
  .contact-panels > :first-child{ order:2 }
}

/* 3) Tarjetas e interiores no desbordan */
.form-card,
.info-card{ min-width:0 }               /* evita overflow por contenido largo */

/* 4) Form responsive: 1 col en móvil, 2 cols en pantallas medianas+ */
.form{
  display:grid;
  gap:.8rem;
  grid-template-columns: 1fr;           /* base: 1 col */
}
@media (min-width: 640px){
  .form{ grid-template-columns: 1fr 1fr }  /* dos columnas si cabe */
}
.form textarea{ grid-column: 1 / -1; min-height:130px }
.form .cta{ grid-column: 1 / -1; text-align:center; }

/* 5) Inputs fluidos y cómodos (evita zoom iOS) */
.input{
  width:100%;
  max-width:100%;
  font-size:16px;                        /* iOS no hace zoom */
  background:#fff;
  border:1px solid #e8f2ef;
  border-radius:12px;
  padding:12px 12px;
  outline:0;
  color:#0b2b23;
  box-sizing:border-box;
}

/* 6) Grids internos */
.quick-grid{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(72px,1fr));
  justify-items:center;
}
.info-cards{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;            /* móvil */
}
@media (min-width: 720px){
  .info-cards{ grid-template-columns:1fr 1fr } /* 2 cols cuando hay espacio */
}

/* 7) Botón de envío full-width en móvil */
@media (max-width: 479.98px){
  .form .cta{ width:100% }
}

/* 8) Pequeños ajustes visuales del footer */
footer.contacto{
  background: linear-gradient(135deg, rgba(2,179,123,.96), rgba(10,127,163,.96));
  color:#f0fdf4;
}
footer.contacto .titulo{ color:#fff }
footer.contacto .sub{ color:rgba(255,255,255,.9) }

.pill{ cursor:pointer }
.pill:focus-visible{ outline:2px solid color-mix(in srgb, var(--brand) 60%, white); outline-offset:2px }
/* Altura del header sticky */
:root{ --nav-offset: 84px; }  /* ajusta si tu nav mide distinto */

/* Aplica offset tanto a la sección como al formulario */
#contacto,
#form-contacto{
  scroll-margin-top: var(--nav-offset);
}
/* La cuña no debe cubrir el contenido que sigue */
.slant{ position: relative; z-index: 0; }
.slant::before,
.slant::after{
  z-index: -1;           /* detrás del contenido */
  pointer-events: none;  /* por si acaso */
}

/* En móviles, reduce el “labio” que sobresale */
@media (max-width: 640px){
  .slant::after{ height:40px; bottom:-40px; }
}
@media (max-width: 640px){
  #faq{ padding-top: clamp(40px, 8vw, 56px); }
}
/* (opcional) asegura que el título quede por encima en cualquier caso */
#faq .titulo{ position: relative; z-index: 1; }
/* Estilo general para el contenedor de los servicios */


.hero-text {
  text-align: center;
  padding: 3rem 1.5rem;
  background-color: #fff;
  color: #07281f;
  max-width: 850px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.06);
  position: relative;
  overflow: hidden;
}

.hero-text i {
    margin: 30px 0 20px 0;
    font-size: 90px;
    animation: colorChange 3s ease-in-out infinite, slideInOut 5s linear infinite; /* Combinación de ambas animaciones */
}

@keyframes colorChange {
    0% {
        color: #1e90ff; /* Azul brillante */
    }
    25% {
        color: #ff5722; /* Naranja vibrante */
    }
    50% {
        color: #00bcd4; /* Turquesa brillante */
    }
    75% {
        color: #4caf50; /* Verde brillante */
    }
    100% {
        color: #1e90ff; /* Vuelve al azul brillante */
    }
}



/* Efecto suave de aparición */
.animate-hero {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp 1.2s ease-out forwards;
  animation-delay: 0.3s;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}