/* Reset + base */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

:root{
  --primary-color:#0066cc;
  --secondary-color:#00aaff;
  --brand-dark:#0e4ca1;
  --dark-bg:#1f2937;
  --light-bg:#f7f7fb;
  --text:#1f2937;
  --text-inverse:#ffffff;

  --radius:12px;
  --shadow:0 10px 30px -12px rgba(0,0,0,.25);
}

body{
  margin:0;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--light-bg);
  line-height:1.6;
}

/* Contenedor general */
.container{
  width:min(1200px, 92%);
  margin-inline:auto;
}

/* Header fijo (base) */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid #e5e7eb;
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px; padding-inline:16px;
}
.logo a{
  color:var(--primary-color); text-decoration:none; font-weight:700; font-size:22px;
}
.nav-links{
  list-style:none; display:flex; gap:24px; align-items:center;
}
.nav-links a{
  color:#111827; text-decoration:none; font-weight:600;
  padding:6px 8px; border-radius:8px;
}
.nav-links a:hover, .nav-links a:focus-visible{
  background:#eef6ff; outline:none;
}

/* Hamburguesa móvil */
.hamburger{ display:none; font-size:30px; color:#111827; cursor:pointer; }
#menu-toggle{ display:none; }

@media (max-width: 860px){
  .hamburger{ display:block; }
  .nav-links{
    position:absolute; left:0; right:0; top:64px; display:none; flex-direction:column;
    background:#ffffff; padding:16px; border-bottom:1px solid #e5e7eb;
  }
  #menu-toggle:checked + .hamburger + .nav-links{ display:flex; }
}

/* HERO */
.hero{
  position:relative; isolation:isolate; min-height:72vh; display:grid; place-items:center;
}
.hero-media{
  position:absolute; inset:0;
  background-image:url('./arqtwan.jpg');
  background-size:cover; background-position:center;
  filter:saturate(105%);
  z-index:-2;
}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55) 70%);
  z-index:-1;
}
.hero-content{
  text-align:center; color:#fff; padding:24px; margin-top:24px;
}
.hero h1{
  font-size:clamp(28px, 5vw, 48px); line-height:1.1; margin:0 0 8px; font-weight:700;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero p{
  max-width:min(820px, 92%); margin:0 auto 18px;
  color:rgba(255,255,255,.95);
}
.hero-cta{
  width:min(560px, 92%); margin-inline:auto;
  display:grid; gap:12px; grid-template-columns:1fr;
}
@media (min-width:640px){ .hero-cta{ grid-template-columns:1fr 1fr; } }

/* Botones */
.btn{
  display:inline-block; text-decoration:none; text-align:center; cursor:pointer;
  padding:12px 18px; border-radius:10px; font-weight:700;
  background:var(--primary-color); color:#fff;
  box-shadow:0 4px 10px -6px rgba(0,0,0,.3);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--primary-color); }
.btn-primary:hover{ background:var(--brand-dark); }
.btn-ghost{
  background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.26); }

/* CTA secundaria */
.section-cta{ text-align:center; padding:24px 0; }

