/*
Theme Name: TOA Electrical Minimal (v2)
Theme URI: https://toaelect.com/
Author: Giancarlo Balbuena & ChatGPT
Description: One-page theme inspired by The One Above Electrical — dark charcoal, gold accents, centered header with logo + name + slogan, 6-column responsive services with icons.
Version: 1.1.0
Text Domain: toa-minimal
*/

*{box-sizing:border-box}
:root{
  --bg:#1E1F21;
  --bg-elev:#232427;
  --gold:#D4A646;
  --text:#EDEDED;
  --muted:#C9CBD1;
  --border:#33353A;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
/* Habia DOS "html,body{height:100%}" en este archivo, este y otro casi al
   final. Se quito el de abajo primero y la cabecera fija seguia rota, porque
   este seguia vivo. Con el body clavado a la altura de la ventana (900px) y el
   contenido midiendo 5491px, position:sticky se despegaba justo al pasar los
   835px (900 de caja menos 65 de barra). El motivo entero esta comentado abajo,
   en el bloque "ESTO ROMPIA LA CABECERA FIJA".
   El alto lo pone el contenido; no hace falta forzarlo. */
body{margin:0;background:radial-gradient(1200px 800px at 15% 10%, #26272B 0%, var(--bg) 40%) fixed;color:var(--text);font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;line-height:1.6}

h1,h2,h3{line-height:1.2;margin:0 0 .5rem}
h1{font-size:clamp(2.2rem,4vw,3.8rem)}
h2{font-size:clamp(1.6rem,2.2vw,2.2rem)}
p{margin:.25rem 0 .75rem}
.lead{font-size:clamp(1.05rem,1.1vw,1.2rem);color:var(--muted)}

.container{max-width:1200px;margin:0 auto;padding:24px}

/* Centered header with logo + name + slogan */
.site-header{position:sticky;top:0;z-index:50;background:rgba(30,31,33,.75);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{display:flex;flex-direction:column;align-items:center;text-align:center;padding:18px 0 20px;gap:8px}
.brand-logo{width:96px;height:96px;display:grid;place-items:center}
.brand-dot{width:14px;height:14px;background:var(--gold);border-radius:50%}
.brand-name{font-weight:800;letter-spacing:.6px;color:var(--text)}
.brand-slogan{font-size:.9rem;letter-spacing:.15em;color:var(--text);opacity:.9;text-transform:uppercase}

/* Hero */
.hero{padding:72px 0 60px;border-bottom:1px solid var(--border)}
.kicker{color:var(--gold);font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:.9rem}
.badge{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg, rgba(212,166,70,.18), rgba(212,166,70,.05));border:1px solid rgba(212,166,70,.28);color:#F1E7D0;padding:8px 12px;border-radius:12px;margin:12px 0;box-shadow:var(--shadow)}
.cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}
.btn{appearance:none;border:none;background:var(--gold);color:#1B1C1E;padding:14px 20px;border-radius:14px;font-weight:700;letter-spacing:.3px;cursor:pointer;box-shadow:0 8px 24px rgba(212,166,70,.35);transform:translateY(0);transition:transform .2s ease, box-shadow .2s ease}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(212,166,70,.45)}
.btn.outline{background:transparent;color:var(--gold);border:1px solid var(--gold);box-shadow:none}

/* Sections */
.section{padding:72px 0;border-bottom:1px solid var(--border)}

/* Services grid 6 columns */
.services-grid{display:grid;gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:800px){.services-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1140px){.services-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.card{background:var(--bg-elev);border:1px solid var(--border);border-radius:18px;padding:18px;box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);border-color:rgba(212,166,70,.45)}
.card .thumb{width:100%;height:96px;border-radius:12px;background:linear-gradient(180deg, rgba(212,166,70,.18), rgba(212,166,70,.06));border:1px solid rgba(212,166,70,.35);display:grid;place-items:center;margin-bottom:12px}
.card .thumb img, .card .thumb svg{max-width:56px;max-height:56px;opacity:.95}
.card h3{margin:.25rem 0 .35rem}
.card p{color:var(--muted);font-size:.95rem}

/* Quote bar */
.quote-bar{background:linear-gradient(90deg, rgba(212,166,70,.12), rgba(212,166,70,0));border:1px solid rgba(212,166,70,.25);border-left:4px solid var(--gold);padding:18px;border-radius:14px;margin-top:24px}

/* Contact */
.form{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.form .full{grid-column:1/-1}
input,textarea{width:100%;background:#1b1c1e;border:1px solid #2E3035;border-radius:12px;color:var(--text);padding:12px 14px;outline:none}
input:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:120px;resize:vertical}

/* Footer */
.site-footer{padding:34px 0;color:var(--muted);font-size:.95rem}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px}
.footer-title{color:var(--text);font-weight:700;margin-bottom:8px}
.footer-credit{border-top:1px solid var(--border);margin-top:16px;padding-top:16px;display:flex;justify-content:space-between;align-items:center}
.site-footer a {
    color: var(--gold) !important;   /* Usa tu color dorado de la paleta */
    text-decoration: none;
    transition: .2s ease-in-out;
}

.site-footer a:hover {
    color: #ffffff !important;       /* Blanco en hover (puedo cambiarlo si quieres) */
    text-decoration: underline;
}

/* Reveal */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .form{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
}


/* =========================
   CLEAN RESET — WHAT WE DO
   ========================= */
/* REJILLA DE SERVICIOS — ARREGLADA EL 2026-08-23. Causaba 181px de desborde
   horizontal en escritorio. NO le vuelvas a poner un minimo fijo.

   Estaba asi:  grid-template-columns: repeat(6, minmax(220px,1fr));

   El fallo esta en el 220px. En minmax(MIN,MAX) la pista NUNCA baja de MIN,
   asi que el 1fr no puede encoger nada: la rejilla exige
       6 x 220px + 5 huecos x 24px = 1440px
   y .container solo da 1200px menos 24 de relleno a cada lado = 1152px utiles.
   Sobran 288px que se salen por la derecha. Medido en vivo a 1366px de ancho:
   la sexta tarjeta terminaba en x=1547 con el viewport en 1366 -> 181px de
   scroll horizontal. Y el @media (max-width:1200px) no salvaba nada, porque
   repetia el mismo minimo de 220px con 3 columnas.

   Por que importa y no es solo cosmetico: Google indexa con el Googlebot
   movil y "content wider than screen" es un fallo de usabilidad movil que
   cuenta en el ranking. Ademas en escritorio aparecia una barra de scroll
   lateral fea en la portada.

   Ahora: 1 columna en telefono, 2 en tableta, 3 en escritorio. Son 6
   servicios, o sea dos filas parejas de 3. Y el minimo es 0, que es lo que
   deja al 1fr hacer su trabajo: las columnas encogen antes de desbordar.
   A 1152px utiles cada tarjeta queda en ~368px, mucho mejor para una foto
   de 300px de alto que los 220px apretados de antes. */
#services .services-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:24px;
}
@media (min-width:600px){
  #services .services-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width:1000px){
  #services .services-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
#services .services-grid .card{ position:relative; overflow:hidden; }
#services .services-grid .card .thumb,
#services .services-grid .card .thumb::before,
#services .services-grid .card .thumb::after{
  all:unset; display:block; content:none;
}
#services .services-grid .card .service-photo{
  display:block; width:100%; overflow:hidden;
  padding:6px; border:2px solid #c9a65b; border-radius:18px;
  background:linear-gradient(180deg,#111,#151515); box-shadow:0 6px 24px rgba(0,0,0,.25);
}
#services .services-grid .card .service-photo img{
  position:static; display:block; width:100%; height:300px;
  object-fit:cover; max-width:100%; border-radius:14px; margin:0;
}
#services .services-grid .card h3{ margin-top:18px; }


/* === Hero Gallery (below tagline) === */
#hero-gallery .hero-gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
}
#hero-gallery .hg-item{
  overflow:hidden;
  border-radius:16px;
  border:2px solid #c9a65b;
  background:#0f0f0f;
  box-shadow:0 6px 24px rgba(0,0,0,.25);
}
#hero-gallery .hg-item img{
  width:100%;
  height:220px;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
