/* ========================================================================= */
/* VARIABLES & RESET                                                         */
/* ========================================================================= */
:root{
  --primary-color:#595959;     /* Gris corporativo (header/footer/texto) */
  --accent:#00c2a8;            /* Turquesa detalles/acciones */
  --accent-dark:#009984;       /* Hover */
  --bg:#ffffff;
  --bg-alt:#f7f9fb;
  --text:var(--primary-color);
  --muted:#888888;
  --border:#e9e9e9;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Inter',system-ui,sans-serif;line-height:1.65}
body{background:var(--bg);color:var(--text)}
html, body { overflow-x: hidden; } /* evita scroll horizontal inesperado */
img, video { max-width: 100%; height: auto; } /* nunca más ancho que la pantalla */
a{color:inherit;text-decoration:none;transition:opacity .15s ease}
a:hover{opacity:.85}
h1,h2,h3,h4{font-weight:700;line-height:1.2}
strong{font-weight:700;color:var(--primary-color)}
.container{width:min(1200px,92vw);margin:0 auto}

/* Utilidades */
.section{padding:100px 0;scroll-margin-top:80px}
.section.alt{background:var(--bg-alt)}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:20px}


/* ========================================================================= */
/* HEADER / NAV                                                              */
/* ========================================================================= */
.site-header{
  position:sticky;top:0;z-index:100;
  background:var(--primary-color); /* gris #595959 */
  padding:10px 0;
}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo{height:100px;object-fit:contain} /* logo blanco con fondo transparente */

.nav{display:flex;gap:25px;align-items:center}
.nav a{
  font-size:14px;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;font-weight:600;transition:color .2s
}
.nav a:hover{color:var(--accent)}

.menu-toggle{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:0}
.menu-toggle svg{fill:#fff}

/* Botón de icono (Contacto) */
.btn-icon{
  display:flex;                 /* centra el ícono adentro del cuadrado */
  justify-content:center;
  align-items:center;
  width:52px;height:52px;       /* tamaño del cuadrado */
  border-radius:10px;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  transition:transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.btn-icon:hover{ transform:translateY(-2px); background:var(--accent-dark); }
.btn-icon i{ font-size:26px; line-height:1; }

/* ========================================================================= */
/* NAV Responsive / Toggle                                                   */
/* ========================================================================= */
@media (max-width:760px){
  .menu-toggle{ display:block; }   /* se muestra el botón hamburguesa */

  .nav{
    display:none;                  /* oculto por defecto en mobile */
    position:absolute;
    top:76px; left:0; right:0;
    background:var(--primary-color);
    flex-direction:column;
    align-items:center;            /* centramos el stack */
    padding:10px 0 20px;
    border-top:1px solid rgba(255,255,255,.1);
    box-shadow:0 4px 8px rgba(0,0,0,.2);
    z-index:9999;
  }
  .nav a{
    display:block;
    text-align:center;
    padding:10px 20px;
    margin:6px 20px;
    border-radius:6px;
  }
  .nav .btn-icon{                 /* el botón de contacto en el menú */
    margin:14px auto 12px;        /* centrado y con aire arriba/abajo */
    width:56px;height:56px;       /* un toque más grande en mobile */
  }
  .nav .btn-icon i{ font-size:28px; }
  .nav.is-open{ display:flex; }   /* al togglear con JS, se abre */
}


/* ========================================================================= */
/* HERO                                                                      */
/* ========================================================================= */
.header-with-bg {
  padding: 140px 0;
  position: relative;
  background: url("assets/fondoheader.png") center/cover no-repeat;
  border-bottom: 1px solid var(--border);
}

/* Todo el texto del hero en blanco */
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}
.hero-tagline{
  color:#fff;
  letter-spacing:.15em;
  margin-bottom:15px;
  text-transform:uppercase;
}
.intro-title{
  font-size:clamp(42px, 6vw, 80px);
  line-height:1.1;
  margin-bottom:25px;
  color:#fff;
  font-weight:700;
  white-space:normal; overflow:visible; text-overflow:clip; word-break:normal;
}
.intro-lead{
  color:#fff;
  max-width:900px;
  margin:0 auto 40px;
  font-size:1.25rem;
}
/* Forzar que los <strong> dentro del hero sean blancos */
.header-with-bg strong{ color:#fff !important; }


/* ========================================================================= */
/* BOTONES & FORM                                                            */
/* ========================================================================= */
.btn{
  display:inline-block;padding:16px 28px;border-radius:10px;
  font-weight:700;font-size:1rem;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid transparent;transition:transform .15s,box-shadow .15s
}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.15)}
.btn.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.btn-primary:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
.btn.secondary{background:#fff;color:var(--text);border:1px solid var(--border)}

input,textarea,select{
  padding:14px;border-radius:10px;border:1px solid var(--border);
  font-size:16px;width:100%
}


/* ========================================================================= */
/* SERVICIOS                                                                 */
/* ========================================================================= */
.choices-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin-top:18px
}
.choice-btn{
  display:block;text-align:left;padding:28px;border-radius:16px;
  border:1px solid var(--border);background:#fff;color:var(--text);
  box-shadow:0 6px 20px rgba(0,0,0,.05);transition:transform .2s,border-color .2s,box-shadow .2s
}
.choice-btn h3{color:var(--accent);margin-bottom:8px;font-size:1.15rem}
.choice-btn:hover{transform:translateY(-3px);border-color:var(--accent);box-shadow:0 10px 25px rgba(0,0,0,.12)}

