/* ════════════════════════════════════════════════════════════════
 * 📄 style.css  |  Estudio Entintado SpA
 * ════════════════════════════════════════════════════════════════
 * DESCRIPCIÓN: Hoja de estilos principal del sitio web público.
 *   Cubre todos los componentes desde la pantalla de entrada
 *   hasta el footer, CMS editor-mode y PWA banner.
 *
 * ESTRUCTURA DE SECCIONES (en orden de aparición):
 *   1. Variables & Reset            → Paleta, tipografía, box-sizing
 *   2. Pantalla de Entrada          → .entrada-caja, videos de fondo
 *   3. Skeleton Loaders             → .skeleton, .skel-ind, .skel-card
 *   4. Barra Nav                    → #nav, .nav-tab, .mob-menu
 *   5. Hero Pyme & Hogar            → .hero-*, video fondo
 *   6. Servicios Sticky             → .srv-wrap, .srv-panel (scroll vertical)
 *   7. Proyectos Carrusel           → .proy-track, .proy-card (drag)
 *   8. Hotspots                     → .hs-scene, .hotspot, .hs-card
 *   9. Productos Tienda             → .prod-col, .prod-card (parallax)
 *  10. Sección Nosotros             → .sec-nosotros
 *  11. Sección Instagram            → .sec-ig (Elfsight widget)
 *  12. Planes Web                   → .planes-grid, .plan-card
 *  13. Footer                       → .footer-*
 *  14. Modal Consulta Hogar        → .modal-consulta, .mc-*
 *  15. Carrito de Consulta          → .cart-*, .cart-fab
 *  16. Toast Notifications          → .toast
 *  17. Admin FAB & Quick Panel      → .admin-fab, .admin-quick
 *  18. Modo Editor CMS              → body.editor-mode (bordes naranja)
 *  19. PWA Install Banner           → .pwa-banner
 *  20. Media Queries Responsive     → Mobile first breakpoints
 *
 * COMPATIBILIDAD: Chrome 100+, Safari 14+ (con -webkit- prefixes),
 *   Firefox 100+, Edge 100+. IE: no soportado.
 *
 * AUTOR: Antigravity AI  |  VERSIÓN: 3.0.0  |  2026-03-26
 * ════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   VARIABLES & RESET
   ─────────────────────────────────────────
   Paleta de colores del sitio:
   --n: negro puro (fondo principal)
   --ng: naranja corporativo (#ea5b0c)
   --ngd: naranja oscuro para hover
   --g1 a --g4: grises progresivos para capas
   --gt: gris texto secundario
   --gb: gris para bordes
══════════════════════════════════════════ */
:root{
  --n:#000;--ng:#ea5b0c;--ngd:#c24a08;
  --b:#fff;--g1:#0a0a0a;--g2:#111;--g3:#1a1a1a;
  --g4:#2a2a2a;--gt:#666;--gb:#1e1e1e;
  --sans:'Poppins',sans-serif;
}
/* Reset global: elimina márgenes por defecto y
   usa border-box para que padding no sume al ancho */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent; -ms-overflow-style: none; scrollbar-width: none;}
::-webkit-scrollbar { display: none; }
html{overflow-x:hidden;scroll-behavior:auto}
body{font-family:var(--sans);background:var(--n);color:var(--b);overflow-x:hidden}

/* ══════════════════════════════════════════
   CURSOR PERSONALIZADO
   ─────────────────────────────────────────
   Reemplaza el cursor del sistema con dos
   elementos: un punto naranja (#cur) y un
   anillo que sigue con retardo (#cur-r).
   En dispositivos táctiles se ocultan.
══════════════════════════════════════════ */
#cur{position:fixed;width:8px;height:8px;background:var(--ng);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .3s,height .3s}
#cur-r{position:fixed;width:32px;height:32px;border:1px solid rgba(234,91,12,.4);border-radius:50%;pointer-events:none;z-index:9998;transform:translate(-50%,-50%);transition:width .3s,height .3s,border-color .3s}
/* Al pasar sobre links/botones, el punto se achica
   y el anillo crece creando efecto de "foco" */
#cur.big{width:5px;height:5px}
#cur-r.big{width:48px;height:48px;border-color:var(--ng)}
/* En móviles/tablets sin hover, ocultar el cursor custom */
@media(hover:none){#cur,#cur-r{display:none}}

/* ══════════════════════════════════════════
   PANTALLA DE ENTRADA (LANDING SELECTOR)
   ─────────────────────────────────────────
   Pantalla fija a pantalla completa que se
   muestra al entrar al sitio. Permite elegir
   entre modo "Empresa" o "Hogar". Al elegir,
   se le agrega la clase .oculta que la desvanece
   con transition de opacity.
   z-index:800 para estar sobre todo excepto modales.
══════════════════════════════════════════ */
#entrada{
  position:fixed;inset:0;z-index:800;
  background:#000;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  overflow-y:auto;overflow-x:hidden;
  transition:opacity .7s ease,visibility .7s ease;
}
#entrada.oculta{opacity:0;visibility:hidden;pointer-events:none}
.entrada-vid{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease;
  filter:brightness(.32) saturate(.5);
}
.entrada-vid.activo{opacity:1}
.entrada-overlay{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 30%,rgba(0,0,0,.8) 100%);
}
.entrada-logo{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  margin-bottom:52px;
  transition:opacity .6s,transform .6s;
}
.entrada-logo.watermark{
  position:absolute;top:24px;left:50%;
  transform:translateX(-50%);
  margin-bottom:0;opacity:.15;pointer-events:none;
  z-index:3;
}
.entrada-logo img{height:48px;width:auto}
.entrada-tag{
  font-size:10px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ng);
  opacity:0;animation:fIn .8s ease .4s forwards;
}
.entrada-cajas{
  position:relative;z-index:2;
  display:flex;gap:16px;
  width:100%;max-width:840px;padding:0 24px;
}
.entrada-caja{
  flex:1;border:1px solid rgba(255,255,255,.1);border-radius:14px;
  padding:32px 28px;cursor:pointer;position:relative;overflow:hidden;
  transition:border-color .4s,transform .35s,flex .5s cubic-bezier(.16,1,.3,1);
  background:rgba(8,8,8,.7);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}
.ec-icon{font-size:26px;margin-bottom:14px;display:block;transition:transform .4s}
.ec-titulo{font-size:24px;font-weight:900;letter-spacing:-.02em;margin-bottom:0;transition:color .3s}
.ec-pregunta{
  font-size:12px;font-weight:700;color:rgba(255,255,255,.7);
  max-height:0;overflow:hidden;opacity:0;
  transition:max-height .4s ease,opacity .4s .1s,margin .4s;
}
.ec-lista{
  list-style:none;
  max-height:0;overflow:hidden;
  transition:max-height .5s ease,opacity .4s .15s;opacity:0;
}
.ec-lista li{
  font-size:11px;color:rgba(255,255,255,.4);
  padding:5px 0;border-bottom:1px solid rgba(255,255,255,.05);
  display:flex;align-items:center;gap:8px;
}
.ec-lista li::before{content:'→';color:var(--ng);font-size:9px;flex-shrink:0}
.ec-btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--ng);color:#fff;
  font-family:var(--sans);font-size:12px;font-weight:700;
  border:none;border-radius:99px;padding:10px 22px;cursor:pointer;
  opacity:0;transform:translateY(6px);
  transition:opacity .35s .15s,transform .35s .15s,background .2s;
  margin-top:0;
}
.ec-btn:hover{background:var(--ngd)}

