/* =============================
   Diseño base — Todo Computación
   ============================= */
:root{
  --bg:#0b0f14;
  --bg-2:#111825;
  --surface:#0f1623;
  --card:#121c2b;
  --text:#e6f0ff;
  --muted:#9fb3c8;
  --brand-green:#00e676; /* verde chillón */
  --brand-red:#ff4d4f;
  --brand-white:#ffffff;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --radius:16px;
  --focus: 2px solid color-mix(in oklab, var(--brand-green) 55%, white 0%);
}

*{box-sizing:border-box}
html,body{
  height:100%;
  min-width:320px;                 /* evita que se encoja demasiado */
  overflow-x:hidden;               /* bloquea scroll horizontal */
  overscroll-behavior-x:none;      /* bloquea overscroll lateral */
  touch-action:pan-y;              /* solo scroll vertical */
}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(60vw 40vw at 80% -10%, rgba(0,230,118,.15), transparent 40%),
    radial-gradient(40vw 40vw at -10% 10%, rgba(255,77,79,.12), transparent 35%),
    var(--bg);
  line-height:1.6;
  font-size: clamp(14px, 1.1vw, 18px);
  color-scheme: dark; /* formularios nativos en dark */
}

/* Bloqueo de scroll cuando el drawer está abierto (añadir/quitar con JS) */
.body-lock{
  overflow: hidden;
  touch-action: none;
}


/* Accesibilidad: estados de focus visibles */
a:focus-visible, button:focus-visible, .btn:focus-visible, .nav-link:focus-visible{
  outline: var(--focus);
  outline-offset: 3px;
  border-radius: 12px;
}

/* Reduce motion para quien lo prefiera */
@media (prefers-reduced-motion: reduce){
  *{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Media base */
img, svg{ max-width:100%; height:auto; display:block; }

/* Containers */
.container{max-width:1180px; margin:0 auto; padding:0 20px}

/* Header / Nav */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;   /* <-- antes 50 */
  background: rgba(10,14,20,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
@supports (backdrop-filter: blur(10px)){
  .site-header{ backdrop-filter: blur(10px); }
}

.nav{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text)}
.brand-logo{width:36px; height:36px}
.brand-name{font-weight:700; letter-spacing:.2px}

.nav-links{display:flex; align-items:center; gap:24px}
.nav-link{color:var(--text); text-decoration:none; opacity:.85}
.nav-link:hover{opacity:1}
.nav-link.cta{
  padding:10px 16px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand-green), var(--brand-red));
  color:#000; font-weight:700
}

.hamburger{
  display:none; width:42px; height:42px; border:0; background:transparent; position:relative; cursor:pointer;
  min-height:44px; /* target táctil */
}
.hamburger span{
  position:absolute; left:10px; right:10px; height:2px; background:var(--text);
  transition:transform .25s, top .25s, opacity .25s
}
.hamburger span:nth-child(1){top:12px}
.hamburger span:nth-child(2){top:20px}
.hamburger span:nth-child(3){top:28px}
.hamburger.active span:nth-child(1){top:20px; transform:rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){top:20px; transform:rotate(-45deg)}

/* Drawer con fondo sólido y scroll interno */
.nav-drawer{
  position: fixed;
  right: 0;
  top: clamp(16px, 4dvh, 40px);
  bottom: clamp(16px, 4dvh, 40px);    /* deja aire arriba/abajo en todos los móviles */
  width: min(86%, 360px);
  background: rgba(15,22,35,0.92);
  backdrop-filter: blur(12px);
  border-radius: 16px 0 0 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  padding: 16px;

  /* 👉 clave para que NO “llene” todo y el contenido desborde dentro */
  max-height: calc(100dvh - 2 * clamp(16px, 4dvh, 40px));
  overflow: auto;

  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.nav-drawer.open{ opacity:1; transform:none; pointer-events:auto; }

/* Asegura que el contenido quede por encima del ::before */
.nav-drawer > *{ position: relative; z-index: 1; }

.drawer-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 4px 12px; border-bottom:1px solid rgba(255,255,255,.06)
}
.drawer-brand{display:flex; align-items:center; gap:10px}
.drawer-brand img{width:28px}
.drawer-link{
  display:block;
  padding:14px 12px;
  color:var(--text);
  text-decoration:none;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  opacity:1;
}
.drawer-link:hover{
  background:rgba(255,255,255,.08);
}

.drawer-actions{display:flex; gap:10px; padding:14px 0}
.drawer-close{background:transparent; border:0; color:var(--text); font-size:20px; cursor:pointer}

/* Backdrop */
.backdrop{
  position: fixed;
  inset: 0;
  /* Degradado desde el borde derecho hacia el centro; transparente en el resto */
  background: linear-gradient(to left, rgba(10,14,20,.55), rgba(10,14,20,.35) 30%, transparent 65%);
  /* si quieres aún más sutil: .35 -> .25 y .55 -> .40 */
  opacity: 0;
  pointer-events: none;       /* no estorba cuando está oculto */
  transition: opacity .25s ease;
  z-index: 9998;
}
.backdrop.visible{
  opacity: 1;
  pointer-events: auto;       /* permite cerrar al tocar fuera */
}