#hero-gallery .hg-item:hover img{ transform:scale(1.03); }
@media (max-width:1100px){
  #hero-gallery .hero-gallery-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:700px){
  #hero-gallery .hero-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
/* Floating Call Button (mobile only) */
.call-now{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display: none;
  background: var(--gold);
  color: #111;
  text-align: center;
  font-weight: 700;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 9999;
  text-decoration: none;
  letter-spacing: .2px;
}
.call-now:active{ transform: translateY(1px); }

@media (max-width: 768px){
  .call-now{ display: block; }
}

/* Trust bar */
.trustbar{
  padding: 14px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.02);
}
.trustbar .container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.trustbar-list{
  margin:0; padding:0; list-style:none;
  display:flex; gap:18px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  color: var(--muted);
  font-size:.95rem;
}
.trustbar-list li{ display:flex; align-items:center; gap:10px; }
.trustbar-list .ic{ font-size:1.05em; line-height:1; opacity:.9; }

/* Mobile: apilar y que respire */
@media (max-width: 820px){
  .trustbar-list{ justify-content:flex-start; gap:10px 16px; }
  .trustbar-list li{ flex: 1 1 100%; }
}
/* Trust bar (gold frame version) */
.trustbar{
  padding: 16px 0;
  border: 1px solid rgba(212,166,70,.25); /* gold border */
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  margin: 32px auto 0;
  max-width: 1000px;
  box-shadow: 0 6px 22px rgba(0,0,0,.25);
}
.trustbar .container{ max-width:100%; padding:0 24px; }
.trustbar-list{
  margin:0; padding:0; list-style:none;
  display:flex; gap:18px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  color: var(--muted);
  font-size:.95rem;
}
.trustbar-list li{ display:flex; align-items:center; gap:10px; }
.trustbar-list .ic{ font-size:1.1em; line-height:1; opacity:.9; }

