/* Electrofuturo - estilos base y responsivos */
:root{
  --brand:#004080;
  --muted:#6b7280;
  --max-width:1100px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color:#222;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  background:#fff;
}
.container{max-width:var(--max-width);margin:0 auto;padding:0 16px}

/* Header */
.site-header{background:#fff;border-bottom:1px solid #eee}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:var(--brand);font-size:1.6rem}
.servicio-texto{display:block;margin-top:6px;font-size:1.05rem;font-weight:600;color:var(--brand);text-align:center}
nav ul{list-style:none;display:flex;gap:18px;margin:0;padding:0}
nav a{color:#222;text-decoration:none;font-weight:600}

/* Simple mobile toggle (visually hidden input technique could be added later) */
.nav-toggle{display:none}

/* Hero */
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-position:center;background-size:cover;filter:contrast(1) saturate(.95)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0.35))}
.hero-content{position:relative;z-index:2;padding:80px 0;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.hero h1{font-size:2.2rem;color:#fff;margin-bottom:6px}
.lead{color:rgba(255,255,255,0.92);max-width:720px}
.hero-cta a{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:8px;text-decoration:none}
.btn-primary{background:var(--brand);color:#fff}
.btn--whatsapp{background:#25D366;color:#fff}

/* Cards grid */
.cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{background:#fff;padding:18px;border-radius:8px;box-shadow:0 6px 18px rgba(2,6,23,0.06)}
.card h3{margin:10px 0}
.card p{color:var(--muted)}

/* Sections */
.section-title{font-size:1.4rem;color:var(--brand);margin-bottom:8px}
.section-lead{color:var(--muted);margin-bottom:12px}

/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.contact-list{list-style:none;padding:0}
.contact-list li{margin-bottom:8px}

/* Footer */
.site-footer{background:#f8fafc;padding:18px 0;margin-top:28px}
.footer-inner{display:flex;flex-direction:column;gap:12px;align-items:center}
.footer-contacts{display:flex;gap:18px;flex-wrap:wrap}
.credits{color:var(--muted);font-size:.95rem}

/* Utility */
.reveal{opacity:1;transform:none}

/* Mobile navigation */
.nav-toggle{display:none;background:transparent;border:0;border-radius:6px;padding:8px;cursor:pointer}
.nav-toggle:focus{outline:2px solid #cfe6ff}
.hamburger{display:block;width:22px;height:2px;background:var(--brand);position:relative}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;width:22px;height:2px;background:var(--brand)}
.hamburger::before{top:-7px}
.hamburger::after{top:7px}

.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:18px}
.main-nav a{text-decoration:none;color:#222;padding:10px 6px;display:block}

/* Contact form enhanced styles */
.contact-form{
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  width:100%;
  max-width:720px; /* evita que sea demasiado ancho en pantallas grandes */
}
.form-row{margin-bottom:14px;display:flex;flex-direction:column}
.form-row label{font-weight:600;color:var(--brand);margin-bottom:8px;font-size:0.98rem}
.form-row input,
.form-row textarea{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.12);
  font-size:1rem;
  background:#fbfdff;
  transition:box-shadow .15s ease, border-color .12s ease;
}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-color: rgba(0,100,200,0.85);
  box-shadow: 0 6px 18px rgba(2,6,23,0.06);
}
.form-row textarea{min-height:140px;resize:vertical}
.form-actions{display:flex;justify-content:flex-start;gap:12px;margin-top:6px}
#whatsappBtn{background:#25D366;color:#fff;border:0;padding:12px 18px;border-radius:8px;font-weight:700;cursor:pointer;font-size:1rem;display:inline-flex;align-items:center;gap:10px}
#whatsappBtn i{font-size:1.1rem}

/* Make the form visually larger on larger screens */
@media (min-width:1000px){
  .contact-grid{grid-template-columns:1fr 540px;align-items:start}
  .contact-form{padding:26px}
  .form-row input,.form-row textarea{padding:14px 16px;font-size:1.05rem}
  #whatsappBtn{padding:14px 20px;font-size:1.05rem}
}

/* Responsividad */
@media (max-width:900px){
  .hero h1{font-size:1.9rem}
  .hero-content{padding:60px 0}
}

@media (max-width:720px){
  .header-inner{flex-direction:column;align-items:center;gap:8px}
  nav ul{flex-wrap:wrap;justify-content:center}
  .hero-content{align-items:center;text-align:center;padding:48px 0}
  .hero h1{font-size:1.6rem}
  .lead{max-width:100%}
  .hero-cta{display:flex;flex-direction:column;gap:10px;width:100%}
  .hero-cta a{width:100%;justify-content:center}
  .cards-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .servicio-texto{font-size:1rem}
  .logo{font-size:1.4rem}
  nav{width:100%}
  .nav-toggle{display:block}
  .main-nav{width:100%;}
  .main-nav[hidden]{display:none}
  .main-nav ul{flex-direction:column;align-items:center;gap:8px;padding:12px 0}
  .header-inner{padding:12px 0}
  .contact-form{max-width:100%;padding:18px}
  .form-actions{justify-content:center}
  #whatsappBtn{width:100%;justify-content:center}
}

@media (max-width:420px){
  .hero-content{padding:36px 0}
  .hero h1{font-size:1.3rem}
  .servicio-texto{font-size:.95rem}
}