/* Navajas — Layout de secciones */

/* Header / Nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 13, 16, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(184, 190, 199, 0.12);
}

.site-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-header__logo {
  width: 44px;
  height: 44px;
}

/* Header (barra sticky) mas compacto que el uso del mismo bloque marca
   en el footer: se escopea al .site-header para no achicar el logo/nombre
   del footer, que no forma parte de este ajuste. */
.site-header .site-header__logo {
  width: 36px;
  height: 36px;
}

.site-header .site-header__brand-name {
  font-size: 1.02rem;
}

/* El logo (LOGO/logo-navajas.jpeg) ya es blanco sobre fondo negro solido —
   no necesita contenedor propio para integrarse al header/footer oscuros;
   un fondo claro detras lo enmarcaria en un cuadrado blanco feo. */
.site-header__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.site-header__brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--color-texto-claro);
}

.site-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Botón "Reservar turno" del header: tratamiento mono/técnico, más premium.
   Escopeado a este contenedor puntualmente para no afectar otros usos de
   .btn--primary (hero, wizard, panel). Tamaño base centralizado acá (antes
   vivía como style inline en index.php, lo que obligaba a pelear con
   !important en el breakpoint de escritorio de abajo). */
.site-header__cta .btn--primary {
  padding: 0.6rem 1.1rem;
  min-height: 40px;
  font-size: var(--fs-small);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Telefonos muy angostos (~360px de ancho real o menos): el texto en
   mayúsculas "RESERVAR TURNO" + el botón de menú no entran junto al
   logo/marca sin desbordar horizontalmente (confirmado midiendo el DOM
   real en ese rango: .site-header__cta se salía unos px del viewport). */
@media (max-width: 400px) {
  .site-header__cta .btn--primary {
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-tiny);
    letter-spacing: 0.03em;
  }
}

/* Header de escritorio: la lista horizontal de links (.site-nav) se
   eliminó — el header queda solo con marca + CTA. En >=1360px la marca
   "Navajas" pasa a ser el trigger del mismo panel .mobile-nav que ya
   usaba el menú hamburguesa (ver main.js), reutilizando su animación. */
@media (min-width: 1360px) {
  /* CTA del header un poco mas chico en desktop (fuera de este breakpoint
     conserva su tamano actual: en mobile ese link convive con el boton
     hamburguesa y ya esta cerca del touch target minimo, no se toca). */
  .site-header__cta .btn--primary {
    padding: 0.5rem 1rem;
    min-height: 36px;
  }
}

.nav-toggle {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 1px solid rgba(184, 190, 199, 0.3);
  border-radius: var(--radius-sm);
  padding: 0;
  color: var(--color-texto-claro);
  transition: border-color var(--dur-base) var(--ease-out);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
  border-color: var(--color-azul-led-suave);
}

.nav-toggle__line {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}

/* Hamburguesa -> X: se activa con el mismo aria-expanded que ya alterna
   main.js, sin ningún cambio de lógica JS. */
.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Área táctil mínima de 44x44px (WCAG 2.5.5) sin agrandar el botón visible
   ni afectar el ancho del header: la extiende con un pseudo-elemento fuera
   del flujo. Anclada al borde derecho del botón (no centrada) porque es el
   último elemento del header — centrarla la hacía sobresalir por la derecha
   y generaba overflow horizontal real en viewports angostos (320px). */
.nav-toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: max(44px, 100%);
  height: max(44px, 100%);
  transform: translateY(-50%);
}

@media (min-width: 1360px) {
  .nav-toggle {
    display: none;
  }
}

.mobile-nav {
  display: none;
  flex-direction: column;
  padding: var(--space-2) 0 var(--space-4);
  border-top: 1px solid rgba(184, 190, 199, 0.12);
}

.mobile-nav[data-open="true"] {
  display: flex;
  animation: nav-fade-in var(--dur-base) var(--ease-out);
}

@keyframes nav-fade-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.mobile-nav a {
  padding: var(--space-3) 0;
  color: var(--color-texto-claro);
  border-bottom: 1px solid rgba(184, 190, 199, 0.08);
}

/* Panel de escritorio (>=1360px) para #mobile-nav: en mobile/tablet no se
   toca nada de lo anterior (.mobile-nav / .mobile-nav[data-open] / .mobile-nav a
   siguen intactos). Se usa el selector por ID para ganarle en especificidad
   a .container (misma clase en el <nav>, ver index.php) sin depender del
   orden de las hojas de estilo. En vez del bloque completo de ancho de
   .container que empuja el contenido hacia abajo, queda como un panel
   flotante y compacto, alineado con el logo, que se superpone al contenido
   (no ocupa espacio en el flujo) y anima con transform/opacity en vez de
   display:none -> display:block. El <header> ya es position:sticky, así
   que sirve de contenedor de posicionamiento sin tocar .site-header__bar. */