/* Mobile formatting */
@media (max-width: 820px){
  .trustbar{ padding:18px 0; }
  .trustbar-list{ justify-content:flex-start; gap:10px 16px; }
  .trustbar-list li{ flex: 1 1 100%; }
}
.trustbar{
  border-color: rgba(201,162,39,.55);            /* gold un poco más vivo */
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),                 /* sombra base */
    0 0 18px rgba(201,162,39,.18);               /* glow dorado sutil */
}
.trustbar-list{ gap:12px 24px; }


.trustbar{
  padding: 16px 0;
  border: 1px solid rgba(201,162,39,.55);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  margin: 32px 0 0;     /* quitamos centering */
  width: fit-content;   /* se ajusta al contenido */
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    0 0 18px rgba(201,162,39,.18);
}

.trustbar .container{
  padding: 0;           /* elimina padding interior extra */
  max-width: none;      /* evita que se centre */
}

.trustbar{
  padding: 16px 0;
  border: 1px solid rgba(201,162,39,.55);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
  margin: 32px 0 0;
  width: fit-content;
  box-shadow:
    0 10px 30px rgba(0,0,0,.28),
    0 0 18px rgba(201,162,39,.18);
}

.trustbar .container{
  padding-left: 20px;
  padding-right: 20px;
}

.trustbar-list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;   /* STACK VERTICAL */
  gap:6px;                 /* spacing between the 2 lines */
  text-align:left;
  align-items:flex-start;
  font-size:.95rem;
  color: var(--muted);
}

.trustbar-list li{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:flex-start;   /* FORCE LEFT ALIGN */
}

.trustbar-list .ic{
  font-size:1.05em;
  line-height:1;
  opacity:.9;
}

/* Reviews */
.reviews{ padding:64px 0; }
.reviews .container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.reviews .h2{ margin:0 0 18px; }

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}

.review{
  background:#111316;
  border:1px solid var(--border);
  border-radius:18px;
  padding:18px;
  box-shadow: var(--shadow);
}

.review .stars{
  color:#ffcc66;            /* dorado suave para estrellas */
  letter-spacing:2px;
  margin-bottom:8px;
  font-weight:700;
}

.review .who{
  margin-top:10px;
  color:var(--muted);
  font-size:.95rem;
}
/* Portfolio grid */
.portfolio{ padding:64px 0 46px; }
.portfolio .container{ max-width:1100px; margin:0 auto; padding:0 20px; }
.portfolio .h2{ margin:0 0 18px; }

.portfolio-grid{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:14px;
  padding:0 20px;
}

.portfolio-grid .shot{
  margin:0; padding:0;
  grid-column: span 4;                 /* 3 por fila en desktop */
  background:#0f1114;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.portfolio-grid .shot img{
  width:100%;
  height:260px;                         /* look uniforme */
  object-fit:cover; display:block;
  transition: transform .35s ease;
}

.portfolio-grid .shot figcaption{
  padding:10px 12px;
  color:var(--muted);
  font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.06);
}

.portfolio-grid .shot:hover img{ transform: scale(1.03); }
.portfolio-grid .shot:hover{
  border-color: rgba(201,162,39,.55);   /* dorado en hover */
  box-shadow:
    0 10px 26px rgba(0,0,0,.28),
    0 0 14px rgba(201,162,39,.16);
}

