/* ================================================================
   1. VARIABLES GLOBALES — EDITAR AQUÍ para cambiar colores y fuentes
   Cambiando estos valores cambia el diseño en TODA la página,
   sin tocar el resto del CSS.
   ================================================================ */
:root{
  /* --- Colores de marca --- */
  --navy-950:#071528;      /* fondo más oscuro (footer) */
  --navy-900:#0A1F3D;      /* azul marino principal (header, hero, secciones oscuras) */
  --navy-800:#132C52;      /* azul marino un poco más claro (tarjetas sobre fondo oscuro) */
  --navy-700:#1B3B6B;
  --brand-blue:#1E56A8;    /* azul institucional (igual al escudo del logo) */
  --electric-blue:#2F6FED; /* azul eléctrico vibrante — acento principal / electricidad */
  --steel:#9BAAC0;         /* gris plateado (detalles, texto secundario sobre fondo oscuro) */
  --steel-light:#D7DEE8;
  --charcoal:#1B1F27;      /* texto principal sobre fondo claro */
  --gray-600:#5B6472;      /* texto secundario sobre fondo claro */
  --offwhite:#F5F8FC;      /* fondo claro de secciones */
  --white:#FFFFFF;

  /* --- Acentos por rubro (se usan en tarjetas, filtros y galería) --- */
  --c-electricidad:#2F6FED;
  --c-refrigeracion:#29B6C6;
  --c-agua:#1E78B4;
  --c-gas:#E8622C;
  --c-solar:#F0A93A;
  --gold:#F0A93A;
  --gold-deep:#C9821A;
  --whatsapp:#25D366;
  --whatsapp-dark:#1DA851;

  /* --- Tipografía --- */
  --font-display:'Outfit', sans-serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'Space Mono', monospace;

  /* --- Layout --- */
  --container-w:1220px;
  --header-h:78px;
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --shadow-sm:0 2px 10px rgba(10,31,61,0.08);
  --shadow-md:0 12px 30px rgba(10,31,61,0.14);
  --shadow-lg:0 24px 60px rgba(10,31,61,0.22);
  --transition-fast:0.2s ease;
  --transition-med:0.4s cubic-bezier(.22,.9,.35,1);
}

/* ================================================================
   2. RESET Y BASE
   ================================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit;}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.15;color:var(--navy-900);}
section{position:relative;}

/* Ancla de secciones: compensa el header fijo al hacer scroll a un id */
section[id], div[id]{scroll-margin-top:calc(var(--header-h) + 16px);}

/* Foco visible por teclado — accesibilidad */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:3px solid var(--electric-blue);
  outline-offset:3px;
  border-radius:4px;
}

.container{
  width:100%;
  max-width:var(--container-w);
  margin:0 auto;
  padding:0 24px;
}

/* Textura sutil tipo "plano técnico" reutilizada en fondos oscuros */
.blueprint-bg{
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:42px 42px;
}

/* Etiqueta pequeña tipo "eyebrow" (mono, mayúsculas, con línea) */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--electric-blue);
  font-weight:700;
  margin-bottom:14px;
}
.eyebrow::before{
  content:"";
  width:28px;height:2px;
  background:var(--electric-blue);
  display:inline-block;
}
.eyebrow.on-dark{color:var(--gold);}
.eyebrow.on-dark::before{background:var(--gold);}

.section-head{
  max-width:680px;
  margin-bottom:52px;
}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}
.section-title{
  font-size:clamp(28px,4vw,42px);
  margin-bottom:16px;
}
.section-sub{
  color:var(--gray-600);
  font-size:17px;
  max-width:600px;
}
.section-head.center .section-sub{margin-left:auto;margin-right:auto;}

/* ================================================================
   3. ANIMACIÓN "REVEAL" AL HACER SCROLL
   Se aplica automáticamente vía JavaScript a los bloques con
   la clase .reveal (ver sección de JS al final del archivo).
   ================================================================ */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 0.8s cubic-bezier(.22,.9,.35,1), transform 0.8s cubic-bezier(.22,.9,.35,1);
}
.reveal.is-visible{opacity:1;transform:translateY(0);}
.reveal-stagger > *{transition-delay:calc(var(--i,0) * 90ms);}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;transition:none;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}