/* ── SKELETON LOADERS (Performance) ── */
.skeleton{background:var(--g3);position:relative;overflow:hidden;border-radius:8px;}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);animation:skelLoad 1.5s infinite;}
@keyframes skelLoad{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skel-ind{height:40px;width:100%;margin-bottom:8px;border-radius:8px}
.skel-card{height:300px;width:100%;border-radius:14px;}

/* ── AUDIT-FIX: HOVER PROTEGIDO ── 
   Evita que en dispositivos touch el "tap" active la animación
   CSS antes del onclick, impidiendo recortes visuales o scrolls raros */
@media (hover: hover) {
  .entrada-caja:hover,.entrada-caja.hover{
    border-color:var(--ng);flex:1.5;transform:translateY(-3px);
  }
  .entrada-caja:hover .ec-icon{transform:scale(1.1)}
  .entrada-caja:hover .ec-titulo{color:var(--ng)}
  .entrada-caja:hover .ec-pregunta,.entrada-caja.hover .ec-pregunta{
    max-height:50px;opacity:1;margin-top:16px;
  }
  .entrada-caja:hover .ec-lista,.entrada-caja.hover .ec-lista{
    max-height:280px;opacity:1;
  }
  .entrada-caja:hover .ec-btn,.entrada-caja.hover .ec-btn{
    opacity:1;transform:translateY(0);margin-top:18px;
  }
}

/* ══════════════════════════════════════════
   BARRA DE NAVEGACIÓN (NAV)
   ─────────────────────────────────────────
   Barra fija superior. Empieza invisible
   (opacity:0) y aparece al elegir un modo.
   La clase .solid le agrega fondo oscuro
   con blur al hacer scroll (>60px).
   Contiene: logo, tabs Empresa/Hogar,
   links internos, WhatsApp y carrito.
══════════════════════════════════════════ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:0 40px;height:64px;
  display:flex;align-items:center;
  transition:background .5s,border-color .5s,opacity .4s,visibility .4s;
  border-bottom:1px solid transparent;
  opacity:0;visibility:hidden;
}
#nav.visible{opacity:1;visibility:visible}
#nav.solid{background:rgba(0,0,0,.92);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-color:var(--gb)}
.nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0;cursor:pointer}
.nav-logo img{height:28px;width:auto;transition:opacity .3s}
.nav-logo:hover img{opacity:.65}
.nav-tabs{
  display:flex;margin-left:24px;gap:2px;
  background:rgba(255,255,255,.05);border:1px solid var(--gb);
  border-radius:99px;padding:3px;
}
.nav-tab{
  font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.38);padding:6px 16px;border-radius:99px;
  cursor:pointer;border:none;background:transparent;
  font-family:var(--sans);transition:all .25s;
}
.nav-tab.active{background:var(--ng);color:#fff}
.nav-tab:not(.active):hover{color:#fff}
.nav-links{display:flex;margin-left:auto;align-items:center;gap:2px}
.n-link{color:rgba(255,255,255,.42);font-size:11px;font-weight:600;text-decoration:none;padding:7px 11px;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}
.n-link:hover{color:#fff}
.n-wa{margin-left:8px;background:var(--ng);color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;border:none;border-radius:99px;padding:8px 18px;cursor:pointer;text-decoration:none;display:flex;align-items:center;gap:6px;transition:background .2s,transform .15s}
.n-wa:hover{background:var(--ngd);transform:scale(1.04)}
.n-cart{margin-left:8px;width:36px;height:36px;border-radius:50%;background:var(--g3);border:1px solid var(--g4);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;position:relative;transition:border-color .2s}
.n-cart:hover{border-color:var(--ng)}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--ng);color:#fff;font-size:9px;font-weight:800;width:18px;height:18px;border-radius:50%;display:none;align-items:center;justify-content:center}
.cart-badge.on{display:flex}
.n-ham{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:8px;margin-left:auto}
.n-ham span{width:20px;height:2px;background:#fff;transition:all .3s}
.mob-menu{display:none;position:fixed;top:64px;left:0;right:0;z-index:498;background:rgba(0,0,0,.97);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:16px 24px 28px;border-bottom:1px solid #1e1e1e}
.mob-menu.on{display:block}
.mob-menu a{display:block;padding:13px 0;color:#fff;text-decoration:none;font-size:15px;font-weight:600;border-bottom:1px solid #1a1a1a}
.mob-wa{display:flex!important;align-items:center;justify-content:center;gap:8px;margin-top:14px;background:var(--ng);border-radius:10px;padding:13px;font-weight:700!important;border:none!important}

/* ── AUDIT-FIX: LOGIC TOGGLES UI ── */
body[data-modo="hogar"] #nl-proy, body[data-modo="hogar"] #ml-proy { display: none !important; }
body[data-modo="pyme"] #nl-prod, body[data-modo="pyme"] #ml-prod { display: none !important; }

/* ══════════════════════════════════════════
   MODOS (Empresa / Hogar)
   ─────────────────────────────────────────
   Cada modo es un contenedor oculto que se
   activa con la clase .activo. Solo uno puede
   estar visible a la vez. La animación modoIn
   hace un fade-in suave de 0.6s.
══════════════════════════════════════════ */
#modo-pyme,#modo-hogar{display:none;opacity:0;transition:opacity .6s ease}
#modo-pyme.activo,#modo-hogar.activo{display:block;animation:modoIn .6s ease forwards}
@keyframes modoIn{from{opacity:0}to{opacity:1}}

/* ══════════════════════════════════════════
   HERO DE CADA MODO
   ─────────────────────────────────────────
   Sección de apertura a pantalla completa con
   video de fondo oscurecido, título grande
   animado (slideUp), subtítulo, botones CTA,
   contador de proyectos y scroll indicator.
══════════════════════════════════════════ */
.modo-hero{position:relative;height:100vh;min-height:660px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:0 48px 84px}
.hero-vid-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.28) saturate(.5);z-index:0}
.hero-layers{position:absolute;inset:0;z-index:1}
.hl-bg{position:absolute;inset:-20%;background:radial-gradient(ellipse 70% 60% at 75% 35%,rgba(234,91,12,.1) 0%,transparent 65%),radial-gradient(ellipse 40% 50% at 15% 75%,rgba(234,91,12,.05) 0%,transparent 60%),transparent;will-change:transform}
.hl-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.05) 1px,transparent 1px);background-size:40px 40px;will-change:transform}
.hero-img{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(0,0,0,.15) 0%,rgba(0,0,0,.78) 100%)}
.hero-badge{position:relative;z-index:3;display:inline-flex;align-items:center;gap:10px;color:var(--ng);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;margin-bottom:18px;opacity:0;animation:fIn .8s ease .2s forwards}
.hero-badge::before{content:'';width:24px;height:1px;background:var(--ng)}
.hero-h1{position:relative;z-index:3;font-size:clamp(60px,10.5vw,144px);font-weight:900;line-height:.9;letter-spacing:-.04em;margin-bottom:28px;will-change:transform;text-transform:uppercase}
.hero-h1 .line{overflow:hidden;display:block}
.hero-h1 .line span{display:block;transform:translateY(105%);animation:sUp .9s cubic-bezier(.16,1,.3,1) forwards}
.hero-h1 .line:nth-child(1) span{animation-delay:.15s}
.hero-h1 .line:nth-child(2) span{animation-delay:.28s;color:var(--ng)}
.hero-sub{position:relative;z-index:3;font-size:14px;color:rgba(255,255,255,.42);max-width:360px;margin-bottom:36px;line-height:1.8;opacity:0;animation:fIn .8s ease .6s forwards}
.hero-btns{position:relative;z-index:3;display:flex;gap:12px;flex-wrap:wrap;opacity:0;animation:fIn .8s ease .8s forwards}
.hero-counter{position:absolute;right:48px;bottom:84px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:5px;opacity:0;animation:fIn 1s ease 1s forwards}
.hc-num{font-size:44px;color:var(--ng);font-weight:900;line-height:1}
.hc-label{font-size:10px;color:rgba(255,255,255,.28);letter-spacing:.12em;text-transform:uppercase}
.hero-scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;display:flex;flex-direction:column;align-items:center;gap:8px;color:rgba(255,255,255,.22);font-size:9px;letter-spacing:.18em;text-transform:uppercase;opacity:0;animation:fIn 1s ease 1.2s forwards}
.hs-line{width:1px;height:34px;background:linear-gradient(to bottom,transparent,var(--ng));animation:pulse 2s ease infinite}
@keyframes sUp{to{transform:translateY(0)}}
@keyframes fIn{to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ══════════════════════════════════════════
   BOTONES
══════════════════════════════════════════ */
.btn-ng{background:var(--ng);color:#fff;font-family:var(--sans);font-size:13px;font-weight:700;border:none;border-radius:99px;padding:13px 26px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:background .2s,transform .15s}
.btn-ng:hover{background:var(--ngd);transform:scale(1.04)}
.btn-gw{background:transparent;color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:13px 22px;cursor:pointer;text-decoration:none;transition:border-color .2s,background .2s;display:inline-flex;align-items:center;gap:8px}
.btn-gw:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.04)}

