/* =====================================================================
   PISO ZERO · navbar portable estilo Furiosa · revisión 20261111-01
   Cuatro pisos, composición y clases originales; sin dependencias.
   Baseline sin JS: barra en flujo, menú móvil visible y dropdown por foco.
   ===================================================================== */
:root{
  --nc-100:#f1f1f1; --nc-150:#e1e1e1; --nc-200:#d4d4d4; --nc-250:#c6c6c6;
  --nc-500:#707070; --nc-600:#5a5a5a; --nc-700:#434343;
  --nc-800:#2d2d2d; --nc-850:#222; --nc-900:#151515; --nc-950:#0b0b0b;
  --nc-white:#fff; --nc-black:#000;
  --accent:#eb7a2a; --accent-dark:#dc6721;
  --card-radius:3px; --btn-radius:1px;
  --btn-vpad:.5rem; --btn-hpad:.75rem;
  --btn-font:.875rem; --btn-line:1.25rem; --btn-weight:400;
  --caption:.875rem;
  --font:'Space Grotesk',Arial,sans-serif;
}
.pz-nav-wrap,.pz-nav-wrap *,.pz-nav-wrap *::before,.pz-nav-wrap *::after{box-sizing:border-box}
.pz-nav-wrap *{min-width:0}
.pz-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Wrapper / mejora progresiva ---------- */
.pz-nav-wrap{--pz-nav-height:4.5rem;position:relative;z-index:1000;display:flex;flex-direction:column}
body.pz-nav-ready .pz-nav-wrap{position:fixed;top:0;left:0;right:0;
  transition:transform .35s cubic-bezier(.25,.8,.25,1);will-change:transform}
body.pz-nav-ready .pz-nav-wrap.is-hidden{transform:translateY(-101%)}
/* El foco y cualquier panel abierto ganan al sticky, incluso antes del evento JS. */
body.pz-nav-ready .pz-nav-wrap:is(:focus-within,.is-menu-open),
body.pz-nav-ready .pz-nav-wrap:has(.pz-dropdown.w--open){transform:none;transition:none}

/* ---------- Barra: aproximadamente 72 px ---------- */
.pz-nav{position:relative;z-index:999;display:flex;align-items:center;justify-content:space-between;
  width:100%;min-height:4.5rem;padding:.75rem 0;
  background-color:transparent;border-bottom:1px solid transparent;
  transition:background-color .4s ease,border-color .4s ease}
.pz-nav-wrap.is-scrolled .pz-nav,.pz-nav-wrap.is-menu-open .pz-nav{
  background-color:var(--nc-950);border-bottom-color:var(--nc-900)}
.pz-container{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  width:100%;max-width:min(calc(100% - 10vw),96rem);margin:0 auto;padding:0 1rem}

/* ---------- Logo ---------- */
.pz-logo{display:inline-flex;align-items:center;flex-shrink:0;color:var(--nc-200);line-height:1;
  padding-left:0;text-decoration:none;transition:opacity .2s}
.pz-logo:hover{opacity:.8}
.pz-logo svg{height:1.9rem;width:auto;display:block}

/* ---------- Menú ---------- */
.pz-menu{position:static;display:flex;align-items:center;margin-left:auto;margin-right:auto}
.pz-menu-container{display:flex;align-items:center;gap:.25rem}
.pz-overlay{background-color:var(--nc-black);width:100%;height:calc(100vh - var(--pz-nav-height));
  height:calc(100dvh - var(--pz-nav-height));display:none;position:absolute;top:100%;left:0;right:0;
  pointer-events:none}

/* ---------- Enlaces / foco siempre visible ---------- */
.pz-nav-link{display:inline-flex;align-items:center;justify-content:center;gap:.15em;
  padding:var(--btn-vpad) .75rem;font-family:var(--font);font-size:var(--caption);
  color:var(--nc-200);text-decoration:none;background:none;border:0;cursor:pointer;
  transition:color .3s cubic-bezier(.165,.84,.44,1)}