/* ================================================================
   4. BOTONES
   ================================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 28px;
  border-radius:100px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.btn svg{width:19px;height:19px;flex-shrink:0;}
.btn-primary{
  background:var(--electric-blue);
  color:var(--white);
  box-shadow:0 10px 24px rgba(47,111,237,0.35);
}
.btn-primary:hover{
  background:#1E56D8;
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 32px rgba(47,111,237,0.45);
}
.btn-whatsapp{
  background:var(--whatsapp);
  color:var(--white);
  box-shadow:0 10px 24px rgba(37,211,102,0.35);
}
.btn-whatsapp:hover{
  background:var(--whatsapp-dark);
  transform:translateY(-3px) scale(1.02);
  box-shadow:0 16px 32px rgba(37,211,102,0.45);
}
.btn-outline{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.35);
  color:var(--white);
}
.btn-outline:hover{
  background:rgba(255,255,255,0.1);
  border-color:var(--white);
  transform:translateY(-3px) scale(1.02);
}
.btn-outline-navy{
  background:transparent;
  border:1.5px solid rgba(10,31,61,0.25);
  color:var(--navy-900);
}
.btn-outline-navy:hover{
  background:var(--navy-900);
  color:var(--white);
  transform:translateY(-3px) scale(1.02);
}
.btn:active{transform:scale(0.97);}
.btn-block{width:100%;}
.btn-lg{padding:18px 34px;font-size:16.5px;}
/* ================================================================
   5. HEADER / NAVBAR
   ================================================================ */
.header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--header-h);
  display:flex;
  align-items:center;
  background:transparent;
  transition:background var(--transition-med), box-shadow var(--transition-med), height var(--transition-med);
}
.header.is-scrolled{
  background:rgba(10,31,61,0.92);
  backdrop-filter:blur(10px);
  box-shadow:0 8px 24px rgba(0,0,0,0.18);
  height:70px;
}
.header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.brand{display:flex;align-items:center;gap:12px;}
.brand img{height:46px;width:auto;transition:height var(--transition-med);}
.header.is-scrolled .brand img{height:40px;}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-text strong{
  font-family:var(--font-display);
  font-size:16.5px;
  color:var(--white);
  letter-spacing:0.01em;
}
.brand-text span{
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:0.09em;
  color:var(--steel);
  text-transform:uppercase;
}

.nav-menu{
  display:flex;
  align-items:center;
  gap:36px;
}
.nav-menu a{
  position:relative;
  font-size:15px;
  font-weight:500;
  color:rgba(255,255,255,0.88);
  padding:8px 0;
  transition:color var(--transition-fast);
}
.nav-menu a::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0%;
  height:2px;
  background:var(--electric-blue);
  transition:width var(--transition-fast);
}
.nav-menu a:hover{color:var(--white);}
.nav-menu a:hover::after{width:100%;}

.header-actions{display:flex;align-items:center;gap:14px;}
.nav-menu .nav-cta{padding:12px 22px;font-size:14.5px;}

.nav-toggle{
  display:flex;
  flex-direction:column;
  gap:5px;
  width:34px;height:34px;
  align-items:center;
  justify-content:center;
  z-index:1001;
}
.nav-toggle span{
  width:24px;height:2px;background:var(--white);
  border-radius:2px;
  transition:transform var(--transition-fast), opacity var(--transition-fast);
}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.is-open span:nth-child(2){opacity:0;}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:1079px){
  .nav-menu{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(320px,80vw);
    background:var(--navy-900);
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:26px;
    padding:40px;
    transform:translateX(100%);
    transition:transform var(--transition-med);
    box-shadow:-10px 0 40px rgba(0,0,0,0.3);
  }
  .nav-menu.is-open{transform:translateX(0);}
  .nav-menu a{font-size:19px;}
  .nav-menu .btn{margin-top:10px;}
  .nav-toggle{display:flex;}
  .nav-overlay{
    position:fixed;inset:0;
    background:rgba(4,12,26,0.55);
    z-index:999;
    opacity:0;pointer-events:none;
    transition:opacity var(--transition-med);
  }
  .nav-overlay.is-open{opacity:1;pointer-events:auto;}
}
@media (min-width:1080px){
  .nav-toggle{display:none;}
  .nav-overlay{display:none;}
}

/* ================================================================
   6. HERO
   ================================================================ */
.hero{
  position:relative;
  padding:calc(var(--header-h) + 90px) 0 130px;
  background:
    linear-gradient(100deg, rgba(7,21,40,0.95) 0%, rgba(7,21,40,0.88) 34%, rgba(7,21,40,0.62) 60%, rgba(7,21,40,0.32) 100%),
    linear-gradient(0deg, rgba(4,12,26,0.55) 0%, transparent 30%),
    url('/images/hero-bg-solar.webp');
  background-size:cover, cover, cover;
  background-position:center, center, center 58%;
  color:var(--white);
  overflow:hidden;
}
.hero .container{
  position:relative;
}
.hero-content{max-width:640px;}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:rgba(47,111,237,0.15);
  border:1px solid rgba(47,111,237,0.4);
  padding:8px 16px 8px 10px;
  border-radius:100px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.06em;
  color:#9DC0FF;
  margin-bottom:26px;
}
.hero-kicker .dot{
  width:8px;height:8px;border-radius:50%;
  background:#4ADE80;
  box-shadow:0 0 0 0 rgba(74,222,128,0.6);
  animation:dot-pulse 2s infinite;
}
@keyframes dot-pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.55);}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
.hero h1{
  font-size:clamp(32px,4.6vw,54px);
  color:var(--white);
  letter-spacing:-0.01em;
  margin-bottom:22px;
}
.hero h1 em{
  font-style:normal;
  color:var(--gold);
}
.hero-sub{
  font-size:18px;
  color:var(--steel-light);
  max-width:540px;
  margin-bottom:34px;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:16px;}

