:root{
  --bg:#0e0f12; --card:#17191d; --text:#e7e8ea; --muted:#a1a6b0;
  --brand:#2bd97f; --brand-2:#1cc6b8; --border:#282b31;
}

/* ===== RESET / BASE ===== */
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial}
body{background:var(--bg);color:var(--text)}
.container{width:min(1150px,92%);margin:0 auto}
.muted{color:var(--muted)}
a{text-decoration:none;color:inherit}

.btn{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border:none;color:#0a0b0d;padding:12px 18px;border-radius:12px;
  font-weight:700;cursor:pointer;display:inline-block
}
.btn-link{display:inline-block;margin-top:8px;color:#2bd97f;font-weight:600}

/* ===== HEADER ===== */
.site-header{
  position:sticky;top:0;background:rgba(10,11,13,.85);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--border);z-index:10
}
.header-flex{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 0; gap:12px; flex-wrap:wrap; /* permite salto de línea */
}
.logo{font-weight:800;letter-spacing:.5px}
.logo-area{display:flex;flex-direction:column}
.slogan{font-size:14px;color:var(--muted);margin-top:4px;font-style:italic}

/* Nav */
.nav{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; /* 🔹 wrap en responsive */
}
.nav a{
  color:var(--text); font-weight:600;
  padding:8px 10px; /* 🔹 mejor tap-area */
  border-radius:8px; transition:color .2s ease, background .2s ease;
}
.nav a:hover{color:var(--brand); background:rgba(255,255,255,.03)}

/* En móviles: apilar logo arriba y nav debajo, a la izquierda */
@media (max-width: 760px){
  .header-flex{flex-direction:column; align-items:flex-start}
  .nav{margin-top:4px}
}

/* --- Scroll-spy nav styles --- */
html { scroll-behavior: smooth; }
.site-header .nav a{ position:relative; }
.site-header .nav a.active{ color:var(--brand); }
.site-header .nav a.active::after{
  content:""; position:absolute; left:8px; right:8px; bottom:-6px;
  height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2));
  border-radius:2px;
}

/* ===== HERO LANDING ===== */
.hero-landing{
  position: relative;
  overflow: hidden;
  padding: 88px 0 64px;            /* un poco más compacto */
  background: var(--bg);
  margin-bottom: 32px;
}
@media (max-width:760px){
  .hero-landing{ padding: 72px 0 48px; } /* 🔹 reduce alto en móvil */
}
.hero-bg{ position:absolute; inset:0; z-index:0; }
.hero-bg video,
.hero-bg img{
  width:100%; height:100%;
  object-fit: cover; object-position: center; display:block;
}
.hero-veil{
  position:absolute; inset:0; z-index:1;
  background: radial-gradient(90% 80% at 20% 40%, rgba(0,0,0,.0) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55) 100%),
              linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
  backdrop-filter: blur(1px);
}
.hero-inner{
  position: relative; z-index: 2;
  display: grid; gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 992px){
  .hero-inner{
    grid-template-columns: minmax(0, 1.4fr) 0.9fr;
    align-items: center;
  }
}
.hero-copy h1{
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.05; margin: 0 0 12px;
}
.hero-copy p{
  max-width: 720px; color: var(--muted);
  font-size: clamp(14px, 1.8vw, 18px); margin: 0 0 16px;
}

/* ===== FORM HERO (ahora usa variables y cambia con el tema) ===== */
.hero-form{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  padding: 22px;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.hero-form h2{ margin: 0 0 6px; }
.hero-form p{ margin: 0 0 10px; color: var(--muted); }

.form-grid{ display:grid; gap:12px; }
.form-grid input, .form-grid textarea{
  width:100%;
  background: var(--card);
  border:1px solid var(--border);
  color:var(--text);
  padding:12px 14px; border-radius:10px; outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, outline-color .15s ease,
              background-color .2s ease, color .2s ease;
}
.form-grid input::placeholder, .form-grid textarea::placeholder{ color: var(--muted); }
.form-grid input:focus, .form-grid textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(43,217,127,.18);
}
input[type="tel"]{
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}
.form-grid input:invalid:not(:focus):not(:placeholder-shown),
.form-grid textarea:invalid:not(:focus):not(:placeholder-shown){
  border-color:#e05252;
  box-shadow: 0 0 0 3px rgba(224,82,82,.12);
}
.form-grid input:valid,
.form-grid textarea:valid{
  border-color: rgba(43,217,127,.45);
}
.form-grid .btn{ width:100%; }

