/* ============================================================
   Barbería Lastarria · estructura
   Contenedor, header, footer, menú móvil y puntos de montaje.
   Depende de tokens.css y componentes.css.
   ============================================================ */

/* ---------- Contenedor ---------------------------------------------------- */

.env {
  width: 100%;
  max-width: var(--ancho-contenido);
  margin: 0 auto;
  padding: 0 var(--padding-lateral);
}
.env-estrecho { max-width: var(--ancho-estrecho); }


/* ============================================================
   HEADER · versión A, lanzamiento, sin carrito
   Sticky, fondo Negro humo opaco, borde inferior 1px en Línea.
   Altura constante de 74px: no cambia de alto al hacer scroll,
   así no desplaza el contenido. Lo que cambia al hacer scroll
   es la opacidad de los tags y la aparición del borde.
   ============================================================ */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--negro-humo);
}

/* Borde inferior: aparece al hacer scroll */
.header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--linea);
  opacity: 0;
  transition: opacity .2s ease;
}
.header.is-scrolled::after { opacity: 1; }

/* ---------- Capa de tags de grafiti --------------------------------------
   Capa aparte y fácil de quitar: borra .header-tags del HTML y no queda
   ningún rastro. Decorativa: aria-hidden. Nunca cruza la navegación ni
   el botón de agendar. Al hacer scroll baja a opacidad cero.
   ------------------------------------------------------------------------- */

.header-tags {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: var(--z-tags);
  opacity: 1;
  transition: opacity .25s ease;
}
.header.is-scrolled .header-tags { opacity: 0; }

.header-tags svg {
  position: absolute;
  stroke: var(--cian);
  fill: none;
  stroke-linecap: square;
  opacity: var(--tag-opacidad);
}
.header-tags .tag-1 { left: -34px; top: -14px; }
.header-tags .tag-2 { left: -52px; bottom: -26px; }

/* En móvil, un solo tag pequeño */
@media (max-width: 1023px) {
  .header-tags .tag-2 { display: none; }
  .header-tags .tag-1 { left: 2px; top: -6px; width: 96px; height: 48px; }
}

/* ---------- Barra del header ---------------------------------------------- */

.header-barra {
  position: relative;
  z-index: var(--z-contenido);
  display: flex;
  align-items: center;
  gap: var(--e-5);
  min-height: var(--header-alto);
}

.header-logo { display: block; }
.header-logo img { height: 32px; width: auto; }

/* ---------- Navegación de escritorio -------------------------------------- */

.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 auto;          /* centra la navegación */
}

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  background: none;
  border: 0;
  font-size: 14.5px;
  color: var(--hueso);
  white-space: nowrap;
  cursor: pointer;
}
.nav-item:hover { color: var(--ambar); }

/* Estado activo: línea Ámbar de 2px bajo el ítem.
   NO se marca con cambio de color de texto. */
.nav-item[aria-current="page"]::after,
.nav-item.is-activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--ambar);
}

/* El caret va en SVG, no como carácter: "▾" (U+25BE) está fuera del
   subconjunto latin de las tipografías y caería a una fuente del
   sistema. Decorativo, así que lleva aria-hidden. */
.nav-item .caret {
  display: flex;
  color: var(--humo);
  transition: transform .18s ease;
}
.nav-item[aria-expanded="true"] .caret { transform: rotate(180deg); }

.header-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ---------- Desplegable de Servicios -------------------------------------- */

.nav-panel {
  position: absolute;
  left: 0; right: 0; top: 100%;
  z-index: 3;
  background: var(--negro-humo);
  border-top: var(--borde);
  border-bottom: var(--borde);
}
.nav-panel[hidden] { display: none; }

.nav-panel-grid {
  display: flex;
  gap: var(--e-4);
  align-items: stretch;
  padding-top: 22px;
  padding-bottom: 22px;
}

.nav-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: 20px;
  background: var(--grafito);
  border: var(--borde);
  text-align: left;
  cursor: pointer;
}
.nav-area:hover { border-color: var(--hueso); }

.nav-area-nombre {
  font-family: var(--serif);
  font-weight: var(--p-h2);
  font-size: 22px;
  letter-spacing: var(--t-h2-track);
  color: var(--hueso);
}
.nav-area-sub {
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: var(--t-nota);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--humo);
}
/* Cian solo en la línea de uñas */
.nav-area-sub.es-unas { color: var(--cian); }

.nav-todos {
  /* 220px y no 200: a 14,5px "Ver todos los servicios" más la flecha
     necesitan 176px de contenido y con 200px la flecha caía a otra línea. */
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--e-2);
  padding: 20px;
  background: transparent;
  border: var(--borde);
  text-align: left;
  cursor: pointer;
}
.nav-todos:hover { border-color: var(--ambar); }
.nav-todos .t {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  white-space: nowrap;
  font-size: 14.5px;
  font-weight: var(--p-medio);
  color: var(--ambar);
}
.nav-todos .d { font-size: 13px; line-height: 1.5; color: var(--humo); }