/* ================================================================
   6.5 BARRA DE CONFIANZA (debajo del hero)
   ================================================================ */
.trust-bar{
  background:var(--navy-950);
  border-top:1px solid rgba(255,255,255,0.08);
  border-bottom:1px solid rgba(255,255,255,0.08);
  padding:26px 0;
}
.trust-bar-inner{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(28px,6vw,64px);
}
.trust-bar .stat{display:flex;flex-direction:column;align-items:center;text-align:center;}
.trust-bar .stat strong{
  font-family:var(--font-mono);
  font-size:24px;
  color:var(--white);
}
.trust-bar .stat span{
  font-size:12px;
  color:var(--steel);
  letter-spacing:0.02em;
}

/* --- Sello del hero: escudo flotando sobre la foto de fondo --- */
.hero-badge-float{
  position:absolute;
  right:clamp(24px,5vw,64px);
  bottom:clamp(24px,5vw,48px);
  width:120px;height:120px;
  border-radius:50%;
  background:rgba(7,21,40,0.55);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.16);
  box-shadow:0 16px 40px rgba(0,0,0,0.35);
  display:flex;align-items:center;justify-content:center;
}
.hero-badge-float img{
  width:76%;
  filter:drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}

@media (max-width:980px){
  .hero .container{text-align:left;}
  .hero-badge-float{width:88px;height:88px;right:20px;bottom:20px;}
}
@media (max-width:560px){
  .hero-badge-float{display:none;}
}
@media (max-width:560px){
  .trust-bar-inner{gap:20px 32px;}
  .hero-actions .btn{width:100%;}
  .hero-actions{flex-direction:column;}
}
/* ================================================================
   7. SECCIÓN "¿A QUÉ NOS DEDICAMOS?" (SERVICIOS)
   ================================================================ */
.services{
  padding:110px 0;
  background:var(--offwhite);
}
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
}
.service-card{
  --accent:var(--electric-blue);
  display:flex;
  flex-direction:column;
  background:var(--white);
  border:1px solid rgba(10,31,61,0.08);
  border-radius:var(--radius-md);
  padding:32px 26px;
  box-shadow:var(--shadow-sm);
  transition:transform var(--transition-med), box-shadow var(--transition-med), border-color var(--transition-fast);
}
.service-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-lg);
  border-color:var(--accent);
}
.service-card .icon-shield{
  --accent:inherit;
  width:64px;height:64px;
  margin-bottom:22px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg, var(--navy-900), var(--navy-800));
  clip-path:polygon(50% 0%, 100% 22%, 100% 68%, 50% 100%, 0% 68%, 0% 22%);
  transition:transform var(--transition-med), background var(--transition-fast);
}
.service-card .icon-shield svg{
  width:28px;height:28px;
  stroke:var(--steel-light);
  transition:stroke var(--transition-fast);
}
.service-card:hover .icon-shield{
  transform:scale(1.08) rotate(-4deg);
  background:linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 70%, black));
}
.service-card:hover .icon-shield svg{ stroke:var(--white); }
.service-card h3{
  font-size:20px;
  margin-bottom:10px;
}
.service-card p{
  color:var(--gray-600);
  font-size:14.5px;
  flex-grow:1;
  margin-bottom:20px;
}
.service-card .card-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.04em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--accent);
}
.service-card .card-link svg{
  width:15px;height:15px;
  transition:transform var(--transition-fast);
}
.service-card:hover .card-link svg{transform:translateX(5px);}

.sc-electricidad{--accent:var(--c-electricidad);}
.sc-refrigeracion{--accent:var(--c-refrigeracion);}
.sc-agua{--accent:var(--c-agua);}
.sc-gas{--accent:var(--c-gas);}
.sc-solar{--accent:var(--c-solar);}

/* ================================================================
   8. SECCIÓN "NUESTROS TRABAJOS" (GALERÍA)
   ================================================================ */
.work{
  padding:110px 0;
  background:var(--white);
}
.work-filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:44px;
}
.filter-btn{
  --accent:var(--electric-blue);
  padding:11px 22px;
  border-radius:100px;
  border:1.5px solid rgba(10,31,61,0.14);
  font-size:14.5px;
  font-weight:600;
  color:var(--navy-900);
  display:inline-flex;align-items:center;gap:9px;
  transition:background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.filter-btn:active{transform:scale(0.97);}
.filter-btn .swatch{
  width:9px;height:9px;border-radius:50%;
  background:var(--accent);
}
.filter-btn:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.filter-btn.is-active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--white);
}
.filter-btn.is-active .swatch{background:var(--white);}