/* ══════════════════════════════════════════
   SECCIÓN BASE — Etiquetas y títulos reutilizables
   ─────────────────────────────────────────
   .sec-lbl: etiqueta naranja en mayúsculas con
             línea decorativa (usado en todas las secciones)
   .sec-h2:  título principal responsive (clamp)
   .sec-p:   párrafo descriptivo en gris
══════════════════════════════════════════ */
.sec-lbl{font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ng);display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sec-lbl::after{content:'';width:36px;height:1px;background:var(--ng);opacity:.4}
.sec-h2{font-size:clamp(32px,4.8vw,66px);font-weight:800;line-height:1;letter-spacing:-.025em;margin-bottom:12px}
.sec-h2 em{color:var(--ng);font-style:italic}
.sec-p{font-size:14px;color:var(--gt);max-width:420px;line-height:1.8}

/* ══════════════════════════════════════════
   SCROLL REVEAL — Animación al entrar en viewport
   ─────────────────────────────────────────
   Los elementos con clase .reveal empiezan
   invisibles y desplazados 26px abajo. Al
   entrar en el viewport (IntersectionObserver
   en JS), reciben la clase .vis que los trae
   a su posición con transición suave.
   Las clases reveal-d1..d4 agregan retardo
   escalonado para efecto cascada.
══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-d1{transition-delay:.1s}.reveal-d2{transition-delay:.2s}.reveal-d3{transition-delay:.3s}.reveal-d4{transition-delay:.4s}

/* ══════════════════════════════════════════
   SERVICIOS STICKY (Panel split-screen)
   ─────────────────────────────────────────
   Layout a dos columnas (45%/55%) con posición
   sticky. Al hacer scroll en la zona de 500vh,
   el panel izquierdo muestra indicadores y el
   derecho cambia entre paneles de servicio.
   El scroll controla qué panel se muestra.
══════════════════════════════════════════ */
.servicios-wrap{position:relative}
.srv-scroll-space{transition: height 0.3s;}
.srv-sticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:45% 55%;overflow:hidden}
@media(max-width:1024px){
  .srv-scroll-space{height:auto !important;min-height:0 !important}
  .srv-sticky{position:relative;height:auto;grid-template-columns:1fr;grid-template-rows:auto auto}
  .srv-left{padding:40px 24px 24px}
  .srv-right{height:70vw;min-height:320px;position:relative}
}
.srv-left{padding:64px 36px;display:flex;flex-direction:column;justify-content:center;background:var(--g1);border-right:1px solid var(--gb)}
.srv-left .sec-h2{margin-bottom:16px}
.srv-left>p{font-size:13px;color:var(--gt);line-height:1.8;margin-bottom:28px}
.srv-cat-lbl{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.18);margin-bottom:6px;padding:0 2px}
.srv-indicators{display:flex;flex-direction:column;gap:3px;margin-bottom:14px}
.srv-ind{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:8px;border-left:2px solid transparent;transition:all .3s;cursor:pointer}
.srv-ind:hover,.srv-ind.active{background:rgba(234,91,12,.07);border-left-color:var(--ng)}
.srv-ind-dot{width:5px;height:5px;border-radius:50%;background:var(--g4);transition:background .3s;flex-shrink:0}
.srv-ind.active .srv-ind-dot{background:var(--ng)}
.srv-ind-txt{font-size:12px;font-weight:600;color:rgba(255,255,255,.32);transition:color .3s}
.srv-ind.active .srv-ind-txt{color:#fff}
.srv-ind:hover .srv-ind-txt{color:rgba(255,255,255,.65)}
.srv-right{position:relative;overflow:hidden;background:var(--g2)}
.srv-panel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:48px;opacity:0;transform:translateY(18px);transition:opacity .42s,transform .42s;pointer-events:none}
.srv-panel.active{opacity:1;transform:translateY(0);pointer-events:auto}
.sp-img{position:absolute;inset:0;background:var(--g3);transition:transform 8s ease;background-size:cover;background-position:center}
.srv-panel.active .sp-img{transform:scale(1.04)}
.sp-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.94) 0%,rgba(0,0,0,.12) 65%)}
.sp-content{position:relative;z-index:2}
.sp-ico{font-size:28px;margin-bottom:12px;display:block}
.sp-nombre{font-size:28px;font-weight:900;margin-bottom:8px;line-height:1;letter-spacing:-.02em}
.sp-desc{font-size:13px;color:rgba(255,255,255,.52);line-height:1.75;margin-bottom:16px;max-width:340px}
.sp-precio{font-size:20px;font-weight:900;color:var(--ng);margin-bottom:18px}
.sp-btn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;font-family:var(--sans);font-size:12px;font-weight:700;border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:10px 20px;cursor:pointer;transition:all .2s;text-decoration:none}
.sp-btn:hover{background:var(--ng);border-color:var(--ng)}
.sp-placeholder-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(234,91,12,.08);border:1px dashed rgba(234,91,12,.28);border-radius:6px;padding:6px 12px;font-size:10px;color:rgba(234,91,12,.55);font-weight:600;margin-top:10px}