/* Secciones */
.section{ padding:64px 0; background:#fff; }
.section-alt{ background:#ffffff; box-shadow:0 4px 10px -10px rgba(0,0,0,.25) inset; }
.section-brand{ background:var(--primary-color); color:#fff; }
.section h2{ text-align:center; font-size:32px; margin:0 0 18px; }
.section p.lead{ text-align:center; color:#4b5563; }

.narrow{ width:min(900px, 92%); }

/* Servicios grid */
.services-grid{
  display:grid; gap:20px; margin-top:24px;
  grid-template-columns:repeat(3, 1fr);
}
@media (max-width:1024px){ .services-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:720px){ .services-grid{ grid-template-columns:1fr; } }

.service-item{
  background:#f8fafc; border:1px solid #e5e7eb; border-radius:var(--radius);
  padding:22px; transition:transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-item:hover{
  transform:translateY(-2px); box-shadow:var(--shadow); border-color:#dbeafe;
}
.service-item h3{ margin:0 0 10px; font-size:20px; }
.service-item p{ margin:0; color:#475569; }

/* Formulario */
.form{
  width:min(760px, 100%); margin:12px auto 0;
  display:grid; gap:16px; grid-template-columns:1fr 1fr;
}
.form .full{ grid-column:1 / -1; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-weight:600; font-size:14px; }
input, textarea, select{
  width:100%; padding:12px 12px; border-radius:10px;
  border:1px solid #d1d5db; background:#fff; font:inherit; color:#111827;
}
input:focus, textarea:focus, select:focus{
  outline:3px solid #bfdbfe; border-color:#60a5fa;
}
.error-msg{ display:none; color:#b91c1c; font-size:12px; }
.field.invalid .error-msg{ display:block; }
.field.invalid input, .field.invalid textarea{ border-color:#f87171; outline-color:#fecaca; }

.form-ok{
  grid-column:1 / -1; margin:0; color:#065f46; background:#ecfdf5; border:1px solid #a7f3d0;
  padding:10px 12px; border-radius:10px; text-align:center; font-weight:600;
}

/* WhatsApp flotante */
.whatsapp-btn{
  position:fixed; right:18px; bottom:18px; z-index:90; display:inline-flex;
}
.whatsapp-logo{
  width:62px; height:62px; border-radius:50%;
  box-shadow:0 6px 18px rgba(0,0,0,.35); transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-btn:hover .whatsapp-logo{ transform:scale(1.06); box-shadow:0 10px 26px rgba(0,0,0,.45); }

/* Contacto y footer */
.section-brand .container p{ margin:.25rem 0; }
.site-footer{
  background:var(--dark-bg); color:#fff; text-align:center; padding:20px 0;
}

/* Accesibilidad: foco visible */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:3px solid #fde68a; outline-offset:2px;
}

/* =========================
   TEMA STITCH (solo aspecto)
   ========================= */
:root{
  --petrol-blue:#0f3040;
  --metallic-silver:#c0c0c0;
  --primary-color:#3b82f6;
  --secondary-color:#60a5fa;
}
body{ font-family: 'Inter', Arial, sans-serif; }

header{
  background: rgba(15,48,64,0.85);
  backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(192,192,192,0.25);
}
.logo a{ color:#fff; }
.nav-links li a{ color:#e5eef5; }
.nav-links li a:hover{ color:var(--primary-color); }

.hamburger{ color:#e5eef5; }

.hero{
  position: relative;
  isolation: isolate;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.55) 70%);
  pointer-events:none;
}
#home .container, .hero .container{ z-index:1; }
#home .btn, .hero .btn{ font-weight:700; border-radius: 999px; }

.btn{
  border-radius:999px;
  padding:12px 20px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.45);
}
#solicitar-licencia .btn,
#request-form button.btn{
  background: var(--primary-color);
}
#solicitar-licencia .btn:hover,
#request-form button.btn:hover{
  background: var(--secondary-color);
}

#services{
  background: var(--petrol-blue);
  color:#eaf2f6;
  padding: 60px 20px;
}
#services h2{
  color:#ffffff;
  font-weight:700;
  letter-spacing:.2px;
}
.services-grid{ gap: 24px; }
.service-item{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(192,192,192,0.18);
  color:#dbe7ef;
  box-shadow: 0 14px 40px -16px rgba(0,0,0,.6);
  transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.service-item:hover{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.25);
  box-shadow: 0 22px 60px -18px rgba(2,8,23,.75);
}
.service-item h3{ color:#ffffff; }

#about{
  background: #0f3040 linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)) ;
  color:#eaf2f6;
  border-radius: 12px;
  box-shadow: 0 10px 30px -16px rgba(0,0,0,.55);
}
#about h2{ color:#fff; }

#request-form{ background: #0f3040; color:#eaf2f6; }
#request-form h2{ color:#fff; }
#request-form input, #request-form textarea{
  background: rgba(255,255,255,0.06);
  color:#e5eef5;
  border: 1px solid rgba(192,192,192,0.25);
  transition: border-color .2s ease, box-shadow .2s ease;
}
#request-form input::placeholder, #request-form textarea::placeholder{ color:#9fb3c8; }
#request-form input:focus, #request-form textarea:focus{
  outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}
#request-form .btn{ background: var(--primary-color); border: 1px solid rgba(255,255,255,0.15); }
#request-form .btn:hover{ background: var(--secondary-color); }

#contact{
  background: linear-gradient(180deg, rgba(15,48,64,1), rgba(15,48,64,.92));
  border-top: 1px solid rgba(192,192,192,0.2);
}
footer{ background: #0b2530; border-top: 1px solid rgba(192,192,192,0.2); }

.whatsapp-logo{ box-shadow: 0 12px 30px rgba(0,0,0,.45); }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  height:32px; padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(59,130,246,.4);
  color:#cfe4ff; background: rgba(59,130,246,.12);
  font-weight:600; font-size: 13px;
}
.pill:hover{ background: rgba(59,130,246,.18); }

@media (max-width: 768px){
  .service-item{ padding: 22px; }
  .hero{ min-height: 64vh; }
}

/* ===== LOGO (tamaño responsivo base) ===== */
.logo a{ display:flex; align-items:center; }
.logo-img{
  height:36px; width:auto; display:block; object-fit:contain;
}
@media (max-width:860px){
  .logo-img{ height:32px; }
}

/* ======= HEADER AZUL TRANSLÚCIDO + LOGO GRANDE (OVERRIDES) ======= */
:root{
  --nav-h: 150px;          /* 150–180px se ve potente; ajusta a gusto */
  --nav-bg-rgb: 11,37,53;  /* #0b2535 */
}
.site-header{
  background: rgba(var(--nav-bg-rgb), 0.86) !important;
  backdrop-filter: saturate(130%) blur(8px);
  -webkit-backdrop-filter: saturate(130%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.12);
  will-change: background-color, backdrop-filter;
}
.site-header .nav{
  height: var(--nav-h) !important;
  align-items: center;
  padding-inline: 20px;
}
.logo-img{
  height: calc(var(--nav-h) - 36px) !important;
  width: auto !important;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
  image-rendering: -webkit-optimize-contrast;
}
.site-header .logo a{ color:#eaf2f8 !important; }
.site-header .nav-links a{
  color:#eaf2f8 !important;
  background: transparent !important;
}
.site-header .nav-links a:hover{
  color:#cfe4ff !important;
  background: rgba(255,255,255,0.06) !important;
  border-radius: 8px;
}
.hamburger{ color:#eaf2f8 !important; }

@media (max-width: 860px){
  :root{ --nav-h: 110px; }
  .logo-img{ height: calc(var(--nav-h) - 28px) !important; }
  .nav-links{
    top: var(--nav-h) !important;
    background: rgba(var(--nav-bg-rgb), 0.92) !important;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}

/* Hero: overlay y textos más nítidos */
.hero::after{
  background: linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.45) 70%);
}
.hero h1{ text-shadow: 0 3px 18px rgba(0,0,0,.45); }
.hero p{  text-shadow: 0 2px 12px rgba(0,0,0,.35); }