/* ============================================================================
   HEADER.CSS — LA cabecera REAL de la web (style.css + premium.css fusionados).
   Es EXACTAMENTE la cabecera del PHP, para usarla igual en TODO el sitio
   (configurador y páginas). Única diferencia: position sticky (en vez de fixed)
   para encajar sin solapes en el layout sin-scroll del configurador y sin
   padding-hacks en las páginas.
   ========================================================================== */

.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;flex:none;
  background:rgba(10,10,10,.85);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 30px rgba(0,0,0,.15);
  transition:all .4s cubic-bezier(.25,.46,.45,.94);
}
.header .container{width:100%;max-width:1200px;margin:0 auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}

.logo{display:flex;align-items:center;text-decoration:none}
.logo-img{height:46px;width:auto;max-width:200px;display:block;transition:all .35s ease}
.logo-text{font-size:1.4rem;font-weight:700;letter-spacing:.5px;color:#fff}

.nav-menu{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
/* El menú creció al sumar el selector de idioma; se le da holgura para que no se
   pegue al logo y se reduce el gap en pantallas intermedias. */
.nav{gap:24px}
.logo{flex:0 0 auto}
@media (max-width:1150px) and (min-width:769px){.nav-menu{gap:18px}}
/* Entre el menu hamburguesa (<=768) y el escritorio holgado la barra NO CABIA.
   Medido a 976px: pedia 857px en 807 disponibles, y el selector de idioma se
   salia 59px del contenedor — quedaba inalcanzable, no solo feo.
   Ese es justo el ancho al que maqueta el "modo escritorio" de Chrome en un
   movil (~980px), y tambien el de un portatil pequeno o una ventana a media
   pantalla, asi que no es un caso raro.
   Se recorta el ESPACIADO ENTRE LETRAS antes que el tamano: 1.5px por 62
   caracteres son 62px de puro aire, mas de lo que faltaba. El texto se sigue
   leyendo igual y en un PC ancho no cambia absolutamente nada. */
@media (max-width:1060px) and (min-width:901px){
  .header .nav-menu{gap:8px}
  /* Se repite el selector con `.home-page` delante porque web-style.css trae
     `.home-page .header .nav-menu a{letter-spacing:1px}`, que tiene mas
     especificidad y ganaba: en la portada la barra seguia sin caber. */
  .home-page .header .nav-menu a,
  .header .nav-menu a{letter-spacing:.2px}
  .header .nav-menu a.nav-destacado{padding:8px 12px!important;letter-spacing:.2px}
  .header .lang-switch-btn{padding:5px 7px;letter-spacing:0}
}
.nav-menu a{
  font-family:'Montserrat',sans-serif;font-size:.8125rem;font-weight:500;
  letter-spacing:1.5px;text-transform:uppercase;color:#fff;position:relative;
  text-decoration:none;white-space:nowrap;transition:color .3s ease;display:inline-block;
}
.nav-menu a::after{
  content:'';position:absolute;bottom:-5px;left:0;width:0;height:2px;
  background:linear-gradient(90deg,#10b981,#34d399);border-radius:1px;
  transition:width .35s cubic-bezier(.25,.46,.45,.94);
}
.nav-menu a:hover::after,.nav-menu a.active::after{width:100%}

/* Enlace DESTACADO (Configurador): píldora verde IDÉNTICA en todas las páginas.
   Se fuerzan fondo/relleno de texto/sombra con !important para que ninguna regla
   de estado (home translúcido, header .scrolled, web-premium) la altere. */
.nav-menu a.nav-destacado{
  background:linear-gradient(90deg,#10b981,#34d399)!important;
  color:#04231a!important;-webkit-text-fill-color:#04231a!important;
  padding:8px 16px!important;border-radius:99px!important;font-weight:800!important;letter-spacing:1px;
  box-shadow:0 4px 14px rgba(16,185,129,.35)!important;
  transition:filter .2s ease,transform .2s ease;
}
.nav-menu a.nav-destacado::after{display:none!important}
.nav-menu a.nav-destacado:hover{filter:brightness(1.06);transform:translateY(-1px)}
/* En la PÁGINA PRINCIPAL, el botón CONFIGURADOR late con un halo verde para que
   se lea como llamada a la acción (sin efecto parecía la pestaña activa). El
   anillo se dibuja con un ::before para no pisar la sombra !important del pill. */
@keyframes navHalo{
  0%{box-shadow:0 0 0 0 rgba(16,185,129,.55)}
  70%{box-shadow:0 0 0 12px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}
}
body.home-page .nav-menu a.nav-destacado{position:relative}
body.home-page .nav-menu a.nav-destacado::before{
  content:'';position:absolute;inset:0;border-radius:99px;pointer-events:none;
  animation:navHalo 1.8s ease-out infinite;
}
@media (prefers-reduced-motion:reduce){
  body.home-page .nav-menu a.nav-destacado::before{animation:none}
}

/* «Mi cuenta» desplegable */
.nav-cuenta{position:relative}
.nav-cuenta-toggle .nc-caret{font-size:.7em;opacity:.8}
.nav-cuenta-menu{
  position:absolute;top:calc(100% + 14px);right:0;width:260px;background:#fff;color:#1a1a1a;
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.22);padding:16px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s ease;z-index:1002;
}
.nav-cuenta:hover .nav-cuenta-menu,.nav-cuenta.open .nav-cuenta-menu{opacity:1;visibility:visible;transform:translateY(0)}
.nav-cuenta-menu::before{content:'';position:absolute;top:-16px;right:0;left:0;height:16px} /* puente para el hover */
.nav-cuenta-menu .nc-title{font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#1a1a1a;margin-bottom:14px;display:flex;align-items:center;gap:7px}
.nav-cuenta-menu .nc-title i{color:#10b981}
.nav-cuenta-menu .nc-field{display:flex;align-items:center;gap:9px;border:1.5px solid #e2dccd;border-radius:10px;padding:0 12px;margin-bottom:9px;transition:border-color .15s}
.nav-cuenta-menu .nc-field:focus-within{border-color:#10b981}
.nav-cuenta-menu .nc-field i{color:#b3aa98;font-size:13px;width:14px;text-align:center}
.nav-cuenta-menu input{flex:1;width:100%;box-sizing:border-box;padding:11px 0;border:none;background:none;font-size:14px;letter-spacing:normal;text-transform:none;color:#1a1a1a}
.nav-cuenta-menu input:focus{outline:none}
.nav-cuenta-menu .nc-btn{width:100%;background:#111;color:#fff;border:none;padding:12px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;letter-spacing:.5px;margin-top:4px;transition:background .15s}
.nav-cuenta-menu .nc-btn:hover{background:#10b981;color:#04231a}
.nav-cuenta-menu .nc-msg{color:#c0392b;font-size:12px;min-height:15px;margin-top:6px;text-transform:none;letter-spacing:normal}
.nav-cuenta-menu .nc-sep{display:flex;align-items:center;text-align:center;color:#b3aa98;font-size:11.5px;margin:14px 0 10px;letter-spacing:normal;text-transform:none}
.nav-cuenta-menu .nc-sep::before,.nav-cuenta-menu .nc-sep::after{content:'';flex:1;height:1px;background:#eee}
.nav-cuenta-menu .nc-sep span{padding:0 10px}
.nav-cuenta-menu .nc-crear-btn{display:block;text-align:center;width:100%;box-sizing:border-box;padding:11px;border:1.5px solid #10b981;color:#10b981!important;-webkit-text-fill-color:#10b981!important;border-radius:10px;font-weight:700;font-size:13px!important;text-decoration:none;letter-spacing:normal!important;text-transform:none!important;transition:all .15s}
.nav-cuenta-menu .nc-crear-btn:hover{background:#10b981;color:#04231a!important;-webkit-text-fill-color:#04231a!important}
.nav-cuenta-menu .nc-hi{font-weight:700;font-size:15px;margin-bottom:6px;letter-spacing:normal;text-transform:none}
.nav-cuenta-menu .nc-link{display:flex;align-items:center;gap:9px;width:100%;text-align:left;background:none;border:none;padding:11px 0;font-size:13.5px!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important;text-decoration:none;cursor:pointer;letter-spacing:normal!important;text-transform:none!important;border-top:1px solid #f0ece2}
.nav-cuenta-menu .nc-link i{color:#b3aa98;width:16px;text-align:center}
.nav-cuenta-menu .nc-link:hover{color:#10b981!important;-webkit-text-fill-color:#10b981!important}
.nav-cuenta-menu .nc-link:hover i{color:#10b981}
.nav-cuenta-menu .nc-logout{color:#c0392b!important;-webkit-text-fill-color:#c0392b!important}
.nav-cuenta-menu .nc-logout:hover,.nav-cuenta-menu .nc-logout:hover i{color:#c0392b!important;-webkit-text-fill-color:#c0392b!important}
.nav-cuenta-toggle.logueado{color:#34d399}
/* ── Punto de corte del MENU: 900px, no 768 ─────────────────────────────────
   Entre 769 y ~900px la barra completa no cabe de ninguna forma legible: a
   850px pedia 742px de menu en 653 disponibles, y lo que se salia era el
   selector de idioma. Apretar mas ya solo daba texto ilegible, asi que en esa
   franja se pasa al menu lateral, que es lo normal en una ventana estrecha.
   OJO: esto mueve SOLO el menu. El contenido de las paginas sigue cambiando a
   movil en 768px, que es donde tiene sentido. Y el caso que motivo todo esto
   —el "modo escritorio" de Chrome en un movil, que maqueta a ~980px— se queda
   por encima de 900: alli se ve la barra completa, y ahora si cabe.
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .nav-cuenta-menu{position:static;width:auto;box-shadow:none;opacity:1;visibility:visible;transform:none;
    background:#f8f9fa;margin:8px 0;padding:14px;display:none}
  .nav-cuenta.open .nav-cuenta-menu{display:block}
  .nav-cuenta:hover .nav-cuenta-menu{opacity:1;visibility:visible}
  .nav-cuenta-menu::before{display:none}
}

/* Hamburguesa (solo móvil) */
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:10px;z-index:1001}
.hamburger{display:block;width:25px;height:2px;background:#fff;position:relative;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.hamburger::before,.hamburger::after{content:'';position:absolute;left:0;width:100%;height:100%;background:#fff;transition:all .35s cubic-bezier(.25,.46,.45,.94)}
.hamburger::before{top:-8px}
.hamburger::after{bottom:-8px}

/* Home: cabecera aún más translúcida sobre el hero (se activa con .home-page en el body) */
.home-page .header{background:rgba(10,10,10,.55);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.home-page .header.scrolled{background:rgba(10,10,10,.92)}

/* ── Móvil: menú lateral deslizante (idéntico a la web) ── */
@media (max-width:900px){
  .nav-menu{
    position:fixed;top:0;right:-100%;width:300px;height:100vh;height:100dvh;
    background:#fff;flex-direction:column;align-items:stretch;gap:8px;
    padding:100px 30px 30px;transition:right .3s ease;
    box-shadow:-8px 0 40px rgba(0,0,0,.15);z-index:1000;overflow-y:auto;
  }
  .nav-menu.active{right:0}
  .nav-menu li{width:100%;border-bottom:1px solid #f0f0f0}
  .nav-menu li:last-child{border-bottom:none}
  .nav-menu a{color:#0a0a0a;font-size:1rem;display:block;padding:15px 10px;font-weight:500;letter-spacing:normal}
  .nav-menu a::after{display:none}
  .nav-menu a:hover,.nav-menu a.active{background:#f8f9fa}
  .nav-toggle{display:block}
  .nav-toggle.active .hamburger{background:transparent}
  .nav-toggle.active .hamburger::before{transform:rotate(45deg);top:0;background:#0a0a0a}
  .nav-toggle.active .hamburger::after{transform:rotate(-45deg);bottom:0;background:#0a0a0a}
}

/* ── Selector de idioma (i18n) ───────────────────────────────────────────── */
.nav-lang{display:flex;align-items:center}
.lang-switch{position:relative}
.lang-switch-btn{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);border-radius:99px;padding:6px 12px;font-family:'Montserrat',sans-serif;font-size:.72rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .15s,border-color .15s}
.lang-switch-btn:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.lang-switch-btn .lang-caret{font-size:.7rem;opacity:.8}
.lang-switch-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:#fff;border:1px solid #e2ddd0;border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.22);padding:6px;list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s,transform .15s,visibility .15s;z-index:200}
.lang-switch.open .lang-switch-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-switch-menu li{margin:0}
.nav-lang .lang-switch-menu a{display:block;padding:9px 12px;border-radius:8px;color:#1b1813!important;-webkit-text-fill-color:#1b1813!important;opacity:1!important;text-transform:none;letter-spacing:normal;text-decoration:none;font-size:.85rem;font-weight:600;transition:background .12s}
.nav-lang .lang-switch-menu a::after{display:none}
.nav-lang .lang-switch-menu a:hover{background:#f0f4f2}
.nav-lang .lang-switch-menu a[aria-current="true"]{background:#e7f5ef;color:#0c5c4f!important;-webkit-text-fill-color:#0c5c4f!important}
/* En móvil el cajón desplegaba los OCHO idiomas en una lista: 313px de alto
   medidos, más de un tercio del cajón, que encima pasaba a tener scroll (848
   en 800). Vuelven a ser un desplegable —el mismo botón «ES ▾» del escritorio,
   que aquí se ocultaba— y pasan de 313px a unos 40. */
@media(max-width:900px){
  .nav-lang{justify-content:center;padding:8px 0;flex-direction:column;gap:8px}
  .lang-switch-btn{display:inline-flex;background:rgba(0,0,0,.06);color:#0a0a0a;border-color:rgba(0,0,0,.18)}
  .lang-switch-menu{position:static;transform:none;box-shadow:none;border:none;background:transparent;padding:0;
    display:none;flex-wrap:wrap;gap:4px;justify-content:center;min-width:0}
  .lang-switch.open .lang-switch-menu{display:flex;opacity:1;visibility:visible}
  .nav-lang .lang-switch-menu a{padding:6px 10px}
}

/* ── Carrito en la cabecera (móvil) ───────────────────────────────────────
   La píldora flotante estaba fija abajo a la derecha en TODAS las páginas y
   todo el rato: medida a 390px, se comía la fila de miniaturas de la card de
   Técnicas. Pasa a ser un icono en la barra, pegado a la izquierda del ☰.
   Es el mismo panel y el mismo carrito: solo cambia por dónde se abre. */
/* `hidden` manda: el `display:inline-flex` de mas abajo le ganaria al
   [hidden] del navegador y saldria un boton vacio en una pagina sin carrito. */
.su-cart-head[hidden]{display:none!important}
.su-cart-head{display:none;position:relative;margin-left:auto;background:none;border:none;padding:10px 6px;cursor:pointer;color:#fff;line-height:1}
.su-cart-head .sch-ico{font-size:21px;line-height:1;display:block}
.su-cart-head .sch-badge{position:absolute;top:1px;right:-2px;min-width:17px;height:17px;border-radius:99px;background:#2C7A4E;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;padding:0 4px;font-family:'Montserrat',sans-serif}
@media(max-width:900px){
  .su-cart-fab{display:none!important}
  .su-cart-head{display:inline-flex}
  /* El panel cuelga de la barra, no del suelo. `.nav` mide 76px + 1 de borde. */
  .su-cart-panel{top:85px;bottom:auto;right:12px;left:auto;width:min(360px,calc(100vw - 24px))}
}