/* Responsivo */
@media (max-width: 1024px){
  .portfolio-grid .shot{ grid-column: span 6; }  /* 2 por fila */
}
@media (max-width: 640px){
  .portfolio-grid{ padding:0 14px; }
  .portfolio-grid .shot{ grid-column: span 12; } /* 1 por fila */
  .portfolio-grid .shot img{ height:220px; }
}
/* Slider shell */
.toa-slider{
  position:relative;
  margin: 12px 20px 0;
}
.toa-slide-viewport{
  overflow:hidden;
  border-radius:18px;
  box-shadow: var(--shadow);
  border:1px solid var(--border);
  background:#0f1114;
}
.toa-slide-track{
  list-style:none; margin:0; padding:0;
  display:flex; gap:0;
  scroll-behavior:smooth;
}
.toa-slide{
  min-width:100%;
}
.toa-slide .shot{
  margin:0; padding:0; background:#0f1114;
}
.toa-slide img{
  width:100%; height:460px; object-fit:cover; display:block;
}
.toa-slide figcaption{
  padding:10px 12px; color:var(--muted); font-size:.95rem;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Arrows */
.toa-slide-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(0,0,0,.45);
  color:#fff; border:1px solid rgba(201,162,39,.45);
  width:42px; height:42px; border-radius:12px;
  display:grid; place-items:center; cursor:pointer;
  z-index:5;
  backdrop-filter: blur(4px);
}
.toa-slide-btn:hover{
  box-shadow: 0 10px 26px rgba(0,0,0,.28), 0 0 14px rgba(201,162,39,.16);
  border-color: rgba(201,162,39,.75);
}
.toa-slide-btn.prev{ left:10px; }
.toa-slide-btn.next{ right:10px; }

/* Dots */
.toa-dots{
  display:flex; gap:8px; justify-content:center; margin-top:12px;
}
.toa-dot{
  width:10px; height:10px; border-radius:999px;
  background: rgba(255,255,255,.25);
  border:1px solid rgba(201,162,39,.35);
  cursor:pointer;
}
.toa-dot[aria-selected="true"]{
  background: var(--gold);
  border-color: rgba(201,162,39,.75);
}

/* Responsive */
@media (max-width: 1024px){
  .toa-slide img{ height:380px; }
}
@media (max-width: 640px){
  .toa-slider{ margin: 8px 14px 0; }
  .toa-slide img{ height:280px; }
  .toa-slide-btn{ width:38px; height:38px; border-radius:10px; }
}
/* Floating WhatsApp */
.wa-float{
  position: fixed;
  right: 16px;
  bottom: 84px;                /* por encima del Call Now */
  display: flex; align-items: center; gap: 8px;
  background: #111;            /* fondo oscuro para tu estética */
  color: #fff; text-decoration: none;
  border: 1px solid rgba(201,162,39,.45);
  border-radius: 999px;
  padding: 10px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.35), 0 0 14px rgba(201,162,39,.18);
  z-index: 2147483647;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wa-float:hover{
  transform: translateY(-1px);
  border-color: rgba(201,162,39,.75);
  box-shadow: 0 12px 34px rgba(0,0,0,.42), 0 0 16px rgba(201,162,39,.24);
}
.wa-float .wa-text{ font-weight:700; font-size:.95rem; }

/* Solo móvil por defecto */
@media (min-width: 769px){
  .wa-float{ display:none; }
}
/* Si lo quieres también en desktop, comenta el bloque @media ↑ */

/* Quick Quote Modal */
.qq-modal{ position:fixed; inset:0; display:none; z-index:2147483600; }
.qq-modal[aria-hidden="false"]{ display:block; }
.qq-backdrop{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.qq-panel{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(92vw, 560px);
  background:#0f1114; color:#fff;
  border:1px solid rgba(201,162,39,.45);
  border-radius:18px; box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 14px rgba(201,162,39,.18);
  padding:18px 18px 20px;
}
.qq-close{
  position:absolute; right:10px; top:8px;
  width:36px; height:36px; border-radius:10px;
  border:1px solid rgba(201,162,39,.35);
  background:#111; color:#fff; cursor:pointer;
}
.qq-title{ margin:8px 6px 14px; font-size:1.25rem; font-weight:700; }

.qq-form{ display:grid; gap:12px; }
.qq-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qq-form label{ display:grid; gap:6px; }
.qq-form input, .qq-form select, .qq-form textarea{
  background:#0b0d10; color:#fff; border-radius:12px;
  border:1px solid var(--border, rgba(255,255,255,.12));
  padding:10px 12px; outline:none;
}
.qq-form input:focus, .qq-form select:focus, .qq-form textarea:focus{
  border-color: rgba(201,162,39,.6);
  box-shadow: 0 0 0 3px rgba(201,162,39,.18);
}
.qq-submit{
  background: var(--gold,#C9A227); color:#111; font-weight:800;
  border:1px solid rgba(212,166,70,.35);
  border-radius:12px; padding:12px 16px; cursor:pointer;
  transition: .2s ease;
}
.qq-submit:hover{
  box-shadow: 0 10px 30px rgba(212,166,70,.25);
}
.qq-privacy{ margin:0; opacity:.75; font-size:.9rem; }

/* Mobile */
@media (max-width:640px){
  .qq-row{ grid-template-columns:1fr; }
}


/* Floating Get a Quote Button */
#quote-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 24px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  z-index: 9999;
  transition: all 0.3s ease;
}
#quote-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

/* Popup Background */
#quote-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Popup Content Box */
#quote-modal .quote-content {
  background-color: #111;
  color: #fff;
  margin: 8% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  position: relative;
}