/* ===== SECCIONES / CARDS ===== */
.cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:16px;
}
.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color: var(--text);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.card img{
  width:100%;
  height:160px;
  object-fit:cover;
}
.card .card-body{
  flex:1;
  padding: 10px;
}
.card h3{ margin:10px; color: var(--text); }
.card p{
  color:var(--muted);
  line-height:1.55;
  margin:10px;
}
.icono{
  font-size:28px;
  color:var(--brand);
  padding:16px 14px 0;
}
#servicios > h2, #articulos > h2, #testimonios > h2{ margin: 10px 0 10px; }

/* ===== TESTIMONIOS ===== */
.cards .card.testimonial{
  display:flex !important;
  flex-direction:row;
  align-items:flex-start;
  gap:14px;
  padding:16px;
}
.card.testimonial .col-izquierda{
  display:flex; flex-direction:column; align-items:center;
  flex-shrink:0; text-align:center;
}
.card.testimonial .avatar,
.card.testimonial .avatar.placeholder{
  width:64px; height:64px; border-radius:50%;
  object-fit:cover; margin-bottom:6px;
}
.card.testimonial .firma strong{ display:block; font-weight:bold; color: var(--text); }
.card.testimonial .firma span{ display:block; color:var(--muted); font-size:14px; }
.card.testimonial .comentario{ color: var(--text); margin:0; line-height:1.5; }

/* 🔹 Hacemos el cambio a layout vertical un poco antes (móviles medianos) */
@media (max-width:700px){
  .cards .card.testimonial{ flex-direction:column; align-items:center; text-align:center; }
}

/* ===== GRID UTIL ===== */
.grid-2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:780px){.grid-2{grid-template-columns:1fr 1fr}}
.grid-2 input,.grid-2 textarea{
  width:100%;background:var(--card);border:1px solid var(--border);
  color:var(--text);padding:12px 14px;border-radius:10px;outline:none
}

/* ===== MAPA ===== */
.mapa iframe{width:100%;height:300px;border:0;border-radius:14px}

/* ===== FOOTER (nuevo layout) ===== */
.site-footer{margin-top:48px;border-top:1px solid var(--border);padding:28px 0 18px}

/* wrapper: izq (logo+redes) | der (servicios+contacto) */
.footer-wrap{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:24px;
  align-items:start;
}

/* izquierda */
.footer-left{display:flex; flex-direction:column; gap:12px}
.footer-logo{width:120px; height:auto; border-radius:8px}
.social-links{display:flex; gap:12px; margin-top:6px}
.social-links a{color:var(--text); font-size:22px; transition:color .2s, transform .2s}
.social-links a:hover{color:var(--brand); transform:translateY(-2px)}

/* derecha */
.footer-right{width:100%}
.footer-cols{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:20px;
}
.site-footer h4{margin:0 0 8px}
.site-footer .mini{list-style:none;padding:0;margin:0}
.site-footer .mini li{color:var(--muted);margin:6px 0}

/* fila inferior */
.footer-bottom{margin-top:18px; padding-top:12px; border-top:1px solid var(--border)}
.copy{color:#6f7682; font-size:14px}

/* responsive */
@media (max-width:900px){
  .footer-wrap{grid-template-columns:1fr; gap:20px}
  .footer-left{align-items:flex-start}
  .footer-cols{grid-template-columns:1fr}
}

/* ===== WhatsApp flotante ===== */
.whatsapp-float{
  position:fixed;right:16px;bottom:16px;background:#25D366;color:#fff;
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.35);font-size:28px;text-decoration:none;z-index:20;
  animation:whatsappPulse 1.5s infinite ease-in-out;
}
.whatsapp-float:hover{transform:translateY(-2px)}
@keyframes whatsappPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 0 rgba(37,211,102,.6)}
  50%{transform:scale(1.1);box-shadow:0 0 15px rgba(37,211,102,.8)}
}

/* === Compensación de header sticky para anclas === */
[id], section, h2, h3 { scroll-margin-top: 84px; }

/* === Accesibilidad: focus visible para teclado === */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.nav a:focus-visible,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(43,217,127,.18);
}

