/* ================== VARIABLES ================== */
:root{
  /* Paleta (referencia)
     --color1: #001449;  --color2: #012677;  --color3: #005bc5;  --color4: #00b4fc;  --color5: #17f9ff;
  */

  /* Colores base */
  --bg: #000;              /* fondo general del body */
  --surface: #111;         /* header/footer */
  --surface-2: #1f2326;    /* secciones oscuras */
  --card: #2a2f33;         /* tarjetas */

  /* Tipografía */
  --text: #fff;
  --text-muted: #cfd3d6;
  --text-dim: #aaa;

  /* Acento (reemplazo del amarillo por azul medio) */
  --accent: #005bc5;       /* era #ffcc00 */
  --accent-contrast: #ffffff; /* mejor contraste sobre azul */

  /* Bordes/sombras */
  --border: #222;
  --shadow-1: 0 10px 20px rgba(0,0,0,.25);
  --shadow-2: 0 18px 34px rgba(0,0,0,.35);
  --glow: 0 8px 18px rgba(0,91,197,.22); /* ajustado al azul */

  /* Layout */
  --container: 1200px;
  --container-wide: 1400px;
  --radius: 18px;
  --radius-pill: 999px;
  --space: 5%;
}

/* ================== RESET ================== */
*{ margin:0; padding:0; box-sizing:border-box; }

html,body{
  height:100%;
  font-family: Arial, Helvetica, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* ================== HEADER ================== */

header{
  background: var(--bg);
  padding-block: 1rem;   /* arriba/abajo */
  padding-inline: 0;     /* sin padding a los lados */
  margin: 0 40px;        /* 👈 mismo margen que .hero */
}

.navbar{ display:flex; justify-content:flex-end; }
.nav-links{ list-style:none; display:flex; gap:2rem; }
.nav-links a{
  text-decoration:none; color: var(--text); font-weight:700; transition: color .3s ease;
}
.nav-links a:hover{ color: var(--accent); }

@media (max-width: 768px){
  .navbar {
    justify-content: center; /* centra los enlaces */
  }

  .nav-links {
    gap: 1rem; /* separa un poco los items */
  }
}

/* ===================================================== */
/* ==================== HERO =========================== */
.hero{
  background: var(--surface-2);
  padding: 64px var(--space);
  border: 2px solid var(--accent);  /* grosor + color */
  border-radius: 16px;              /* esquinas redondeadas opcional */
  margin: 0 40px;  /* agrega espacio a izquierda y derecha */
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  grid-template-areas: "left center right";
  align-items:center;
  gap:2.5rem;
  max-width: var(--container-wide);
  margin:0 auto;
}
.hero-left{ grid-area:left; }
.hero-center{ grid-area:center; justify-self:center; }
.hero-right{ grid-area:right; }

/* Título */
.hero-left h1{
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height:1.1;
  color: var(--text);
}
.hl{
  color: var(--accent);
  font-weight:700;
  /* antes: rgba(255,204,0,.35) */
  box-shadow: inset 0 -0.3em 0 rgba(0,91,197,.35);
}

/* Redes */
.social{
  margin-top:1.25rem; display:flex; align-items:center; gap:.8rem; color: var(--text-muted);
}
.social a{
  width:36px; height:36px; display:grid; place-items:center;
  border-radius:50%;
  background: var(--card);
  color: var(--accent);
  text-decoration:none; font-weight:700; transition: transform .2s ease;
}
.social a:hover{ transform: translateY(-2px); }

/* Foto */
.photo-wrap::before{ content:none; } /* sin círculo */
.photo-wrap{ width:auto; max-width:900px; }
.photo-wrap img{
  width:100%; height:auto; max-width:none; border-radius:0; object-fit:cover;
}

/* Texto derecha */
.hero-right .intro{
  color: var(--text-muted); line-height:1.6; margin-bottom:1rem;
}

/* Botones */
.cta{ display:flex; flex-wrap:wrap; gap:.8rem; margin-bottom:1.25rem; }
.btn{
  background: var(--accent); color: var(--accent-contrast); font-weight:700;
  text-decoration:none; padding:.9rem 1.4rem; border-radius: var(--radius-pill);
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--glow);
}
.btn:hover{ transform: translateY(-2px); }
.btn-outline{
  text-decoration:none; color: var(--accent); border:2px solid var(--accent);
  padding:.85rem 1.3rem; border-radius: var(--radius-pill); font-weight:700;
}

/* Stats */
.stats{ list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:1rem; }
.stats .num{ display:block; color: var(--text); font-size:1.6rem; font-weight:800; }
.stats small{ color:#9aa1a6; }

/* Hero responsive */
@media (max-width:980px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:"left" "center" "right";
    text-align:center;
  }
  .social{ justify-content:center; }
  .stats{ justify-items:center; }
    .photo-wrap{ display:flex; justify-content:center; } /* centra la foto */
  .cta .btn, .cta .btn-outline{ width: 100%; }  
}