/* Close Button */
.close-quote {
  position: absolute;
  top: 12px;
  right: 20px;
  color: #d4af37;
  font-size: 28px;
  cursor: pointer;
  transition: color 0.2s;
}
.close-quote:hover {
  color: #fff;
}

/* Make Contact Form 7 fit theme */
#quote-modal form input,
#quote-modal form textarea {
  background-color: #222;
  border: 1px solid #333;
  color: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
#quote-modal form input[type="submit"] {
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
#quote-modal form input[type="submit"]:hover {
  opacity: 0.9;
}
#quote-btn {
  bottom: 100px !important; /* súbelo un poco por encima del botón de llamada */
}
#quote-modal {
  z-index: 99999 !important; /* forzar prioridad sobre otros botones flotantes */
}

/* Floating Buttons Container */
.floating-buttons {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  gap: 12px;
  z-index: 9999;
}

/* Buttons Style */
.float-btn {
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.float-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.4);
}

/* Phone Icon (optional if you use Font Awesome) */
.call-btn i {
  margin-right: 8px;
}

/* Quote Modal */
#quote-modal {
  display: none;
  position: fixed;
  z-index: 99999 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Popup Content */
#quote-modal .quote-content {
  background-color: #111;
  color: #fff;
  margin: 8% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  position: relative;
}

.close-quote {
  position: absolute;
  top: 12px;
  right: 20px;
  color: #d4af37;
  font-size: 28px;
  cursor: pointer;
}
.close-quote:hover {
  color: #fff;
}

/* Adjust Contact Form Inside Modal */
#quote-modal form input,
#quote-modal form textarea {
  background-color: #222;
  border: 1px solid #333;
  color: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
#quote-modal form input[type="submit"] {
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
#quote-modal form input[type="submit"]:hover {
  opacity: 0.9;
}

/* Adjust when WordPress admin bar is visible */
body.admin-bar .floating-buttons {
  bottom: 75px;
}

/* Responsive for mobile (make them fit nicely) */
@media (max-width: 480px) {
  .floating-buttons {
    right: 10px;
    left: 10px;
    justify-content: space-between;
  }
  .float-btn {
    flex: 1;
    text-align: center;
    font-size: 14px;
    padding: 12px 10px;
  }
}

.float-btn i {
  margin-right: 8px;
  font-size: 16px;
}
/* Floating Buttons Container */
.floating-buttons {
  position: fixed;
  bottom: 25px;
  right: 25px;
  display: flex;
  gap: 12px;
  z-index: 9999;
  animation: slideInUp 0.7s ease-out;
}

/* Buttons Style */
.float-btn {
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  position: relative;
}

/* Pulse Animation */
.float-btn::after {
  content: "";
  position: absolute;
  border-radius: 50px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6);
  opacity: 0;
  transition: all 0.4s;
}
.float-btn:hover::after {
  animation: pulseGlow 1.6s infinite;
}

/* Icon */
.float-btn i {
  margin-right: 8px;
  font-size: 16px;
  color: #000;
}
.float-btn:hover i {
  color: #111;
}

/* Quote Modal */
#quote-modal {
  display: none;
  position: fixed;
  z-index: 99999 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

/* Popup Content */
#quote-modal .quote-content {
  background-color: #111;
  color: #fff;
  margin: 8% auto;
  padding: 30px;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 0 20px rgba(0,0,0,0.4);
  position: relative;
}

/* Close Button */
.close-quote {
  position: absolute;
  top: 12px;
  right: 20px;
  color: #d4af37;
  font-size: 28px;
  cursor: pointer;
}
.close-quote:hover {
  color: #fff;
}

/* Adjust Contact Form Inside Modal */
#quote-modal form input,
#quote-modal form textarea {
  background-color: #222;
  border: 1px solid #333;
  color: #fff;
  width: 100%;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
#quote-modal form input[type="submit"] {
  background: linear-gradient(145deg, #d4af37, #b9922e);
  color: #000;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
#quote-modal form input[type="submit"]:hover {
  opacity: 0.9;
}