.work-group{margin-bottom:8px;}
.work-group-title{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gray-600);
  margin:36px 0 18px;
}
.work-group-title::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(10,31,61,0.1);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:20px;
}
.work-item{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  cursor:pointer;
  aspect-ratio:4/3;
  box-shadow:var(--shadow-sm);
  transition:box-shadow var(--transition-fast);
}
.work-item:hover{box-shadow:var(--shadow-md);}
.work-item img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.55s cubic-bezier(.22,.9,.35,1);
}
.work-item:hover img{transform:scale(1.09);}
.work-item .work-overlay{
  position:absolute;inset:0;
  background:linear-gradient(0deg, rgba(4,12,26,0.82) 0%, rgba(4,12,26,0.05) 55%);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:18px;
  opacity:0;
  transition:opacity var(--transition-fast);
}
.work-item:hover .work-overlay{opacity:1;}
.work-overlay .tag{
  align-self:flex-start;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--navy-900);
  background:var(--white);
  padding:4px 10px;
  border-radius:100px;
  margin-bottom:10px;
}
.work-overlay .cap{
  color:var(--white);
  font-size:14.5px;
  font-weight:600;
}
.work-item .zoom-hint{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  border-radius:50%;
  background:rgba(255,255,255,0.92);
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:scale(0.7);
  transition:opacity var(--transition-fast), transform var(--transition-fast);
}
.work-item:hover .zoom-hint{opacity:1;transform:scale(1);}
.work-item .zoom-hint svg{width:16px;height:16px;stroke:var(--navy-900);}
.hidden{display:none !important;}

/* --- Lightbox --- */
.lightbox{
  position:fixed;inset:0;
  background:rgba(4,10,22,0.92);
  z-index:2000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease;
}
.lightbox.is-open{opacity:1;pointer-events:auto;}
.lightbox-inner{
  position:relative;
  max-width:900px;
  width:100%;
  text-align:center;
}
.lightbox img{
  width:100%;
  max-height:76vh;
  object-fit:contain;
  border-radius:var(--radius-md);
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform:scale(0.94);
  transition:transform 0.3s ease;
}
.lightbox.is-open img{transform:scale(1);}
.lightbox-cap{color:var(--white);margin-top:18px;font-size:15px;}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  width:46px;height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.25);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition-fast), transform var(--transition-fast);
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{
  background:var(--electric-blue);
  transform:scale(1.08);
}
.lightbox-close{top:-64px;right:0;}
.lightbox-close svg,.lightbox-prev svg,.lightbox-next svg{width:20px;height:20px;stroke:var(--white);}
.lightbox-prev{left:-64px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:-64px;top:50%;transform:translateY(-50%);}
@media (max-width:900px){
  .lightbox{padding:20px;}
  .lightbox-close{top:-52px;right:0;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}
}
/* ================================================================
   9. SECCIÓN RESEÑAS
   ================================================================ */
.reviews{
  padding:110px 0;
  background:var(--navy-900);
  color:var(--white);
  position:relative;
  overflow:hidden;
}
.reviews-score{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:36px;
  margin-bottom:56px;
  padding-bottom:44px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.score-number{
  font-family:var(--font-mono);
  font-size:64px;
  font-weight:700;
  color:var(--gold);
  line-height:1;
}
.score-details{display:flex;flex-direction:column;gap:8px;}
.stars{display:flex;gap:4px;}
.stars svg{width:22px;height:22px;fill:var(--gold);}
.score-details .count{color:var(--steel-light);font-size:15px;}
.reviews-score .btn{margin-left:auto;}

.testimonials-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:22px;
}
.testimonial-card{
  background:var(--navy-800);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:var(--radius-md);
  padding:28px;
  transition:transform var(--transition-med), background var(--transition-fast);
}
.testimonial-card:hover{
  transform:translateY(-6px);
  background:#173864;
}
.testimonial-card .stars{margin-bottom:16px;}
.testimonial-card .stars svg{width:16px;height:16px;}
.testimonial-card p{
  font-size:14.5px;
  color:var(--steel-light);
  margin-bottom:22px;
}
.testimonial-author{display:flex;align-items:center;gap:12px;}
.author-avatar{
  width:42px;height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--electric-blue), var(--brand-blue));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);
  font-weight:700;
  font-size:15px;
  color:var(--white);
  flex-shrink:0;
}
.author-name{font-size:14.5px;font-weight:600;color:var(--white);}
.author-loc{font-size:12.5px;color:var(--steel);}

/* ================================================================
   10. SECCIÓN NOSOTROS
   ================================================================ */