/* ══════════════════════════════════════════
   CARRUSEL PROYECTOS — Galería horizontal
   ─────────────────────────────────────────
   Track horizontal con tarjetas de proyectos
   que se desplaza con drag o botones. Cada
   tarjeta tiene imagen, overlay con categoría,
   nombre y ubicación. Dots de navegación abajo.
══════════════════════════════════════════ */
.sec-proyectos{padding:60px 0;overflow:hidden;background:var(--g1);border-top:1px solid rgba(255,255,255,0.03);border-bottom:1px solid rgba(255,255,255,0.03)}
.proy-header{padding:0 48px;margin-bottom:52px}
.proy-track-wrap{overflow:hidden;cursor:grab;-webkit-user-select:none;user-select:none;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%)}
.proy-track-wrap:active{cursor:grabbing}
.proy-track{display:flex;gap:20px;padding:0 48px;width:max-content;transition:transform .1s linear;will-change:transform}
.proy-card{flex:0 0 420px;height:560px;border-radius:14px;overflow:hidden;position:relative;background:var(--g3);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.proy-card:hover{transform:scale(1.02)}
.proy-card img{width:100%;height:100%;object-fit:cover;transition:transform .8s;pointer-events:none}
.proy-card:hover img{transform:scale(1.06)}
.proy-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.4) 50%,transparent 100%);padding:28px;display:flex;flex-direction:column;justify-content:flex-end}
.proy-cat{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ng);margin-bottom:6px}
.proy-nom{font-size:20px;font-weight:800;line-height:1.2;margin-bottom:4px}
.proy-lug{font-size:11px;color:rgba(255,255,255,.32)}
.proy-ph{flex:0 0 420px;height:560px;border-radius:14px;background:var(--g3);border:1px dashed var(--g4);display:flex;align-items:center;justify-content:center;padding:20px}
.proy-ph p{font-size:12px;color:var(--gt);text-align:center}
.proy-controls{padding:22px 48px 0;display:flex;justify-content:space-between;align-items:center}
.proy-dots{display:flex;gap:6px}
.proy-dot{width:6px;height:6px;border-radius:50%;background:var(--g4);transition:all .3s;cursor:pointer}
.proy-dot.on{width:22px;border-radius:3px;background:var(--ng)}
.proy-btns{display:flex;gap:8px}
.proy-btn{width:40px;height:40px;border-radius:50%;background:var(--g3);border:1px solid var(--g4);color:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.proy-btn:hover{background:var(--ng);border-color:var(--ng)}

/* PROYECTOS SLIDER INTERNO */
.proy-slider { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
.proy-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s; pointer-events: none; }
.proy-slider img.active { opacity: 1; z-index: 1; }
.proy-card:hover .proy-slider img.active { transform: scale(1.06); }

/* LIGHTBOX PORTAFOLIO */
.proy-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.proy-lightbox.open { opacity: 1; pointer-events: auto; }
.pl-bg { position: absolute; inset: 0; background: rgba(10,10,12,0.95); backdrop-filter: blur(10px); }
.pl-close { position: absolute; top: 30px; right: 30px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.1); color: #fff; border: none; font-size: 20px; cursor: pointer; z-index: 2; transition: 0.2s; }
.pl-close:hover { background: var(--ng); }
.pl-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; border-radius: 50%; background: rgba(255,255,255,0.1); border: none; color: #fff; font-size: 20px; cursor: pointer; z-index: 2; transition: 0.2s; }
.pl-nav:hover { background: var(--ng); }
.pl-prev { left: 30px; }
.pl-next { right: 30px; }
.pl-content { position: relative; z-index: 1; width: 90%; max-width: 1200px; height: 80vh; display: flex; gap: 40px; align-items: stretch; }
.pl-slider { flex: 1; position: relative; border-radius: 14px; overflow: hidden; background: var(--g3); }
.pl-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.4s; }
.pl-slider img.active { opacity: 1; }
.pl-info { width: 320px; display: flex; flex-direction: column; justify-content: center; }
.pl-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ng); margin-bottom: 10px; }
.pl-nom { font-size: 32px; font-weight: 800; line-height: 1.1; margin-bottom: 12px; }
.pl-lug { font-size: 14px; color: var(--gt); }
@media(max-width: 900px) {
  .pl-content { flex-direction: column; height: auto; gap: 20px; }
  .pl-slider { height: 50vh; }
  .pl-info { width: 100%; text-align: center; }
  .pl-nav { top: 30%; width: 40px; height: 40px; font-size: 16px; }
  .pl-prev { left: 10px; }
  .pl-next { right: 10px; }
}