/* Adjust when WordPress admin bar is visible */
body.admin-bar .floating-buttons {
  bottom: 75px;
}

/* Responsive for mobile */
@media (max-width: 480px) {
  .floating-buttons {
    right: 10px;
    left: 10px;
    justify-content: space-between;
  }
  .float-btn {
    flex: 1;
    text-align: center;
    font-size: 14px;
    padding: 12px 10px;
  }
}

/* Keyframes */
@keyframes pulseGlow {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.6); opacity: 1; }
  70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); opacity: 0; }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); opacity: 0; }
}

@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}



#quote-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  background: rgba(0,0,0,0.6);
}

#quote-modal + * {
  position: relative;
  z-index: 1;
}
/* ======= RECENT WORK SLIDER ======= */
/* === RECENT WORK SLIDER FIXED === */
.recentSwiper {
  width: 100%;
  max-width: 1000px;
  margin: 40px auto;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  height: 600px; /* altura fija */
  background: #0a0a0a;
}

/* Asegura que Swiper no “apile” slides */
.recentSwiper .swiper-wrapper {
  height: 100%;
}

.recentSwiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  height: 100%;
}

/* Fondo blur */
.recentSwiper .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: blur(30px) brightness(0.4);
  transform: scale(1.1);
  z-index: 0;
}

/* Imagen principal */
.recentSwiper .swiper-slide img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* Flechas */
.swiper-button-next,
.swiper-button-prev {
  color: #d4af37;
  transition: 0.3s;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  color: #fff;
}

/* Paginación */
.swiper-pagination-bullet {
  background: #b9922e;
  opacity: 0.6;
}
.swiper-pagination-bullet-active {
  background: #d4af37;
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .recentSwiper {
    height: 400px;
  }
}

.recentSwiper .swiper-slide-active img {
  animation: zoom-in 8s ease-in-out forwards;
}

@keyframes zoom-in {
  0% { transform: scale(1); }
  100% { transform: scale(1.05); }
}

/* === Floating Action Buttons === */
.floating-buttons {
  position: fixed;
  right: 25px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espacio entre botones */
  z-index: 9999;
}

.float-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #d4af37;
  color: #000;
  font-weight: 600;
  border-radius: 30px;
  padding: 12px 20px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  font-family: "Segoe UI", sans-serif;
}

.float-btn:hover {
  background-color: #f0c94c;
  transform: translateY(-2px);
}

.float-btn i {
  margin-right: 8px;
}

/* Responsivo: más pequeños en móvil */
@media (max-width: 600px) {
  .floating-buttons {
    right: 15px;
    bottom: 15px;
    gap: 10px;
  }

  .float-btn {
    font-size: 14px;
    padding: 10px 16px;
  }
}









/* Este bloque era la primera mitad del apano de esconder la cabecera:
   la dejaba transparente y sin sombra antes de rematarla con display:none.
   Con la barra ya visible y fija arriba, transparente NO sirve: el contenido
   le pasa por debajo y el menu se vuelve ilegible sobre las fotos. El fondo
   bueno esta mas abajo, en el bloque "CABECERA — DEVUELTA A LA VISTA".
   Se deja el hueco documentado en vez de borrarlo, porque el !important de
   aqui le ganaba al bloque de abajo y costo verlo. */




/* Esto reservaba 100px para una cabecera que estaba en display:none. Nunca
   llego a aplicarse porque un "html,body{padding:0}" posterior lo pisaba, asi
   que era codigo muerto que ademas confundia. Ahora la cabecera es sticky, que
   no saca el elemento del flujo: ocupa su sitio sola y no hay que compensar
   nada a mano. */


/* CABECERA — DEVUELTA A LA VISTA EL 2026-08-23.

   Aqui habia esto, y nada mas:
       .site-header { display: none !important; }

   O sea: el sitio NO TENIA cabecera. Estaba escrita en header.php, se enviaba
   en el HTML, y se tapaba con CSS. Consecuencias medidas en vivo:
     - Cero enlaces visibles en la parte de arriba. Toda la navegacion del
       sitio era el pie de pagina.
     - El enlace del logo a la portada (el enlace interno mas repetido de
       cualquier sitio, el que le dice a Google cual es la pagina principal)
       existia en el DOM pero ningun visitante lo veia ni lo podia pulsar.
     - Desde /privacy-policy/ o desde un 404, para volver al inicio habia que
       bajar hasta el pie.

   Por que sospecho que la escondieron en vez de arreglarla: la cabecera
   original era un bloque ALTO y centrado (logo de 96px + nombre + eslogan
   apilados, ~200px) que repetia palabra por palabra lo que ya dice el hero
   justo debajo. Molestaba, y taparla fue mas rapido que rehacerla. Quedo
   ademas un "body { padding-top:100px }" reservando sitio para algo invisible
   (no llegaba a aplicarse porque un "html,body{padding:0}" posterior lo
   pisaba, pero ahi estaba).

   Ahora es una barra fina en una sola linea: logo pequeno + nombre a la
   izquierda, menu a la derecha. Ya no compite con el hero. El eslogan se
   quita de aqui porque sigue estando en el hero y en el pie; repetirlo tres
   veces no ayuda ni al visitante ni a Google.

   Si algun dia quieres volver a esconderla, borra este bloque entero — pero
   entonces el sitio se queda otra vez sin navegacion. */