/* Fix para pantallas ultra chicas (iPhone SE / 320px) */
@media (max-width: 360px){

  :root{ --space: 16px; }                 /* respiración lateral segura */
  .hero{ padding-inline: var(--space); }

  /* Evita que el grid “empuje” los bordes */
  .hero-grid{ gap: 16px; }
  .hero-left, .hero-center, .hero-right{ min-width: 0; }
  .hero-grid, .hero-left h1{ overflow-wrap: anywhere; }

  /* Título más chico y compacto */
  .hero-left h1{
    font-size: clamp(22px, 8.5vw, 30px);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
  }

  /* Opcional: quitar el salto de línea del h1 en mobile chico */
  .hero-left br{ display: none; }

  /* Texto del párrafo un toque más chico */
  .hero-right .intro{
    font-size: 14px;
  }

  /* Social en varias filas si hace falta */
  .social{ display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

  /* Botones full-width para que no desborden */
  .cta .btn, .cta .btn-outline{ width: 100%; }
}

/* Salvaguardas generales */
img, svg{ max-width:100%; height:auto; display:block; }
*{ min-width:0; } /* previene overflows en grids */


/* ===================================================== */
/* =================== SERVICES HEADER ================= */
.services{
  background: var(--surface-2);
  padding: 72px var(--space) 48px;
   border: 2px solid var(--accent);   /* mismo borde */
  border-radius: 16px;               /* esquinas redondeadas */
  width: min(1200px, calc(100% - clamp(32px, 8vw, 80px) * 2));
  margin: 40px auto; /* centra */

}
.services-header{
  max-width: var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  align-items:center; gap:3rem;
}
.services-header .sh-left h2{
  color: var(--text);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
  line-height:1.15; font-weight:800;
}
.services-header .sh-left h2 span{
  color: var(--accent);
  /* antes: rgba(255,204,0,.35) */
  box-shadow: inset 0 -0.35em 0 rgba(0,91,197,.35);
}
.services-header .sh-right p{
  color: var(--text-muted); line-height:1.7; max-width:520px;
}

@media (max-width: 900px){
  .services-header {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1.5rem;
  }
  .services-header .sh-right p {
    margin: 0 auto;
  }
}

/* =================== SERVICES CARDS ================== */
.services-list {
  background: #000; /* negro total */
  padding: 32px var(--space) 90px;
}
.cards-grid{
  max-width: var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}
.service-card{
  position:relative;
  background: var(--card);
  border-radius: var(--radius);
  padding:28px;
  color:#e8ecef;
  box-shadow: var(--shadow-1);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow:hidden;
}
.service-card::after{
  content:""; position:absolute; left:24px; right:24px; bottom:0; height:8px;
  background: var(--accent);
  border-bottom-left-radius:12px; border-bottom-right-radius:12px;
  transition: height .25s ease;
}
.service-card::before{
  content:""; position:absolute; right:18px; bottom:12px; width:52px; height:10px;
  background: var(--accent); border-radius: var(--radius-pill);
  filter: blur(6px); opacity:.25;
}
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-2); }
.service-card:hover::after{ height:12px; }

/* Icono */
.service-icon{
  width:64px; height:64px; display:grid; place-items:center;
  background: var(--accent); color: var(--accent-contrast);
  border-radius:50%; font-size:28px; margin-bottom:18px;
  /* antes: rgba(255,204,0,.25) */
  box-shadow: 0 8px 18px rgba(0,91,197,.25);
}

/* Textos */
.service-card h3{ color: var(--text); font-size:1.25rem; margin-bottom:.5rem; }
.service-card p{ color: var(--text-muted); line-height:1.6; margin-bottom:1.25rem; }

/* Link */
.learn-more{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; color: var(--accent); font-weight:700; letter-spacing:.2px;
}
.learn-more::after{ content:"→"; transform: translateX(0); transition: transform .2s ease; }
.learn-more:hover::after{ transform: translateX(4px); }

/* Destacada */
.service-card.featured{
  /* antes: outline con amarillo */
  outline: 2px solid rgba(0,91,197,.35);
  background: linear-gradient(180deg, #32383d 0%, var(--card) 100%);
}

/* ===================================================== */
/* ===================== FOOTER ======================== */
footer{
  background: var(--surface);
  color: #ccc;
  padding: 60px var(--space) 20px;
  font-size:.95rem;
}
.footer-wrap{
  max-width: var(--container);
  margin:0 auto 40px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:2.5rem;
}
.footer-brand .footer-logo{
  font-size:1.4rem; font-weight:700; color: var(--text); text-decoration:none;
}
.footer-brand p{ margin:.8rem 0 1.2rem; color: var(--text-dim); }
.footer-social a{
  margin-right:1rem; color: var(--accent); text-decoration:none; font-weight:600; transition: color .2s ease;
}
.footer-social a:hover{ color: var(--text); }

/* Links */
.footer-links h4, .footer-contact h4{
  color: var(--text); margin-bottom:1rem; font-size:1.1rem;
}
.footer-links ul, .footer-contact ul{ list-style:none; padding:0; margin:0; }
.footer-links li, .footer-contact li{ margin-bottom:.6rem; }
.footer-links a, .footer-contact a{
  color:#ccc; text-decoration:none; transition: color .2s ease;
}
.footer-links a:hover, .footer-contact a:hover{ color: var(--accent); }

/* CTA WhatsApp */
.footer-cta{
  display:inline-block; margin-top:1rem; padding:.7rem 1.2rem;
  background: var(--accent); color: var(--surface); font-weight:700;
  border-radius:8px; text-decoration:none; transition: background .2s ease;
  color: var(--accent-contrast);
}
/* antes: #e6b800 */
.footer-cta:hover{ background:#004aa3; }

/* Bottom */
.footer-bottom{
  border-top:1px solid var(--border);
  padding-top:20px; display:flex; flex-direction:column; gap:.8rem;
  align-items:center; justify-content:center;
}
.footer-bottom small{ color:#888; }
.footer-legal a{ margin-left:1rem; color:#ccc; text-decoration:none; }
.footer-legal a:hover{ color: var(--accent); }

@media (max-width:700px){
  .footer-wrap{ grid-template-columns:1fr; text-align:center; }
  .footer-social a{ margin-right:.5rem; }
}