/* ────────────────────────────────────────────────────────────────────
   VARIABLES
──────────────────────────────────────────────────────────────────── */
:root{
  --font:'Montserrat',sans-serif;
  --color-night:#030a14;
  --color-light:#fff;
  --neon-blue:#0ff;
  --neon-green:#0f8;
  --transition-fast:.2s ease-in-out;
  --transition-slow:.3s ease-in-out;
}

/* ────────────────────────────────────────────────────────────────────
   KEYFRAMES Y ANIMACIONES
──────────────────────────────────────────────────────────────────── */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

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

/* ────────────────────────────────────────────────────────────────────
   RESET
──────────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font);
  background:var(--color-night);
  color:var(--color-light);
  line-height:1.6;
}

/* ────────────────────────────────────────────────────────────────────
   CONTENEDOR
──────────────────────────────────────────────────────────────────── */
.container{
  width:90%;
  max-width:1200px;
  margin:0 auto;
}

/* ────────────────────────────────────────────────────────────────────
   HEADER
──────────────────────────────────────────────────────────────────── */
.site-header{ background:var(--color-night); }
.site-header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 0;
}
.logo img{
  height:150px;
  transition:transform var(--transition-fast);
}
.logo img:hover{ transform:scale(1.05); }

/* ────────────────────────────────────────────────────────────────────
   NAV / MENÚ
──────────────────────────────────────────────────────────────────── */
.main-menu{
  display:flex;
  gap:2rem;
  list-style:none;
}
.main-menu a{
  color:var(--color-light);
  font-weight:600;
  text-decoration:none;
  position:relative;
  transition:color var(--transition-fast);
}
.main-menu a::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:0; height:2px;
  background:var(--neon-green);
  transition:width var(--transition-fast);
}
.main-menu a:hover{ color:var(--neon-green); }
.main-menu a:hover::after{ width:100%; }

/* CTA NAV */
.nav{
  display:flex;
  flex-direction:row;
  gap:.75rem;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:1rem;
}
.nav .btn{
  flex:1 1 auto;
  min-width:140px;
  text-align:center;
}
@media (max-width:360px){
  .nav .btn{ min-width:120px; padding:.5rem 1rem; font-size:.9rem; }
}

/* Hamburguesa / CTA en móvil */
.menu-toggle{
  display:none;
  background:none;
  border:0;
  color:var(--neon-green);
  font-size:1.75rem;
  cursor:pointer;
  transition:color var(--transition-fast);
}
.menu-toggle:hover{ color:var(--neon-blue); }
.cta-buttons{ display:flex; gap:.5rem; }

/* ────────────────────────────────────────────────────────────────────
   BOTONES
──────────────────────────────────────────────────────────────────── */
.btn{
  display:inline-block;
  padding:.75rem 1.5rem;
  border-radius:4px;
  font-weight:600;
  text-decoration:none;
  transition:box-shadow var(--transition-slow), transform var(--transition-fast);
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background:var(--neon-blue);
  color:var(--color-night);
  box-shadow:0 0 8px var(--neon-blue),0 0 16px var(--neon-green);
}
.btn-primary:hover{ box-shadow:0 0 12px var(--neon-blue),0 0 24px var(--neon-green); }
.btn-secondary{
  background:var(--neon-green);
  color:var(--color-night);
  box-shadow:0 0 8px var(--neon-green),0 0 16px var(--neon-blue);
}
.btn-secondary:hover{ box-shadow:0 0 12px var(--neon-green),0 0 24px var(--neon-blue); }
.btn-outline{
  border:2px solid var(--neon-blue);
  color:var(--neon-blue);
}
.btn-outline:hover{
  background:var(--neon-blue);
  color:var(--color-night);
}

/* ────────────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:75vh;
  padding:clamp(3rem,8vw,6rem) 1rem;
  text-align:center;
  background:url('/assets/banner.png') no-repeat center/cover;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}
.hero > *{ position:relative; z-index:1; }
.hero .container{ width:100%; padding:0 2rem; }
.hero h1,.hero p{ margin-left:auto; margin-right:auto; }

.hero h1{
  font-size:clamp(1.75rem,5vw,3rem);
  max-width:900px;
  margin-bottom:1rem;
  background:linear-gradient(270deg,var(--neon-blue),var(--neon-green));
  background-size:400% 400%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:gradientText 6s ease infinite;
}
.hero p{
  font-size:clamp(.95rem,2.2vw,1.25rem);
  max-width:700px;
  margin-bottom:2rem;
  line-height:1.5;
}
.hero-cta{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  justify-content:center;
}
.hero-cta .btn{ min-width:180px; }

/* Bullets héroe */
.hero-bullets{ margin:12px 0 20px; padding-left:18px; }
.hero-bullets li{ margin:6px 0; line-height:1.4; }