.site-header{
  display:block;
  position:sticky; top:0; z-index:50;
  background:rgba(18,19,21,.92);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header .header-inner{
  flex-direction:row; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  text-align:left; gap:12px 20px;
  padding:10px 24px;
}
.site-header .brand-logo{ width:44px; height:44px; flex:0 0 auto; }
.site-header .brand-logo img{ width:44px; height:auto; max-width:44px; max-height:44px; }
.site-header .brand-name{ font-size:1rem; margin-right:auto; }
/* El eslogan ya sale en el hero y en el pie: aqui sobra. */
.site-header .brand-slogan{ display:none; }

.toa-nav{ flex:0 0 auto; }
.toa-nav .toa-nav-lista{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px;
}
.toa-nav .toa-nav-lista a{
  color:var(--text); text-decoration:none;
  font-size:.95rem; font-weight:600; letter-spacing:.01em;
  padding:6px 2px; display:inline-block;
  border-bottom:2px solid transparent;
}
.toa-nav .toa-nav-lista a:hover,
.toa-nav .toa-nav-lista a:focus-visible{
  color:var(--gold); border-bottom-color:var(--gold);
}

/* En telefono el nombre completo ("The One Above Electrical") no cabe al lado
   de cuatro enlaces. Se deja el logo, que ya es el enlace a la portada, y el
   menu ocupa la fila. */
@media (max-width:600px){
  .site-header .header-inner{ padding:8px 16px; gap:8px 14px; }
  .site-header .brand-name{ display:none; }
  .toa-nav{ flex:1 1 100%; }
  .toa-nav .toa-nav-lista{ justify-content:space-between; gap:4px 10px; }
  .toa-nav .toa-nav-lista a{ font-size:.85rem; }
}

/* La cabecera es sticky, asi que al saltar a un ancla (#services) el titulo de
   la seccion quedaba TAPADO debajo de la barra. scroll-margin-top le dice al
   navegador que pare un poco antes. Sin esto el menu parece que "no funciona":
   salta, pero el encabezado no se ve. */
:target,
#services, #hero-gallery, #why, #contact, #work{
  scroll-margin-top:88px;
}
@media (max-width:600px){
  :target,
  #services, #hero-gallery, #why, #contact, #work{ scroll-margin-top:110px; }
}



body {
  background: #000; /* mantenemos fondo negro por coherencia del tema */
}

/* ESTO ROMPIA LA CABECERA FIJA. Arreglado el 2026-08-23.

   Estaba asi, y ademas el body de la linea 21 traia overflow-x:hidden:
       body { ... overflow-x:hidden }
       html, body { height:100%; margin:0; padding:0 }

   La combinacion hace algo que no es obvio: cuando pones overflow-x:hidden,
   CSS NO deja overflow-y en visible, lo calcula como auto. Con eso mas
   height:100%, el <body> deja de ser una caja que crece con su contenido y
   pasa a ser un contenedor de scroll propio de 900px de alto. Pero el que de
   verdad scrollea en la ventana sigue siendo el <html>. Medido en vivo:
   document.scrollingElement era HTML mientras body tenia overflow 'hidden auto'.

   position:sticky se pega al contenedor de scroll de su ancestro. La cabecera
   se estaba pegando al body, que nunca se mueve, asi que al bajar la pagina la
   barra se iba con el contenido: top=-965px con la pagina en 1800. Parecia que
   el sticky "no servia" cuando el problema estaba a 1000 lineas de distancia.

   Que se hizo:
     - height:100% fuera. No hacia falta: el contenido define el alto.
     - overflow-x:hidden se mueve del body al html. Ahi no rompe el sticky,
       porque el html ES el elemento que scrollea.
   Y ojo: ese overflow-x:hidden era una tirita para tapar el scroll horizontal.
   El desborde de verdad (181px, la rejilla de servicios con minmax(220px,1fr))
   se arreglo hoy en su sitio. Se deja la tirita solo como red por si un
   contenido futuro se pasa de ancho, no como el arreglo. */