.pz-nav-link:hover,.pz-nav-link.w--current{color:var(--nc-white)}
/* Doble anillo: naranja sobre negro, negro contra el CTA y fotos claras.
   :focus cubre también foco programático y navegadores sin :focus-visible. */
.pz-nav-wrap :is(a,button,[tabindex]):focus,.pz-nav-wrap .pz-button:focus-within{
  outline:2px solid var(--accent);outline-offset:3px;box-shadow:0 0 0 3px var(--nc-950);opacity:1}

/* Atenuar sin bajar el contraste de ningún control enfocado. */
@media (min-width:992px) and (hover:hover){
  .pz-menu-container:has(> .pz-nav-link:hover,> .pz-dropdown > .pz-dropdown-toggle:hover)
    > .pz-nav-link:not(:is(:hover,:focus)),
  .pz-menu-container:has(> .pz-nav-link:hover,> .pz-dropdown > .pz-dropdown-toggle:hover)
    > .pz-dropdown:not(:focus-within) > .pz-dropdown-toggle:not(:hover){opacity:.5}
}

/* ---------- Dropdown común: visible y estático en móvil ---------- */
.pz-dropdown{position:relative}
.pz-dropdown-arrow{width:1.2em;transition:transform .2s ease}
.pz-dropdown-toggle.w--open .pz-dropdown-arrow{transform:rotate(180deg)}
.pz-dropdown-content{display:block;position:static;opacity:1;visibility:visible;
  transform:none;pointer-events:auto;padding-top:.75rem}

@media (min-width:992px){
  /* Posición respecto de la barra completa, no respecto del ancho del toggle. */
  .pz-dropdown{position:static}
  .pz-dropdown-content{display:none;position:absolute;top:100%;left:0;right:0;z-index:2;
    padding:2.2rem 1rem 1rem;max-height:calc(100vh - var(--pz-nav-height));
    max-height:calc(100dvh - var(--pz-nav-height));overflow-y:auto;overflow-x:hidden;
    overscroll-behavior:contain;opacity:0;transform:translateY(.5rem);visibility:hidden;pointer-events:none;
    transition:opacity .15s ease,transform .15s ease}
  body.pz-nav-ready .pz-dropdown-content.is-open,
  body:not(.pz-nav-ready) .pz-dropdown:focus-within .pz-dropdown-content{
    display:block;opacity:1;transform:none;visibility:visible;pointer-events:auto}
  /* Sin JS sólo el foco controla el panel; con JS manda .is-open (Escape no reabre). */
  body:not(.pz-nav-ready) .pz-dropdown:focus-within .pz-dropdown-arrow{transform:rotate(180deg)}
  body.pz-nav-ready .pz-overlay{display:block;opacity:0;visibility:hidden;transition:opacity .2s ease}
  body.pz-nav-ready .pz-menu:has(.pz-dropdown-toggle.w--open) .pz-overlay{opacity:.4;visibility:visible}
}

/* ---------- Panel Los Pisos: conservar cuatro columnas / tarjetas ---------- */
.pz-menu-card{border:1px solid var(--nc-800);background:var(--nc-900);border-radius:3px;
  max-width:934px;margin:0 auto;padding:.5rem}
.pz-products-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.pz-product-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  height:300px;padding:24px;border-radius:var(--card-radius);background:var(--nc-black);
  color:var(--nc-white);text-decoration:none;overflow:hidden}