/* Hero */
.hero{padding:64px 0 36px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:30px; align-items:center}
.badge{display:inline-block; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.15); color:var(--muted); backdrop-filter: blur(4px)}
.hero-title{font-size: clamp(28px, 4vw, 56px); line-height:1.1; margin:.4rem 0 .6rem}
.txt-gradient{background:linear-gradient(90deg, var(--brand-green), var(--brand-red)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{color:var(--muted); max-width:60ch}
.hero-actions{display:flex; gap:12px; margin-top:14px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 18px; border-radius:999px; font-weight:700; text-decoration:none;
  border:1px solid transparent; min-height:44px; transition: transform .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); filter:brightness(.97); }
.btn-primary{background:var(--brand-white); color:#0b0f14}
.btn-primary:hover{filter:brightness(.95)}
.btn-whatsapp{background:linear-gradient(90deg, var(--brand-green), #00c853); color:#0b0f14; box-shadow: 0 8px 24px rgba(0,230,118,.25)}
.btn-outline{border-color:rgba(255,255,255,.28); color:var(--text); background:transparent}

.meta-list{list-style:none; padding:0; margin:14px 0 0; color:var(--muted)}
.meta-list a{color:var(--text)}

.hero-art{position:relative; min-height:280px}
.phone-stack{position:relative; width:100%; height:340px; perspective:1000px}

/* Fix animación: conservar transform base con variable */
.phone-card{
  position:absolute; inset:0; margin:auto; width:240px; height:480px; border-radius:28px;
  background:linear-gradient(180deg,#0d111a,#131b2a);
  box-shadow: 0 30px 80px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform-origin:50% 120%;
  --base: translateY(0) rotate(0);
  transform: var(--base);
  animation: float 5s ease-in-out infinite;
}
.phone-card::before{
  content:""; position:absolute; inset:12px; border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.0));
}
.card-a{ --base: rotate(-10deg) translate(-40px,-10px); animation-delay:0s }
.card-b{ --base: rotate(6deg) translate(40px,0);     animation-delay:.6s }
.card-c{ --base: rotate(0deg) translateY(8px) scale(.96); animation-delay:1.2s }
@keyframes float{
  0%,100%{ transform: var(--base) translateY(0) }
  50%    { transform: var(--base) translateY(-10px) }
}
.glow{
  position:absolute; inset:auto 0 -30px 0; height:70px; filter:blur(24px);
  background:radial-gradient(closest-side, rgba(0,230,118,.4), transparent),
             radial-gradient(closest-side, rgba(255,77,79,.35), transparent 60%);
}

/* Sections */
.section{padding:64px 0}
.section.alt{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.section-head h2{margin:0 0 8px}
.section-head p{color:var(--muted); margin:0 0 24px}

/* Filters */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.filters input,.filters select{
  background:var(--card); color:var(--text); border:1px solid rgba(255,255,255,.08);
  padding:10px 12px; border-radius:12px; outline:none; min-height:42px;
  transition: border-color .2s, box-shadow .2s;
}
.filters input::placeholder{color:rgba(255,255,255,.5)}
.filters input:focus, .filters select:focus{
  border-color: color-mix(in oklab, var(--brand-green) 60%, white 0%);
  box-shadow: 0 0 0 3px rgba(0,230,118,.15);
}

/* Catalog */
.catalog-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px}
.product-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); border-radius:18px; box-shadow: var(--shadow);
  overflow:hidden; transform:translateY(6px); opacity:0; animation:reveal .6s forwards;
}
@keyframes reveal{to{transform:none; opacity:1}}
.product-media {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(0,230,118,.18), rgba(255,77,79,.18));
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  padding: 12px;
}

.product-media img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;

  /* Estética */
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  display: block;
  margin: auto;
  position: relative;
  z-index: 1;
}

.product-media svg{width:42%; opacity:.9}
.product-body{padding:14px}
.product-title{margin:0 0 4px; font-size:1.06rem}
.product-meta{color:var(--muted); font-size:.95rem; margin:0 0 12px}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px}
.badge-chip{
  padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08); font-size:.8rem; color:var(--text)
}
.card-actions{display:flex; gap:8px}
.card-actions .btn{flex:1}

/* Skeleton opcional al cargar */
.product-card.loading .product-media{ position:relative; }
.product-card.loading .product-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
  transform: translateX(-100%); animation: shine 1.4s infinite;
}
@keyframes shine{ to{ transform: translateX(100%); } }


/* Servicios */
.service-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:14px}
.service-card{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; box-shadow:var(--shadow); transform:translateY(6px); opacity:0}
.service-card .icon{font-size:28px; margin-bottom:6px}
.service-card.reveal.show{animation:reveal .6s forwards}

/* Nosotros */
.about{display:grid; grid-template-columns:1.2fr .8fr; gap:18px}
.about-text{background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px}
.checklist{list-style:none; padding-left:0}
.checklist li{margin:8px 0}
.about-card{
  background:linear-gradient(180deg, rgba(0,230,118,.12), rgba(255,77,79,.10));
  border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px
}