.about{
  padding:110px 0;
  background:var(--offwhite);
}
.about .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:start;
}
.about-text p{color:var(--gray-600);margin-bottom:18px;font-size:16px;}
.about-values{
  list-style:none;
  margin-top:28px;
  display:grid;
  gap:16px;
}
.about-values li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  font-size:15px;
  color:var(--charcoal);
}
.about-values .check{
  width:26px;height:26px;
  border-radius:50%;
  background:var(--electric-blue);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}
.about-values .check svg{width:14px;height:14px;stroke:var(--white);}
.about-values strong{display:block;color:var(--navy-900);}

.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.stat-card{
  background:var(--navy-900);
  color:var(--white);
  border-radius:var(--radius-md);
  padding:30px 24px;
  transition:transform var(--transition-med);
}
.stat-card:hover{transform:translateY(-6px);}
.stat-card:nth-child(1){background:linear-gradient(145deg,var(--navy-900),var(--navy-800));}
.stat-card:nth-child(2){background:linear-gradient(145deg,var(--electric-blue),#1E4FC7);}
.stat-card:nth-child(3){background:linear-gradient(145deg,var(--navy-800),var(--navy-900));}
.stat-card:nth-child(4){background:linear-gradient(145deg,var(--gold-deep),var(--gold));}
.stat-card .num{
  font-family:var(--font-mono);
  font-size:36px;
  font-weight:700;
  display:block;
  margin-bottom:6px;
}
.stat-card .label{font-size:13px;opacity:0.9;}

@media (max-width:900px){
  .about .container{grid-template-columns:1fr;}
}

/* ================================================================
   10.5 SECCIÓN PREGUNTAS FRECUENTES
   ================================================================ */
.faq{
  padding:90px 0 110px;
  background:var(--white);
}
.faq-list{
  max-width:760px;
  margin:0 auto;
  display:grid;
  gap:14px;
}
.faq-item{
  background:var(--offwhite);
  border:1px solid rgba(10,31,61,0.08);
  border-radius:var(--radius-md);
  padding:6px 26px;
  transition:border-color var(--transition-fast), background var(--transition-fast);
}
.faq-item[open]{
  background:var(--white);
  border-color:rgba(47,111,237,0.3);
  box-shadow:var(--shadow-sm);
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:16.5px;
  color:var(--navy-900);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-toggle{
  flex-shrink:0;
  width:26px;height:26px;
  border-radius:50%;
  background:rgba(47,111,237,0.1);
  position:relative;
  transition:transform var(--transition-fast), background var(--transition-fast);
}
.faq-toggle::before,.faq-toggle::after{
  content:"";
  position:absolute;
  background:var(--electric-blue);
  border-radius:2px;
}
.faq-toggle::before{ top:50%;left:6px;right:6px;height:2px;transform:translateY(-50%); }
.faq-toggle::after{ left:50%;top:6px;bottom:6px;width:2px;transform:translateX(-50%); }
.faq-item[open] .faq-toggle{ transform:rotate(180deg); background:var(--electric-blue); }
.faq-item[open] .faq-toggle::before,.faq-item[open] .faq-toggle::after{ background:var(--white); }
.faq-item[open] .faq-toggle::after{ opacity:0; }
.faq-item p{
  color:var(--gray-600);
  font-size:15px;
  padding-bottom:22px;
  max-width:640px;
}

/* ================================================================
   11. SECCIÓN CONTACTO
   ================================================================ */
.contact{
  padding:110px 0;
  background:var(--white);
}
.contact .container{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
}
.contact-form{
  background:var(--offwhite);
  border-radius:var(--radius-lg);
  padding:40px;
  border:1px solid rgba(10,31,61,0.06);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{margin-bottom:18px;}
.field label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  color:var(--navy-900);
  margin-bottom:8px;
}
.field input, .field select, .field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1.5px solid rgba(10,31,61,0.14);
  background:var(--white);
  font-family:var(--font-body);
  font-size:14.5px;
  color:var(--charcoal);
  transition:border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--electric-blue);
  box-shadow:0 0 0 4px rgba(47,111,237,0.12);
  outline:none;
}
.field textarea{resize:vertical;min-height:110px;}
.form-note{
  font-size:12.5px;
  color:var(--gray-600);
  margin-top:14px;
  text-align:center;
}

.contact-info-list{display:grid;gap:18px;margin-bottom:32px;}
.info-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:18px;
  background:var(--offwhite);
  border-radius:var(--radius-md);
  transition:transform var(--transition-fast), background var(--transition-fast);
}
.info-item:hover{transform:translateX(4px);background:#EEF3FA;}
.info-item .ic{
  width:44px;height:44px;
  border-radius:12px;
  background:var(--navy-900);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.info-item .ic svg{width:20px;height:20px;stroke:var(--white);}
.info-item strong{display:block;font-size:14.5px;color:var(--navy-900);margin-bottom:2px;}
.info-item span, .info-item a{font-size:14px;color:var(--gray-600);}
.info-item a:hover{color:var(--electric-blue);}

.map-frame{
  width:100%;
  height:260px;
  border-radius:var(--radius-md);
  overflow:hidden;
  border:1px solid rgba(10,31,61,0.1);
  filter:grayscale(0.15) contrast(1.05);
}
.map-frame iframe{width:100%;height:100%;border:0;}

@media (max-width:900px){
  .contact .container{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}

/* ================================================================
   12. FOOTER
   ================================================================ */
.footer{
  background:var(--navy-950);
  color:var(--steel-light);
  padding:76px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1.2fr;
  gap:40px;
  padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand .brand{margin-bottom:16px;}
.footer-brand p{font-size:14px;color:var(--steel);max-width:280px;margin-bottom:20px;}
.social-row{display:flex;gap:12px;}
.social-row a{
  width:40px;height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;
  transition:background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.social-row a:hover{
  background:var(--electric-blue);
  border-color:var(--electric-blue);
  transform:translateY(-4px);
}
.social-row a svg{width:17px;height:17px;stroke:var(--white);}
.footer h4{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--white);
  margin-bottom:20px;
}
.footer-links{display:grid;gap:12px;}
.footer-links a{font-size:14.5px;color:var(--steel);transition:color var(--transition-fast) , padding var(--transition-fast);}
.footer-links a:hover{color:var(--white);padding-left:4px;}
.footer-contact{display:grid;gap:14px;font-size:14.5px;color:var(--steel);}
.footer-contact a{color:var(--steel);}
.footer-contact a:hover{color:var(--white);}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding-top:28px;
  font-size:13px;
  color:var(--steel);
}
.footer-bottom a{color:var(--steel);}
.footer-bottom a:hover{color:var(--white);}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr;}
}

/* ================================================================
   13. BOTÓN FLOTANTE DE WHATSAPP
   ================================================================ */
.float-whatsapp{
  position:fixed;
  bottom:24px;right:24px;
  z-index:900;
  width:62px;height:62px;
  border-radius:50%;
  background:var(--whatsapp);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(37,211,102,0.5);
  animation:pulse-wa 2.4s infinite;
  transition:transform var(--transition-fast);
}
.float-whatsapp:hover{transform:scale(1.08);}
.float-whatsapp svg{width:30px;height:30px;fill:var(--white);}
@keyframes pulse-wa{
  0%{box-shadow:0 10px 30px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0.55);}
  70%{box-shadow:0 10px 30px rgba(37,211,102,0.5), 0 0 0 18px rgba(37,211,102,0);}
  100%{box-shadow:0 10px 30px rgba(37,211,102,0.5), 0 0 0 0 rgba(37,211,102,0);}
}
@media (prefers-reduced-motion: reduce){ .float-whatsapp{animation:none;} }