.pz-product-card img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
.pz-product-card .pz-product-gradient{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(transparent 50%,#000)}
.pz-product-title{position:relative;z-index:2;font-size:1rem;font-weight:400;line-height:1.3;overflow-wrap:anywhere}
.pz-product-desc{position:relative;z-index:2;margin-top:4px;color:var(--nc-250);font-size:.75rem;
  line-height:1.35;overflow-wrap:anywhere}
.pz-product-arrow{position:absolute;right:24px;bottom:28px;z-index:2;font-size:18px;line-height:1}
@media (min-width:992px){
  .pz-products-grid:has(.pz-product-card:is(:hover,:focus)) .pz-product-card:not(:is(:hover,:focus)){opacity:.35}
  .pz-product-card{transition:opacity .2s ease}
}

/* ---------- Panel Compañía ---------- */
.pz-company-panel{display:grid;grid-template-columns:1fr 1fr;width:45rem;max-width:100%;
  margin:0 auto;padding:.5rem;border:1px solid var(--nc-850);border-radius:var(--card-radius);
  background:var(--nc-900)}
.pz-company-links{display:flex;flex-direction:column;justify-content:space-between;
  padding:1rem 1.5rem;border-top-left-radius:var(--card-radius);border-bottom-left-radius:var(--card-radius);
  background:var(--nc-950)}
.pz-company-link{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  min-height:2.875rem;color:var(--nc-200);font-size:1rem;text-decoration:none;
  overflow-wrap:anywhere;transition:opacity .2s ease}
.pz-company-link:hover,.pz-company-link:focus{color:var(--nc-white)}
.pz-company-link .pz-arrow{opacity:.6}
.pz-company-image-pane{position:relative;height:100%;overflow:hidden;
  border-top-right-radius:var(--card-radius);border-bottom-right-radius:var(--card-radius);background:var(--nc-black)}
.pz-company-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}
@media (min-width:992px){
  .pz-company-image{opacity:0;transition:opacity .2s ease}
  .pz-company-image:first-child{opacity:1}
  .pz-company-panel:has(.pz-company-link:nth-child(2):is(:hover,:focus)) .pz-company-image:first-child,
  .pz-company-panel:has(.pz-company-link:nth-child(3):is(:hover,:focus)) .pz-company-image:first-child,
  .pz-company-panel:has(.pz-company-link:nth-child(4):is(:hover,:focus)) .pz-company-image:first-child{opacity:0}
  .pz-company-panel:has(.pz-company-link:nth-child(2):is(:hover,:focus)) .pz-company-image:nth-child(2),
  .pz-company-panel:has(.pz-company-link:nth-child(3):is(:hover,:focus)) .pz-company-image:nth-child(3),
  .pz-company-panel:has(.pz-company-link:nth-child(4):is(:hover,:focus)) .pz-company-image:nth-child(4){opacity:1}
  .pz-company-links:has(.pz-company-link:is(:hover,:focus)) .pz-company-link:not(:is(:hover,:focus)){opacity:.35}
}

/* ---------- CTA: nombres originales, naranja con texto oscuro contrastado ---------- */
.pz-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;
  gap:.45em;min-height:2.375rem;padding:var(--btn-vpad) var(--btn-hpad);
  border:1px solid transparent;border-radius:var(--btn-radius);background:var(--accent);
  color:var(--nc-950);font-family:var(--font);font-size:var(--btn-font);line-height:var(--btn-line);
  font-weight:var(--btn-weight);letter-spacing:0;text-decoration:none;
  transition:border-color .3s,color .3s,background-color .3s cubic-bezier(.165,.84,.44,1)}
.pz-button:hover{background:var(--accent-dark)}
.pz-btn-text{pointer-events:none;color:var(--nc-950)}
.pz-btn-icon{display:inline-flex;align-items:center;justify-content:center;max-width:1.2em;line-height:1;
  transform:translateX(-1px);transition:transform .1s ease}
.pz-button:hover .pz-btn-icon{transform:translateX(2px)}
.pz-link-cover{position:absolute;inset:0;z-index:1}
.pz-cta-desktop{display:inline-flex;flex-shrink:0}
.pz-mobile-cta{display:none;width:100%}
.pz-mobile-cta .pz-button{width:100%}

