:root { 
  --bg:#ffffff; 
  --fg:#111111; 
  --muted:#555555; 
  --brand:#FF6702;
  --header-h: 100px; 
  --card:#e8e8e8;
  --card-b:#e6e6e6;
  --shadow:0 6px 24px rgba(0,0,0,.06);
}
* { box-sizing:border-box; margin:0; padding:0; }
body { font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; color:var(--fg); background:var(--bg); }

/* Logo dentro del footer */
.footer-brand img {
  display: block;       /* evita espacios fantasma de inline */
  max-width: 160px;     /* asegura que no crezca más de lo esperado */
  height: auto;         /* mantiene proporción */
  margin-bottom: 12px;  /* espacio con la descripción */
}

@media (max-width: 480px) {
  .footer-brand img {
    max-width: 120px;   /* más pequeño en móvil */
  }
}

/* Contenedor y anclas */
.container { width:100%; margin-inline:auto; padding-inline:40px; }
section { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Header superpuesto */
.header { 
  display:flex; align-items:center; justify-content:space-between; gap:12px; 
  padding-block:12px; padding-inline:40px;
  position:fixed; inset-block-start:0; inset-inline:0; 
  background:transparent; 
  transition: background .3s ease, box-shadow .3s ease, color .3s ease; 
  z-index:100; 
  height: var(--header-h);
}
.header.scrolled { background:#ffffffcc; box-shadow:0 2px 6px rgba(0,0,0,.1); backdrop-filter:blur(10px); }
.logo { color:#fff; text-decoration:none; font-weight:800; letter-spacing:.4px; transition:color .3s ease; }
.nav { display:flex; gap:14px; }
.nav a { color:#eee; text-decoration:none; padding:8px 12px; border-radius:999px; transition:color .3s ease, background .3s ease; }
.nav a:hover { color:#fff; background:rgba(255,255,255,0.1); }
.nav .btn { background:var(--brand); color:#fff; font-weight:800; }
.hamb { display:none; border:1px solid #fff; background:transparent; color:#fff; border-radius:10px; padding:6px 10px; transition: all .3s ease; }
/* Nav móvil */
.nav-mobile { position:fixed; top:var(--header-h); left:0; right:0; background:#fff; border-bottom:1px solid #eee; display:flex; flex-direction:column; gap:8px; padding:12px 16px; z-index:90; }
.nav-mobile a { padding:10px 12px; color:var(--fg); text-decoration:none; border-radius:10px; }
.nav-mobile a:hover { background:#f5f5f5; }
[hidden] { display:none !important; }
/* Scroll changes */
.header.scrolled .logo { color:var(--fg); }
.header.scrolled .nav a { color:var(--muted); }
.header.scrolled .nav a:hover { color:var(--fg); background:#f0f0f0; }
.header.scrolled .hamb { border:1px solid #ccc; color:var(--fg); background:#fff; }

/* Secciones y tarjetas base */
.section { padding:30px 0; }
.section-head { text-align:center; margin-bottom:28px; }
.section-head h2 { margin:0 0 8px; font-size:34px; }
.section-head p { color:var(--muted); margin:0; }
.grid { display:grid; gap:18px; }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
.card { background:var(--card); border:1px solid var(--card-b); border-radius:16px; padding:20px; }
.card h3 { margin:0 0 8px; }

/* Hero slider fullscreen */
.hero { padding:0; margin:0; }
.slider { position:relative; overflow:hidden; border:none; border-radius:0; margin:0; width:100%; height:100vh; }
.slides { display:flex; width:100%; height:100%; transition:transform .5s ease; will-change: transform; }
.slide { min-width:100%; height:100vh; display:grid; place-items:center; background-size:cover; background-position:center; background-image:var(--bg); position:relative; }
.slide::before { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,.18)); }
.slide-content { position:relative; z-index:1; text-align:center; padding:20px; max-width:800px; color:#fff; }
.slide-content h1 { font-size:clamp(30px, 5vw, 64px); margin:0 0 10px; }
.slide-content p { margin:0 0 18px; }
.btn-lg, .btn { display:inline-block; padding:12px 18px; border-radius:12px; background:var(--brand); color:#fff; font-weight:800; text-decoration:none; border:none; cursor:pointer; }

/* Controles slider (hero / clientes) */
.ctrl { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:999px; border:1px solid #ddd; background:#fff; color:var(--fg); box-shadow:0 2px 10px rgba(0,0,0,.06); opacity:.95; cursor:pointer; }
.ctrl.prev { left:10px; }
.ctrl.next { right:10px; }
.dots { position:absolute; bottom:12px; left:0; right:0; display:flex; justify-content:center; gap:8px; }
.dot { width:10px; height:10px; border-radius:999px; border:1px solid #ccc; background:#eee; }
.dot.active { background:var(--brand); border-color:var(--brand); }

/* ====== SERVICIOS (tarjetas) ====== */
.services-head .lead { font-size:18px; color:var(--fg); margin-top:6px; }
.services-head .intro { max-width:820px; margin:12px auto 0; color:var(--muted); }

.service-card {
  background:#f3f3f3;
  border:1px solid var(--card-b);
  border-radius:16px;
  padding:18px;
  display:grid;
  gap:10px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card .icon {
  width:44px; height:44px; border-radius:12px; background:#ffbe8c; display:grid; place-items:center;
  color:var(--brand); border:1px solid #ff6a00;
}
.service-card .icon svg { width:24px; height:24px; }
.service-card h3 { margin:0; font-size:18px; }
.service-card p { margin:0; color:var(--muted); }
.service-card .link { color:var(--brand); text-decoration:none; font-weight:700; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 6px 12px rgba(0,0,0,0.1); border-color:#ff6a00; }


/* Swiper (Servicios) */
/* === Gutter lateral fuerte para el Swiper de Servicios === */
.services-swiper{
  /* reserva espacio inferior para bullets */
  padding-bottom: 88px;

  /* GUTTER lateral: usa var con fallback y !important para vencer estilos previos */
  padding-left: var(--sw-gutter, 64px) !important;
  padding-right: var(--sw-gutter, 64px) !important;

  /* Asegura que el padding se respete en el ancho total */
  box-sizing: border-box;

  /* Si algún overflow cortaba el padding, lo permitimos */
  overflow: visible;
}

/* separa cada slide internamente para que las cards no peguen entre sí */
.services-swiper .swiper-slide{
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;
}

/* Opcional: corrige compresión visual de los extremos (no obligatorio) */
.services-swiper .swiper-wrapper{
  margin-left: -12px;
  margin-right: -12px;
}

/* Bullets bien abajo (por si seguían encima) */
.services-swiper .swiper-pagination{
  left: 0; right: 0;
  bottom: 16px !important;
}

/* Responsive: gutters más pequeños en pantallas chicas */
@media (max-width: 1024px){
  .services-swiper{ padding-left: 40px !important; padding-right: 40px !important; }
  .services-swiper .swiper-slide{ padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 640px){
  .services-swiper{ padding-left: 20px !important; padding-right: 20px !important; }
  .services-swiper .swiper-slide{ padding-left: 8px; padding-right: 8px; }
}

/* Asegura respiro bajo cada slide para que nada quede detrás de los bullets */
.services-swiper .swiper-wrapper {
  padding-bottom: 24px;         /* empuja contenido por encima de los bullets */
}

/* Si alguna tarjeta se estira mucho, añade aún más respiro por slide */
.services-swiper .swiper-slide {
  padding-bottom: 8px;          /* pequeño colchón adicional */
}

/* Paginación bien abajo y centrada */
.services-swiper .swiper-pagination {
  left: 0; right: 0;
  bottom: 0px !important;      /* fuerza la posición inferior */
  z-index: 5;                   /* encima del fondo, debajo de tarjetas no hace falta más */
}

/* Opcional: separa ligeramente los puntos entre sí */
.services-swiper .swiper-pagination-bullet {
  margin: 0 6px !important;
}

.services-swiper { width:100%; padding: 8px 0 10px; }
.services-swiper .swiper-slide { height:auto; display:flex; }
.services-swiper .service-card { width:100%; display:grid; }
.services-swiper .swiper-button-prev,
.services-swiper .swiper-button-next {
  color: var(--fg);
  background: #fff;
  border: 1px solid #e6e6e6;
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.services-swiper .swiper-button-prev:after,
.services-swiper .swiper-button-next:after { font-size:16px; }
.services-swiper .swiper-pagination-bullet { background:#ddd; opacity:1; }
.services-swiper .swiper-pagination-bullet-active { background: var(--brand); }

/* Centrado del bloque CTA en Servicios */
/* Bloque CTA Servicios */
.services-cta {
  text-align: center;
  margin: 36px auto;       /* mantiene centrado */
  background: #fff;
  border: 1px solid var(--card-b);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0,0,0,.03);

  /* NUEVO: más espacio lateral */
  margin-left: 400px;
  margin-right: 400px;
}

@media (max-width: 768px) {
  .services-cta {
    margin-left: 20px;
    margin-right: 20px;
  }
}

.services-cta .cta-text {
  max-width: 900px;
  margin: 0 auto 16px;         /* centra y da respiro inferior */
  color: var(--fg);
}

/* Contenedor de botones centrado */
.services-cta .cta-actions {
  display: flex;
  justify-content: center;     /* centra horizontalmente */
  align-items: center;
  gap: 12px;                   /* espacio entre botones */
  flex-wrap: wrap;             /* permite salto de línea si no caben */
}

/* Botón naranja (ya existente como .btn-lg) */
.btn-lg {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .3s ease, transform .2s ease;
}
.btn-lg:hover {
  background: #e65c00;
  transform: translateY(-2px);
}

/* Botón negro */
.btn-black {
  display: inline-block;
  padding: 12px 20px;
  border-radius: 12px;
  background: #000;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background .3s ease, transform .2s ease;
}
.btn-black:hover {
  background: #222;
  transform: translateY(-2px);
}

/* En móvil, que los botones puedan ir uno debajo del otro si hace falta */
@media (max-width: 480px) {
  .services-cta .cta-actions {
    gap: 10px;
  }
  .services-cta .cta-actions a {
    width: 100%;
    max-width: 320px;          /* opcional para que no se estiren demasiado */
  }
}

/* Metodología: aire lateral en las cajas */
#metodologia .grid { gap:24px; padding-left:60px; padding-right:60px; }
#metodologia .card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* =========================
  Nosotros (alinear como metodología)
========================= */
#nosotros .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 en línea en desktop */
  gap: 24px;
  padding-left: 20px;
  padding-right: 20px;
}

/* Ajustes responsivos */
@media (max-width: 1024px) {
  #nosotros .grid {
    grid-template-columns: repeat(2, 1fr); /* 2 columnas en tablet */
  }
}

@media (max-width: 640px) {
  #nosotros .grid {
    grid-template-columns: 1fr; /* 1 columna en móvil */
  }
}

/* Nosotros: aire lateral en las cajas */
#nosotros .grid { gap:24px; padding-left:60px; padding-right:60px; }
#nosotros .card:hover { transform: translateY(-4px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

/* Clientes */
.logo-slider { height:auto; }
.logo-slider .slides { height:auto; align-items:center; }
.logo-page { min-width:100%; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; align-items:center; padding:8px 0; }
.logo-page img { width:300px; height:250px; object-fit:contain; border-radius:12px; border:1px solid var(--card-b); background:#fff; padding:12px; }

/* Formulario */
.form { display:grid; gap:14px; }
.form--center { max-width:560px; margin:0 auto; text-align:center; }
.form-stack { display:flex; flex-direction:column; gap:12px; }
.form-stack input, .form-stack textarea { width:100%; padding:12px 14px; border-radius:12px; border:1px solid #ccc; background:#fff; color:var(--fg); font:inherit; }
.form-stack textarea { min-height:120px; resize:vertical; }
.form-msg { margin:0; font-size:14px; color:var(--muted); }

/* Footer */
.footer { padding:40px 0; border-top:1px solid var(--card-b); color:var(--muted); background:#f9f9f9; }
/* 3 columnas en desktop: izquierda (brand), centro (contact), derecha (social) */
.footer-top { display:grid; grid-template-columns:1fr 1fr 1fr; align-items:flex-start; gap:24px; margin-bottom:16px; }
.footer-brand { max-width:380px; }
.footer-desc { margin:0; color:var(--muted); line-height:1.6; font-size:14px; }

/* Contacto centrado global */
.footer-contact { text-align:center; margin:0 auto; }
.footer-contact p { margin:4px 0; font-size:14px; color:var(--muted); }
.footer-contact a { color:var(--muted); text-decoration:none; }
.footer-contact a:hover { text-decoration:underline; }

/* Redes a la derecha */
.footer-social { display:flex; justify-content:flex-end; gap:14px; }
.footer-social a { width:40px; height:40px; display:grid; place-items:center; border-radius:10px; border:1px solid #e6e6e6; background:#fff; transition: transform .2s ease, box-shadow .2s ease; }
.footer-social a:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.06); }

/* Más separación en extremos del footer (desktop) sin mover el contacto */
@media (min-width:1024px){
  .footer-top .footer-brand { padding-left: clamp(24px, 4vw, 96px); justify-self:start; }
  .footer-top .footer-social { padding-right: clamp(24px, 4vw, 96px); justify-self:end; }
}

/* Parte inferior */
.footer-bottom { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.footer-bottom a { color:var(--muted); text-decoration:underline; }

/* Modal */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.4); padding:20px; }
.modal.is-open { display:flex; }
.modal__box { background:#fff; border:1px solid var(--card-b); border-radius:16px; padding:24px; max-width:520px; width:100%; text-align:center; }
.modal__box h3 { margin:0 0 6px; }

/* WhatsApp flotante */
/* Botón flotante WhatsApp con imagen */
.whatsapp-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  display: block;
}

.whatsapp-float img {
  width: 64px;   /* tamaño del botón */
  height: 64px;
  border-radius: 12px; /* opcional, puedes quitarlo */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
}

.whatsapp-float img:hover {
  transform: scale(1.05);
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce) {
  .slides { transition:none; }
}

/* Responsive generales */
@media (max-width:1080px){ .cols-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width:980px){
  .cols-3 { grid-template-columns:1fr; }
  .nav { display:none; }
  .hamb { display:inline-block; }
  .section { padding:60px 0; }
}
@media (max-width:768px){
  /* Footer centrado en móvil */
  .footer-top { grid-template-columns:1fr; text-align:center; }
  .footer-top .footer-brand { text-align:center; padding-left:0; margin:0 auto; }
  .footer-desc { margin-left:auto; margin-right:auto; max-width:420px; }
  .footer-social { justify-content:center; }
}
@media (max-width:640px){
  .container { padding-inline:20px; }
  .logo-page img { width:220px; height:180px; padding:10px; }
  .service img { height:180px; }
}

/* Ajuste del logo en el header */
.header .logo img {
  max-height: 40px;  /* controla la altura en el header */
  height: auto;
  display: block;
}

/* Footer: asegurar que el logo (imagen) se vea correctamente */
.footer-brand .logo { display: inline-block; }
.footer-brand .logo img {
  display: block;
  width: 190px;      /* ajusta a tu gusto */
  max-width: 100%;
  height: auto;
  margin-bottom: 12px;
}

/* Centrar el logo en pantallas pequeñas */
@media (max-width: 768px) {
  .footer-brand .logo img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* ====== Tipografías (sin alterar tu HTML) ====== */

/* ====== Tipografías finales ====== */

/* Base de texto: Lato (normal y bold diferenciados) */
body {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  font-weight: 400;
  color: var(--fg);
}

/* Títulos H1, H2, H3: Montserrat */
h1, h2, h3, h4, h5, h6,
.section-head h2,
.hero .slide-content h1 {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700; /* Bold por defecto para títulos */
  letter-spacing: 0.5px;
  margin-bottom: 0.5em;
}

/* Botones y navegación: Montserrat en bold */
.nav a,
.btn,
.btn-lg,
.btn-black,
.cta-actions a {
  font-family: 'Montserrat', Arial, sans-serif;
  font-weight: 700;
}

/* Acentos destacados en Lato Black */
strong,
.footer-contact p strong,
.footer-bottom p strong {
  font-family: 'Lato', system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
  font-weight: 900;
}

/* =========================
  Ajuste de márgenes en sección Nosotros
========================= */
#nosotros {
  padding-left: 40px;
  padding-right: 40px;
}

#nosotros .section-head {
  max-width: 800px;
  margin: 0 auto 32px; /* centrado con espacio abajo */
  text-align: center;
}

#nosotros .section-head p {
  margin-top: 8px;
  color: var(--muted);
}

/* Cards con más aire lateral */
#nosotros .card {
  padding: 24px;
  text-align: left; /* opcional: centra contenido */
}

/* Iconos de Servicios como imágenes */
.service-card .icon{
  width: 56px;                 /* antes 44px (puedes dejar 44 si prefieres) */
  height: 56px;
  border-radius: 12px;
  background: #fff7f1;
  border: 1px solid #ffe1cc;
  display: grid;
  place-items: center;
  overflow: hidden;            /* evita desbordes */
}

/* La imagen ocupa el contenedor sin deformarse */
.service-card .icon img{
  width: 100%;
  height: 100%;
  object-fit: contain;         /* muestra completa el icono */
  display: block;
}

/* (Opcional) Si todavía tienes reglas antiguas para SVG, puedes bajarlas de prioridad: */
.service-card .icon svg{ display:none; }   /* oculta los SVG anteriores */

/* =========================
  Ajuste responsivo: Metodología
========================= */

/* En pantallas grandes mantenemos varias columnas */
@media (min-width: 1025px) {
  #metodologia .grid {
    grid-template-columns: repeat(4, 1fr);
    justify-content: stretch; /* ocupa todo el ancho disponible */
  }
}

/* En tablets, centradas y con dos columnas */
@media (max-width: 1024px) and (min-width: 641px) {
  #metodologia .grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 90%;         /* no pegadas a los bordes */
    margin: 0 auto;         /* centrado horizontal */
  }
}

/* En móviles, una sola columna y centrada */
@media (max-width: 640px) {
  #metodologia .grid {
    grid-template-columns: 1fr;
    max-width: 90%;
    margin: 0 auto;
  }
}

/* =========================
  Ajuste responsivo: Servicios
========================= */

/* Para móviles y tablets */
@media (max-width: 1024px) {
  .services-swiper {
    padding-left: 48px !important;   /* espacio para la flecha izquierda */
    padding-right: 48px !important;  /* espacio para la flecha derecha */
    box-sizing: border-box;
  }

  .services-swiper .swiper-slide {
    display: flex;
    justify-content: center;   /* centra la card dentro del espacio */
  }

  .services-swiper .service-card {
    max-width: 90%;   /* evita que ocupe todo el ancho */
  }

  /* Ajustar la posición de los botones */
  .services-swiper .swiper-button-prev {
    left: 8px;
  }
  .services-swiper .swiper-button-next {
    right: 8px;
  }
}

/* Footer legal centrado */
footer .footer-legal {
  margin-top: 32px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontalmente */
  justify-content: center;
}

/* Centrar bloque legal exactamente al centro en escritorio */
@media (min-width: 1025px) {
  footer .footer-legal {
    grid-column: 1 / -1;   /* ocupa todo el ancho del grid del footer */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

/* ===== Footer Social + Legal en 3 líneas ===== */
footer .social-legal {
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra todo horizontalmente */
  gap: 4px;              /* poco espacio entre líneas */
  margin-top: 20px;
}

/* Línea 1: logos */
footer .social-legal .social-logos {
  display: flex;
  gap: 14px;             /* espacio entre iconos */
  justify-content: center;
}

footer .social-legal .social-logos img {
  width: 32px;
  height: 32px;
  display: block;
  transition: transform 0.2s ease;
}

footer .social-legal .social-logos img:hover {
  transform: scale(1.1);
}

/* Líneas 2 y 3: textos legales */
/* Línea de texto legal */
footer .legal-link {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #666);
  text-align: center;
  border: none;          /* asegura que no tenga recuadro */
  background: none;
}

footer .legal-link a {
  color: inherit;
  text-decoration: none;
}

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

/* Fix: textos legales sin recuadro bajo los logos */
.footer-social .legal-link a {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  color: var(--muted, #666);
  text-decoration: none;
}
.footer-social .legal-link a:hover {
  text-decoration: underline;
}

/* === Ajuste para logos cuadrados en el header === */
.header .logo {
  display: flex;
  align-items: center;      /* centra verticalmente */
  height: 100%;             /* ocupa toda la altura del header */
}

.header .logo img {
  max-height: 96px;         /* tamaño del logo cuadrado */
  width: auto;              /* mantiene proporción */
  margin: 0 auto;           /* centra horizontalmente */
}

/* Compensa el header fijo en las páginas legales */
body.legal main {
  padding-top: var(--header-h, 100px); /* asegura espacio debajo del header */
}

body.legal .section-head {
  margin-top: 0;  /* evita dobles márgenes */
}
/* Forzar header estilo scrolled en páginas legales */
body.legal .header {
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.08);
}

body.legal .header .nav a {
  color: #333;   /* mismo color que en scroll */
}

body.legal .header .nav a:hover {
  color: var(--brand, #ff6702);
}