@media (min-width: 1360px) {
  #mobile-nav {
    display: flex;
    position: absolute;
    top: calc(100% + 10px);
    left: max(var(--space-8), calc((100% - var(--container-max)) / 2 + var(--space-8)));
    right: auto;
    width: min(300px, calc(100% - 2 * var(--space-8)));
    max-width: 300px;
    margin: 0;
    padding: var(--space-2);
    border-top: none;
    border: 1px solid rgba(184, 190, 199, 0.14);
    border-radius: var(--radius-md);
    background: rgba(11, 13, 16, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    transform: translateX(-16px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear var(--dur-slow);
  }

  #mobile-nav[data-open="true"] {
    animation: none;
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      visibility 0s linear 0s;
  }

  #mobile-nav a {
    padding: var(--space-2) var(--space-3);
    border-bottom-color: rgba(184, 190, 199, 0.06);
    border-radius: var(--radius-sm);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
      background-color var(--dur-fast) var(--ease-out);
  }

  #mobile-nav a:last-child {
    border-bottom: none;
  }

  #mobile-nav a:hover,
  #mobile-nav a:focus-visible {
    background: rgba(255, 255, 255, 0.05);
  }

  /* Escalonado sutil de los links al abrir; al cerrar no llevan delay
     (la regla de arriba, sin [data-open], no declara transition-delay). */
  #mobile-nav[data-open="true"] a {
    opacity: 1;
    transform: translateX(0);
  }

  #mobile-nav[data-open="true"] a:nth-child(1) { transition-delay: 30ms; }
  #mobile-nav[data-open="true"] a:nth-child(2) { transition-delay: 55ms; }
  #mobile-nav[data-open="true"] a:nth-child(3) { transition-delay: 80ms; }
  #mobile-nav[data-open="true"] a:nth-child(4) { transition-delay: 105ms; }
  #mobile-nav[data-open="true"] a:nth-child(5) { transition-delay: 130ms; }
  #mobile-nav[data-open="true"] a:nth-child(6) { transition-delay: 155ms; }
  #mobile-nav[data-open="true"] a:nth-child(7) { transition-delay: 180ms; }
  #mobile-nav[data-open="true"] a:nth-child(8) { transition-delay: 205ms; }
  #mobile-nav[data-open="true"] a:nth-child(9) { transition-delay: 230ms; }
  #mobile-nav[data-open="true"] a:nth-child(10) { transition-delay: 255ms; }
}

/* Hero */
.hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La foto es vertical (1200x1600) recortada a un banner ancho: en 25%
     el recorte mostraba sobre todo el techo y el tubo de luz, dejando
     afuera los espejos con borde LED azul y los puestos de trabajo (lo
     más "de marca" de la foto). 45% centra el recorte en esa franja. */
  object-position: center 45%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Overlay simple de un solo gradiente vertical (antes tenía una segunda
     capa diagonal con tinte azul) — más limpio, mismo nivel de contraste
     para el texto. */
  background: linear-gradient(180deg, rgba(11, 13, 16, 0.4) 0%, rgba(11, 13, 16, 0.62) 45%, var(--color-negro-base) 96%);
}

.hero__content {
  padding-block: var(--space-16) var(--space-12);
  max-width: 46rem;
}

.hero__kicker {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--fs-small);
  color: var(--color-azul-led-suave);
  display: block;
  margin-bottom: var(--space-4);
}

.hero h1 {
  margin-bottom: var(--space-4);
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.5);
}

.hero__brand-line {
  display: block;
  background: linear-gradient(90deg, #ffffff, var(--color-plateado));
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--color-plateado);
  -webkit-text-fill-color: transparent;
}

.hero__sub-line {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--color-plateado);
  font-size: var(--fs-display-md);
}

.hero__lead {
  font-size: var(--fs-body-lg);
  color: var(--color-texto-claro);
  max-width: 34rem;
  margin-bottom: var(--space-8);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Grids de secciones */
.grid-profesionales {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .grid-profesionales {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-servicios {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-servicios {
    grid-template-columns: repeat(2, 1fr);
  }
}

.grid-precios {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid-precios {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-productos {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .grid-productos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .grid-productos {
    grid-template-columns: repeat(5, 1fr);
  }
}

.grid-galeria {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px) {
  .grid-galeria {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 960px) {
  .grid-galeria {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Sala de espera — bloque destacado */
.sala-espera {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .sala-espera {
    grid-template-columns: 1fr 1fr;
  }
}

.sala-espera__galeria {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
}

/* Sobre Navajas */
.historia {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .historia {
    grid-template-columns: minmax(0, 22rem) 1fr;
  }
}

.historia__foto {
  aspect-ratio: 3 / 4;
  max-width: 22rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: 1px solid rgba(184, 190, 199, 0.15);
}

.historia__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Blanco y negro por defecto; a color al pasar el mouse. En pantallas
     táctiles (sin hover real) se muestra directamente a color, para no
     dejar la foto "trabada" en blanco y negro. */
  filter: grayscale(100%);
  transition: filter var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

@media (hover: hover) {
  .historia__foto:hover img,
  .historia__foto:focus-within img {
    filter: grayscale(0%);
    transform: scale(1.03);
  }
}

@media (hover: none) {
  .historia__foto img {
    filter: grayscale(0%);
  }
}

.historia__texto {
  max-width: 48rem;
}

.historia__texto blockquote {
  margin: 0;
  padding-left: var(--space-6);
  border-left: 3px solid var(--color-rojo-acento);
  font-size: var(--fs-body-lg);
  color: var(--color-texto-claro);
}

/* Ubicacion + Contacto */
.info-grid {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
}

@media (min-width: 860px) {
  .info-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Footer */
.site-footer {
  border-top: 1px solid rgba(184, 190, 199, 0.12);
  padding-block: var(--space-12) var(--space-8);
  background: var(--color-negro-base);
}

.site-footer .blade-divider {
  margin-bottom: var(--space-8);
}

.site-footer__top {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-8);
}

@media (min-width: 720px) {
  .site-footer__top {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(184, 190, 199, 0.1);
  font-size: var(--fs-small);
  color: var(--color-texto-muted);
}

@media (min-width: 640px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.credito-dev a {
  color: var(--color-plateado-suave);
}