.grid-3{
  display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:22px
}

/* Bullets de intro (Quiénes somos) */
.intro-bullets{margin-top:10px;padding-left:1.2em}
.intro-bullets li{margin:6px 0;list-style:none;position:relative;padding-left:1.2em}
.intro-bullets li::before{
  content:'→';position:absolute;left:0;top:0;color:var(--accent);font-weight:700
}


/* ========================================================================= */
/* EQUIPO / AVATARES                                                         */
/* ========================================================================= */
.avatar{
  width:140px;height:140px;border-radius:50%;
  object-fit:cover;object-position:center;
  border:4px solid #fff; box-shadow:0 6px 16px rgba(0,0,0,.08);
  display:block; overflow:hidden; transition:transform .4s ease;
}
.avatar:hover{ transform:scale(1.15); }


/* ========================================================================= */
/* MARCAS (LOGOS)                                                            */
/* ========================================================================= */
.logos{
  display:grid;grid-template-columns:repeat(6,1fr);gap:18px;align-items:center
}
.logo-item{
  opacity:.9;transition:.2s;display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px
}
.logo-item:hover{opacity:1;filter:none}
@media (max-width:900px){.logos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,1fr)}}


/* ========================================================================= */
/* FOOTER                                                                    */
/* ========================================================================= */
.site-footer{background:var(--primary-color);color:#fff}
.footer-inner{
  padding:20px 0;display:flex;justify-content:center;align-items:center;
  font-size:14px;text-align:center;flex-wrap:wrap;gap:6px;
  padding-left:16px;padding-right:16px;
}
.footer-copy{ margin:0; width:100%; overflow-wrap:anywhere; word-break:break-word; }


/* ========================================================================= */
/* RESPONSIVE                                                                */
/* ========================================================================= */
@media (max-width:960px){
  .logo{height:60px}
  .intro-title{white-space:normal}
}
@media (max-width:760px){
  .header-with-bg{padding:110px 0}
  .intro-lead{font-size:1.05rem}
  .btn{width:100%;text-align:center}
}

/* ===== Quiénes somos (ajustes) ===== */
.who-lead{
  margin-top:12px;color:var(--primary-color);max-width:860px;font-size:1.05rem;
}
.who-subtitle{
  margin-top:18px;color:var(--muted);font-weight:600;font-size:0.95rem;letter-spacing:.02em;
}
.team-grid{
  margin-top:18px;display:grid;grid-template-columns:repeat(2,1fr);
  gap:22px;align-items:start;
}
.team-card{
  text-align:center;background:#fff;border:1px solid var(--border);
  border-radius:16px;padding:18px;box-shadow:var(--shadow);
}
.team-card .avatar{
  width:140px;height:140px;border-radius:50%;
  object-fit:cover;object-position:center;margin:0 auto 10px;border:4px solid #fff;
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}
.team-card figcaption{ font-size:.95rem;color:var(--text);line-height:1.35; }
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr; } }

