/* =================== 0) VARIABLES + RESET =================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800&display=swap');

:root{
  --c-bg:#f9f9f9;
  --c-text:#222;
  --c-muted:#555;
  --c-white:#fff;
  --c-dark:#111;
  --c-dark-2:#222;
  --c-accent:#ffb400;   /* amarillo de marca */
  --c-accent-2:#00ffc2; /* verde neón */
  --c-brand:#0059ff;
  --shadow-1:0 5px 15px rgba(0,0,0,.1);
  --shadow-2:0 8px 24px rgba(0,0,0,.12);
  --radius:12px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  padding-top:4.375rem; /* 70px */
  font-family:'Montserrat',sans-serif;
  background-color:var(--c-bg);
  color:var(--c-text);
  line-height:1.6;
}


/* =================== 1) NAVBAR =================== */
.navbar{
  position:fixed; top:0; left:0; width:100%; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:1rem 2rem; color:#fff;
  background-image:url('../img/fondo_nav_navbar.webp');
  background-size:cover; background-position:center; background-repeat:no-repeat;
}
.navbar--solid{ background-color:var(--c-dark-2); }

.logo a{ text-decoration:none; color:#fff; font-weight:800; font-size:1.8rem; }

.nav-links{ list-style:none; display:flex; gap:1.5rem; }
.nav-links a{ color:#fff; text-decoration:none; font-weight:600; transition:color .3s; }
.nav-links a:hover{ color:var(--c-accent); }

.menu-toggle{ display:none; font-size:2rem; cursor:pointer; color:#fff; }

/* ===== NAVBAR · Dropdown mejorado ===== */
.navbar .dropdown{ position: relative; }

/* Flechita del item con submenú */
.navbar .dropdown > a::after{
  content:"▾";
  margin-left:.45rem;
  font-size:.8em;
  opacity:.75;
}

/* Caja del dropdown */
.navbar .dropdown-menu{
  position:absolute; top:calc(100% + 8px); left:0;
  min-width: 14rem;
  display:flex; flex-direction:column;
  padding:.35rem;
  background: rgba(17,17,17,.85);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  transform: translateY(6px) scale(.98);
  opacity:0; visibility:hidden; pointer-events:none;
  transition: transform .18s ease, opacity .18s ease, visibility .18s ease;
  z-index: 1000;
}

/* Mostrar en hover o focus (teclado/touch) */
.navbar .dropdown:hover .dropdown-menu,
.navbar .dropdown:focus-within .dropdown-menu{
  transform: translateY(0) scale(1);
  opacity:1; visibility:visible; pointer-events:auto;
}

/* Items del menú */
.navbar .dropdown-menu a{
  display:flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem;
  color:#fff; text-decoration:none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}

/* Hover bonito + color de marca en texto */
.navbar .dropdown-menu a:hover{
  background: linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  color: var(--c-accent);
}

/* Separador opcional dentro del dropdown */
.navbar .dropdown-menu hr{
  border:0; height:1px; margin:.35rem .4rem;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
}

/* Mini triangulito (punta) */
.navbar .dropdown-menu::before{
  content:"";
  position:absolute; top:-7px; left:16px;
  width:12px; height:12px; transform: rotate(45deg);
  background: rgba(17,17,17,.85);
  border-left:1px solid rgba(255,255,255,.08);
  border-top:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}

/* Opcionales */
.logo-con-numero{ text-align:right; display:flex; flex-direction:column; line-height:1.1; }
.logo-con-numero .logo{ color:#fff; font-size:1.5rem; font-weight:700; }
.telefono-navbar{ font-size:1.25rem; color:#ccc; margin-top:2px; }

.social-header{ text-align:center; padding:1rem 0 .5rem; }
.social-header a{ color:#fff; font-size:1.4rem; margin:0 .8rem; transition:color .3s ease; }
.icono-wsp:hover i{ color:#25d366; transform:scale(1.2); transition:.3s; }
.icono-face:hover i{ color:#3b5998; transform:scale(1.2); transition:.3s; }
.icono-ig:hover i{ color:#d62976; transform:scale(1.2); transition:.3s; }


/* =================== 2) BOTONES (GENÉRICOS) =================== */
.btn{
  background:var(--c-accent); color:var(--c-dark);
  padding:.75rem 1.875rem; text-decoration:none; font-weight:700;
  border-radius:6px; position:relative; overflow:hidden;
  transition:all .3s ease;
}
.btn::before{
  content:""; position:absolute; inset:0; left:-100%;
  background:rgba(255,255,255,.2); transition:left .3s ease;
}
.btn:hover{ background:#e09c00; }
.btn:hover::before{ left:0; }

/* CTA técnica */
.btn-neon{
  background:var(--c-accent-2); color:#000; padding:.875rem 2.25rem;
  border-radius:8px; font-weight:700; text-decoration:none; display:inline-block;
  transition:transform .3s ease, background .3s ease;
}
.btn-neon:hover{ background:#00dab0; transform:scale(1.05); }

/* Botón “más info” */
.boton-desplegar{ margin-top:1.8rem; display:flex; justify-content:center; }
#btn-mas-info{
  display:inline-flex; align-items:center; gap:.625rem;
  background:linear-gradient(135deg,#c60101,#ff6a00);
  color:#fff; font-weight:700; font-size:1rem; text-transform:uppercase; letter-spacing:.6px;
  padding:.85rem 2rem; border:none; border-radius:50px; cursor:pointer;
  box-shadow:0 8px 20px rgba(255,80,0,.25);
  transition:background .3s ease, box-shadow .3s ease, transform .3s ease;
}
#btn-mas-info:hover{ background:linear-gradient(135deg,#a40000,#e05600); transform:translateY(-2px); box-shadow:0 12px 30px rgba(255,60,0,.35); }
#btn-mas-info i{ transition:transform .3s ease; font-size:1.1rem; }
#btn-mas-info.abierto i{ transform:rotate(180deg); }


/* =================== 3) HERO =================== */
.hero{
  height:100vh; color:#fff; display:flex; justify-content:center; align-items:center; text-align:center; padding:0 1.25rem;
  background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)), url('../img/hero.jpg') center/cover no-repeat;
}
.hero-content h1{ font-size:3rem; margin-bottom:.9rem; }
.hero-content p{ font-size:1.2rem; margin-bottom:1.5rem; }

/* Hero con video */
.hero-video{ position:relative; height:100vh; overflow:hidden; }
.bg-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; filter:brightness(.6); }
.hero-overlay{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100%; padding:0 1.25rem; text-align:center; color:#fff; }
.hero-text h1{ font-size:3rem; font-weight:800; margin-bottom:.9rem; text-shadow:2px 2px 4px rgba(0,0,0,.6); }
.hero-text p{ font-size:1.2rem; margin-bottom:1.5rem; text-shadow:1px 1px 3px rgba(0,0,0,.5); }

/* Hero Servicios */
.hero-servicios{
  padding:7.5rem 1.25rem 5rem; text-align:center; color:#fff;
  background:linear-gradient(rgba(0,0,0,.6),rgba(0,0,0,.6)), url('assets/img/fondo_servicios.jpg') center/cover no-repeat;
}
.hero-servicios h1{ font-size:3rem; margin-bottom:.6rem; }


/* =================== 4) SECCIONES BASE =================== */
.section{ padding:5rem 1.875rem; text-align:center; }
.section h2{ font-size:2.4rem; margin-bottom:2.5rem; }


/* =================== 5) CARDS =================== */
.cards{ display:flex; flex-wrap:wrap; gap:1.875rem; justify-content:center; }
.card{
  background:#fff; padding:1.875rem; border-radius:10px; width:18.75rem;
  box-shadow:var(--shadow-1); transition:transform .3s ease;
}
.card:hover{ transform:translateY(-10px); }
.icono{ font-size:2.5rem; color:var(--c-accent); margin-bottom:.9rem; }


/* =================== 6) PARALLAX =================== */
.parallax{
  padding:7.5rem 1.875rem; color:#fff;
  background:url('../img/parallax.jpg') center/cover fixed no-repeat;
}
.parallax .contenido{
  background:rgba(0,0,0,.6); padding:2.5rem; max-width:50rem; margin:auto; border-radius:10px;
}
/* Solo en #nosotros */
#nosotros .contenido{ background:none; padding:0; }
#nosotros h2{
  margin-bottom:1.5rem; font-size:2rem; text-align:center; color:#0a0a0a;
  text-shadow:1px 1px 3px rgba(255,255,255,.5);
}
#nosotros .contenido p{
  background:rgba(0,0,0,0.6); color:#fff; padding:40px; border-radius:10px; max-width:800px; margin:0 auto;
  line-height:1.7; box-shadow:0 8px 20px rgba(0,0,0,.15);
}


/* =================== 7) GALERÍA =================== */
.carousel{ display:flex; gap:1.25rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:.625rem; }
.carousel img{ width:100%; max-width:31.25rem; border-radius:10px; scroll-snap-align:center; flex-shrink:0; }

.galeria-cortinas{ padding:5rem 1.25rem; background:#fff; text-align:center; }
.galeria-cortinas h2{ font-size:2rem; margin-bottom:2.5rem; }

.galeria-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr));
  gap:1.875rem; max-width:75rem; margin:0 auto;
}
.galeria-item{
  position:relative; overflow:hidden; border-radius:12px;
  box-shadow:0 8px 20px rgba(0,0,0,.08); cursor:pointer; text-decoration:none;
}
.galeria-item img{ width:100%; display:block; transition:transform .4s ease; }
.galeria-item:hover img{ transform:scale(1.05); }
.galeria-hover{
  position:absolute; bottom:0; width:100%; padding:.95rem;
  background:rgba(0,0,0,.6); color:#fff; font-weight:700; text-align:center; opacity:0; transition:opacity .3s ease;
}
.galeria-item:hover .galeria-hover{ opacity:1; }


/* =================== 8) TESTIMONIOS =================== */
.testimonios .card{
  font-style:italic; background:#fff8e7; border-left:5px solid var(--c-accent);
}


/* =================== 9) FORMULARIO =================== */
.contacto form{ max-width:37.5rem; margin:auto; display:flex; flex-direction:column; gap:.95rem; }
.contacto input, .contacto textarea{
  padding:.75rem; border-radius:6px; border:1px solid #ccc; font:inherit;
}
.contacto textarea{ resize:vertical; height:8.125rem; }
.contacto button{
  background:var(--c-dark); color:#fff; font-weight:600; padding:.75rem; border:none; border-radius:6px; cursor:pointer; transition:background .3s;
}
.contacto button:hover{ background:#333; }


/* =================== 10) MAPA =================== */
.mapa iframe{ width:100%; border-radius:10px; margin-top:1.875rem; }


/* =================== 11) FOOTER =================== */
/* Footer estilizado + links “naturales” */
.site-footer{
  background-image:url('../img/fondo_nav_navbar.webp'); /* mismo fondo que usas arriba */
  background-size:cover; background-position:center;
  color:#fff; text-align:center;
  padding:1.875rem 1.25rem; font-size:.95rem;
}
.site-footer .footer-content p{ margin:.25rem 0; }

/* Links del footer: sin azul, heredan color y con subrayado animado */
.site-footer a{ color:inherit; text-decoration:none; }
.site-footer a:visited{ color:inherit; }

/* Línea animada en hover (credit y datos) */
.credit-link, .footer-link{
  background: linear-gradient(currentColor, currentColor) bottom left / 0 2px no-repeat;
  transition: background-size .25s ease, color .2s ease, opacity .2s ease;
  padding-bottom: 2px;
}
.credit-link:hover, .footer-link:hover{
  color: var(--c-accent-2);                /* tu verde neón */
  background-size: 100% 2px;
}

/* Accesibilidad al navegar con teclado */
.site-footer a:focus-visible{
  outline:2px solid var(--c-accent-2);
  outline-offset:2px;
}


/* =================== 12) WHATSAPP FLOTANTE =================== */
/* ===== WhatsApp flotante (blindado) ===== */
.whatsapp-float{
  position: fixed;
  right: 20px;
  bottom: 20px;

  /* tamaño fijo y forma */
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* layout interno */
  display: flex;
  align-items: center;
  justify-content: center;

  /* apariencia */
  background: #25d366;
  color: #fff;
  box-shadow: 0 0 15px rgba(0,0,0,.2);
  z-index: 999;

  /* evita herencias raras */
  padding: 0;                 /* <- no dependas de font-size */
  line-height: 1;             /* <- icono centrado */
  text-decoration: none;      /* <- quita subrayados globales */
  border: none;               /* <- por si algún reset mete borde */

  /* animación */
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover{
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* Icono dentro (FA o SVG) */
.whatsapp-float i,
.whatsapp-float svg{
  font-size: 28px;   /* FA */
  width: 28px;       /* SVG */
  height: 28px;      /* SVG */
  display: block;
}



/* =================== 13) SERVICIOS (GRID) =================== */
.servicios-section{ padding:5rem 1.25rem; background:var(--c-bg); text-align:center; }
.servicios-intro h1{ font-size:2.8rem; margin-bottom:.6rem; color:var(--c-text); }
.servicios-intro p{ max-width:37.5rem; margin:0 auto 2.5rem; font-size:1.1rem; color:var(--c-muted); }

.servicios-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16.25rem,1fr));
  gap:1.875rem; max-width:75rem; margin:0 auto;
}
.servicio-card{
  background:#fff; padding:1.875rem 1.25rem; border-radius:20px;
  box-shadow:var(--shadow-2); transition:transform .3s ease, box-shadow .3s ease;
}
.servicio-card:hover{ transform:translateY(-8px); box-shadow:0 12px 30px rgba(0,0,0,.12); }
.servicio-card img{ width:100%; max-width:150px; height:auto; margin-bottom:1.25rem; }
.servicio-card h3{ font-size:1.3rem; margin-bottom:.6rem; color:#111; }
.servicio-card p{ font-size:1rem; color:#666; }


/* =================== 14) FICHA TÉCNICA OSCURA =================== */
.detalle-tecnico{ background:#0f1116; color:#f0f0f0; padding:5rem 1.25rem; }
.contenedor-detalle{
  max-width:75rem; margin:auto; display:grid; grid-template-columns:1fr 1fr; gap:3.75rem; align-items:center;
}
.detalle-imagen img{
  width:100%; max-width:30rem; border-radius:14px;
  box-shadow:0 12px 40px rgba(0,255,194,.15); transition:transform .3s ease;
}
.detalle-imagen img:hover{ transform:scale(1.03); }
.detalle-info h1{ font-size:2.6rem; margin-bottom:1.25rem; color:var(--c-accent-2); }
.detalle-info p{ font-size:1.1rem; line-height:1.6; color:#ccc; margin-bottom:1.875rem; }
.detalle-beneficios{ list-style:none; padding-left:0; margin-bottom:2.2rem; }
.detalle-beneficios li{
  margin-bottom:.75rem; font-size:1rem; color:#f1f1f1; position:relative; padding-left:1.625rem;
}
.detalle-beneficios li::before{ content:"✔"; position:absolute; left:0; color:var(--c-accent-2); font-size:1.1rem; }


/* =================== 15) MODELOS / DETALLE =================== */
/* Panel oscuro solo dentro de modelo 1 */
.detalle-modelo{ background:#f9f9f9; padding:4rem 2rem; }
.detalle-modelo1{
  background-image:url('../img/tradicionalm.png');
  background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed;
  padding:4rem 2rem; color:#fff; position:relative; isolation:isolate;
}
.detalle-modelo1 .detalle-info{
  background:rgba(0,0,0,0.65); padding:2rem; border-radius:12px; box-shadow:0 0 20px rgba(0,0,0,0.5);
}
/* overlay de contraste */
.detalle-modelo1::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(120% 80% at 50% 20%, rgba(0,0,0,.15), rgba(0,0,0,.5));
}

.detalle-modelo h1, .detalle-modelo1 h1{
  text-align:center; font-size:2.5rem; position:relative; display:block; margin:0 auto .5rem; padding-bottom:.4rem;
}
/* subrayado elegante */
.detalle-modelo h1::after, .detalle-modelo1 h1::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:-.2rem;
  width:120px; height:3px; border-radius:3px; background:linear-gradient(90deg, transparent, var(--c-accent-2), transparent); opacity:.9;
}

.subtitulo{ text-align:center; color:#777; margin-bottom:3rem; }
.subtitulo2{ text-align:center; color:#fff; margin-bottom:3rem; }

.detalle-contenido{ display:flex; flex-wrap:wrap; gap:2rem; align-items:center; justify-content:center; }
.inverso .detalle-contenido{ flex-direction:row-reverse; }

/* imagen con marco/glow */
.detalle-imagen img{
  max-width:31.25rem; width:100%;
  border-radius:10px; border:1px solid rgba(255,255,255,.15); outline:1px solid rgba(0,0,0,.06);
  box-shadow:0 8px 22px rgba(0,0,0,.18), 0 0 0 6px rgba(255,255,255,.04) inset;
  transition:transform .18s ease, box-shadow .18s ease;
}
.detalle-imagen img:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.24), 0 0 0 8px rgba(255,255,255,.06) inset;
}

.detalle-info{ max-width:31.25rem; }

/* CTA de modelo */
.boton-cta{
  display:inline-block; margin-top:1rem; background:var(--c-accent-2); color:#111;
  padding:.8rem 1.5rem; border-radius:5px; font-weight:700; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
  box-shadow:0 6px 14px rgba(0,0,0,.1);
}
.boton-cta:hover{
  background:var(--c-accent-2);
  transform:translateY(-1px);
  box-shadow:0 10px 18px rgba(0,0,0,.16);
}

/* BMP: badges/alianza */
.detalle-modelo--bmp .alianza{ display:flex; gap:1rem; align-items:center; justify-content:center; flex-wrap:wrap; }
.badge-bmp{
  display:inline-block; padding:.4rem .75rem; border-radius:100px;
  background:#0b8f6f; color:#fff; font-weight:700; font-size:.9rem; box-shadow:0 0 0 3px rgba(11,143,111,.15);
}
.badge-bmp--light{ background:#e8fff9; color:#0b8f6f; border:1px solid #b9efe1; box-shadow:none; }

/* Specs (chips) unificadas */
.specs{
  list-style:none; padding:0; margin:0 0 1rem 0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:.6rem .8rem;
}
.detalle-modelo1 .detalle-info .specs li{
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); color:#fff;
  padding:.65rem .85rem; border-radius:12px; line-height:1.25; box-shadow:0 2px 10px rgba(0,0,0,.28); backdrop-filter:blur(1.5px);
}
.detalle-modelo .detalle-info .specs li{
  background:#fff; border:1px solid #eee; color:#222;
  padding:.65rem .85rem; border-radius:12px; line-height:1.25; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
/* Palomita a la IZQUIERDA (estable) */
.specs li{ position:relative; padding:.7rem .9rem .7rem 2.6rem; line-height:1.4; }
.specs li::before{
  content:"✓"; position:absolute; left:0; top:50%; transform:translateY(-50%);
  font-weight:800; font-size:.9rem; color:var(--c-accent-2); text-shadow:0 0 8px rgba(0,0,0,.25); pointer-events:none;
}
.specs li strong{ font-weight:800; letter-spacing:.2px; }

/* Separadores entre secciones de modelos */
.detalle-modelo + .detalle-modelo,
.detalle-modelo1 + .detalle-modelo1,
.detalle-modelo + .detalle-modelo1,
.detalle-modelo1 + .detalle-modelo{
  position:relative;
}
.detalle-modelo + .detalle-modelo::before,
.detalle-modelo1 + .detalle-modelo1::before,
.detalle-modelo + .detalle-modelo1::before,
.detalle-modelo1 + .detalle-modelo::before{
  content:""; display:block; margin:0 auto; width:min(80%,1000px); height:1px;
  background:linear-gradient(90deg, transparent, rgba(0,0,0,.08), transparent);
}
.detalle-modelo1 + .detalle-modelo1::before{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}

/* =================== 17) SISTEMAS + MODAL =================== */
.sistemas-section{
  padding:4rem 1.25rem; background-image:url('../img/proyecto20.jpg'); background-position:center; background-size:cover; text-align:center;
}
.sistemas-section h2{ font-size:clamp(2.2rem,3.5vw,3rem); font-weight:800; margin:0 auto .5rem; color:#fff; }
.sistemas-section h4{ font-size:clamp(2.2rem,3.5vw,3rem); font-weight:800; margin:0 auto .5rem; color:#080808; }
.sistemas-section .subtitulo{ font-size:clamp(1rem,1.3vw,1.15rem); color:#f2f2f2; max-width:800px; margin:0 auto 1.5rem; }

.sistemas-grid{ max-width:1100px; margin:2rem auto 0; display:grid; gap:20px; }

.sistema-card{
  background:#fff; border-radius:16px; box-shadow:0 8px 24px rgba(0,0,0,.10);
  display:grid; grid-template-columns:1.25fr 1fr; align-items:stretch; overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.sistema-card:hover{ transform:translateY(-6px); box-shadow:0 12px 30px rgba(0,0,0,.14); }

.sistema-card .img-wrap{ position:relative; }
.sistema-card .img-sistema{ width:100%; height:240px; object-fit:cover; display:block; }

.sistema-card .contenido{
  padding:1.1rem 1.2rem; text-align:left; display:grid; grid-template-rows:auto 1fr auto; gap:.5rem;
}
.icono-sistema{ font-size:1.8rem; color:var(--c-brand); }
.sistema-card h3{ font-size:1.25rem; color:#111; margin:0; }
.sistema-card p{ font-size:.98rem; color:#555; }

.boton-sistema{
  justify-self:start; margin-top:.3rem; background:var(--c-brand); color:#fff;
  padding:.55rem 1.1rem; border-radius:10px; text-decoration:none; transition:background .25s ease;
}
.boton-sistema:hover{ background:#0033aa; }

@media (max-width:820px){
  .sistema-card{ grid-template-columns:1fr; }
  .sistema-card .img-sistema{ height:200px; }
}

/* Modal */
.modal{
  display:none; position:fixed; inset:0; z-index:2000; overflow-y:auto;
  background:rgba(0,0,0,.7); padding:60px 20px; overscroll-behavior:contain;
}
.modal-contenido{
  background:#fff; margin:auto; max-width:50rem; padding:2rem; border-radius:12px; position:relative;
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)} }
.modal-cerrar{ position:absolute; top:15px; right:20px; font-size:1.8rem; color:#555; cursor:pointer; }
.modal-body{ text-align:center; }
.modal-video{ margin-top:1.5rem; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); }

.btn-cotizar{
  display:inline-block; margin-top:2rem; background:#25d366; color:#fff;
  padding:.8rem 1.5rem; border-radius:8px; font-weight:700; text-decoration:none; transition:background .3s;
}
.btn-cotizar:hover{ background:#1ebe5b; }


/* =================== 18) ACABADOS (TEMA OSCURO) =================== */
.acabado-selector{
  padding:4rem 1.5rem; background:#0f1116; color:#fff; text-align:center;
}

/* Layout */
.muestra{
  max-width:1100px; margin:0 auto 2rem;
  display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center;
}
@media (max-width:900px){ .muestra{ grid-template-columns:1fr; } }

/* Marco/overlay */
.textura{
  aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:14px; position:relative; isolation:isolate;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.textura::before{
  content:""; position:absolute; inset:-1px; border-radius:14px; padding:1px;
  background:linear-gradient(135deg, rgba(0,255,194,.45), rgba(0,102,255,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; z-index:-1;
}
.textura::after{
  content:""; position:absolute; inset:0; border-radius:14px;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.1), transparent);
}

/* Textos */
.info-muestra h2{
  font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:.5rem; text-align:center; letter-spacing:.4px; text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.info-muestra p{ color:#d8d8d8; max-width:52ch; margin:.25rem auto 1.25rem; line-height:1.7; }

/* Botonera */
#btn-mas-info{
  display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,#c60101,#ff6a00);
  color:#fff; font-weight:700; border:none; cursor:pointer; padding:.85rem 1.4rem; border-radius:999px;
  box-shadow:0 8px 20px rgba(255,80,0,.25); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
#btn-mas-info:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(255,60,0,.35); }
#btn-mas-info.abierto{ opacity:.95; }

/* Info extra (oscura) */
.info-extra{
  max-width:900px; margin:1.5rem auto 0; text-align:left;
  background:#0b0d12; border:1px solid rgba(0,255,194,.18); border-radius:12px; box-shadow:0 12px 38px rgba(0,0,0,.35);
  font-size:1rem; line-height:1.7; color:#333;
}
.info-extra h3, .info-extra h4{ color:#00ffc2; margin:0 0 .6rem 0; }
.info-extra h3{ font-size:1.4rem; }
.info-extra h4{ font-size:1.1rem; margin-top:1rem; }
.info-extra p, .info-extra li{ color:#e9e9e9; }
.info-extra ul{ margin-left:1rem; }

/* Selector estilos */
.selector-botones{
  margin-top:1.75rem; display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap;
}
.selector-botones button{
  padding:.7rem 1.1rem; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06);
  color:#fff; border-radius:10px; cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .15s ease; white-space:nowrap;
}
.selector-botones button:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.selector-botones button.is-active{
  border-color:rgba(0,255,194,.6);
  background:linear-gradient(135deg, rgba(0,255,194,.18), rgba(0,119,255,.15));
  box-shadow:0 8px 24px rgba(0,119,255,.15);
}

/* Swatches */
.swatches{
  margin:1rem auto 0; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; max-width:700px;
}
.swatch{
  width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.75); cursor:pointer; position:relative;
  box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease; background-size:cover; background-position:center;
}
.swatch:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.swatch.is-active{ outline:3px solid #00ffc2; outline-offset:2px; }
.swatch[data-label]::after{
  content:attr(data-label); position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  font-size:.78rem; line-height:1.2; color:#d8d8d8; white-space:normal; text-align:center; width:max-content; max-width:76px; pointer-events:none;
}

/* Patch scoped (asegura no invasión) */
.acabado-selector .muestra{ max-width:1100px; margin:0 auto 2rem; display:grid; grid-template-columns:1.3fr 1fr; gap:2rem; align-items:center; }
@media (max-width:900px){ .acabado-selector .muestra{ grid-template-columns:1fr; } }
.acabado-selector .textura{ aspect-ratio:16/9; background-size:cover; background-position:center; border-radius:14px; position:relative; isolation:isolate; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.acabado-selector .textura::before{ content:""; position:absolute; inset:-1px; border-radius:14px; padding:1px; background:linear-gradient(135deg, rgba(0,255,194,.45), rgba(0,102,255,.35)); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; z-index:-1; }
.acabado-selector .textura::after{ content:""; position:absolute; inset:0; border-radius:14px; background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.1), transparent); }
.acabado-selector .selector-botones{ margin-top:1.25rem; display:flex; justify-content:center; gap:.75rem; flex-wrap:wrap; }
.acabado-selector .selector-botones button{ padding:.8rem 1.2rem; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.06); color:#fff; border-radius:10px; cursor:pointer; transition:background .25s ease, border-color .25s ease, transform .15s ease; white-space:nowrap; }
.acabado-selector .selector-botones button:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.acabado-selector .selector-botones button.is-active{ border-color:rgba(0,255,194,.6); background:linear-gradient(135deg, rgba(0,255,194,.18), rgba(0,119,255,.15)); box-shadow:0 8px 24px rgba(0,119,255,.15); }
.acabado-selector .swatches{ margin:1rem auto 0; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; max-width:700px; padding-bottom:22px; }
.acabado-selector .swatch{ width:56px; height:56px; border-radius:50%; border:2px solid rgba(255,255,255,.75); cursor:pointer; position:relative; box-shadow:0 4px 14px rgba(0,0,0,.25); transition:transform .15s ease, box-shadow .15s ease; background-size:cover; background-position:center; }
.acabado-selector .swatch:hover{ transform:translateY(-3px); box-shadow:0 6px 18px rgba(0,0,0,.3); }
.acabado-selector .swatch.is-active{ outline:3px solid #00ffc2; outline-offset:2px; }
.acabado-selector .swatch[data-label]::after{ content:attr(data-label); position:absolute; bottom:-28px; left:50%; transform:translateX(-50%); font-size:.78rem; line-height:1.2; color:#d8d8d8; white-space:normal; text-align:center; width:max-content; max-width:76px; pointer-events:none; }
.acabado-selector .info-muestra h2{ font-size:clamp(1.8rem,3vw,2.6rem); margin-bottom:.5rem; text-align:center; letter-spacing:.4px; text-shadow:0 2px 6px rgba(0,0,0,.35); }
.acabado-selector .info-muestra p{ color:#d8d8d8; max-width:52ch; margin:.25rem auto 1.25rem; line-height:1.7; }
.acabado-selector #btn-mas-info{ display:inline-flex; align-items:center; gap:.6rem; background:linear-gradient(135deg,#c60101,#ff6a00); color:#fff; font-weight:700; border:none; cursor:pointer; padding:.85rem 1.4rem; border-radius:999px; box-shadow:0 8px 20px rgba(255,80,0,.25); transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.acabado-selector #btn-mas-info:hover{ transform:translateY(-1px); box-shadow:0 12px 30px rgba(255,60,0,.35); }
.acabado-selector #btn-mas-info.abierto{ opacity:.95; }
.acabado-selector #info-extra{
  max-width:1100px; margin:1rem auto 0; text-align:left;
  background:#0b0d12; border:1px solid rgba(0,255,194,.18); border-radius:12px; box-shadow:0 12px 38px rgba(0,0,0,.35);
}

/* Mostrar/ocultar genérico */
.oculto{ display:none !important; }


/* =============== NOVEDADES v3 — Estilo revista (rail + tiles) =============== */
.novedades-v3 { padding: 4rem 1.5rem; background: #0f1116; color: #e9e9e9; }
.novedades-v3 .titulo-seccion { color: #fff; text-align: center; }
.novedades-v3 .subtitulo-seccion { color: #b9b9b9; text-align: center; }

/* Filtros */
.nv3-filtros{
  display:flex; gap:.6rem; justify-content:center; margin:.5rem 0 1.25rem;
}
.nv3-filtros .chip-mes{
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color:#fff; padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  font-weight:700; letter-spacing:.2px; transition: background .25s, border-color .25s, transform .15s;
}
.nv3-filtros .chip-mes:hover{ transform: translateY(-1px); background: rgba(255,255,255,.12); }
.nv3-filtros .chip-mes[aria-pressed="true"]{
  border-color: rgba(0,255,194,.55);
  box-shadow: 0 0 0 3px rgba(0,255,194,.15);
}


/* RAIL DESTACADOS (scroll horizontal con snap) */
.nv3-rail{
  display:flex; gap: 16px; overflow:auto; padding: 6px 2px 10px;
  scroll-snap-type: x mandatory;
}
.nv3-rail::-webkit-scrollbar{ height:8px; }
.nv3-rail::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.2); border-radius:999px; }

.card-rail{
  flex: 0 0 clamp(280px, 60vw, 520px);
  background:#000; border-radius:18px; overflow:hidden; position:relative;
  box-shadow: 0 12px 34px rgba(0,0,0,.3);
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-rail:hover{ transform: translateY(-4px); box-shadow: 0 18px 44px rgba(0,0,0,.45); }

.card-rail .media{ aspect-ratio: 21/9; position:relative; }
.card-rail .media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: scale(1.01); transition: transform .45s ease, filter .45s ease;
}
.card-rail:hover .media img{ transform: scale(1.06); filter: contrast(1.04) brightness(1.06); }

.card-rail .media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05), transparent);
}
.card-rail .badge-date{
  position:absolute; left:12px; top:12px;
  background: #00ffc2; color:#001a12; font-weight:800; font-size:.78rem;
  padding:.35rem .55rem; border-radius:8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}

.card-rail .caption{
  position:absolute; inset:auto 0 0 0; padding: 1rem 1.1rem 1.15rem;
  color:#fff; z-index:1;
}
.card-rail .caption h3{ margin:0 0 .25rem 0; font-size: clamp(1.05rem, 2.8vw, 1.35rem); }
.card-rail .caption .meta{ color:#d7d7d7; font-size:.92rem; }

/* GRID DE TILES */
.nv3-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin-top: 1.25rem;
}
.tile{
  display:flex; flex-direction:column; overflow:hidden; border-radius:16px;
  background:#12151c; border:1px solid rgba(255,255,255,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover{ transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0,0,0,.36); }

.tile .tile-media{ position:relative; aspect-ratio: 4/3; background:#0b0d12; }
.tile .tile-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform: translateZ(0); backface-visibility:hidden;
}
.tile .tile-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.08), transparent);
}

.tile .body{ padding: .9rem 1rem 1rem; color:#e9e9e9; }
.tile .body h3{ margin:.1rem 0 .35rem 0; font-size:1.02rem; color:#fff; }
.tile .body .meta{ color:#aeb2b8; font-size:.9rem; margin-bottom:.35rem; }

.tile .actions{ display:flex; gap:.5rem; margin-top:.35rem; }
.tile .btn-outline{
  display:inline-block; padding:.55rem .9rem; border-radius:10px;
  text-decoration:none; font-weight:700; font-size:.9rem;
  border:1px solid rgba(255,255,255,.18); color:#fff; background: transparent;
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.tile .btn-outline:hover{ background:rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }

/* Utilidades */
.badge{
  display:inline-block; padding:.35rem .55rem; border-radius:8px; font-weight:700; font-size:.78rem;
  border:1px solid rgba(255,255,255,.18); color:#dfefff; background: rgba(255,255,255,.06);
}


  /* Botón Cotizar (tarjetas) */
  .novedades-v3 .actions .btn-outline{
    background:#00ffc2;
    color:#0a0a0a;
    border:1px solid transparent;
    font-weight:700;
    border-radius:10px;
    padding:.55rem 1.1rem;
    transition:transform .15s ease, box-shadow .2s ease, filter .2s ease;
  }
  .novedades-v3 .actions .btn-outline:hover{
    transform:translateY(-1px);
    filter:brightness(.95);
    box-shadow:0 8px 18px rgba(0,255,194,.28);
  }

  /* (opcional) mismo color para el CTA dentro del modal */
  #modal-proyecto .btn-neon{
    background:#00ffc2;
    color:#0a0a0a;
  }
  #modal-proyecto .btn-neon:hover{
    filter:brightness(.95);
  }
.card-rail, .tile { cursor: default; }


/* =================== 20) RESPONSIVE =================== */
@media (max-width:960px){
  .contenedor-detalle{ grid-template-columns:1fr; text-align:center; }
  .detalle-info{ padding-top:2.5rem; }
}
@media (max-width:768px){
  /* ===== Dropdown en móvil (dentro del menú abierto) ===== */
.navbar .nav-links.is-open .dropdown{ width:100%; }
.navbar .nav-links.is-open .dropdown-menu{
  position: static; inset: auto; min-width: 0; margin-top:.35rem;
  background:#111; border:1px solid #222; border-radius:10px;
  box-shadow:none; backdrop-filter:none;
  transform:none; opacity:1; visibility:visible; pointer-events:auto;
  display:none; padding:.35rem;   /* oculto por defecto */
}
.navbar .nav-links.is-open .dropdown:focus-within .dropdown-menu{
  display:flex;                  /* se abre al tocar el título */
}

  .menu-toggle{ display:block; }
  .nav-links{
    display:none; flex-direction:column; position:absolute; top:4.375rem; left:0; right:0;
    background:#111; padding:1.25rem;
    
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ margin:.625rem 0; }
  .cards{ flex-direction:column; align-items:center; }
  .carousel{ justify-content:flex-start; }
}
@media (max-width:768px){
  .slide-content h2{ font-size:2.1rem; }
  .slide-content p{ font-size:1rem; }
}
@media (max-width:900px){
  .muestra{ grid-template-columns:1fr; }
}
/* Ajustes palomita en móviles (más al borde) */
@media (max-width:480px){
  .specs li{ padding-left:2.3rem; }
}

/* ===== Bloque: Esto y más (scopeado) ===== */
.mas-modelos{
  padding: 4rem 1.5rem;
  background: var(--c-bg);
  color: var(--c-text);
  text-align: center;
}
.mas-modelos h1{
  font-size: 2.2rem;
  font-weight: 800;
  margin: 0 0 .6rem 0;
}
.mas-modelos .intro{
  max-width: 900px;
  margin: 0 auto 1.5rem;
  color: var(--c-muted);
}

/* Chips informativos (propios, no afectan .specs) */
.mas-chips{
  list-style: none;
  padding: 0;
  margin: 0 auto 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .6rem .8rem;
  max-width: 1000px;
}
.mas-chips li{
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: .65rem .9rem .65rem 2.2rem;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  position: relative;
}
.mas-chips li::before{
  content: "✓";
  position: absolute;
  left: .7rem;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 800;
  color: var(--c-accent-2);
  font-size: .9rem;
}

/* Acciones: reutiliza .boton-cta + botón secundario ligero */
.mas-modelos .acciones{
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: .5rem;
}
.mas-modelos .btn-sec{
  display: inline-block;
  padding: .8rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.12);
  color: var(--c-text);
  background: #fff;
  transition: box-shadow .2s ease, transform .2s ease;
}
.mas-modelos .btn-sec:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

@media (max-width: 560px){
  .mas-modelos h1{ font-size: 1.9rem; }
}

/* Quitar caret insertado por CSS */
.navbar .dropdown > a::after {
  content: none !important;
}
/* ===== Quiénes Somos (bg dedicado) ===== */
.parallax.about-bg{
  background-image:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.35)),
    url('../img/equipo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#nosotros .contenido{
  background: none;
  padding: 0;
  max-width: 900px;
}
#nosotros h2{
  margin-bottom: .8rem;
  font-size: clamp(2rem, 3.2vw, 2.6rem);
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}
#nosotros .contenido p{
  background: rgba(0,0,0,.45);
  color: #fff;
  padding: 32px;
  border-radius: 12px;
  margin: 0 auto;
  line-height: 1.75;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  max-width: 800px;
}
#nosotros .acciones{
  display:flex; justify-content:center; gap:.8rem; margin-top:1rem; flex-wrap:wrap;
}
#nosotros .btn-sec{
  display:inline-block; padding:.8rem 1.4rem; border-radius:8px; font-weight:700;
  background:#fff; color:#111; text-decoration:none; border:1px solid rgba(0,0,0,.12);
  transition:transform .2s, box-shadow .2s;
}
#nosotros .btn-sec:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(0,0,0,.12); }

@media (max-width: 768px){
  .parallax.about-bg{ background-attachment: scroll; }
}

/* === HAMBURGUESA SOLO EN MÓVIL (≤768px) === */
.hamburger{ display:none; } /* oculto en desktop por defecto */

/* animación del icono (3 líneas → X) */
.hamburger span{
  display:block; width:26px; height:2px; background:#fff; border-radius:2px;
  transition:transform .25s, opacity .25s; margin:5px 0;
}
.hamburger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* El menú colapsa con la clase .is-open (tu CSS ya la usa) */
@media (max-width:768px){
  .hamburger{
    display:inline-flex; width:42px; height:36px; align-items:center; justify-content:center;
    background:transparent; border:0; cursor:pointer;
  }
  /* Panel móvil: elevar z-index para que tape el fondo */
  .nav-links{
    z-index: 1000;
  }
}

/* Ocultar el viejo trigger */
.menu-toggle{ display:none !important; }
/* --- ARREGLOS DROPDOWN --- */
.navbar { z-index: 1200; } /* asegura que el dropdown quede arriba de todo */
.navbar .dropdown-menu { z-index: 1300; }

/* En móvil, el submenú abre con una clase .open en el padre */
@media (max-width:768px){
  /* ya tienes la versión móvil del dropdown, solo añadimos esta línea */
  .navbar .nav-links.is-open .dropdown.open .dropdown-menu{
    display:flex;          /* preferible a block para respetar tu gap interno */
  }
}
/* ==== FIX: dropdowns en móvil (≤768px) ==== */
@media (max-width:768px){
  /* Asegura que el padre ocupe ancho y sea clickeable */
  .navbar .nav-links.is-open .dropdown{ width:100%; }

  /* Por defecto oculto */
  .navbar .nav-links.is-open .dropdown-menu{
    position: static;
    inset: auto;
    min-width: 0;
    margin-top:.35rem;
    background:#111;
    border:1px solid #222;
    border-radius:10px;
    box-shadow:none;
    backdrop-filter:none;
    transform:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;

    display:none; /* cerrado por defecto */
    padding:.35rem;
  }

  /* ABRIR cuando el padre tenga .open (forzamos con !important) */
  .navbar .nav-links.is-open .dropdown.open > .dropdown-menu{
    display:flex !important;     /* usa flex para respetar tus estilos internos */
  }

  /* Mejora táctil del trigger */
  .navbar .nav-links.is-open .dropdown > a{
    display:block; width:100%;
    padding:.4rem .2rem;
  }

  /* Por si algo se superpone */
  .navbar { z-index:1200; }
  .navbar .dropdown-menu { z-index:1300; }
}
/* Botón por encima de cualquier overlay del header */
.hamburger{ position:relative; z-index: 1500; }

/* En móvil el menú solo se ve con .is-open; forzamos con !important */
@media (max-width:768px){
  .nav-links{ display:none; }
  .nav-links.is-open{ display:flex !important; }

  /* Dropdown móvil: abre cuando el padre .dropdown tiene .open */
  .navbar .nav-links.is-open .dropdown.open > .dropdown-menu{
    display:flex !important;
    position: static;
    background:#111;
    border:1px solid #222;
    border-radius:10px;
    box-shadow:none;
    margin-top:.35rem;
    padding:.35rem;
    z-index:1300;
  }

  /* Que el trigger sea fácil de tocar */
  .navbar .nav-links.is-open .dropdown > a{
    display:block; width:100%; padding:.4rem .2rem;
  }
}

/* Si aún tienes .menu-toggle (el viejo), apágalo */
.menu-toggle{ display:none !important; }
/* ================== MÓVIL: panel scrollable + estilo vidrio ================== */
@media (max-width:768px){
  /* Altura del header (70px). Si ya usas 4.375rem, puedes reutilizarla */
  :root{ --navbar-h: 4.375rem; }

  /* Panel del menú ocupa toda la pantalla bajo el header y ES SCROLLABLE */
  .nav-links{
    position: fixed;
    top: var(--navbar-h);
    left: 0; right: 0; bottom: 0;

    /* tu flujo */
    display: none;              /* se muestra solo con .is-open */
    flex-direction: column;
    gap: .35rem;
    padding: 1rem 1rem 2rem;

    /* SCROLL dentro del panel */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;  /* evita que “arrastre” el body */
    touch-action: pan-y;           /* asegura el gesto vertical */

    /* Estilo vidrio (como desktop) */
    background: rgba(17,17,17,.55);
    backdrop-filter: saturate(120%) blur(10px);
    -webkit-backdrop-filter: saturate(120%) blur(10px);
    border-top: 1px solid rgba(255,255,255,.08);
    background-image: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
    z-index: 1000;
  }
  .nav-links.is-open{ display: flex !important; }

  /* Links dentro del panel: mismo look elegante */
  .nav-links a,
  .nav-links .dropdown > a{
    color:#fff;
    padding: .9rem 1rem;
    border-radius: 12px;
    background: transparent;
  }
  .nav-links a:hover,
  .nav-links .dropdown > a:hover{
    background: rgba(255,255,255,.06);
  }

  /* Submenús con “glassmorphism” también */
  .navbar .nav-links.is-open .dropdown-menu{
    background: rgba(17,17,17,.6);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: .35rem;
  }

  /* Asegura que el trigger sea cómodo al tacto */
  .navbar .nav-links.is-open .dropdown > a{
    display:block; width:100%; padding:.55rem .2rem;
  }
}

/* Mantén el botón arriba del panel */
.hamburger{ position:relative; z-index:1500; }
@media (max-width:768px){
  /* En móvil, el submenú SOLO obedece a .open; ignorar focus-within */
  .navbar .nav-links.is-open .dropdown:focus-within > .dropdown-menu{
    display: none !important;
  }
  /* (ya la tienes) cuando el padre está .open, sí se muestra */
  .navbar .nav-links.is-open .dropdown.open > .dropdown-menu{
    display: flex !important;
  }
}
/* === Móvil: colocar el botón hamburguesa a la derecha === */
@media (max-width:768px){
  /* Evita el espacio “entre” que lo centra; usamos flex-start */
  .navbar{
    justify-content: flex-start;
    gap: 12px; /* separa logo y demás */
  }

  /* Orden de los elementos dentro del header */
  .logo-con-numero{ order: 1; }
  .social-header{ order: 2; }          /* si la quieres visible */
  .hamburger{
    order: 3;
    margin-left: auto;                 /* ¡empuja la hamburguesa a la derecha! */
  }

  /* Si prefieres ocultar los iconos sociales en móvil, descomenta: */
  /* .social-header{ display:none; } */
}

/* Asegura clic por encima de cualquier overlay */
.hamburger{ position:relative; z-index:1500; }

/* ===== Compactar la franja del header en móvil y evitar que tape contenido ===== */
@media (max-width:768px){
  /* Altura real del header en móvil */
  :root{ --navbar-h: 56px; }   /* ajusta a 60–64px si lo prefieres un poquito más alto */

  /* El contenido arranca justo debajo del header compacto */
  body{ padding-top: var(--navbar-h) !important; }

  /* Header más delgado */
  .navbar{
    padding: .5rem 1rem !important;
    min-height: var(--navbar-h);
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }

  /* Logo + Teléfono en una sola línea (más compacto) */
  .logo-con-numero{
    display:flex; flex-direction:row; align-items:center; gap:.5rem;
  }
  .logo-con-numero .logo{ font-size:1.2rem !important; }   /* antes 1.5–1.8rem */
  .telefono-navbar{ font-size:.95rem; opacity:.85; }

  /* Si aún queda alto, puedes ocultar el teléfono en pantallas chicas:
     .telefono-navbar{ display:none; } */

  /* Iconos sociales: mejor ocultarlos en móvil para ganar altura */
  .social-header{ display:none !important; }

  /* Hamburguesa pegada a la derecha y compacta */
  .hamburger{
    order:3; margin-left:auto; width:40px; height:32px;
  }

  /* Panel móvil: arranca exactamente debajo del header */
  .nav-links{
    position: fixed;
    top: var(--navbar-h) !important;
    left: 0; right: 0; bottom: 0;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
}
/* ===== Header compacto con redes visibles y hamburguesa a la derecha ===== */
@media (max-width:768px){
  :root{ --navbar-h: 60px; }                       /* alto del header */
  body{ padding-top: var(--navbar-h) !important; } /* que no tape contenido */

  .navbar{
    padding:.5rem .9rem !important;
    min-height: var(--navbar-h);
    display:flex; align-items:center; gap:10px;
    justify-content:flex-start;
    flex-wrap: nowrap;                              /* evita saltos de línea */
  }

  /* Logo + teléfono en una sola línea */
  .logo-con-numero{
    order:1; display:flex; flex-direction:row; align-items:center; gap:.5rem;
    flex:1 1 auto; min-width:0;
  }
  .logo-con-numero .logo{ font-size:1.2rem !important; }
  .telefono-navbar{ font-size:.95rem; opacity:.85; white-space:nowrap; }

  /* Redes visibles (forzamos por si antes estaban ocultas) */
  .social-header{
    order:2; display:flex !important; align-items:center; gap:10px;
    margin-left:auto; flex-shrink:0;
  }
  .social-header a{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    text-decoration:none;
  }
  .social-header i{ font-size:16px; line-height:1; color:#fff; }

  /* Hamburguesa pegada al borde derecho */
  .hamburger{ order:3; margin-left:8px; width:40px; height:32px; }

  /* Panel móvil abre justo debajo del header */
  .nav-links{
    position:fixed; top: var(--navbar-h) !important; left:0; right:0; bottom:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
}

/* En teléfonos MUY angostos, oculta el teléfono para mantener altura */
@media (max-width:420px){
  .telefono-navbar{ display:none; }
}
/* ===== Mobile: logo en columna (nombre arriba, teléfono abajo),
         redes visibles a la derecha y sin encimarse ===== */
@media (max-width:768px){
  :root{ --navbar-h: 76px; }                /* sube/baja si necesitas más/menos alto */
  body{ padding-top: var(--navbar-h) !important; }

  .navbar{
    padding:.5rem .9rem !important;
    min-height: var(--navbar-h);
    display:flex; align-items:flex-start;   /* alinea arriba para evitar traslapes */
    justify-content:flex-start; gap:10px;
    flex-wrap: nowrap;                      /* evita saltos raros */
  }

  /* BLOQUE LOGO: apilado (nombre arriba, teléfono abajo) */
  .logo-con-numero{
    order:1;
    display:flex; flex-direction:column; align-items:flex-start;
    line-height:1.05; gap:2px;
    flex:1 1 auto; min-width:0;            /* que pueda encoger sin romper layout */
    max-width:65%;                          /* deja espacio a redes + hamburguesa */
  }
  .logo-con-numero .logo{ font-size:1.2rem !important; }
  .telefono-navbar{
    display:block; font-size:.9rem; opacity:.9;
    white-space:nowrap;                     /* evita que el número haga 2 líneas */
  }

  /* REDES: a la derecha del logo, sin encimarse */
  .social-header{
    order:2; display:flex !important; align-items:center; gap:8px;
    margin-left:8px; flex:0 0 auto;         /* ancho justo, no se superpone */
  }
  .social-header a{
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.12);
    text-decoration:none;
  }
  .social-header i{ font-size:16px; line-height:1; color:#fff; }

  /* HAMBURGUESA: pegada a la derecha */
  .hamburger{ order:3; margin-left:8px; width:40px; height:32px; flex:0 0 auto; }

  /* Panel móvil: abre justo debajo del header y con scroll interno */
  .nav-links{
    position:fixed; top:var(--navbar-h) !important; left:0; right:0; bottom:0;
    overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  }
}

/* Si la pantalla es MUY angosta, puedes ocultar el teléfono para mantener alto compacto */
@media (max-width:420px){
  .telefono-navbar{ display:none; }
}
/* === HAMBURGUESA: 3 líneas con puntas azul/rojo (como tu imagen) === */
.hamburger{
  display:inline-flex;
  width:40px; height:32px;                 /* puedes subir a 44x36 si la quieres más grande */
  align-items:center; justify-content:center;
  background:transparent; border:0; cursor:pointer;
  position:relative; z-index:1500;
  -webkit-tap-highlight-color: transparent;
}

/* Barras absolutas, con “capuchones” de color en los extremos */
.hamburger span{
  position:absolute !important;
  left:6px; right:6px;                      /* largo útil de la barra */
  height:4px;                               /* grosor de la barra (3–5px) */
  border-radius:3px;
  /* capuchón azul (izq) de 6px, blanco en el centro, capuchón rojo (der) de 6px */
  background:
    linear-gradient(90deg,
      #33c6ff 0 6px,
      #ffffff 6px calc(100% - 6px),
      #ff3b3b calc(100% - 6px) 100%
    ) !important;
  transition:transform .25s, top .25s, opacity .2s;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);     /* leve definición sobre fondos claros/osc. */
}

/* Posiciones (tres líneas apiladas) */
.hamburger span:nth-child(1){ top:8px !important; }
.hamburger span:nth-child(2){ top:16px !important; }
.hamburger span:nth-child(3){ top:24px !important; }

/* Animación a “X” al abrir */
.hamburger.is-open span:nth-child(1){
  top:16px !important; transform:rotate(45deg);
}
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){
  top:16px !important; transform:rotate(-45deg);
}

/* Asegura que se muestre en móvil y quede a la derecha */
@media (max-width:768px){
  .hamburger{ display:inline-flex; order:3; margin-left:8px; }
}
/* ===== Por defecto (desktop y tablets grandes): oculto ===== */
.hamburger{ display:none !important; }

/* ===== Solo en móvil (≤768px): visible y a la derecha ===== */
@media (max-width:768px){
  .hamburger{
    display:inline-flex !important;
    order:3;               /* queda al final del header */
    margin-left:8px;       /* pegadita al borde derecho */
    width:40px; height:32px;
  }
}
.telefono-navbar{
  color:#ccc;
  text-decoration:none;
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.2rem .4rem; border-radius:8px;
}
.telefono-navbar:hover{ background:rgba(255,255,255,.08); color:#fff; }

/* =================== FIN =================== */