/* Botón "volver arriba" opcional dentro del footer */
.back-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--steel);
}
.back-top:hover{color:var(--white);}
.back-top svg{width:14px;height:14px;stroke:currentColor;}
/* ================================================================
   14. AJUSTES RESPONSIVE GENERALES
   ================================================================ */
@media (max-width:768px){
  .services, .work, .reviews, .about, .contact, .faq{padding:76px 0;}
  .hero{
    padding:calc(var(--header-h) + 40px) 0 70px;
    background:
      linear-gradient(180deg, rgba(7,21,40,0.92) 0%, rgba(7,21,40,0.88) 100%),
      url('/images/hero-bg-solar.webp');
    background-size:cover;
    background-position:center 58%;
  }
  .reviews-score{flex-direction:column;align-items:flex-start;}
  .reviews-score .btn{margin-left:0;}
  .section-head{margin-bottom:36px;}
  .contact-form{padding:26px;}
}

/* ================================================================
   ESTILOS DEL PANEL DE ADMINISTRADOR Y PÁGINAS DE SERVICIO
   ----------------------------------------------------------------
   Todo lo de acá vive bajo body.admin-body — no afecta en absoluto
   el diseño del sitio público (esas clases nunca se usan ahí).
   ================================================================ */
.admin-body{
  background:
    radial-gradient(1200px 500px at 100% -10%, rgba(47,111,237,0.10), transparent 60%),
    var(--offwhite);
  min-height:100vh;
  font-family:var(--font-body);
  color:var(--navy-900);
}

/* --- Barra superior + navegación por pestañas --- */
.admin-header{
  background:linear-gradient(135deg, var(--navy-950), var(--navy-900));
  color:#fff;
  padding:0;
  position:sticky; top:0; z-index:40;
  box-shadow:0 6px 24px rgba(6,15,33,0.18);
}
.admin-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap:20px; flex-wrap:wrap;
}
.admin-header a{ color:#fff; }
.admin-brand{ display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.01em; }
.admin-brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--electric-blue); box-shadow:0 0 0 4px rgba(47,111,237,0.25); }