/* ────────────────────────────────────────────────────────────────────
   SECCIONES GENERALES
──────────────────────────────────────────────────────────────────── */
section{ padding:clamp(2rem,4vw,3.5rem) 0; }
h2,.subtitulo{
  text-align:center;
  color:var(--neon-green);
  margin-bottom:clamp(.75rem,2vw,1.25rem);
  font-size:clamp(1.4rem,2.5vw,2rem);
  line-height:1.2;
}

/* ────────────────────────────────────────────────────────────────────
   SERVICIOS
──────────────────────────────────────────────────────────────────── */
.servicios-seccion{ background:rgba(0,0,0,.3); }
.intro,.descripcion{
  margin:0 auto 2rem;
  text-align:center;
  max-width:68ch;
  padding:0 2rem;
}
.servicios-lista{
  display:grid;
  gap:40px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
@media (min-width:1400px){
  .servicios-lista{ grid-template-columns:repeat(5,1fr); }
}
.servicio-item{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:.6rem;
  min-height:100%;
  padding:clamp(1.25rem,2.2vw,2rem) clamp(1rem,2vw,1.5rem);
  background:rgba(0,0,0,.5);
  border-radius:10px;
  overflow:hidden;
  animation:glow 3s infinite alternate;
  transition:transform var(--transition-fast);
}
.servicio-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:12px;
  background:conic-gradient(from 0deg,var(--neon-blue),var(--neon-green));
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:spin 8s linear infinite;
  pointer-events:none;
}
.servicio-item:hover{ transform:translateY(-6px) scale(1.03); }
.servicio-item h4{
  color:var(--color-light);
  font-size:clamp(1rem,1.3vw,1.15rem);
  font-weight:600;
  line-height:1.3;
}
.servicio-item i{ font-size:clamp(1.4rem,2vw,2rem); color:var(--neon-green); }

/* ────────────────────────────────────────────────────────────────────
   PRODUCTOS
──────────────────────────────────────────────────────────────────── */
.productos-seccion{ background:rgba(0,0,0,.3); }
.productos-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:1.5rem;
  max-width:1200px;
  margin:0 auto;
}
.producto-item{
  position:relative;
  padding:1.5rem;
  background:rgba(0,0,0,.5);
  border-radius:8px;
  overflow:hidden;
  text-align:center;
  animation:glow 3s infinite alternate-reverse;
  transition:transform var(--transition-fast);
}
.producto-item::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:10px;
  background:conic-gradient(from 180deg,var(--neon-green),var(--neon-blue));
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:spin 8s linear infinite reverse;
}
.producto-item:hover{ transform:translateY(-6px) scale(1.03); }
.producto-item img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:4px;
  margin-bottom:1rem;
}
.producto-item h4{ color:var(--color-light); font-size:1.2rem; margin-bottom:.5rem; }
.producto-item p{ color:var(--color-light); font-size:.95rem; margin-bottom:1rem; }
.producto-item .price{
  display:block;
  color:var(--neon-blue);
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:1rem;
}
.producto-item .btn-secondary{ font-size:.95rem; padding:.5rem 1rem; }
.producto-item .btn-secondary i{ margin-right:.5rem; }