/* Contacto */
.contact-grid{display:grid; grid-template-columns: .9fr 1.1fr; gap:18px}
.contact-card,.map-card{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px; box-shadow:var(--shadow)
}
.contact-actions{display:flex; gap:10px; margin-top:10px}
.map-card iframe{width:100%; height:320px; border:0; border-radius:12px;}

/* Footer */
.site-footer{border-top:1px solid rgba(255,255,255,.06); padding:24px 0 48px; background:rgba(10,14,20,.6);}
.footer-grid{display:grid; grid-template-columns: 1fr auto auto; gap:16px; align-items:center}
.footer-brand{display:flex; align-items:center; gap:12px}
.footer-brand img{width:28px}
.footer-links{display:flex; gap:18px}
.footer-links a{color:var(--muted); text-decoration:none}
.footer-links a:hover{color:var(--text)}

/* Responsive */
@media (max-width: 1024px){
  .hero-art { display: none; } /* Oculta el teléfono animado en tablet/móvil */
  .hero-grid{grid-template-columns:1fr; text-align:center}
  .hero-actions{justify-content:center}
  .service-grid{grid-template-columns:repeat(2, 1fr)}
  .about{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}

@media (max-width: 860px){
  .site-header .nav-links{display:none}
  .hamburger{display:block}
  .catalog-grid{grid-template-columns:repeat(2, 1fr)}
  .footer-grid{grid-template-columns:1fr}

  /* Reducir hero/art en tablet-móvil */
  .hero{padding:40px 0 24px;}
  .hero-art{min-height:200px;}
  .phone-stack{height:260px;}
  .phone-card{width:170px; height:340px;}
  .glow{height:44px;}
}

@media (max-width: 520px){
  .catalog-grid{grid-template-columns:1fr}
  .service-grid{ grid-template-columns:1fr; }
  .footer-links{ flex-wrap:wrap; row-gap:8px; }

  /* Móvil pequeño */
  .hero{padding:28px 0 18px;}
  .hero-title{font-size: clamp(22px, 8vw, 30px);}
  .hero-sub{font-size:.95rem;}
  .phone-stack{height:220px;}
  .phone-card{width:150px; height:300px;}
}

.nav-drawer .nav-links{
  display:flex !important;          /* anula el display:none del breakpoint */
  flex-direction:column;
  gap:8px;
  padding:8px 0;
}

.nav-drawer .drawer-link{
  display:block;
  padding:14px 12px;
  color:var(--text);
  text-decoration:none;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  opacity:1;                        
}

.nav-drawer .drawer-link:hover{
  background:rgba(255,255,255,.08);
}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:20px;
}
.page-btn{
  border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.04);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
}
.page-btn.is-current{
  font-weight:700;
  outline:2px solid color-mix(in oklab, var(--brand-green, #00e676) 60%, white 0%);
}
.page-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.page-ellipsis{ opacity:.6; padding:0 4px; }

/* === Marco blanco del tamaño de la imagen + desvanecido al fondo === */
.product-media{
  /* recuperamos el fondo arcoíris original del contenedor */
  background: linear-gradient(135deg, rgba(0,230,118,.18), rgba(255,77,79,.18));
  display: grid;
  place-items: center;
  border-radius: 12px;
  overflow: hidden;
  position: relative; /* para el pseudo-elemento de glow */
  padding: 0;         /* sin padding aquí, el marco va en la IMG */
  aspect-ratio: 4/3;
}

/* “Placa” blanca que sigue el tamaño de la imagen */
.product-media img{
  background: #fff;          /* placa blanca detrás de la foto */
  padding: 10px;             /* marco visible */
  border-radius: 14px;       /* esquinas suaves */
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);  /* separación del fondo */
  max-width: 92%;
  max-height: 92%;
  object-fit: contain;
}

/* Glow/desvanecido suave alrededor de la placa para mezclar con el fondo */
.product-media::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* halo blanco que se desvanece: el centro es más claro y se va volviendo transparente */
  background: radial-gradient(ellipse at center,
              rgba(255,255,255,.40) 5%,
              rgba(255,255,255,.22) 30%,
              rgba(255,255,255,.10) 75%,
              rgba(255,255,255,0) 100%);
  filter: blur(8px);   /* suaviza el borde del glow */
  z-index: 0;          /* detrás de la imagen */
}

/* La imagen queda por encima del glow */
.product-media img{ position: relative; z-index: 1; }

/* Ajustes responsive: en móvil el marco queda un poco más pequeño para verse mejor */
@media (max-width: 520px){
  .product-media img{
    max-width: 88%;
    padding: 8px;           /* marco un pelín más fino */
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(0,0,0,.22);
  }
  .product-media::after{
    filter: blur(10px);
    background: radial-gradient(ellipse at center,
                rgba(255,255,255,.36) 0%,
                rgba(255,255,255,.18) 38%,
                rgba(255,255,255,.08) 58%,
                rgba(255,255,255,0) 78%);
  }
}