:root{--brand1:#00E1FF;--brand2:#00FFA8}
:root{
  --bg:#0b1520; --bg-2:#0e1c2a; --card:#0f2234;
  --muted:#9bb3c7; --text:#e8f1f7;
  --primary:#39c6f4; --primary-2:#17a7d7;
  --shadow:0 10px 30px rgba(0,0,0,.35); --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background: radial-gradient(1200px 700px at 10% -10%,#11273c,transparent 65%),
             radial-gradient(1000px 600px at 120% 0%,#0a2a3d,transparent 60%), var(--bg);
  color:var(--text);
}
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(1.2) blur(10px);
  background:linear-gradient(180deg,rgba(13,25,37,.85),rgba(13,25,37,.55)); border-bottom:1px solid #12324a;}
.nav{max-width:1100px; margin:auto; display:flex; align-items:center; gap:20px; padding:14px 20px;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800;}
.brand .logo{width:34px; height:34px; border:2px solid var(--primary); border-radius:9px; display:grid; place-items:center; box-shadow:0 0 24px rgba(57,198,244,.35) inset;}
.brand small{display:block; color:var(--muted); font-weight:600; margin-top:-3px}
nav a{color:var(--text); text-decoration:none; padding:8px 12px; border-radius:10px; font-weight:600; opacity:.85;}
nav a:hover{ background:#133149; opacity:1 } .spacer{flex:1}
.cart-btn{background:linear-gradient(180deg,var(--primary),var(--primary-2)); color:#042332; border:0; padding:10px 14px; border-radius:12px; font-weight:800; cursor:pointer; box-shadow:0 6px 22px rgba(23,167,215,.45);}

/* VIDEO HERO */
.hero{position:relative; overflow:hidden; max-width:1100px; margin:28px auto 8px; border-radius:var(--radius); box-shadow:var(--shadow);}
.video-hero .hero-content {
  position: relative;
  z-index: 1;
  padding: 80px 22px 100px;   /* ↑ más aire arriba/abajo */
  overflow: visible;          /* evita recortes */
}

.video-hero .hero-content h1 {
  line-height: 1.35;          /* aire vertical para descendentes */
  margin-bottom: 22px;
  padding-bottom: 6px;        /* colchón bajo el texto */
  overflow: visible;
}
.video-hero .bg-video{ position:absolute; inset:0; overflow:hidden; border-radius:var(--radius); }
.video-hero .bg-video video{ width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9); }
.video-hero::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  background:
    radial-gradient(600px 300px at 80% 0%, rgba(57,198,244,.22), transparent 60%),
    linear-gradient(135deg, rgba(11,35,52,.86), rgba(13,49,72,.86));
  pointer-events:none;
}
.hero h1{margin:0 0 10px; font-size:clamp(28px,5vw,44px)}
.hero p{margin:6px 0 22px; color:var(--muted); font-size:18px}
.hero .badges{display:flex; gap:10px; flex-wrap:wrap}
.badge{padding:8px 12px; border-radius:999px; border:1px solid #1f4057; color:#a6ccde; background:#0e283c; font-size:14px}

/* Reduced motion / mobile: desactivar video */
@media (prefers-reduced-motion: reduce){
  .video-hero .bg-video{ display:none; }
  .video-hero{ background: linear-gradient(135deg, #0b2334, #0d3148); }
}
@media (max-width: 640px){
  .video-hero .bg-video{ display:none; }
  .video-hero{ background: linear-gradient(135deg, #0b2334, #0d3148); }
}

section{scroll-margin-top:80px} .wrap{max-width:1100px; margin:0 auto; padding:32px 20px}
h2{font-size:clamp(24px,4vw,32px); margin:0 0 18px} .muted{color:var(--muted)}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.card{background:linear-gradient(180deg,#0f2234,#0c1c2b); border:1px solid #16364b; border-radius:16px; padding:18px; box-shadow:var(--shadow);}
.card p{color:var(--muted)} .price{margin:10px 0 14px; font-weight:900} .actions{display:flex; gap:10px}
.btn{display:inline-flex; align-items:center; gap:8px; cursor:pointer; border:0; font-weight:800; padding:10px 12px; border-radius:12px; transition: transform .08s ease; }
.btn:active{ transform: scale(.98); }
/* Glow en hover */
.btn-primary{background:linear-gradient(180deg,var(--primary),var(--primary-2)); color:#042332; box-shadow:0 8px 26px rgba(23,167,215,.45);}
.btn-primary:hover{ box-shadow:0 0 0 2px rgba(57,198,244,.5), 0 12px 32px rgba(23,167,215,.55); }
.btn-ghost{background:#122a3f; color:#bfe8f8; border:1px solid #1d4156}
.btn-ghost:hover{ box-shadow:0 0 0 2px #1d4156, 0 10px 24px rgba(0,0,0,.25); }

.drawer{position:fixed; inset:0 0 0 auto; width:min(420px,100%); translate:100% 0; transition:.28s ease; background:#0c1723; border-left:1px solid #1a3a50; z-index:60; display:flex; flex-direction:column;}
.drawer.open{ translate:0 0 } .drawer header{position:unset; border-bottom:1px solid #153447; background:#0c1723}
.drawer .items{flex:1; overflow:auto; padding:12px 14px}
.cart-item{display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; padding:12px; background:#0e1f2e; border:1px solid #16364b; border-radius:12px; margin-bottom:10px;}
.cart-item small{color:var(--muted)} .cart-footer{padding:14px; border-top:1px solid #153447}
.row{display:flex; justify-content:space-between; margin:6px 0} .total{font-weight:900; font-size:18px}
.close-x{background:transparent; border:0; color:#9ecfe3; font-size:22px; cursor:pointer}

.contact{display:grid; gap:18px; grid-template-columns:1.2fr .8fr; align-items:start;} 
@media (max-width:900px){ .contact{grid-template-columns:1fr} }
.contact-card{background:linear-gradient(180deg,#0f2234,#0c1c2b); border:1px solid #16364b; border-radius:16px; padding:18px; box-shadow:var(--shadow);}
.contact-card input,.contact-card textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid #1f4057; background:#0e283c; color:#e8f1f7; outline:none;}
.contact-card textarea{min-height:110px; resize:vertical}

.wa-float{position:fixed; right:18px; bottom:18px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  background:#25D366; box-shadow:0 10px 28px rgba(32,196,93,.45); z-index:70; border:0;}
.wa-float svg{width:36px; height:36px}

/* Cart indicators */
.cart-indicator{ display:inline-block; min-width:22px; padding:2px 6px; margin-left:8px;
  font-size:12px; font-weight:800; text-align:center; line-height:1.2;
  color:#042332; background:linear-gradient(180deg,var(--primary),var(--primary-2));
  border-radius:999px; box-shadow:0 6px 16px rgba(23,167,215,.45); }
.cart-indicator.small{ font-size:11px; min-width:18px; padding:1px 5px; margin-left:6px; }

/* Footer */
.site-footer{position:relative;background: radial-gradient(1200px 420px at 20% -10%, color-mix(in oklab, var(--brand1) 25%, transparent), transparent 60%), radial-gradient(1200px 420px at 85% 120%, color-mix(in oklab, var(--brand2) 20%, transparent), transparent 60%), linear-gradient(180deg, rgba(14,18,27,.6), rgba(14,18,27,.88)); border-top:1px solid rgba(255,255,255,.06);}
.footer-grid{ display:grid; gap:24px; padding:28px 20px; grid-template-columns: 2fr 1fr 1.2fr; }
.footer-brand .logo{ width:32px; height:32px; border:2px solid var(--primary); border-radius:9px; display:grid; place-items:center; box-shadow:0 0 24px rgba(57,198,244,.35) inset; }
.footer-links{ list-style:none; padding:0; margin:10px 0 0 0; }
.footer-links li{ margin:6px 0; }
.footer-links a{ color:#cfe7f5; text-decoration:none; opacity:.9; }
.footer-links a:hover{ text-decoration:underline; opacity:1; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-right:8px; border-radius:8px; background:#0e283c; color:#bfe8f8; border:1px solid #1d4156; text-decoration:none; font-weight:800; }
.footer-copy{ text-align:center; padding:14px; border-top:1px solid #12324a; color:#89a8bd; }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr; } }
footer{ text-align: left; }

/* Utility */
.hidden{ display:none; }

/* ---- HERO más llamativo (centrado + glass + brillos) ---- */
.video-hero { 
  position: relative; 
  overflow: hidden; 
  max-width: 1100px; 
  margin: 28px auto 8px; 
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  border:1px solid rgba(109, 206, 255, 0.18);
  backdrop-filter: blur(6px) saturate(1.1);
}
.video-hero .hero-content{
  position: relative; 
  z-index: 1; 
  text-align: center;
  padding: 56px 24px 70px;
}

/* Título con degradado y brillo sutil */
.hero h1{
  margin: 0 0 12px;
  font-size: clamp(32px, 5.2vw, 48px);
  line-height: 1.1;
  background: linear-gradient(180deg,#ffffff,#d9f2ff 55%, #9fdcff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(55,200,255,.18);
}

/* Subtítulo centrado y más legible */
.hero p{
  max-width: 900px;
  margin: 8px auto 22px;
  color: #c8deee;
  font-size: 18px;
  opacity: .95;
}

/* Chips/badges con efecto pill y glow en hover */
.hero .badges{ 
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px; 
  margin-bottom: 10px;
}
.badge{
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid #1e4a61;
  background: rgba(9, 38, 58, .75);
  color:#bfe8f8;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.badge:hover{
  transform: translateY(-2px);
  border-color: #38c7f4;
  box-shadow: 0 0 0 2px rgba(56,199,244,.25), 0 10px 24px rgba(0,0,0,.25);
}

/* Botones centrados, con glow y “light sweep” animado */
.hero .actions{
  margin-top: 16px;
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
}

/* Botón primario ‘neón’ */
.btn-primary{
  position: relative;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .2px;
  background: linear-gradient(180deg,#4fd3ff,#17a7d7);
  color: #042332;
  border: 0;
  box-shadow: 0 10px 28px rgba(23,167,215,.55), 0 0 0 1px rgba(72,206,255,.45) inset;
  overflow: hidden;
}
.btn-primary::after{
  /* brillo diagonal que recorre el botón */
  content:"";
  position:absolute; top:-120%; left:-40%;
  width:60%; height:300%;
  transform: rotate(20deg);
  background: linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 100%);
  animation: sweep 2.8s linear infinite;
  pointer-events:none;
}
@keyframes sweep{
  0%   { transform: translateX(-120%) rotate(20deg); }
  100% { transform: translateX(220%) rotate(20deg); }
}
.btn-primary:hover{
  box-shadow: 0 0 0 2px rgba(56,199,244,.55),
              0 16px 38px rgba(23,167,215,.65);
}

/* Botón secundario más marcado */
.btn-ghost{
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(14,40,60,.6);
  color:#cfe7f5;
  border: 1px solid #1e4a61;
}
.btn-ghost:hover{
  border-color:#38c7f4;
  box-shadow: 0 0 0 2px rgba(30,74,97,.7), 0 12px 26px rgba(0,0,0,.28);
}

/* En móviles, apilar botones */
@media (max-width: 540px){
  .hero .actions{ flex-direction:column; }
  .hero .actions .btn{ width:100%; }
}
/* ===== QUIÉNES SOMOS ===== */
.about { padding-top: 24px; }
.about-card{
  display: grid;
  grid-template-columns: 1.4fr .8fr;
  gap: 22px;
  background: linear-gradient(180deg,#0f2234,#0c1c2b);
  border: 1px solid #16364b;
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
}
.about-text h2{ margin: 0 0 10px; font-size: clamp(24px,4vw,32px); }
.about-list{ margin: 12px 0 14px; padding-left: 18px; color: var(--muted); }
.about-list li{ margin: 6px 0; }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin: 10px 0 8px; }

.about-side{
  display: grid;
  gap: 12px;
  align-content: start;
}
.kpi{
  background: #0e283c;
  border: 1px solid #1f4057;
  border-radius: 14px;
  padding: 14px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.kpi strong{ display:block; font-size: 28px; line-height: 1; }
.kpi span{ color: var(--muted); }

/* Responsive */
@media (max-width: 900px){
  .about-card{ grid-template-columns: 1fr; }
}
.visit-counter{
  margin: 20px auto;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  font-weight: 600;
  letter-spacing: .3px;
}
/* Contenedor del video: ocupa todo el hero */
.bg-video {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  overflow: hidden;
  z-index: -1;         /* detrás del contenido */
}

.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* recorte elegante */
  object-position: center;
}

/* Asegura altura del hero también en móvil */
.hero.video-hero {
  position: relative;
  min-height: 70vh;
  overflow: visible;   /* evita cortes del texto */
}

/* No ocultes el video en móvil */
@media (max-width: 640px) {
  .bg-video { display: block; opacity: 1; }
  .hero.video-hero { min-height: 75vh; }
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .bg-video video { display: none; }
  .bg-video {
    background: url('assets/video/hero-poster.jpg') center/cover no-repeat;
  }
}
/* ---- HERO buttons layout: elimina espacio sobrante ---- */
.hero .actions{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;            /* controla la separación exacta */
  margin-top:16px;
}
.hero .actions .btn{ margin:0; } /* evita márgenes heredados */

/* ---- Efectos unificados para ambos botones ---- */
.btn{
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  will-change: transform, box-shadow;
}

/* efecto hover/active igual para ambos */
.btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
}
.btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px rgba(0,0,0,.22);
}

/* mantiene estilos visuales originales pero con el mismo efecto */
.btn-primary{
  /* tus colores ya definidos permanecen */
}
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,.22);
  color: inherit;                /* respeta color actual del tema */
}
.btn-ghost:hover{
  background: rgba(255,255,255,.06); /* leve realce en hover */
  border-color: rgba(255,255,255,.32);
}


/* === PATCH v5: Footer mejorado + contador === */
.site-footer{position:relative;background: radial-gradient(1200px 420px at 20% -10%, color-mix(in oklab, var(--brand1) 25%, transparent), transparent 60%), radial-gradient(1200px 420px at 85% 120%, color-mix(in oklab, var(--brand2) 20%, transparent), transparent 60%), linear-gradient(180deg, rgba(14,18,27,.6), rgba(14,18,27,.88)); border-top:1px solid rgba(255,255,255,.06);}
.site-footer .footer-grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 28px;
}
.footer-brand .logo{ filter: drop-shadow(0 4px 12px rgba(0,0,0,.25)); font-size:26px }
.footer-links a{ opacity:.9; transition:opacity .15s ease, transform .15s ease }
.footer-links a:hover{ opacity:1; transform: translateX(2px); text-decoration: underline }
.footer-copy{ opacity:.85; font-size:.9rem; padding-top:10px; border-top:1px dashed rgba(255,255,255,.08) }

/* Tarjeta informativa superior del footer */
.footer-grid .brand,
.footer-grid nav,
.footer-grid > div{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
}

/* Contador de visitas */
.visit-counter{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin: 10px 0 20px;
  font-weight:600;
  color: rgba(255,255,255,.9);
}
.visit-counter .dot{
  display:inline-block;
  width:8px; height:8px; border-radius:50%;
  background: #60ffa8;
  box-shadow: 0 0 10px #60ffa8;
}
#visitCount{ min-width: 28px; display:inline-block; text-align:center }
@media (max-width: 820px){
  .site-footer .footer-grid{ grid-template-columns: 1fr; }
}

/* v6: footer accents */
.site-footer h4{position:relative}
.site-footer h4:after{
  content:"";position:absolute;left:0;bottom:-6px;width:38px;height:3px;
  background: linear-gradient(90deg,var(--brand1),var(--brand2));border-radius:2px;opacity:.9
}
.footer-brand .logo{ background: linear-gradient(90deg,var(--brand1),var(--brand2)); -webkit-background-clip:text; background-clip:text; color:transparent }
.visit-counter .dot{ background: var(--brand2); box-shadow:0 0 10px var(--brand2) }


/* === PATCH v7: theming global con gradiente de marca === */

/* Botón primario con gradiente de marca */
.btn.btn-primary{
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color: #06121a;
  border: 0;
  font-weight: 700;
  text-shadow: 0 0 0 transparent;
}
.btn.btn-primary:hover{ filter: brightness(1.06); }
.btn.btn-primary:active{ filter: brightness(.96); }

/* Botón ghost con borde acentuado */
.btn.btn-ghost{
  border: 1px solid color-mix(in oklab, var(--brand1) 45%, rgba(255,255,255,.18));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.btn.btn-ghost:hover{
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand1) 10%, transparent), color-mix(in oklab, var(--brand2) 10%, transparent));
}

/* Badges con halo de marca */
.badges .badge{
  border: 1px solid color-mix(in oklab, var(--brand1) 40%, rgba(255,255,255,.1));
  background: linear-gradient(90deg, color-mix(in oklab, var(--brand1) 14%, transparent), color-mix(in oklab, var(--brand2) 14%, transparent));
  box-shadow: 0 2px 10px rgba(0,0,0,.22), 0 0 12px color-mix(in oklab, var(--brand1) 12%, transparent);
}

/* Acentos bajo títulos de sección */
.wrap > h2, #servicios > h2{
  position: relative;
  padding-bottom: 10px;
}
.wrap > h2::after, #servicios > h2::after{
  content:"";
  position:absolute; left:0; bottom:0;
  width: 64px; height: 4px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  border-radius: 2px;
}

/* Separadores sutiles entre bloques (si se usan <hr>) */
hr{
  border: none; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--brand1) 45%, transparent), transparent);
  opacity: .6; margin: 18px 0;
}

/* Drawer en móvil full-width para mejor UX */
@media (max-width: 600px){
  .drawer.open{ width: 100% !important; }
}


/* === FIX v8: Carrito (drawer) ancho controlado === */
.drawer{
  position: fixed;
  top: 0; right: 0;
  height: 100vh;
  width: 380px;
  max-width: 92vw;
  transform: translateX(100%);
  transition: transform .25s ease;
  overflow: hidden;
  z-index: 50;
}
.drawer.open{ transform: translateX(0); }
.drawer .items{
  overflow-y: auto;
  max-height: calc(100vh - 160px);
  padding-right: 6px;
}
@media (min-width: 1200px){
  .drawer{ width: 420px; }
}
@media (max-width: 600px){
  .drawer{ width: 100vw; max-width: 100vw; }
}


/* === FIX v9: Footer centrado === */
.site-footer .footer-grid > div{ text-align:center; }
.site-footer .footer-grid .footer-links{ display:inline-block; text-align:left; }
.site-footer .footer-grid .footer-links li{ margin:6px 0; }


/* === FIX v10: Hero Title standout === */
.hero-title{
  text-transform: uppercase;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 12px rgba(0,0,0,.45);
}


/* --- HERO VIDEO (iOS-safe) --- */
.video-hero{position:relative; overflow:hidden;}
.video-hero .bg-video{position:absolute; inset:0; z-index:0; pointer-events:none;}
.video-hero .bg-video video{width:100%; height:100%; object-fit:cover; display:block;}
.video-hero .hero-content{position:relative; z-index:1;}


/* === Mobile typography tweaks (smaller hero title, better touch) === */
@media (max-width: 768px){
  .hero-content h1,
  .hero .hero-content h1,
  .hero-title{
    font-size: clamp(18px, 5vw, 26px);
    line-height: 1.2;
  }
  .hero .hero-content p{
    font-size: 14px;
    line-height: 1.4;
  }
  .badge{ font-size: 12px; padding: 6px 10px; }
  .btn{ font-size: 14px; padding: 8px 14px; }
}



/* === Overlay drawer (desktop & mobile) === */
.drawer{
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(420px,92vw);
  transform:translateX(100%);
  transition:transform .25s ease;
  z-index:2147483646;
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.drawer.open{ transform:translateX(0); }

/* Optional backdrop behavior */
.drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:2147483645; }
body.cart-open .drawer-backdrop{ opacity:1; pointer-events:auto; }

/* Prevent layout shift */
html,body{ overflow-x:hidden; }
body.cart-open main, body.cart-open .wrap{ margin-right:0 !important; padding-right:0 !important; }



/* --- fix: fully off-canvas & non-interactive when closed --- */
.drawer{
  right: -1px; /* avoid 1px seam */
  transform: translateX(calc(100% + 2px)); /* push a bit more than 100% */
  visibility: hidden;
  pointer-events: none;
}
.drawer.open{
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
/* Ensure backdrop never blocks when closed */
body:not(.cart-open) .drawer-backdrop{ opacity:0; pointer-events:none; }



/* Oculta cualquier mini-carrito residual */
.cart-fab, #cartFab, .mini-cart, .cart-floating, .cart-fab-pill{
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* === Floating visits pill (replaces old floating cart) === */
.visit-fab{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1100;
  display:flex; align-items:center; gap:10px;
  padding:8px 14px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.18);
  box-shadow: 0 8px 30px rgba(0,0,0,.40), inset 0 0 0 1px rgba(255,255,255,.15);
  color: var(--text,#e8f1f7);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  user-select:none;
}
.visit-fab .dot{
  width:8px; height:8px; border-radius:50%;
  background: #00e1ae;
  box-shadow: 0 0 8px rgba(0,225,174,.9);
}
.visit-fab .label{ opacity:.9; font-weight:600; letter-spacing:.2px }
.visit-fab strong{ font-variant-numeric: tabular-nums; font-weight:800 }

/* Hide when drawer/cart is open to avoid overlap */
body.cart-open .visit-fab{ opacity:0; pointer-events:none; transition:.2s ease opacity; }
@media (max-width: 480px){
  .visit-fab{ bottom: 14px; padding:7px 12px; gap:8px; }
}


/* Oculta el contador de visitas anterior en el footer y cualquier mini-carrito viejo */
.visit-counter{ display:none !important; }
#footerVisitCounter, .footer-visit, .footer-counter{ display:none !important; }
.cart-fab, #cartFab, .mini-cart, .cart-floating, .cart-fab-pill, .cart-pill{ 
  display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important;
}
/* === PATCH: Centrar SOLO la columna "Enlaces" del footer === */

/* Revierte el centrado global previo de las tarjetas del footer */
.site-footer .footer-grid > div{
  text-align: left;
}

/* Centra el bloque <nav> de ENLACES completo */
.site-footer .footer-grid nav{
  text-align: center;
}

/* Título "Enlaces" centrado y franja (pseudo-elemento) al centro */
.site-footer .footer-grid nav h4{
  text-align: center;
  position: relative;
}
.site-footer .footer-grid nav h4::after{
  left: 50%;
  transform: translateX(-50%);
}

/* Lista debajo del título, en columna y centrada */
.site-footer .footer-grid nav .footer-links{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 12px 0 0 0;
  text-align: center;
}
.site-footer .footer-grid nav .footer-links li{
  margin: 6px 0;
}
.site-footer .footer-grid nav .footer-links a{
  display: inline-block;
  text-align: center;
}
/* === PATCH: Footer con cuadros pequeños y logo centrado === */

/* Quita el cuadro grande de fondo */
.site-footer{
  background: none !important;
  border-top: none !important;
}

/* Mantén los cuadros pequeños */
.site-footer .footer-grid .brand,
.site-footer .footer-grid nav,
.site-footer .footer-grid > div{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Centrar logo + texto en la primera columna */
.site-footer .footer-grid .brand{
  text-align: center;
}
.site-footer .footer-grid .brand .logo{
  margin: 0 auto 8px auto;   /* logo centrado con espacio abajo */
}
.site-footer .footer-grid .brand p{
  text-align: center;
}
/* === Centrar columna Contacto === */
.site-footer .footer-grid > div:last-child{
  text-align: center;
}

.site-footer .footer-grid > div:last-child h4{
  text-align: center;
  position: relative;
}
.site-footer .footer-grid > div:last-child h4::after{
  left: 50%;
  transform: translateX(-50%);
}

.site-footer .footer-grid > div:last-child .footer-links{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0;
  margin: 12px 0 0 0;
  list-style: none;
  text-align: center;
}

.site-footer .footer-grid > div:last-child .footer-links li{
  margin: 6px 0;
}

.site-footer .footer-grid > div:last-child .footer-links a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
}
/* === PATCH: Logo de Cyber Sagh con más aire en el footer === */
.site-footer .footer-grid .brand{
  display: grid;
  justify-items: center;      /* centra todo dentro de la tarjeta */
  align-content: start;
  row-gap: 8px;               /* espacio entre logo, título y texto */
  text-align: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

/* Tamaño y padding del logo (sin deformarse) */
.site-footer .footer-grid .brand .logo,
.footer-brand .logo{          /* por si tu marca usa .footer-brand */
  width: 64px;
  height: 64px;
  padding: 8px;               /* aire interno alrededor del ícono */
  aspect-ratio: 1 / 1;        /* cuadrado perfecto */
  display: inline-grid;
  place-items: center;
  border-radius: 12px;
  border-width: 2px;
  box-shadow: 0 0 24px rgba(57,198,244,.30) inset, 0 6px 18px rgba(0,0,0,.35);
  margin: 0 auto 6px auto;    /* separación con el texto */
}

/* Si el logo es <img> o <svg>, evita que se estire */
.site-footer .footer-grid .brand .logo img,
.site-footer .footer-grid .brand .logo svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Título y subtítulo con mejor legibilidad y espaciamiento */
.site-footer .footer-grid .brand strong,
.site-footer .footer-grid .brand b{
  font-size: 18px;
  line-height: 1.15;
}
.site-footer .footer-grid .brand small{
  display: block;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.2;
}

/* Texto descriptivo con respiro */
.site-footer .footer-grid .brand p{
  margin-top: 8px;
  line-height: 1.45;
}
/* === PATCH: Footer brand compacto + centrado + estilo botón === */
.site-footer .footer-grid .brand{
  display: grid;
  justify-items: center;
  align-content: start;
  row-gap: 6px;               /* ↓ menos alto */
  text-align: center;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* Logo más compacto */
.site-footer .footer-grid .brand .logo{
  width: 48px;                /* antes 64px */
  height: 48px;
  padding: 6px;
  aspect-ratio: 1/1;
  display: grid; place-items: center;
  border-radius: 12px;
  margin: 0 0 4px 0;          /* ↓ espacio con el texto */
  box-shadow: 0 0 18px rgba(57,198,244,.25) inset, 0 4px 12px rgba(0,0,0,.28);
}

/* “Cyber Sagh” como pill/botón (look de los chips de arriba) */
.site-footer .footer-grid .brand strong,
.site-footer .footer-grid .brand b{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: .2px;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color: #06121a;
  box-shadow: 0 10px 24px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.08) inset;
}

/* Subtítulo debajo, más discreto y centrado */
.site-footer .footer-grid .brand small{
  display:block;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.2;
}

/* Párrafo centrado y con ancho controlado para que no crezca el alto */
.site-footer .footer-grid .brand p{
  max-width: 28ch;            /* evita líneas demasiado largas */
  margin: 6px auto 0;
  line-height: 1.4;
  text-align: center;
}
@media (max-width: 480px){
  .site-footer .footer-grid .brand p{ display:none; }
}
/* === PATCH: Centrar subtítulo y párrafo debajo del logo === */
.site-footer .footer-grid .brand{
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra todo en eje X */
  text-align: center;    /* centra texto */
  padding: 12px;
  row-gap: 6px;
}

.site-footer .footer-grid .brand .logo{
  margin: 0 auto;
}

.site-footer .footer-grid .brand strong,
.site-footer .footer-grid .brand b{
  display: inline-block;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  color: #06121a;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  margin-bottom: 4px;
  text-align: center;
}

.site-footer .footer-grid .brand small{
  display: block;
  color: var(--muted);
  margin: 0;
  line-height: 1.3;
  text-align: center;
}

.site-footer .footer-grid .brand p{
  margin: 6px 0 0 0;
  max-width: 28ch;
  line-height: 1.4;
  text-align: center;
}
/* Centrar el párrafo "Soluciones en soporte..." en el footer */
.site-footer .footer-grid .brand p.muted{
  text-align: center;
  margin: 6px auto 0 auto;  /* centra horizontalmente */
  max-width: 32ch;          /* evita que ocupe todo el ancho */
  line-height: 1.4;
}
/* Centrar el párrafo bajo el logo (columna 1 del footer) */
.site-footer .footer-grid > div:first-child p.muted{
  text-align: center !important;
  max-width: 36ch;
  margin: 8px auto 0;   /* centra el bloque */
  line-height: 1.45;
}

/* (opcional) un poco más claro para que no compita con el título */
.site-footer .footer-grid > div:first-child p.muted{
  color: color-mix(in oklab, var(--muted) 90%, #fff 10%);
}
/* ===== MOBILE TUNING (≤ 768px) ===== */
@media (max-width: 768px){

  /* 1) Títulos mucho más compactos */
  .hero-content h1,
  .hero .hero-content h1,
  .hero-title{
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.22;
    letter-spacing: .2px;
    margin-bottom: 10px;
  }

  /* 2) Subtítulos/párrafos más pequeños */
  .hero .hero-content p{
    font-size: 14px;
    line-height: 1.4;
    margin-top: 8px;
    margin-bottom: 16px;
  }

  /* 3) Badges y botones más chicos */
  .badge{
    font-size: 12px;
    padding: 6px 10px;
  }

  /* 4) Botones a ancho completo y texto perfectamente centrado */
  .hero .actions{
    flex-direction: column;   /* apilados en móvil */
    align-items: center;
    gap: 10px;
  }
  .hero .actions .btn{
    width: 100%;
    max-width: 640px;         /* no se van "inmensos" en tablets */
    justify-content: center;  /* centra horizontal */
    align-items: center;      /* centra vertical */
    text-align: center;
    font-size: 14px;
    padding: 10px 16px;
  }
}

/* ===== CENTRAR textos exactos de esos dos botones (por si hay estilos heredados) ===== */
.hero .actions .btn.btn-primary,
.hero .actions .btn.btn-ghost{
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}
/* ===== MOBILE BOOST: Footer compacto + H1 con 3 líneas ===== */
@media (max-width: 768px){

  /* ----- HERO title: limita a 3 líneas y balancea el texto ----- */
  .hero-content h1,
  .hero .hero-content h1,
  .hero-title{
    font-size: clamp(18px, 5vw, 24px);
    line-height: 1.22;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 3;          /* máx. 3 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-wrap: balance;
  }

  .hero .hero-content p{
    font-size: 14px;
    line-height: 1.4;
    margin: 8px 0 16px;
  }

  /* ----- Footer: una columna, menos espacio y texto compacto ----- */
  .site-footer .footer-grid{
    grid-template-columns: 1fr !important;
    gap: 14px;
    padding: 18px 16px;
  }

  .site-footer .footer-grid > div{
    padding: 12px 12px;
    border-radius: 12px;
    font-size: 14px;
    text-align: center;              /* todo centrado en móvil */
  }

  .site-footer h4{
    font-size: 15px;
    margin: 0 0 6px;
  }
  .site-footer h4::after{
    left: 50%;
    transform: translateX(-50%);
  }

  .site-footer .footer-links{
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    text-align: center;
  }

  .site-footer .footer-links li{ margin: 4px 0; }
  .site-footer .footer-links a{ display:inline-block; }

  .footer-copy{
    font-size: 12px;
    padding: 10px 12px;
  }

  /* ----- Footer: bloque de marca más pequeño y centrado ----- */
  .site-footer .footer-grid .brand{
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 6px;
    padding: 12px 10px;
    text-align: center;
  }
  .site-footer .footer-grid .brand .logo{
    width: 44px; height: 44px; padding: 5px;
    border-radius: 12px; margin-bottom: 4px;
  }
  .site-footer .footer-grid .brand strong,
  .site-footer .footer-grid .brand b{
    font-size: 15px;
    padding: 6px 12px;
  }
  .site-footer .footer-grid .brand small{
    font-size: 12.5px; line-height: 1.25;
  }
  .site-footer .footer-grid > div:first-child p.muted{
    text-align: center !important;
    font-size: 13.5px;
    line-height: 1.35;
    max-width: 30ch;
    margin: 6px auto 0;
  }
}
/* ===== Ajustar header flotante en móvil ===== */
@media (max-width: 768px){
  header .nav a{
    font-size: 13px;         /* más pequeño que en desktop */
    padding: 6px 8px;        /* menos padding */
  }

  header .brand{
    font-size: 14px;         /* texto del logo más chico */
    gap: 6px;
  }

  header .brand small{
    font-size: 11px;
  }

  .cart-btn{
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
  }
}
/* BOTÓN flotante de chat estilo sticky header */
.wa-float{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #25D366, #128C7E); /* degradado tipo header */
  box-shadow: 0 8px 22px rgba(0,0,0,.35), 0 0 10px rgba(37,211,102,.5);
  border: 0;
  z-index: 2147483647; /* igual o más que el header */
  backdrop-filter: saturate(1.2) blur(6px); /* efecto vidrio como header */
  -webkit-backdrop-filter: saturate(1.2) blur(6px);
  transition: transform .2s ease, box-shadow .2s ease;
}
.wa-float:hover{
  transform: scale(1.05);
  box-shadow: 0 10px 28px rgba(0,0,0,.4), 0 0 14px rgba(37,211,102,.6);
}
/* === Chat flotante (estilo encabezado) === */
.chat-fab{
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #042332;
  text-decoration: none;

  /* look & feel del header */
  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  box-shadow:
    0 10px 28px rgba(0,0,0,.40),
    0 0 0 1px rgba(255,255,255,.20) inset;
  border: 0;
  z-index: 2147483647; /* por encima de todo */
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);

  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.chat-fab:hover{
  transform: translateY(-2px);
  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    0 0 0 2px rgba(255,255,255,.25) inset;
  filter: brightness(1.04);
}

.chat-fab:active{
  transform: translateY(0);
  filter: brightness(.96);
}

/* mini pulso suave (opcional) */
@keyframes chatPulse {
  0%,100% { box-shadow: 0 10px 28px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.20) inset; }
  50%     { box-shadow: 0 12px 34px rgba(0,0,0,.46), 0 0 0 2px rgba(255,255,255,.25) inset; }
}
.chat-fab{ animation: chatPulse 3.2s ease-in-out infinite; }

/* No estorbar cuando el drawer del carrito esté abierto */
body.cart-open .chat-fab{
  opacity: .0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* Tamaños móviles */
@media (max-width: 768px){
  .chat-fab{
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
  }
}

/* Evita solaparse con otros FABs que ya tengas */
.visit-fab{ bottom: calc(18px + env(safe-area-inset-bottom, 0px) + 64px); }
@media (max-width: 768px){
  .visit-fab{ bottom: calc(14px + env(safe-area-inset-bottom, 0px) + 60px); }
}
/* FAB de chat fijo al viewport (no se mueve con scroll) */
.chat-fab{
  position: fixed;                     /* clave: fijo al viewport */
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #042332;
  text-decoration: none;

  background: linear-gradient(90deg, var(--brand1), var(--brand2));
  box-shadow: 0 10px 28px rgba(0,0,0,.40), 0 0 0 1px rgba(255,255,255,.20) inset;
  z-index: 2147483647;                 /* por encima de todo */
  backdrop-filter: blur(8px) saturate(1.1);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);

  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}

.chat-fab:hover{ transform: translateY(-2px); filter: brightness(1.04); }
.chat-fab:active{ transform: translateY(0); filter: brightness(.96); }

/* Evita que otros overlays lo tapen/oculten */
.drawer-backdrop{ z-index: 2147483645; }  /* justo debajo del FAB */
.drawer{ z-index: 2147483646; }           /* y debajo del FAB también */

/* Si abres el carrito y quieres ocultar el FAB, descomenta: */
/*
body.cart-open .chat-fab{
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
*/

/* Tamaños móviles */
@media (max-width: 768px){
  .chat-fab{
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
  }
}


/* === Chat en el header (misma capa que los enlaces) === */
.chat-nav-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px; height:38px;
  border-radius:999px;
  color:#042332;
  text-decoration:none;
  margin-right:10px;

  background: linear-gradient(90deg, var(--brand1,#00E1FF), var(--brand2,#00FFA8));
  box-shadow: 0 10px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.20) inset;
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
}
.chat-nav-btn:hover{
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 12px 26px rgba(0,0,0,.4), 0 0 0 2px rgba(255,255,255,.25) inset;
}
.chat-nav-btn:active{
  transform: translateY(0);
  filter: brightness(.96);
}

/* Mantener jerarquía de capas del header */
header{ position: sticky; top: 0; z-index: 2147483600; }
.nav{ display:flex; align-items:center; }

/* Móvil: botón un poco más pequeño */
@media (max-width: 768px){
  .chat-nav-btn{
    width:34px; height:34px;
    margin-right:8px;
  }
}

/* === FOOTER COPY · estilo Matrix robusto === */
.footer-copy{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;

  padding: 14px 16px;
  text-align: center;

  /* base glass + contraste */
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65));
  color: #b9ffcf;
  font: 600 14px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  border-top: 1px solid rgba(0,255,168,.25);
  box-shadow:
    inset 0 1px 0 rgba(0,255,168,.15),
    0 -6px 24px rgba(0,0,0,.35);

  text-shadow: 0 0 12px rgba(0,255,168,.35);
  letter-spacing: .2px;

  overflow: hidden;     /* contiene efectos */
  user-select: none;    /* evita selección accidental */
}

/* brillos y fondo “code rain” sutil */
.footer-copy::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(120% 180% at 50% 120%, rgba(0,255,168,.10), transparent 60%),
    radial-gradient(80% 180% at 0% 0%, rgba(0,225,255,.06), transparent 65%),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.4));
  pointer-events:none;
}

/* lluvia de dígitos (muy sutil, animada) */
.footer-copy::after{
  content: "0100110011010011010011001101 0011010011001101001100110100 "
         "0110011001100100110100110011 0011010011001101001100110100  ";
  position:absolute; left:0; right:0; top:-110%; bottom:-110%;
  color: rgba(0,255,168,.14);
  font: 700 16px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 2px;
  white-space: pre;
  pointer-events:none;
  animation: matrix-fall 8s linear infinite;
  mix-blend-mode: screen;     /* integra mejor con el fondo */
}

/* scanlines muy sutiles */
.footer-copy .scan{
  position:absolute; inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0,
      rgba(0,0,0,0) 2px,
      rgba(0,255,168,.035) 3px,
      rgba(0,0,0,0) 4px
    );
  pointer-events:none;
}

/* animación */
@keyframes matrix-fall{
  0%   { transform: translateY(-30%); }
  100% { transform: translateY(30%); }
}

/* accesibilidad: sin animación si el usuario lo pide */
@media (prefers-reduced-motion: reduce){
  .footer-copy::after{ animation: none; opacity:.18; }
}

/* responsive: compáctalo un poco en móvil */
@media (max-width: 600px){
  .footer-copy{ font-size: 12.5px; padding: 12px; }
}
/* === Footer Copy mejorado Matrix === */
.footer-copy{
  color: #b9ffcf !important;                /* verde neón */
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  padding: 12px 14px;

  text-shadow:
    0 0 6px rgba(0,255,168,0.6),
    0 0 12px rgba(0,255,168,0.4);
  letter-spacing: 0.3px;

  background: linear-gradient(180deg, rgba(0,0,0,.3), rgba(0,0,0,.55));
  border-top: 1px solid rgba(0,255,168,.25);
  box-shadow: inset 0 1px 0 rgba(0,255,168,.15);
}

/* efecto “scanlines” opcional */
.footer-copy::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,255,168,0.06) 0px,
    rgba(0,255,168,0.06) 1px,
    transparent 2px,
    transparent 4px
  );
  pointer-events:none;
  opacity:.4;
}

/* más compacto en móvil */
@media (max-width: 600px){
  .footer-copy{
    font-size: 12.5px;
    padding: 10px;
  }
}