html {
  overflow-x: hidden;
}
html, body {
  margin: 0;
  padding: 0;
}






.quote-bar {
  margin-top: 25px;
  font-style: italic;
  color: #ddd;
}


/* === HERO RESPONSIVE FINAL === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-size: cover;
  background-position: center right;
  background-repeat: no-repeat;
  background-attachment: scroll;
  color: #fff;
  overflow: hidden;
  padding: 100px 0;
}

/* Overlay degradado para legibilidad del texto */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 85%);
  z-index: 1;
}

/* Texto encima de la imagen */
.hero .container {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin-left: 8%;
  text-align: left;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}

.hero .lead {
  font-size: 1.1rem;
  color: #ddd;
  margin-bottom: 2rem;
}

/* Botones */
.hero .btn {
  background-color: #cda434;
  color: #000;
  padding: 12px 24px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.3s ease;
  margin-right: 12px;
}

.hero .btn.outline {
  background: transparent;
  color: #cda434;
  border: 1px solid #cda434;
}

.hero .btn:hover {
  background: #f1c75e;
}

/* Responsividad móvil */
@media (max-width: 1024px) {
  .hero {
    background-position: center center;
  }
}

@media (max-width: 768px) {
  .hero {
    min-height: 90vh;
    background-position: center top;
    padding: 80px 30px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero .container {
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  .hero {
    background-position: center top;
    background-size: cover;
    min-height: 85vh;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .hero .lead {
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .hero {
    background-position: 30% top; /* en lugar de center top */
  }
}

@media (max-width: 768px) {
  .hero {
    background-position: 70% center !important; /* mueve el foco hacia la derecha */
    background-size: cover;
  }
}

@media (max-width: 480px) {
  .hero {
    background-position: 75% center !important; /* aún más centrado en el técnico */
  }
}


/* ===================================================================
   Paginas interiores, 404 y migas de pan — 2026-08-23
   Estilos para page.php / 404.php / index.php, que antes no existian.
   Se apoyan en las variables que ya define el tema mas arriba
   (--gold, --muted, --border, --bg-elev) para que no desentonen.
   =================================================================== */

.toa-migas{font-size:.9rem;color:var(--muted);margin-bottom:18px}
.toa-migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.toa-migas li+li::before{content:"/";margin-right:8px;opacity:.5}
.toa-migas a{color:var(--gold);text-decoration:none}
.toa-migas a:hover{text-decoration:underline}

.toa-titulo{margin:0 0 18px;font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.15}

.toa-destacada{margin:0 0 24px}
.toa-destacada img{width:100%;height:auto;border-radius:18px;border:1px solid var(--border)}

/* Ancho de lectura comodo: entre 65 y 75 caracteres por linea. Un parrafo a
   1200px de ancho cansa la vista y aumenta el rebote. */
.toa-contenido{max-width:72ch;line-height:1.75}
.toa-contenido>*+*{margin-top:1.1em}
.toa-contenido h2{margin-top:1.8em;font-size:1.6rem}
.toa-contenido h3{margin-top:1.5em;font-size:1.25rem}
.toa-contenido ul,.toa-contenido ol{padding-left:1.4em}
.toa-contenido li+li{margin-top:.4em}
.toa-contenido a{color:var(--gold)}
.toa-contenido img{max-width:100%;height:auto;border-radius:14px}
.toa-contenido blockquote{border-left:3px solid var(--gold);padding-left:16px;color:var(--muted);font-style:italic}

/* Cierre de pagina interior: que nunca sea un callejon sin salida. */
.toa-cierre{margin-top:48px;max-width:72ch}
.toa-cierre h2{margin:0 0 .5rem;font-size:1.35rem}
.toa-cierre .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

.toa-404 .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.toa-404 a{color:var(--gold)}

.toa-paginado{margin-top:24px}

/* El logo y el nombre de la marca pasaron a ser enlaces a la portada
   (header.php, 2026-08-23). Que no se vean como enlaces azules subrayados. */
.site-header .brand-logo a,
.site-header .brand-name a{color:inherit;text-decoration:none;display:inline-block}
.site-header .brand-logo a{line-height:0}
.site-header .brand-name a:hover{color:var(--gold)}

/* Iconos SVG en linea de los botones flotantes (sustituyen a Font Awesome,
   2026-08-23). Heredan el color del boton con currentColor. */
.float-btn .toa-ic{width:16px;height:16px;margin-right:8px;vertical-align:-3px;flex:0 0 auto}