/* ========================================================================= */
/* FORMULARIO DE CONTACTO (versión única y limpia)                           */
/* ========================================================================= */
#contacto .form-title{ margin:0 0 16px 0; }

.contact-grid{
  display:grid;
  gap:24px;
  grid-template-columns:1fr 1fr;  /* 2 columnas en desktop */
  align-items:start;
}

@media (max-width:900px){
  .contact-grid{
    grid-template-columns:1fr;   /* 1 columna en mobile */
  }
  .contact-grid form{
    max-width:640px;
    margin:0 auto;              /* centrado del form en mobile/tablet */
  }
}

/* Tarjeta y grid interno */
#contacto .card{ padding:20px; }
#contacto .form-grid{ display:grid; gap:12px; }

/* Campos full-width y tamaño legible (evita zoom iOS) */
#contacto input,
#contacto select,
#contacto textarea{
  width:100%;
  font-size:16px;
}

/* Botón ancho en mobile */
@media (max-width:760px){
  #contacto .btn{ width:100%; }
}

/* Honeypot accesible e invisible */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

a, button { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}


/* ========================================================================= */
/* ICONOS DE CONTACTO (con Font Awesome)                                     */
/* ========================================================================= */
.social-links{ padding:30px 0; background:#f7f9fb; }
.social-inner{ display:flex; justify-content:center; align-items:center; gap:30px; }
.social-inner a{ font-size:28px; color:var(--primary-color); transition:transform .2s, color .2s; }
.social-inner a:hover{ transform:scale(1.2); color:var(--accent); }

/* Ajustes very-small screens */
@media (max-width:380px){
  .intro-title{ font-size:clamp(34px, 8vw, 42px); }
  .choices-grid{ grid-template-columns:1fr; }
  .grid-3{ grid-template-columns:1fr; }
}
.logo-item img{ max-width:140px; height:auto; }
@media (max-width:520px){ .logo-item img{ max-width:120px; } }
@media (max-width:480px){
  .site-footer .footer-inner{ font-size:13px; line-height:1.4; }
}


/* ===== Botón Contacto: centrado quirúrgico ===== */
.nav .btn-icon{
  display:inline-grid;         /* grid para centrar perfecto */
  place-items:center;          /* centra X e Y */
  width:56px; height:56px;     /* puedes bajar a 52 si lo querés menor */
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  border-radius:10px;
  padding:0 !important;        /* sin padding heredado del link */
  line-height:0;               /* elimina baseline del contenedor */
  transition:background-color .2s ease, transform .15s ease, box-shadow .15s ease;
}
.nav .btn-icon:hover{ background:var(--accent-dark); transform:translateY(-2px); }

/* Font Awesome ajustado */
.nav .btn-icon i{
  font-size:28px;              /* tamaño del ícono */
  display:block;
  line-height:1;               /* nada de extras */
}
.nav .btn-icon i::before{
  display:block;
  line-height:1;
  position:relative;
  top:0.5px;                   /* micro-ajuste; subí a 0.75/1px si aún lo ves alto */
}

/* En el menú desplegable: centrado y con aire */
@media (max-width:760px){
  .nav{ flex-direction:column; align-items:center; }
  .nav a{ display:block; text-align:center; margin:6px 20px; }
  .nav .btn-icon{
    margin:18px auto 14px;     /* espacio arriba/abajo dentro del menú */
  }
}