/* === Botones: estados y disabled === */
.btn:hover { filter: brightness(1.03); transform: translateY(-1px); transition: transform .15s ease, filter .15s ease; }
.btn:active { transform: translateY(0); }
.btn[disabled],
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }

/* === Header: fallback si no hay backdrop-filter === */
@supports not ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  .site-header { background: rgba(10,11,13,.96); }
}

/* === Nav: subrayado activo más cercano al texto en todas las densidades === */
.site-header .nav a.active::after{ bottom: -4px; }

/* === Hero: evita capturar eventos de puntero en el media === */
.hero-bg video, .hero-bg img { pointer-events: none; }

/* === Inputs en iOS (quitar zoom por tamaño de fuente) === */
@supports (-webkit-touch-callout: none) {
  input, textarea, select { font-size: 16px; }
}

/* === Grid util: un poco más de aire en pantallas medianas === */
@media (min-width: 920px) { .grid-2 { gap: 16px; } }

/* === Mapa: altura adaptable en pantallas más grandes === */
@media (min-width: 780px) { .mapa iframe { height: 360px; } }
@media (min-width: 1100px) { .mapa iframe { height: 420px; } }

/* === Reduce motion: desactiva animaciones/transiciones fuertes === */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .whatsapp-float { animation: none; }
}

/* ===== Tema claro (override de variables) ===== */
:root[data-theme="light"]{
  --bg:#f7f8fa;
  --card:#ffffff;
  --text:#0e0f12;
  --muted:#556070;
  --brand:#2bd97f;
  --brand-2:#1cc6b8;
  --border:#e5e7eb;
}

/* Suaviza el cambio de tema en elementos principales */
html, body, .site-header, .card, .hero-form, .nav a, .btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Header en claro */
:root[data-theme="light"] .site-header{
  background: rgba(255,255,255,.85);
  border-bottom-color: var(--border);
}
:root[data-theme="light"] .nav a:hover{
  background: rgba(0,0,0,.04);
}

/* Inputs/textarea en claro (heredan de variables) */
:root[data-theme="light"] .form-grid input,
:root[data-theme="light"] .form-grid textarea{
  background: var(--card);
  border-color: var(--border);
  color: var(--text);
}
:root[data-theme="light"] .form-grid input::placeholder,
:root[data-theme="light"] .form-grid textarea::placeholder{
  color: var(--muted);
}

/* Cards en claro (ya usan variables) */
:root[data-theme="light"] .card{
  background:#fff;
  border-color: var(--border);
}

/* ===== Botón de tema ===== */
/* Flotante (por defecto) */
.theme-toggle{
  position: fixed;
  right: 14px;
  bottom: 86px; /* por encima del WhatsApp flotante */
  z-index: 30;
  display: inline-flex; align-items:center; justify-content:center;
  width: 44px; height: 44px; border-radius: 999px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover{ transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.theme-toggle i{ font-size: 18px; }

/* Variante integrada en header (usa .theme-toggle--inline junto a .theme-toggle) */
.theme-toggle--inline{
  position: static;           /* deja de ser flotante */
  width: 36px; height: 36px;  /* un poco más compacto */
  margin-left: auto;          /* empuja a la derecha en contenedor flex */
  border-radius: 10px;
  background: transparent;    /* se integra visualmente */
  border: 1px solid var(--border);
  box-shadow: none;
}
.header-flex .theme-toggle--inline{ order: 3; }
.theme-toggle--inline:hover{ transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.theme-toggle--inline i{ font-size: 16px; }

/* Botón de tema dentro del header (override) */
.site-header .theme-toggle{
  position: static; right: auto; bottom: auto;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: none; margin-left: 8px;
}
.site-header .theme-toggle i{ font-size: 16px; }

/* Asegura que el layout deje espacio para el botón */
.header-flex{ gap: 10px; }

@media (max-width: 760px){
  .header-flex .theme-toggle--inline{ margin-left: 0; align-self: flex-end; }
  .site-header .theme-toggle{ margin-left: 0; }
}

/* === Hero: mantener texto claro en ambos temas === */
.hero-landing .hero-copy h1,
.hero-landing .hero-copy p{
  color:#ffffff !important;
}

/* === Home: Testimonios en 2 columnas fijas (desktop) === */
#testimonios .cards{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width:760px){
  #testimonios .cards{
    grid-template-columns: 1fr;
  }
}