/* ────────────────────────────────────────────────────────────────────
   CONTACTO
──────────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────────
   CONTACTO - OPTIMIZADO
──────────────────────────────────────────────────────────────────── */
.contacto form{
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
  background: rgba(0,0,0,.4);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(15, 248, 136, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.form-group{ 
  margin-bottom: 1.5rem;
  position: relative;
}

.form-group input,
.form-group textarea{
  width: 100%;
  padding: 1rem;
  background: rgba(255,255,255,.1);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: 8px;
  color: var(--color-light);
  font-family: var(--font);
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus{
  outline: none;
  border-color: var(--neon-green);
  box-shadow: 0 0 12px rgba(15, 248, 136, 0.3);
  background: rgba(255,255,255,.15);
}

.form-group input.error,
.form-group textarea.error{
  border-color: #f56565;
  box-shadow: 0 0 12px rgba(245, 101, 101, 0.3);
}

.form-group textarea{
  resize: vertical;
  min-height: 120px;
}

.form-group ::placeholder{ 
  color: rgba(255,255,255,.6); 
}

.field-error{
  color: #f56565;
  font-size: 0.875rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.field-error::before{
  content: '⚠';
  font-size: 1rem;
}

.form-feedback{
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
}

.form-feedback.success{
  background: rgba(72, 187, 120, 0.2);
  color: #48bb78;
  border: 1px solid rgba(72, 187, 120, 0.3);
}

.form-feedback.error{
  background: rgba(245, 101, 101, 0.2);
  color: #f56565;
  border: 1px solid rgba(245, 101, 101, 0.3);
}

button[type="submit"]{ 
  width: 100%; 
  margin-top: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.1rem;
}

/* ────────────────────────────────────────────────────────────────────
   CTA FIJA
──────────────────────────────────────────────────────────────────── */
.fixed-cta{
  position:fixed;
  bottom:1rem; right:1rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.fixed-cta .small{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
}

/* ────────────────────────────────────────────────────────────────────
   FOOTER ANIMACIÓN
──────────────────────────────────────────────────────────────────── */
.sb{
  opacity:0;
  transform:translateY(100px);
  animation:slideUpFooter 4s ease-out .5s forwards;
}
@keyframes slideUpFooter{ to{ opacity:1; transform:translateY(0); } }

/* ────────────────────────────────────────────────────────────────────
   UTILS
──────────────────────────────────────────────────────────────────── */
.visually-hidden{
  position:absolute!important;
  height:1px; width:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* ────────────────────────────────────────────────────────────────────
   DEV MODE (showcase)
──────────────────────────────────────────────────────────────────── */
.devmode{ padding:48px 16px; background:#b2ccc1; }
.devmode .wrap{
  position:relative;
  max-width:1100px;
  margin:0 auto;
  border-radius:16px;
  overflow:hidden;
  background:#0b0f1a;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.devmode .screen{
  display:block;
  width:100%; height:auto;
  object-fit:cover;
  border-radius:16px;
  margin:0;
  position:relative; z-index:1;
}
.devmode .callout,.devmode .bubble,.devmode .chip,.devmode .tag,.devmode .label{
  position:absolute; z-index:2; opacity:0; pointer-events:none; will-change:transform,opacity;
}
.devmode [style*="--x"]{ left:var(--x); top:var(--y); transform:translate(0,0); }
.callout{ display:flex; align-items:center; gap:10px; }
.callout .dot{
  width:10px; height:10px; border-radius:999px; background:#19e6ff;
  box-shadow:0 0 0 0 rgba(25,230,255,.6);
  position:relative; animation:pulse 2s infinite;
}
.callout.left .dot::after{
  content:""; position:absolute; left:10px; top:50%;
  width:60px; height:2px; background:linear-gradient(90deg,#19e6ff,transparent);
}
.callout .card{
  color:#e8f6ff; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.15);
  padding:8px 12px; border-radius:8px; backdrop-filter:blur(6px);
  font:600 14px/1.2 Montserrat,system-ui;
}
.bubble{
  color:#fff; background:#1677ff; padding:10px 14px; border-radius:18px;
  font:600 14px/1 Montserrat,system-ui; box-shadow:0 6px 18px rgba(0,0,0,.25);
  animation:float 6s ease-in-out infinite;
}
.chip{
  display:grid; gap:2px; min-width:180px; color:#eaf6ff;
  background:rgba(0,0,0,.48); border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:10px; backdrop-filter:blur(6px);
  font:500 13px/1.25 Montserrat,system-ui;
}
.chip .t{ opacity:.7; }
.tag{
  color:#eaf6ff; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.12);
  padding:10px 12px; border-radius:10px; font:600 14px/1.2 Montserrat,system-ui;
  box-shadow:0 6px 18px rgba(0,0,0,.2);
}
.label{
  background:#7c4dff; color:#fff; font:700 12px/1 Montserrat,system-ui;
  padding:6px 10px; border-radius:6px; box-shadow:0 6px 18px rgba(0,0,0,.25);
  transform-origin:50% 50%;
}
/* Keyframes DevMode */
@keyframes up{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes left{from{transform:translateX(-16px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes right{from{transform:translateX(16px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes pop{0%{transform:scale(.9);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(25,230,255,.6)}70%{box-shadow:0 0 0 12px rgba(25,230,255,0)}100%{box-shadow:0 0 0 0 rgba(25,230,255,0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.devmode .in.up{animation:up .6s ease-out forwards}
.devmode .in.left{animation:left .6s ease-out forwards}
.devmode .in.right{animation:right .6s ease-out forwards}
.devmode .label.in{animation:pop .5s ease-out forwards}
@media (prefers-reduced-motion:reduce){
  .devmode .callout,.devmode .bubble,.devmode .chip,.devmode .tag,.devmode .label{
    opacity:1!important; animation:none!important;
  }
}

/* ────────────────────────────────────────────────────────────────────
   SECCIÓN: MAQUETAMOS TU NEGOCIO
──────────────────────────────────────────────────────────────────── */
.maqueta{
  --bg:#0b1220; --card:#0f1a2e; --glass:rgba(255,255,255,.06);
  --border:rgba(255,255,255,.14); --txt:#eaf6ff; --muted:#a9bdd3;
  --accent:#1fe0ff; --accent-2:#7c4dff;

  padding:64px 0;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(124,77,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 120%, rgba(31,224,255,.15), transparent 60%),
    var(--bg);
  color:var(--txt);
}
.maqueta .maqueta-wrap{
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:36px;
  align-items:center;
}
.maqueta h2{
  font-weight:700;
  font-size:clamp(28px,3vw,40px);
  letter-spacing:.2px;
  margin:0 0 10px;
}
.maqueta .desc{
  color:var(--muted);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.6;
  margin:0 0 18px;
}
.maqueta .bullets{
  display:grid; gap:10px;
  margin:0 0 18px; padding:0; list-style:none;
}
.maqueta .bullets li{
  display:flex; align-items:center; gap:10px;
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px 12px;
  backdrop-filter:blur(6px);
}
.maqueta .bullets i{ color:var(--accent); }
.maqueta .cta-row{ display:flex; gap:12px; flex-wrap:wrap; margin:6px 0 16px; }
.maqueta .btn.ghost{ background:transparent; border:1px solid var(--border); }
.maqueta .trust{ display:flex; flex-wrap:wrap; gap:8px; }
.maqueta .badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border:1px solid var(--border);
  color:var(--muted); font-size:12px;
}
.maqueta .badge i{ color:var(--accent-2); }
.maqueta-visual{ display:grid; gap:12px; justify-items:center; }
.maqueta .mock{
  position:relative; width:100%; max-width:520px; aspect-ratio:16/10;
  margin:0; background:var(--card);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 12px 32px rgba(0,0,0,.35);
}
.maqueta .mock img{
  width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.02);
}
.maqueta .mock .tag{
  position:absolute; left:12px; top:12px;
  padding:6px 10px; font-weight:600; font-size:12px;
  color:#eaf6ff; background:rgba(0,0,0,.42);
  border:1px solid var(--border); border-radius:10px; backdrop-filter:blur(6px);
}
.maqueta .notes{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.maqueta .notes span{
  display:inline-flex; gap:8px; align-items:center;
  padding:8px 10px; font-size:12px; color:var(--muted);
  border:1px dashed var(--border); border-radius:10px;
}
/* Animación entrada */
@keyframes fadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.maqueta .maqueta-copy > *{ animation:fadeUp .6s ease both; }
.maqueta .maqueta-copy > *:nth-child(1){ animation-delay:.05s }
.maqueta .maqueta-copy > *:nth-child(2){ animation-delay:.12s }
.maqueta .maqueta-copy > *:nth-child(3){ animation-delay:.2s }
.maqueta .maqueta-copy > *:nth-child(4){ animation-delay:.28s }
.maqueta .maqueta-copy > *:nth-child(5){ animation-delay:.36s }
.maqueta .mock{ animation:fadeUp .7s ease .18s both }
.maqueta .notes{ animation:fadeUp .7s ease .28s both }
@media (prefers-reduced-motion:reduce){
  .maqueta .maqueta-copy > *, .maqueta .mock, .maqueta .notes{ animation:none; }
}

/* ────────────────────────────────────────────────────────────────────
   ANIMACIONES GLOBALES
──────────────────────────────────────────────────────────────────── */
@keyframes gradientText{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
@keyframes glow{
  0%  { box-shadow:0 0 5px var(--neon-green),0 0 10px var(--neon-blue); }
  100%{ box-shadow:0 0 20px var(--neon-green),0 0 30px var(--neon-blue); }
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ────────────────────────────────────────────────────────────────────
   RESPONSIVE (Global) - OPTIMIZADO
──────────────────────────────────────────────────────────────────── */
@media (max-width:1024px){
  .hero{ padding:5rem 1rem; }
}

@media (max-width:768px){
  body{ padding:3%; }
  
  /* ═══ HEADER RESPONSIVE OPTIMIZADO ═══ */
  .site-header {
    position: relative;
    background: var(--color-night);
    border-bottom: 1px solid rgba(15, 248, 136, 0.1);
  }
  
  .site-header .container{ 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    position: relative;
  }
  
  /* Logo responsive */
  .logo { 
    flex: 1;
    text-align: center;
    z-index: 1000;
  }
  .logo img { 
    height: 60px;
    transition: height var(--transition-fast);
  }
  
  /* Botón hamburguesa visible */
  .menu-toggle{ 
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(15, 248, 136, 0.1);
    border: 1px solid rgba(15, 248, 136, 0.3);
    transition: all var(--transition-fast);
    color: var(--neon-green);
    cursor: pointer;
  }
  
  .menu-toggle:hover {
    background: rgba(15, 248, 136, 0.2);
    transform: translateY(-50%) scale(1.05);
    color: var(--neon-blue);
  }
  
  .menu-toggle i {
    font-size: 1.2rem;
    color: var(--neon-green);
    display: block;
    line-height: 1;
    font-weight: 900;
  }
  
  .menu-toggle:hover i {
    color: var(--neon-blue);
  }
  
  /* Fallback simple si FontAwesome no carga */
  .menu-toggle::before {
    content: '≡';
    position: absolute;
    font-size: 1.4rem;
    line-height: 1;
    font-weight: bold;
    color: var(--neon-green);
    z-index: 1;
  }
  
  /* Ocultar fallback cuando FontAwesome funciona */
  .menu-toggle i:not(:empty)::before,
  .menu-toggle:has(i.fa-solid)::before {
    display: none;
  }
  
  /* Menú móvil optimizado */
  .main-menu{ 
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(3, 10, 20, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(15, 248, 136, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 0;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    animation: slideDown 0.3s ease;
    z-index: 999;
  }
  
  .main-menu.active{ 
    display: flex;
  }
  
  .main-menu li {
    list-style: none;
  }
  
  .main-menu a {
    display: block;
    padding: 1rem;
    border-radius: 8px;
    transition: all var(--transition-fast);
    font-size: 1.1rem;
  }
  
  .main-menu a:hover {
    background: rgba(15, 248, 136, 0.15);
    transform: translateX(5px);
  }
  
  /* CTA Buttons móvil */
  .cta-buttons{ 
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    background: rgba(3, 10, 20, 0.98);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(15, 248, 136, 0.3);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 10px;
    z-index: 998;
  }
  
  .cta-buttons.active {
    display: block;
  }
  
  .cta-buttons .btn{ 
    width: 100%; 
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
  }
  
  /* Ocultar elementos no esenciales */
  .btn-outline{ 
    display: none; 
  }
  
  .servicio-item,.producto-item{ 
    padding: 1.5rem; 
  }
}

@media (max-width:600px){
  .intro,.descripcion{ padding:0 1rem; }
  .servicios-lista{ gap:14px; }
}

@media (max-width:480px){
  body{ padding:2%; }
  
  /* ═══ HEADER EXTRA PEQUEÑO ═══ */
  .site-header {
    background: var(--color-night);
    padding: 0.5rem 0;
  }
  
  .site-header .container {
    padding: 0.75rem 0;
  }
  
  .logo img {
    height: 50px;
  }
  
  .menu-toggle {
    width: 40px;
    height: 40px;
    color: var(--neon-green);
  }
  
  .menu-toggle:hover {
    color: var(--neon-blue);
  }
  
  .menu-toggle i {
    font-size: 1rem;
  }
  
  .main-menu {
    padding: 1rem;
    gap: 0.75rem;
  }
  
  .main-menu a {
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  /* Hero responsive */
  .hero{ 
    padding: 3rem 0.5rem; 
    min-height: 60vh;
  }
  .hero-cta{ 
    flex-direction: column; 
  }
  .hero-cta .btn{ 
    width: 100%; 
  }
}

@media (max-width:360px){
  body{ padding: 1%; }
  
  .site-header .container {
    padding: 0.5rem 0;
  }
  
  .logo img {
    height: 45px;
  }
  
  .menu-toggle {
    width: 36px;
    height: 36px;
    color: var(--neon-green);
  }
  
  .menu-toggle:hover {
    color: var(--neon-blue);
  }
  
  .main-menu {
    padding: 0.75rem;
  }
  
  .main-menu a {
    padding: 0.5rem;
    font-size: 0.95rem;
  }
}
/* Maquetamos responsive */
@media (max-width:980px){
  .maqueta .maqueta-wrap{ grid-template-columns:1fr; }
  .maqueta-visual{ order:-1; }
}