/* ---------- Header móvil --------------------------------------------------
   No hay navegación visible: logo, WhatsApp permanente y hamburguesa.
   ------------------------------------------------------------------------- */

.header-movil { display: none; }

@media (max-width: 1023px) {
  .header-nav,
  .header-acciones { display: none; }
  .header-movil {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    flex-shrink: 0;
  }
  .header-barra { min-height: 64px; gap: var(--e-3); }
  .header-logo img { height: 24px; }
}

.hamburguesa {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.hamburguesa span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--hueso);
}


/* ---------- Menú móvil a pantalla completa -------------------------------- */

.menu-movil {
  position: fixed;
  inset: 0;
  z-index: var(--z-panel);
  background: var(--negro-humo);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.menu-movil[hidden] { display: none; }

.menu-movil-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--e-3);
  border-bottom: 1px solid rgba(244, 242, 237, .16);
}
.menu-movil-top .header-logo img { height: 24px; }
.menu-movil-cerrar {
  margin-left: auto;
  border-color: rgba(244, 242, 237, .35);
}

.menu-movil-nav {
  display: flex;
  flex-direction: column;
  padding: 20px var(--e-4);
}

.menu-enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(244, 242, 237, .14);
  font-family: var(--serif);
  font-weight: var(--p-h2);
  font-size: 26px;
  color: var(--hueso);
  text-align: left;
  cursor: pointer;
}
.menu-enlace:last-child { border-bottom: 0; }
.menu-enlace .signo { font-size: 20px; color: var(--ambar); line-height: 1; }

.menu-grupo {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: 14px 0;
  border-bottom: 1px solid rgba(244, 242, 237, .14);
}
.menu-grupo > .menu-enlace { padding: 0; border-bottom: 0; }

.menu-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 14px;
  border-left: var(--borde);
}
.menu-sub[hidden] { display: none; }

.menu-sub a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--boton-alto-movil);
  padding: 11px 0;
  font-size: 17px;
  color: var(--hueso);
}
.menu-sub a .cuenta { font-size: 13px; color: var(--humo); }
.menu-sub a.es-unas,
.menu-sub a.es-unas .cuenta { color: var(--cian); }
.menu-sub .ver-todos {
  min-height: var(--boton-alto-movil);
  padding: 11px 0;
  font-size: 15px;
  color: var(--ambar);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.menu-movil-pie {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: var(--e-4);
}
.menu-movil-pie .btn { min-height: var(--boton-alto-movil); padding: 15px; }
.menu-movil-pie .btn-secundario { border-color: rgba(244, 242, 237, .4); }


/* ============================================================
   FOOTER · fondo Grafito, texto Hueso.
   El bloque de contacto encabeza con WhatsApp, no con el teléfono.
   ============================================================ */

.footer {
  background: var(--grafito);
  color: var(--hueso);
  border-top: var(--borde);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.4fr 1fr;
  gap: var(--e-7);
  padding: var(--seccion-arriba) 0 var(--e-8);
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  align-items: flex-start;
}

.footer-titulo {
  font-family: var(--condensada);
  font-weight: var(--p-etiqueta);
  font-size: var(--t-nota);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--humo);
  margin-bottom: var(--e-1);
}

.footer-col a,
.footer-col button {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--hueso);
  text-align: left;
  cursor: pointer;
}
.footer-col a:hover,
.footer-col button:hover { color: var(--ambar); }

.footer-col p {
  font-size: 13px;
  line-height: 1.7;
  color: var(--humo);
}

.footer-logo img { height: 30px; width: auto; }

/* WhatsApp primero y más destacado que teléfono e Instagram */
.footer-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-size: 15px !important;
  font-weight: var(--p-medio);
  color: var(--ambar) !important;
}
.footer-whatsapp:hover { color: var(--hueso) !important; }
.footer-whatsapp svg { flex-shrink: 0; }

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-5);
  flex-wrap: wrap;
  padding: var(--e-5) 0;
  border-top: var(--borde);
  font-size: 13px;
  color: var(--humo);
}
.footer-legal-enlaces { display: flex; gap: var(--e-5); flex-wrap: wrap; }
.footer-legal a { color: var(--humo); }
.footer-legal a:hover { color: var(--ambar); }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--e-6); }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--e-7); }
  .footer-legal { flex-direction: column; align-items: flex-start; gap: var(--e-3); }
}


/* ============================================================
   Puntos de montaje · fase 2
   Vacíos en el lanzamiento. Están desde ahora para que ninguna
   página de lanzamiento se toque cuando entre la fase 2.
   ============================================================ */

#montaje-chatbot { position: relative; z-index: var(--z-chat); }
#montaje-carrito { position: relative; z-index: var(--z-panel); }


/* Bloquea el scroll del fondo con un panel abierto */
body.sin-scroll { overflow: hidden; }