/* ══════════════════════════════════════════
   PRODUCTOS — Grid masonry con parallax
   ─────────────────────────────────────────
   Grid de 3 columnas con desplazamiento
   vertical diferente por columna (parallax
   por JS). La 2da columna baja 80px, la 3ra
   sube 40px para efecto masonry. Cada tarjeta
   muestra info al hover con overlay animado.
══════════════════════════════════════════ */
.sec-productos{padding:80px 48px;background:var(--n);position:relative;overflow:hidden}
.prod-header{display:grid;grid-template-columns:1fr 1fr;align-items:flex-end;margin-bottom:64px;gap:40px}
.prod-header-right p{font-size:13px;color:var(--gt);line-height:1.7;text-align:right}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.prod-col{display:flex;flex-direction:column;gap:20px;will-change:transform}
.prod-col:nth-child(2){margin-top:80px}
.prod-col:nth-child(3){margin-top:-40px}
.prod-card{position:relative;border-radius:14px;overflow:hidden;background:var(--g3);cursor:pointer}
.prod-card img{width:100%;display:block;object-fit:cover;transition:transform .7s cubic-bezier(.16,1,.3,1)}
.prod-card:hover img{transform:scale(1.08)}
.prod-hover{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.97) 0%,rgba(0,0,0,.2) 50%,transparent 70%);opacity:0;transition:opacity .4s;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.prod-card:hover .prod-hover,.prod-card.tap .prod-hover{opacity:1}
.ph-cat{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ng);margin-bottom:5px}
.ph-nom{font-size:17px;font-weight:800;margin-bottom:4px;line-height:1.2}
.ph-prec{font-size:22px;font-weight:900;color:var(--ng);margin-bottom:8px}
.ph-desc{font-size:11px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:12px}
.ph-add{background:var(--ng);color:#fff;border:none;font-family:var(--sans);font-size:11px;font-weight:700;border-radius:6px;padding:9px 16px;cursor:pointer;width:fit-content;transition:background .2s}
.ph-add:hover{background:var(--ngd)}
.prod-ph{border-radius:14px;background:var(--g3);border:1px dashed var(--g4);display:flex;align-items:center;justify-content:center;padding:60px 20px;text-align:center}
.prod-ph p{font-size:11px;color:var(--gt)}

/* ══════════════════════════════════════════
   HOTSPOTS — Tienda visual interactiva
   ─────────────────────────────────────────
   Imagen de escena con puntos interactivos
   (hotspots) pulsantes. Al tocar un hotspot
   se muestra una tarjeta flotante con info
   del producto y botón de agregar al carrito.
══════════════════════════════════════════ */
.sec-hotspots{padding:60px 48px;background:var(--g1);border-top:1px solid rgba(255,255,255,0.03)}
.hs-header{margin-bottom:48px}
.hs-scene{position:relative;border-radius:18px;overflow:hidden;background:var(--g2);aspect-ratio:16/9;max-height:560px;-webkit-mask-image:linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%);mask-image:linear-gradient(to right, transparent 0%, #000 2%, #000 98%, transparent 100%)}
.hs-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hs-bg img{width:100%;height:100%;object-fit:cover;display:block}
.hs-placeholder{font-size:13px;color:var(--gt);display:flex;flex-direction:column;align-items:center;gap:12px}
.hotspot{position:absolute;width:44px;height:44px;transform:translate(-50%,-50%);background:transparent;border:none;cursor:pointer;z-index:10;padding:0}
.hs-dot{position:absolute;inset:50%;transform:translate(-50%,-50%);width:14px;height:14px;background:var(--ng);border-radius:50%;border:2px solid #fff;z-index:2;transition:transform .2s}
.hotspot:hover .hs-dot{transform:translate(-50%,-50%) scale(1.25)}
.hs-ring{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(234,91,12,.5);animation:hsRing 2s ease infinite}
.hs-ring2{position:absolute;inset:-6px;border-radius:50%;border:1px solid rgba(234,91,12,.25);animation:hsRing 2s ease .6s infinite}
@keyframes hsRing{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.8);opacity:0}}
.hs-card{position:absolute;z-index:20;background:rgba(10,10,10,.97);border:1px solid var(--gb);border-radius:14px;padding:20px;width:240px;opacity:0;pointer-events:none;transform:translateY(8px) scale(.97);transition:opacity .25s,transform .25s}
.hs-card.on{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.hs-card-x{position:absolute;top:10px;right:10px;background:var(--g4);border:none;color:rgba(255,255,255,.5);width:24px;height:24px;border-radius:50%;cursor:pointer;font-size:11px}

/* TRACK DE ESCENAS MÚLTIPLES (Scroll Horizontal) */
.hs-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* AUDIT-V3: -webkit-overflow-scrolling eliminado (deprecated en todos los browsers modernos) */
  gap: 20px;
  width: 100%;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.hs-track::-webkit-scrollbar { display: none; }
.proy-track::-webkit-scrollbar { display: none; }
.hs-scene { flex: 0 0 100%; scroll-snap-align: center; }
.hsc-cat{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ng);margin-bottom:6px}
.hsc-nom{font-size:16px;font-weight:800;margin-bottom:4px;line-height:1.2}
.hsc-prec{font-size:18px;font-weight:900;color:var(--ng);margin-bottom:8px}
.hsc-desc{font-size:11px;color:rgba(255,255,255,.5);line-height:1.6;margin-bottom:14px}
.hsc-cta{background:var(--ng);color:#fff;border:none;font-family:var(--sans);font-size:11px;font-weight:700;border-radius:6px;padding:9px 14px;cursor:pointer;width:100%;transition:background .2s}
.hsc-cta:hover{background:var(--ngd)}

/* AUDIT-V7: SHOWROOM 2.0 ADVANCED POPUP */
.hs-popup-adv {
    position: fixed; inset: 0; z-index: 2000;
    display: none; align-items: center; justify-content: center;
    padding: 24px;
}
.hs-popup-adv.on { display: flex; }
.hs-p-bg { position: absolute; inset: 0; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); }
.hs-p-box {
    position: relative; z-index: 1; background: var(--g2);
    border: 1px solid var(--gb); border-radius: 20px;
    width: 100%; max-width: 800px; display: grid; grid-template-columns: 1fr 1fr;
    overflow: hidden; box-shadow: 0 32px 64px rgba(0,0,0,0.5);
    animation: popupIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes popupIn { from { transform: scale(0.95) translateY(20px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.hs-p-img { width: 100%; height: 100%; object-fit: cover; background: var(--g3); }
.hs-p-info { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.hs-p-close { position: absolute; top: 20px; right: 20px; background: rgba(255,255,255,0.1); border: none; color: #fff; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; }
.hs-p-cat { color: var(--ng); font-size: 11px; font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.hs-p-nom { font-size: 32px; font-weight: 800; margin-bottom: 12px; line-height: 1; }
.hs-p-desc { font-size: 14px; color: var(--gt); line-height: 1.6; margin-bottom: 24px; }
.hs-p-btns { display: flex; gap: 12px; }
@media (max-width: 768px) {
    .hs-p-box { grid-template-columns: 1fr; max-height: 90vh; overflow-y: auto; }
    .hs-p-img { height: 280px; }
    .hs-p-info { padding: 24px; }
}

/* ══════════════════════════════════════════
   NOSOTROS — Misión, Visión y Valores
   ─────────────────────────────────────────
   Grid de 3 columnas para Misión/Visión/Compromiso
   con números decorativos grandes semi-transparentes.
   Abajo, grid de 4 valores con iconos.
   Línea decorativa diagonal sutil en el fondo.
══════════════════════════════════════════ */
.sec-nosotros{padding:80px 48px;background:var(--n);position:relative;overflow:hidden}
.sec-nosotros::before{content:'';position:absolute;top:0;right:20%;width:1px;height:100%;background:rgba(234,91,12,.07);transform:rotate(12deg);transform-origin:top}
.mvv-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:64px}
.mvv-col{padding:40px;border-left:1px solid var(--gb);position:relative}
.mvv-col:first-child{border-left:none}
.mvv-col::after{content:'';position:absolute;bottom:0;left:40px;right:40px;height:1px;background:var(--gb)}
.mvv-num{font-size:72px;font-weight:900;color:rgba(234,91,12,.07);line-height:1;margin-bottom:18px;letter-spacing:-.05em}
.mvv-lbl{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ng);margin-bottom:12px}
.mvv-txt{font-size:14px;color:rgba(255,255,255,.48);line-height:1.8}
.valores-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.val-item{padding:40px;border-left:1px solid var(--gb)}
.val-item:first-child{border-left:none}
.val-ico{font-size:26px;margin-bottom:14px;display:block}
.val-nom{font-size:14px;font-weight:700;margin-bottom:6px}
.val-desc{font-size:12px;color:var(--gt);line-height:1.7}

/* ══════════════════════════════════════════
   INSTAGRAM — Feed dinámico
   ─────────────────────────────────────────
   Grid de 3x2 (6 fotos) que se carga desde
   la API de Instagram con token configurado
   en Firebase. Cada celda tiene overlay
   naranja al hover.
══════════════════════════════════════════ */
.sec-ig{background:var(--g1);padding:80px 48px}
.ig-grid{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:12px;overflow:hidden}
.ig-cell{aspect-ratio:1;overflow:hidden;cursor:pointer;background:var(--g3);position:relative}
.ig-cell img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ig-cell:hover img{transform:scale(1.08)}
.ig-cell-ov{position:absolute;inset:0;background:rgba(234,91,12,.55);opacity:0;transition:opacity .3s;display:flex;align-items:center;justify-content:center;font-size:26px}
.ig-cell:hover .ig-cell-ov{opacity:1}
.ig-ph{aspect-ratio:1;background:var(--g3);border:1px solid var(--gb)}
.ig-foot{margin-top:22px;display:flex;justify-content:center}
.ig-lnk{display:inline-flex;align-items:center;gap:8px;color:var(--ng);font-size:13px;font-weight:700;text-decoration:none;letter-spacing:.04em;transition:opacity .2s}
.ig-lnk:hover{opacity:.65}
.ig-solo-btn{padding:72px 48px;background:var(--g1);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ig-solo-btn p{font-size:14px;color:var(--gt);max-width:300px;line-height:1.7}

/* ══════════════════════════════════════════
   PLANES WEB — Sección resumen
   ─────────────────────────────────────────
   Grid 50/50 con texto izquierdo y lista
   de 4 planes a la derecha. Cada fila de
   plan tiene hover que desplaza a la derecha
   y muestra flecha naranja. Enlaza a planes.html.
══════════════════════════════════════════ */
.sec-planes{padding:80px 48px;background:var(--g1)}
.planes-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.planes-list{display:flex;flex-direction:column;gap:0;margin-top:28px}
.plan-row{display:flex;align-items:center;gap:20px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,0.08);transition:padding-left .3s, background .3s;cursor:pointer;text-decoration:none;color:#fff}
.plan-row:first-child{border-top:1px solid rgba(255,255,255,0.08)}
.plan-row:hover{padding-left:16px; background:rgba(234,91,12,.03)}
.plan-row:hover .pr-num{color:var(--ng); transform:scale(1.1)}
.plan-row:hover .pr-arrow{transform:translateX(8px);opacity:1}
.pr-num{font-size:32px;font-weight:900;color:rgba(255,255,255,.15);transition:all .3s;line-height:1;min-width:48px}
.pr-info{flex:1}
.pr-name{font-size:18px;font-weight:900;margin-bottom:6px;letter-spacing:-0.01em}
.pr-desc-gancho{font-size:14px;color:rgba(255,255,255,.6);font-weight:500;transition:color .3s}
.plan-row:hover .pr-desc-gancho{color:#fff}
.pr-price{font-size:12px;color:var(--ng);font-weight:700}
.pr-arrow{font-size:20px;color:var(--ng);opacity:0;transition:all .3s}
.planes-cta{margin-top:24px}

/* ══════════════════════════════════════════
   LEDGO — Sección partner pantallas LED
   ─────────────────────────────────────────
   Grid 50/50 con info del partner LEDGO y
   simulación visual de pantalla LED con
   grid de pixeles que parpadean aleatoriamente
   (animado por JS cada 900ms).
══════════════════════════════════════════ */
.sec-ledgo{padding:96px 48px;background:#050505;border-top:1px solid #141414;position:relative;overflow:hidden}
.ledgo-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.ledgo-tag{display:inline-flex;align-items:center;gap:8px;background:rgba(234,91,12,.08);border:1px solid rgba(234,91,12,.2);border-radius:99px;padding:6px 16px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ng);margin-bottom:26px}
.ledgo-dot{width:6px;height:6px;border-radius:50%;background:var(--ng);animation:ldPulse 2s ease-in-out infinite}
@keyframes ldPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
.ledgo-h2{font-size:clamp(26px,3.6vw,50px);font-weight:900;line-height:1.1;letter-spacing:-.03em;margin-bottom:18px;color:var(--b)}
.ledgo-h2 em{font-style:normal;color:var(--ng)}
.ledgo-p{font-size:14px;line-height:1.75;color:var(--gt);max-width:380px;margin-bottom:32px}
.ledgo-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ng);color:#fff;font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:14px 28px;border-radius:4px;transition:background .2s,transform .2s,box-shadow .2s}
.ledgo-btn:hover{background:var(--ngd);transform:translateY(-2px);box-shadow:0 8px 24px rgba(234,91,12,.28)}
.ledgo-screen-wrap{position:relative;display:flex;align-items:center;justify-content:center}
.ledgo-screen{width:100%;max-width:340px;aspect-ratio:16/10;border:2px solid rgba(234,91,12,.22);border-radius:4px;background:#040200;overflow:hidden;position:relative;box-shadow:0 0 48px rgba(234,91,12,.06),inset 0 0 40px rgba(0,0,0,.8)}
.ledgo-pixels{position:absolute;inset:0;display:grid;gap:2px;grid-template-columns:repeat(20,1fr);padding:6px}
.led-px{border-radius:1px;background:rgba(234,91,12,.05);transition:background .3s}
.led-px.on{background:var(--ng);box-shadow:0 0 5px rgba(234,91,12,.55)}
.ledgo-lbl{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(38px,7.5vw,72px);font-weight:900;color:rgba(234,91,12,.1);letter-spacing:-.04em;pointer-events:none}
.ledgo-corner{position:absolute;width:12px;height:12px;border-color:var(--ng);border-style:solid;opacity:.45}
.ledgo-corner.tl{top:8px;left:8px;border-width:2px 0 0 2px}
.ledgo-corner.tr{top:8px;right:8px;border-width:2px 2px 0 0}
.ledgo-corner.bl{bottom:8px;left:8px;border-width:0 0 2px 2px}
.ledgo-corner.br{bottom:8px;right:8px;border-width:0 2px 2px 0}

/* ══════════════════════════════════════════
   MODAL CONSULTA HOGAR
   ─────────────────────────────────────────
   Modal centrado con fondo blur que se activa
   desde servicios hogar. Tiene campos de nombre
   y mensaje que generan un link de WhatsApp
   con el texto pre-llenado.
══════════════════════════════════════════ */
.modal-consulta{position:fixed;inset:0;z-index:700;display:none;align-items:center;justify-content:center;padding:20px}
.modal-consulta.on{display:flex}
.mc-bg{position:absolute;inset:0;background:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mc-box{position:relative;z-index:1;background:var(--g2);border:1px solid var(--gb);border-radius:16px;width:100%;max-width:460px;padding:32px}
.mc-titulo{font-size:20px;font-weight:800;margin-bottom:6px}
.mc-sub{font-size:13px;color:var(--gt);margin-bottom:22px}
.mc-close{position:absolute;top:16px;right:16px;background:var(--g4);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px}
.mc-field{margin-bottom:14px}
.mc-field label{display:block;font-size:11px;font-weight:700;color:var(--gt);margin-bottom:6px;letter-spacing:.05em;text-transform:uppercase}
.mc-field input,.mc-field textarea,.mc-field select{width:100%;background:var(--g3);border:1px solid var(--gb);border-radius:8px;padding:11px 14px;color:#fff;font-family:var(--sans);font-size:13px;outline:none;transition:border-color .2s}
.mc-field input:focus,.mc-field textarea:focus,.mc-field select:focus{border-color:var(--ng)}
.mc-field textarea{resize:vertical;min-height:88px}
.mc-send{width:100%;background:var(--ng);color:#fff;border:none;font-family:var(--sans);font-size:14px;font-weight:700;border-radius:10px;padding:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s;margin-top:4px}
.mc-send:hover{background:var(--ngd)}

/* ══════════════════════════════════════════
   CARRITO DE CONSULTA
   ─────────────────────────────────────────
   Panel que sube desde abajo (translateY) con
   lista de productos/servicios seleccionados.
   El FAB flotante (cart-fab) aparece cuando
   hay items. El envío genera un mensaje de
   WhatsApp con el listado completo.
══════════════════════════════════════════ */
.cart-fab{position:fixed;bottom:28px;right:28px;z-index:400;width:52px;height:52px;border-radius:50%;background:var(--ng);color:#fff;border:none;cursor:pointer;font-size:19px;display:none;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(234,91,12,.35);transition:transform .2s}
.cart-fab.on{display:flex}
.cart-fab:hover{transform:scale(1.08)}
.cart-fab-b{position:absolute;top:-4px;right:-4px;background:#fff;color:var(--ng);font-size:10px;font-weight:900;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.cart-modal{position:fixed;inset:0;z-index:600;display:none;align-items:flex-end;justify-content:center}
.cart-modal.on{display:flex}
.cart-back{position:absolute;inset:0;background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.cart-pan{position:relative;z-index:1;background:var(--g2);border-radius:20px 20px 0 0;border-top:1px solid var(--gb);width:100%;max-width:520px;max-height:80vh;overflow-y:auto;padding:24px;transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cart-modal.on .cart-pan{transform:translateY(0)}
.cart-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cart-head h3{font-size:18px;font-weight:800}
.cart-x{background:var(--g4);border:none;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px}
.cart-items{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.cart-item{display:flex;gap:12px;align-items:center;background:var(--g3);border-radius:10px;padding:12px 14px}
.ci-info{flex:1}
.ci-nom{font-size:13px;font-weight:700}
.ci-tipo{font-size:10px;color:var(--gt);text-transform:uppercase;letter-spacing:.06em}
.ci-prec{font-size:14px;font-weight:900;color:var(--ng);white-space:nowrap}
.ci-rm{background:none;border:none;color:var(--gt);cursor:pointer;font-size:16px;padding:4px}
.ci-rm:hover{color:#fff}
.cart-empty{text-align:center;padding:36px;color:var(--gt);font-size:14px}
.cart-tot{border-top:1px solid var(--gb);padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;margin-bottom:14px}
.cart-tot span:last-child{color:var(--ng);font-size:20px}
.cart-wa{width:100%;background:var(--ng);color:#fff;font-family:var(--sans);font-size:15px;font-weight:700;border:none;border-radius:12px;padding:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .2s}
.cart-wa:hover{background:var(--ngd)}
.cart-nota{font-size:11px;color:var(--gt);text-align:center;margin-top:10px}
.toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%) translateY(8px);background:var(--ng);color:#fff;font-size:13px;font-weight:700;padding:11px 22px;border-radius:99px;z-index:800;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* ══════════════════════════════════════════
   MODO EDITOR (CMS) - Punteros y Bordes
   ─────────────────────────────────────────
   Resalta elementos dinámicos que tienen el 
   atributo data-cms-col cuando el admin
   activa el modo editor.
══════════════════════════════════════════ */
body.editor-mode [data-cms-col] {
  outline: 2px dashed rgba(234,91,12,.8) !important;
  outline-offset: 4px;
  transition: outline .2s, background .2s;
  position: relative;
  z-index: 50;
  border-radius: 4px;
}
body.editor-mode [data-cms-col]:hover {
  outline-color: #fff !important;
  background: rgba(234,91,12,0.15);
  cursor: text;
}
body.editor-mode img[data-cms-col]:hover {
  cursor: pointer;
}
body.editor-mode .cms-delete-btn, body.editor-mode .cms-add-btn {
  position: absolute;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
  background: var(--ng);
  color: #fff;
  transition: transform .2s;
}
body.editor-mode .cms-delete-btn:hover, body.editor-mode .cms-add-btn:hover {
  transform: scale(1.1);
  background: #f00;
}
body.editor-mode .cms-add-btn { background: #1a1a1a; border: 2px solid var(--ng); }
body.editor-mode .cms-add-btn:hover { background: var(--ng); }

body.editor-mode .cms-ig-config { display: block !important; margin-bottom: 24px; margin-top: 10px; padding: 20px; border: 1px dashed var(--ng); border-radius: 12px; background: rgba(234,91,12,.05); }
body:not(.editor-mode) .cms-ig-config { display: none !important; }

/* ══════════════════════════════════════════
   FOOTER — Pie de página
   ─────────────────────────────────────────
   Grid de 3 columnas: marca + descripción,
   enlaces de servicios, y contacto.
   Semi-transparente para dejar ver el
   parallax geométrico de fondo.
══════════════════════════════════════════ */
footer{background:var(--n);border-top:1px solid var(--gb);padding:80px 48px 40px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:56px;margin-bottom:52px}
.foot-marca p{font-size:12px;color:var(--gt);line-height:1.7;max-width:260px;margin-top:8px}
.foot-col h4{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gt);margin-bottom:14px}
.foot-col a,.foot-col p{display:block;font-size:13px;color:rgba(255,255,255,.3);text-decoration:none;margin-bottom:8px;transition:color .2s}
.foot-col a:hover{color:var(--ng)}
.foot-bottom{padding-top:22px;border-top:1px solid var(--gb);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.foot-bottom p{font-size:11px;color:var(--gt)}
.foot-bottom a{font-size:11px;color:var(--ng);text-decoration:none}

/* ══════════════════════════════════════════
   RESPONSIVE — Breakpoints adaptativos
   ─────────────────────────────────────────
   1024px: servicios a 1 col, nosotros a 1 col
   900px:  nav simplificado con hamburguesa,
           cards más pequeñas, padding reducido
   600px:  hero título más pequeño, grids a 1 col
══════════════════════════════════════════ */
@media(max-width:1024px){
  /* Desactivar cursor molesto en Móviles / Tablets */
  #cur, #cur-r { display: none !important; }

  .srv-sticky{grid-template-columns:1fr; height: auto;}
  .srv-right{
    min-height:52vh;
    height:auto;
    display:flex;
    flex-direction:row;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    /* AUDIT-V3: -webkit-overflow-scrolling eliminado (deprecated) */
    padding-bottom:12px;
  }
  .srv-left{padding:48px 28px}
  /* Mobile Horizontal Scroll layout */
  .srv-panel {
    position: relative;
    flex: 0 0 calc(100% - 16px);
    scroll-snap-align: center;
    padding: 28px;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    margin-right: 16px;
    border-radius: 16px;
    overflow: hidden;
  }
  .srv-panel:last-child { margin-right: 0; }

  .mvv-grid{grid-template-columns:1fr}
  .mvv-col{border-left:none;border-top:1px solid var(--gb);padding:32px 0}
  .mvv-col:first-child{border-top:none}
  .valores-row{grid-template-columns:1fr 1fr}
  .planes-inner{grid-template-columns:1fr}
  .ledgo-inner{grid-template-columns:1fr;gap:44px}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  #nav{padding:0 20px}
  .nav-links,.n-wa,.nav-tabs{display:none}
  .n-cart{margin-left:auto}
  .n-ham{display:flex}
  .modo-hero{padding:0 24px 68px}
  .srv-scroll-space{height:auto} /* AUDIT-FIX: Se anuló 360vh para dar paso al scroll horizontal móvil */
  .proy-header,.proy-controls{padding:0 24px}
  .proy-track{padding:0 24px}
  .proy-card,.proy-ph{flex:0 0 300px;height:420px}
  .sec-productos,.sec-ig,.sec-nosotros,.sec-planes,.sec-hotspots,.sec-ledgo,.ig-solo-btn{padding:80px 24px}
  .prod-grid{grid-template-columns:1fr 1fr}
  .prod-header{grid-template-columns:1fr}
  .prod-header-right{display:none}
  .hero-counter{display:none}
  footer{padding:56px 24px 32px}
  .foot-grid{grid-template-columns:1fr}
  /* ── MOBILE ENTRADA: cajas apiladas sin overflow ── */
  .entrada-cajas{
    flex-direction:column;
    width:calc(100% - 32px); /* respeta padding lateral */
    max-width:400px;
    gap:12px;
  }
  .entrada-caja{
    padding:24px 20px;          /* reduce padding para que no desborde */
    flex:unset;                 /* anula flex:1 que en columna controla el alto */
    width:100%;
    box-sizing:border-box;
  }
  /* En columna el hover flex:1.5 no tiene sentido, se desactiva */
  .entrada-caja:hover,.entrada-caja.hover{
    flex:unset;
    transform:none;             /* evita recorte visual por translateY */
  }
}
@media(max-width:600px){
  .modo-hero .hero-h1{font-size:clamp(46px,13vw,78px)}
  .hs-scene{aspect-ratio:4/3}
  /* Cajas de Hotspot fijadas a un margen interior para no rebasar */
  .hs-card{
    width:auto!important;max-width:none!important;
    top:auto!important;bottom:16px!important;
    left:16px!important;right:16px!important;
    transform:translateY(16px) scale(.95)!important;
  }
  .hs-card.on{transform:translateY(0) scale(1)!important}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .valores-row{grid-template-columns:1fr}
  .prod-grid{grid-template-columns:1fr}
  .foot-col:last-child { margin-top: 14px; }
  /* Ajuste extra para pantallas muy angostas */
  .entrada-cajas{
    width:calc(100% - 24px);
    padding:0;
  }
  .entrada-caja{
    padding:20px 16px;
  }
  .cart-pan {
    padding-bottom: max(24px, calc(15px + env(safe-area-inset-bottom)));
    max-height: 88vh; /* Ampliado para mejor UX en móviles y iPhones */
  }
}

/* ══════════════════════════════════════════
   GEO PARALLAX CANVAS
   ─────────────────────────────────────────
   Canvas fijo que dibuja figuras geométricas
   (hexágonos y cuadrados) con efecto parallax
   al hacer scroll. Se posiciona detrás de todo
   el contenido (z-index:1). Para que se vea,
   las secciones SIN fotos/videos usan fondos
   semi-transparentes (rgba). Las secciones CON
   fotos/videos usan fondos opacos y z-index:2
   para tapar el canvas completamente.
══════════════════════════════════════════ */
/* AUDIT-FIX: canvas opacidad subida para que el parallax sea más visible */
#geo-canvas{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
  opacity:.85;
}

/* ── Secciones CON fotos/videos: fondo OPACO ──
   Estas secciones tienen contenido visual propio
   (videos, imágenes, hotspots) y NO deben dejar
   ver el parallax detrás. z-index:2 las pone
   por encima del canvas. */
.modo-hero,
.servicios-wrap,
.sec-hotspots,
.sec-productos{
  position:relative;
  z-index:2;
}

/* ── Secciones SIN fotos/videos: fondo SEMI-TRANSPARENTE ──
   Estas secciones solo tienen texto/iconos, así que
   dejamos que el parallax geométrico se vea sutilmente
   a través del fondo semi-transparente. */
/* AUDIT-FIX: opacidades ajustadas ~0.45 - 0.55 para maximizar 
   parallax preservando el contraste de lectura */
.sec-nosotros{background:rgba(0,0,0,.45)!important;position:relative;z-index:2}
.sec-proceso{background:rgba(10,10,10,.50)!important;position:relative;z-index:2}
.sec-ig{background:rgba(10,10,10,.55)!important;position:relative;z-index:2}
.sec-planes{background:rgba(10,10,10,.50)!important;position:relative;z-index:2}
.sec-ledgo{background:rgba(5,5,5,.55)!important;position:relative;z-index:2}
.ig-solo-btn{background:rgba(10,10,10,.55)!important;position:relative;z-index:2}
.sec-proyectos{position:relative;z-index:2}

/* ── Footer y navegación: semi-transparentes para el parallax ── */
footer{background:rgba(0,0,0,.55)!important;position:relative;z-index:2}

/* ── Servicios panel izquierdo: opacidad relajada ── */
.srv-left{background:rgba(10,10,10,.55)!important}

/* ══════════════════════════════════════════
   PROCESO DE TRABAJO — 4 pasos
   ─────────────────────────────────────────
   Grid de 4 columnas con los pasos del
   proceso (Consulta → Diseño → Fabricación
   → Entrega). Números decorativos grandes,
   conectores verticales naranjas entre pasos.
══════════════════════════════════════════ */
.sec-proceso{padding:80px 48px;position:relative;overflow:hidden}
.proceso-inner{max-width:1100px;margin:0 auto}
.proceso-header{margin-bottom:48px}
.proceso-steps{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--gb);border-radius:16px;overflow:hidden;
  position:relative;
}
.proceso-step{
  padding:32px 24px;background:rgba(17,17,17,.85);
  position:relative;
  transition:background .35s;
  border-right:1px solid var(--gb);
}
.proceso-step:last-child{border-right:none}
.proceso-step:hover{background:rgba(26,26,26,.95)}
.ps-num{
  display:block;font-size:72px;font-weight:900;
  color:rgba(234,91,12,.07);line-height:1;
  margin-bottom:20px;letter-spacing:-.05em;
  transition:color .35s;
}
.proceso-step:hover .ps-num{color:rgba(234,91,12,.14)}
.ps-ico{font-size:30px;margin-bottom:14px;display:block}
.ps-nombre{font-size:17px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.ps-desc{font-size:12.5px;color:var(--gt);line-height:1.8}
.ps-connector{
  position:absolute;top:44px;right:-1px;
  width:2px;height:44px;
  background:linear-gradient(to bottom,var(--ng),transparent);
  opacity:.3;z-index:1;
}
.proceso-cta{
  margin-top:52px;
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;
}
@media(max-width:900px){
  .sec-proceso{padding:80px 24px}
  .proceso-steps{grid-template-columns:1fr 1fr}
  .proceso-step{border-bottom:1px solid var(--gb)}
  .proceso-step:nth-child(2),.proceso-step:nth-child(4){border-right:none}
  .proceso-step:nth-child(3),.proceso-step:nth-child(4){border-bottom:none}
}
@media(max-width:560px){
  .proceso-steps{grid-template-columns:1fr}
  .proceso-step{border-right:none!important;border-bottom:1px solid var(--gb)!important}
  .proceso-step:last-child{border-bottom:none!important}
}

/* ══════════════════════════════════════════
   PLANES — descripción gancho (reemplaza .pr-price)
══════════════════════════════════════════ */
.pr-desc-gancho{
  font-size:12px;color:var(--gt);
  font-weight:400;line-height:1.4;
  transition:color .2s;
}
.plan-row:hover .pr-desc-gancho{color:rgba(234,91,12,.7)}

/* ══════════════════════════════════════════
   MODAL PEDIDO HOGAR
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   AUDIT-FIX: ADMIN FAB & QUICK PANEL
   ───────────────────────────────────────
   Botón flotante de engranaje y mini panel
   de administración. Solo visible cuando
   el usuario está autenticado en Firebase.
══════════════════════════════════════════ */
.admin-fab{
  position:fixed;bottom:96px;right:28px;z-index:450;
  width:48px;height:48px;border-radius:50%;
  background:rgba(234,91,12,.9);color:#fff;
  border:2px solid rgba(255,255,255,.2);
  font-size:20px;cursor:pointer;
  display:none;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(234,91,12,.35);
  transition:transform .2s,box-shadow .2s;
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
}
.admin-fab:hover{transform:scale(1.1);box-shadow:0 8px 32px rgba(234,91,12,.5)}
.admin-quick{
  position:fixed;bottom:152px;right:28px;z-index:449;
  background:rgba(10,10,10,.97);border:1px solid var(--gb);
  border-radius:14px;padding:14px;width:220px;
  opacity:0;pointer-events:none;transform:translateY(10px) scale(.95);
  transition:opacity .25s,transform .25s;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.admin-quick.on{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}
.aq-title{font-size:12px;font-weight:800;color:var(--ng);margin-bottom:10px;padding:0 6px}
.aq-item{
  display:flex;align-items:center;gap:8px;
  width:100%;background:none;border:none;
  color:#fff;font-family:var(--sans);font-size:13px;font-weight:600;
  padding:10px;border-radius:8px;cursor:pointer;
  text-decoration:none;transition:background .2s;
}
.aq-item:hover{background:rgba(234,91,12,.12)}

/* ══════════════════════════════════════════
   AUDIT-FIX: MODO EDITOR
   ───────────────────────────────────────
   Cuando body tiene .editor-mode, resalta
   secciones configurables con bordes naranjas
   punteados y badges "Editable" flotantes.
══════════════════════════════════════════ */
body.editor-mode .sec-nosotros,
body.editor-mode .sec-proyectos,
body.editor-mode .sec-productos,
body.editor-mode .sec-hotspots,
body.editor-mode .sec-ig{
  outline:2px dashed rgba(234,91,12,.5);
  outline-offset:-4px;
  position:relative;
}
body.editor-mode .sec-nosotros::after,
body.editor-mode .sec-proyectos::after,
body.editor-mode .sec-productos::after,
body.editor-mode .sec-hotspots::after,
body.editor-mode .sec-ig::after{
  content:'✏️ Editable desde admin';
  position:absolute;top:12px;right:12px;z-index:10;
  background:var(--ng);color:#fff;
  font-size:10px;font-weight:700;
  padding:4px 10px;border-radius:99px;
  letter-spacing:.04em;
}

/* ══════════════════════════════════════════
   AUDIT-FIX: PWA INSTALL BANNER
   ───────────────────────────────────────
   Banner fijo inferior para instalar PWA.
══════════════════════════════════════════ */
.pwa-banner{
  position:fixed;bottom:0;left:0;right:0;z-index:750;
  background:rgba(10,10,10,.97);border-top:1px solid var(--gb);
  padding:14px 20px;display:none;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  transform:translateY(100%);transition:transform .4s cubic-bezier(.16,1,.3,1);
}
.pwa-banner.on{display:block;transform:translateY(0)}
.pwa-banner-inner{
  max-width:560px;margin:0 auto;
  display:flex;align-items:center;gap:14px;
}
.pwa-banner-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0}
.pwa-banner-txt{flex:1}
.pwa-banner-t{font-size:14px;font-weight:700}
.pwa-banner-s{font-size:11px;color:var(--gt)}
.pwa-banner-btn{
  background:var(--ng);color:#fff;border:none;
  font-family:var(--sans);font-size:12px;font-weight:700;
  border-radius:99px;padding:10px 20px;cursor:pointer;
  transition:background .2s;flex-shrink:0;
}
.pwa-banner-btn:hover{background:var(--ngd)}
.pwa-banner-x{
  background:none;border:none;color:var(--gt);
  font-size:16px;cursor:pointer;padding:4px;flex-shrink:0;
}
.pwa-banner-x:hover{color:#fff}

/* ══════════════════════════════════════════
   AUDIT-FIX: iOS SAFE AREA
══════════════════════════════════════════ */
@supports(padding:env(safe-area-inset-top)){
  #nav{padding-top:env(safe-area-inset-top);padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}
  footer{padding-bottom:max(40px,env(safe-area-inset-bottom))}
  .cart-fab,.admin-fab{bottom:max(28px,calc(28px + env(safe-area-inset-bottom)))}
  .pwa-banner{padding-bottom:env(safe-area-inset-bottom)}
}

/* INSTAGRAM NATIVO (AUDIT-V5) */
.ig-grid-native {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
  padding: 0 48px;
}
.ig-post-native {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 16px;
  overflow: hidden;
  background: var(--gb);
  border: 1px solid var(--gb);
  display: block;
}
.ig-post-native img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.ig-post-ov {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  display: flex; align-items:center; justify-content:center;
  opacity: 0; transition: opacity .3s;
}
.ig-post-ov span {
  font-size: 13px; font-weight: 700; color: #fff;
  padding: 10px 20px; border-radius: 99px;
  border: 1px solid rgba(255,255,255,.3);
  transform: translateY(10px); transition: transform .3s;
}
.ig-post-native:hover img { transform: scale(1.08); }
.ig-post-native:hover .ig-post-ov { opacity: 1; }
.ig-post-native:hover .ig-post-ov span { transform: translateY(0); }

@media (max-width: 900px) {
  .ig-grid-native { padding: 0 24px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}
@media (max-width: 600px) {
  .ig-grid-native { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}