/* ---------- Hamburguesa: sólo disponible cuando funciona el JS ---------- */
.pz-hamburger{display:none;order:1;flex-shrink:0;min-width:44px;min-height:44px;
  margin-right:-.5rem;padding:.5rem;background:none;border:0;color:var(--nc-white);cursor:pointer}
.pz-hamburger .pz-bar{display:block;width:1rem;height:1px;margin-left:auto;margin-right:auto;
  background:var(--nc-white);transition:opacity .3s cubic-bezier(.165,.84,.44,1),transform .3s cubic-bezier(.165,.84,.44,1)}
.pz-hamburger .pz-bar + .pz-bar{margin-top:.3125rem}
.pz-hamburger.w--open .pz-bar.cc-top{transform:translateY(6px) rotate(45deg)}
.pz-hamburger.w--open .pz-bar.cc-middle{opacity:0;transform:translateY(0)}
.pz-hamburger.w--open .pz-bar.cc-bottom{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Skip: top realmente visible al foco ---------- */
.pz-skip{position:absolute;top:-8em;left:50%;transform:translateX(-50%);z-index:9998;
  max-width:calc(100% - 1rem);padding:.8em 1.5em;background:var(--accent);color:var(--nc-950);
  border-radius:.5rem;font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;
  text-align:center;text-decoration:none;opacity:0}
.pz-skip:focus{top:.5rem;opacity:1}
.pz-spacer{display:none}

/* ---------- Tablet / móvil ---------- */
@media (max-width:991px){
  .pz-container{flex-wrap:wrap;max-width:calc(100% - 2rem);padding:0}
  .pz-cta-desktop{display:none}
  .pz-mobile-cta{display:block;width:100%}
  /* Sin JS el menú largo ocupa espacio de documento, no una cabecera fija. */
  .pz-menu{display:flex;position:static;order:2;flex:0 0 100%;flex-direction:column;align-items:stretch;
    gap:.5rem;margin:.75rem 0 0;padding:1rem 1.5rem 3rem;background:var(--nc-900);opacity:1}
  body.pz-nav-ready .pz-container{flex-wrap:nowrap}
  body.pz-nav-ready .pz-hamburger{display:block}
  body.pz-nav-ready .pz-menu{display:none;position:absolute;top:100%;left:0;right:0;margin:0;
    max-height:calc(100vh - var(--pz-nav-height));max-height:calc(100dvh - var(--pz-nav-height));
    overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.pz-nav-ready .pz-menu.w--open{display:flex}
  .pz-menu-container{display:flex;flex-shrink:0;width:100%;max-width:100%;flex-direction:column;
    align-items:stretch;gap:.5rem;margin:0;padding-bottom:0}
  .pz-nav-link{width:100%;min-height:44px;justify-content:flex-start;padding:.5rem 0;font-size:.9375rem}
  .pz-dropdown{width:100%;margin:1rem 0}
  .pz-dropdown-toggle{cursor:default}
  .pz-dropdown-arrow{display:none}
  .pz-menu-card{padding:.5rem}
  .pz-products-grid{grid-template-columns:1fr}
  .pz-product-card{height:200px}
  .pz-company-panel{grid-template-columns:1fr;width:100%}
  .pz-company-image-pane{height:12rem}
}
@media (max-width:479px){
  .pz-menu{padding:1rem 1rem 2rem}
  .pz-company-links{padding:1rem}
}

/* Sólo las subpáginas mejoradas necesitan espacio bajo la barra fija. */
body.pz-sub{padding-top:0}
body.pz-sub.pz-nav-ready{padding-top:4.5rem}

/* Sin animación ni transición; los cambios de estado siguen siendo inmediatos. */
@media (prefers-reduced-motion:reduce){
  body .pz-nav-wrap,body.pz-nav-ready .pz-nav-wrap,
  body .pz-nav-wrap *,body .pz-nav-wrap *::before,body .pz-nav-wrap *::after{
    animation:none;transition:none;scroll-behavior:auto}
}