.admin-nav{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  background:rgba(255,255,255,0.06);
  padding:5px; border-radius:100px;
}
.admin-nav a{
  display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
  color:var(--steel-light); transition:background var(--transition-fast), color var(--transition-fast);
  white-space:nowrap;
}
.admin-nav a:hover{ background:rgba(255,255,255,0.08); color:#fff; }
.admin-nav a.is-active{ background:var(--electric-blue); color:#fff; }
.admin-nav a .badge{
  background:rgba(255,255,255,0.18); color:#fff; font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:100px; line-height:1.5;
}
.admin-nav a.is-active .badge{ background:rgba(255,255,255,0.28); }

.admin-header-actions{ display:flex; align-items:center; gap:14px; font-size:13.5px; }
.admin-header-actions form{ display:inline; }
.admin-header-actions button{
  background:none; border:none; color:var(--steel-light); cursor:pointer;
  text-decoration:underline; font-size:13.5px; padding:0;
}
.admin-header-actions button:hover{ color:#fff; }

.admin-wrap{ max-width:1040px; margin:0 auto; padding:36px 24px 90px; }
.admin-page-title{ margin-bottom:26px; }
.admin-page-title h1{ font-size:26px; margin-bottom:4px; }
.admin-page-title p{ color:var(--gray-600); font-size:14px; }

/* --- Tarjetas --- */
.admin-card{
  background:#fff; border-radius:16px; padding:30px 32px;
  box-shadow:0 1px 2px rgba(10,31,61,0.04), 0 10px 30px -12px rgba(10,31,61,0.10);
  margin-bottom:24px; border:1px solid rgba(10,31,61,0.06);
}
.admin-card h2{ font-size:19px; margin-bottom:6px; display:flex; align-items:center; gap:9px; }
.admin-card .hint{ color:var(--gray-600); font-size:13.5px; margin-bottom:22px; line-height:1.55; }
.admin-card-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px; flex-wrap:wrap; }

.admin-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.admin-grid .full{ grid-column:1/-1; }
@media (max-width:700px){ .admin-grid{ grid-template-columns:1fr; } }

.admin-field label{ display:block; font-size:13px; font-weight:600; color:var(--navy-900); margin-bottom:6px; }
.admin-field .sublabel{ font-weight:400; color:var(--gray-600); font-size:12px; }
.admin-field input, .admin-field select, .admin-field textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid rgba(10,31,61,0.14);
  font-family:var(--font-body); font-size:14px; background:#fff; transition:border-color var(--transition-fast);
}
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus{
  outline:none; border-color:var(--electric-blue);
}
.admin-field textarea{ min-height:80px; resize:vertical; }
.admin-field input[type="color"]{ padding:4px; height:44px; cursor:pointer; }
.admin-field input[type="file"]{ border:1.5px dashed rgba(10,31,61,0.18); background:var(--offwhite); cursor:pointer; }

.admin-note{ background:#EEF3FA; border-radius:10px; padding:14px 16px; font-size:13px; color:var(--gray-600); margin-bottom:16px; line-height:1.55; }
.admin-note code{ background:rgba(10,31,61,0.06); padding:1px 5px; border-radius:4px; }

/* --- Botones --- */
.btn-admin{
  background:var(--electric-blue); color:#fff; border:none; padding:12px 26px;
  border-radius:100px; font-weight:600; font-size:14.5px; cursor:pointer; margin-top:10px;
  transition:transform var(--transition-fast), box-shadow var(--transition-fast); display:inline-flex; align-items:center; gap:8px;
}
.btn-admin:hover{ transform:translateY(-1px); box-shadow:0 8px 20px -8px rgba(47,111,237,0.6); }
.btn-admin.danger{ background:#D14343; }
.btn-admin.secondary{ background:transparent; border:1.5px solid rgba(10,31,61,0.2); color:var(--navy-900); box-shadow:none; }
.btn-admin.small{ padding:8px 16px; font-size:12.5px; margin-top:0; }
.btn-admin.ghost{ background:rgba(10,31,61,0.05); color:var(--navy-900); box-shadow:none; }
.btn-admin[disabled]{ opacity:.4; cursor:not-allowed; transform:none !important; box-shadow:none !important; }

.admin-login-box{
  max-width:380px; margin:12vh auto; background:#fff; padding:38px;
  border-radius:18px; box-shadow:0 20px 60px -20px rgba(6,15,33,0.35);
  border:1px solid rgba(10,31,61,0.06);
}
.admin-login-box .admin-brand{ color:var(--navy-900); justify-content:center; margin-bottom:22px; font-size:16px; }

.admin-flash{ background:#FDECEC; color:#B42318; padding:12px 16px; border-radius:10px; font-size:13.5px; margin-bottom:20px; }
.admin-flash.ok{ background:#E7F7EE; color:#1D7A46; }

/* --- Listado de items administrables (servicios / reseñas) --- */
.admin-item-list{ display:grid; gap:14px; margin-top:8px; }
.admin-item{
  display:flex; gap:16px; align-items:flex-start; padding:18px;
  border:1px solid rgba(10,31,61,0.08); border-radius:14px; background:#fff;
  transition:box-shadow var(--transition-fast);
}
.admin-item:hover{ box-shadow:0 8px 24px -14px rgba(10,31,61,0.25); }
.admin-item.is-hidden{ opacity:.55; }
.admin-item-reorder{ display:flex; flex-direction:column; gap:4px; }
.admin-item-reorder button{
  width:30px; height:26px; border-radius:7px; border:1px solid rgba(10,31,61,0.12);
  background:var(--offwhite); cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--navy-900); font-size:12px;
}
.admin-item-reorder button:hover{ background:var(--electric-blue); color:#fff; border-color:var(--electric-blue); }
.admin-item-thumb{
  width:56px; height:56px; border-radius:12px; flex-shrink:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--navy-900);
}
.admin-item-thumb img{ width:100%; height:100%; object-fit:cover; }
.admin-item-thumb svg{ width:26px; height:26px; }
.admin-item-body{ flex:1; min-width:0; }
.admin-item-title-row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.admin-item-title-row strong{ font-size:15.5px; }
.admin-item-body p{ color:var(--gray-600); font-size:13.5px; margin-bottom:10px; }
.admin-item-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.admin-item-actions form{ display:inline; }

.badge-pill{
  font-size:11px; font-weight:700; padding:2px 9px; border-radius:100px;
  text-transform:uppercase; letter-spacing:.03em;
}
.badge-pill.on{ background:#E7F7EE; color:#1D7A46; }
.badge-pill.off{ background:rgba(10,31,61,0.08); color:var(--gray-600); }

.admin-stars{ color:#F0A93A; font-size:14px; letter-spacing:1px; }

.admin-expander{ margin-top:14px; }
.admin-expander summary{
  cursor:pointer; font-size:13px; font-weight:600; color:var(--electric-blue);
  list-style:none; display:inline-flex; align-items:center; gap:6px;
}
.admin-expander summary::-webkit-details-marker{ display:none; }
.admin-expander[open] summary{ margin-bottom:16px; }

/* --- Selector de íconos --- */
.icon-picker{ display:grid; grid-template-columns:repeat(auto-fill,minmax(64px,1fr)); gap:10px; margin-top:6px; }
.icon-picker label{
  display:flex; align-items:center; justify-content:center; aspect-ratio:1;
  border:1.5px solid rgba(10,31,61,0.12); border-radius:10px; cursor:pointer; background:#fff;
  transition:border-color var(--transition-fast), background var(--transition-fast);
}
.icon-picker input{ position:absolute; opacity:0; width:0; height:0; }
.icon-picker svg{ width:22px; height:22px; stroke:var(--navy-900); }
.icon-picker input:checked + label,
.icon-picker label:has(input:checked){ border-color:var(--electric-blue); background:#EEF3FA; }
.icon-picker input:checked ~ svg{ stroke:var(--electric-blue); }

.stat-pills{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:26px; }
.stat-pill{
  background:#fff; border:1px solid rgba(10,31,61,0.08); border-radius:14px;
  padding:16px 20px; min-width:140px; box-shadow:0 1px 2px rgba(10,31,61,0.04);
}
.stat-pill .num{ font-size:24px; font-weight:800; color:var(--navy-900); display:block; }
.stat-pill .label{ font-size:12.5px; color:var(--gray-600); }

.gallery-admin-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-top:20px; }
.gallery-admin-item{ border-radius:12px; overflow:hidden; border:1px solid rgba(10,31,61,0.1); background:#fff; }
.gallery-admin-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.gallery-admin-item .meta{ padding:10px 12px; font-size:12.5px; }
.gallery-admin-item .meta .cat{ color:var(--electric-blue); font-weight:700; text-transform:uppercase; font-size:10.5px; letter-spacing:.05em; }
.gallery-admin-item form{ padding:0 12px 12px; }
.table-simple{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table-simple th, .table-simple td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(10,31,61,0.08); }

/* Página de servicio individual */
.service-hero{
  padding:calc(var(--header-h) + 56px) 0 60px;
  background:linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color:#fff;
}
.service-hero h1{ color:#fff; font-size:clamp(28px,4vw,44px); }
.service-hero p{ color:var(--steel-light); max-width:600px; margin-top:14px; font-size:17px; }
.service-bullets{ display:grid; gap:14px; margin:30px 0; }
.service-bullets li{ display:flex; gap:12px; align-items:flex-start; color:var(--charcoal); }
.breadcrumb{ font-size:13px; color:var(--gray-600); margin-bottom:14px; }
.breadcrumb a{ color:var(--electric-blue); }