/* ===========================================================
   Daniel Postschka — Barbería y Peluquería
   Paleta Cyprus / Sand · Nivel de movimiento L2
   Motivo visual: el arco del espejo de barbería
   =========================================================== */

:root {
  /* Marca */
  --color-cyprus:      #004741;
  --color-cyprus-deep: #00332F;
  --color-sand:        #F0EDE4;
  --color-carbon:      #161616;
  --color-stone:       #8A8A82;
  --color-light:       #E4E2DC;

  --color-primary: var(--color-cyprus);
  --color-bg:      var(--color-sand);
  --color-text:    var(--color-carbon);
  --color-muted:   var(--color-stone);
  --color-accent:  var(--color-cyprus);

  /* Tipografía */
  --font-display: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ADN visual: clásico y elegante → borde sutil */
  --border-radius: 4px;
  --arch: 50% 50% var(--border-radius) var(--border-radius) / 37.5% 37.5% 1% 1%;

  --container: 1280px;
  --pad-section: clamp(72px, 9vw, 128px);
  --demo-bar: 28px;

  /* Tokens del kit de movimiento */
  --m-shift: 44px;
  --m-stagger: 90ms;
  --m-parallax: 7%;
}

/* ----------------------------------------------------------
   Reset
   overflow-x: clip y no hidden — hidden crea un scroll container
   y mata todo el scroll-linked del kit (MOTION-AGENT, trampa 1).
   ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  padding-top: var(--demo-bar);
  overflow-x: clip;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
ul { list-style: none; margin: 0; padding: 0; }
/* figure trae margin: 1em 40px del navegador: sin esto las fotos
   de las cards quedan con un marco blanco a los costados */
figure, figcaption { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 48px);
}

.section-pad { padding-block: var(--pad-section); }

/* El header es sticky: sin esto un ancla deja el título debajo */
section[id], .hero { scroll-margin-top: calc(var(--demo-bar) + 76px); }

.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;
}

/* ----------------------------------------------------------
   Tipografía de sistema
   ---------------------------------------------------------- */

.eyebrow {
  display: block;
  font-size: 0.688rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: 1rem;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 4.6vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.lead {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: #3C3C38;
  max-width: 46ch;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  margin-bottom: clamp(40px, 5vw, 64px);
}

/* ----------------------------------------------------------
   Duotono Cyprus
   Las fotos vienen de fuentes distintas (una en blanco y negro,
   el resto en color cálido). El virado las unifica en una sola
   dirección de arte y deja el color pleno para el hover.
   ---------------------------------------------------------- */

.duo { position: relative; isolation: isolate; overflow: hidden; }

.duo img {
  filter: grayscale(1) contrast(1.06) brightness(0.96);
  transition: filter 0.5s ease;
}

.duo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-cyprus);
  mix-blend-mode: color;
  opacity: 0.62;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.duo--soft::after { opacity: 0.34; }

/* La navaja está fotografiada sobre fondo blanco: con el virado
   estándar queda de un menta lavado que desentona con el resto */
.duo--dark img { filter: grayscale(1) contrast(1.2) brightness(0.8); }

/* ----------------------------------------------------------
   Botones — efecto inset-fill (el relleno sube desde abajo)
   ---------------------------------------------------------- */

.btn {
  position: relative;
  z-index: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 1.75rem;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.btn:hover::before,
.btn:focus-visible::before { transform: scaleY(1); }

.btn--solid { background: var(--color-cyprus); color: var(--color-sand); }
.btn--solid::before { background: var(--color-carbon); }

.btn--outline { border: 1px solid rgba(22, 22, 22, 0.22); color: var(--color-carbon); }
.btn--outline::before { background: var(--color-cyprus); }
.btn--outline:hover, .btn--outline:focus-visible { color: var(--color-sand); border-color: var(--color-cyprus); }

.btn--light { background: var(--color-sand); color: var(--color-cyprus); }
.btn--light::before { background: var(--color-carbon); }
.btn--light:hover, .btn--light:focus-visible { color: var(--color-sand); }

/* Botón circular de flecha */
.circle-btn {
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-cyprus);
  color: var(--color-sand);
  font-size: 0.875rem;
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.3s ease;
}

.circle-btn--stone  { background: var(--color-stone); }
.circle-btn--carbon { background: var(--color-carbon); }

a:hover > .circle-btn,
.svc:hover .circle-btn,
.circle-btn:hover { transform: rotate(45deg); }

/* ----------------------------------------------------------
   Header
   ---------------------------------------------------------- */

.nav {
  position: sticky;
  top: var(--demo-bar);
  z-index: 1000;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}

.nav.is-scrolled {
  background: var(--color-carbon);
  box-shadow: 0 1px 0 rgba(240, 237, 228, 0.1);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 3vw, 40px);
  padding-block: 1.125rem;
}

.brand {
  font-family: var(--font-display);
  font-size: clamp(0.9375rem, 1.5vw, 1.1875rem);
  letter-spacing: 0.17em;
  white-space: nowrap;
  transition: color 0.35s ease;
}

.nav-links {
  display: flex;
  gap: clamp(20px, 2.6vw, 38px);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  transition: color 0.35s ease;
}

.nav.is-scrolled .brand,
.nav.is-scrolled .nav-links { color: var(--color-sand); }

.nav.is-scrolled .nav-cta { background: var(--color-sand); color: var(--color-cyprus); }
.nav.is-scrolled .nav-cta::before { background: var(--color-cyprus); }
.nav.is-scrolled .nav-cta:hover { color: var(--color-sand); }

.nav-cta { padding: 0.8125rem 1.375rem; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: color 0.35s ease;
}

.nav.is-scrolled .nav-toggle { color: var(--color-sand); }

/* ----------------------------------------------------------
   Parche del kit: .m-split-mask nunca se revela

   En motion.css, `.m-split.is-in > span` (que devuelve el texto a
   su lugar) y `.m-split-mask .m-split > span` (que lo empuja hacia
   abajo) tienen la misma especificidad, y la segunda va después.
   Gana el empujón y el texto queda tapado por el overflow del
   mask para siempre. Con una clase más, la vuelta al lugar gana.
   ---------------------------------------------------------- */

.m-split-mask .m-split.is-in > span { transform: none; }

/* ----------------------------------------------------------
   Hero — cartel tipográfico partido con el arco al centro
   ---------------------------------------------------------- */

.hero {
  position: relative;
  padding-bottom: clamp(48px, 7vw, 96px);
}

.hero-kicker {
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-stone);
  /* line-height 0.8 deja que las mayúsculas suban por encima de su
     caja: sin este aire el volado toca el kicker */
  margin-bottom: 1.5rem;
}

.hero-word {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.75rem, 14vw, 14rem);
  line-height: 0.8;
  letter-spacing: -0.02em;
  color: var(--color-cyprus);
  text-align: center;
}

.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  margin-top: clamp(-16px, -1.6vw, 0px);
}

/* Las dos palabras de abajo van más chicas que la de arriba y se
   meten debajo del arco, igual que en la referencia. El margen
   negativo corre la caja hacia el centro; el arco (z-index 3)
   tapa el arranque de la palabra. Sin esto, CORTE no entra en su
   columna y se corta contra el borde de la pantalla. */
.hero-word--left,
.hero-word--right {
  font-size: clamp(2.5rem, 9.5vw, 9.5rem);
  padding-bottom: clamp(8px, 2.4vw, 40px);
  white-space: nowrap;
}

.hero-word--left  { text-align: right; margin-right: -3vw; }
.hero-word--right { text-align: left;  margin-left: -3vw; }

/* El arco: recorte de espejo de barbería. Es el motivo que se
   repite en el retrato, en las cards y en el sello. */
.hero-arch {
  position: relative;
  z-index: 3;
  /* Medida atada a que el cartel entero entre en una pantalla de
     900 px de alto: kicker + OFICIO + arco + aire */
  width: min(33vw, 370px);
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--color-light);
  box-shadow: 0 40px 80px -50px rgba(0, 51, 47, 0.75);
}

.hero-arch img {
  width: 100%;
  height: 115%;          /* aire para el recorrido del parallax */
  object-fit: cover;
  object-position: 50% 30%;
}

/* Cards flotantes */
.hero-card {
  position: absolute;
  z-index: 5;
  width: 272px;
  padding: 1.125rem 1.25rem;
  border-radius: var(--border-radius);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(22, 22, 22, 0.06);
  box-shadow: 0 22px 48px -30px rgba(22, 22, 22, 0.45);
}

.hero-card__label {
  display: block;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: 0.625rem;
}

.hero-card__title {
  display: block;
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.3;
}

.hero-card__sub {
  display: block;
  font-size: 0.75rem;
  line-height: 1.55;
  color: var(--color-stone);
  margin-top: 0.3125rem;
}

.hero-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
}

.hero-card__list li {
  font-size: 0.75rem;
  line-height: 2;
}
.hero-card__list li::before { content: "— "; color: var(--color-stone); }

.hero-card--tl { top: 21%;    left: clamp(20px, 4vw, 48px); }
.hero-card--tr { top: 14%;    right: clamp(20px, 4vw, 48px); }
.hero-card--bl { bottom: 17%; left: clamp(20px, 4vw, 48px); width: 218px; }
/* Sin este margen, el WhatsApp flotante se le sienta encima */
/* Más arriba que la línea de CORTE: si baja, le tapa dos letras
   y la palabra deja de leerse */
.hero-card--br { bottom: 33%; right: clamp(20px, 4vw, 48px); }

.hero-tag {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.hero-tag .ico {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-cyprus);
  color: var(--color-sand);
  font-size: 0.75rem;
}

/* Estado de apertura, escrito por script.js con el horario real */
.hero-status { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-stone);
  flex: none;
}
.dot.is-open { background: var(--color-cyprus); box-shadow: 0 0 0 4px rgba(0, 71, 65, 0.16); }

.hero-status__text { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }

/* ----------------------------------------------------------
   Sello divisor — la banda de color partida con el círculo
   superpuesto, tomado de la card de paleta de referencia
   ---------------------------------------------------------- */

.band { height: clamp(90px, 11vw, 150px); background: var(--color-cyprus); }

.seal-wrap { position: relative; height: 0; }

.seal {
  position: absolute;
  left: 50%;
  top: calc(clamp(84px, 8.5vw, 116px) / -2);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: clamp(126px, 13vw, 168px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-carbon);
  color: var(--color-sand);
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.7;
  z-index: 10;
}

/* ----------------------------------------------------------
   Servicios
   ---------------------------------------------------------- */

.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 1.8vw, 24px); }

.svc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--border-radius);
  overflow: hidden;
  transition: transform 0.45s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.45s ease;
}

.svc:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 34px 60px -38px rgba(22, 22, 22, 0.55);
}

.svc__media { aspect-ratio: 4 / 3; }
.svc__media img { width: 100%; height: 100%; object-fit: cover; }

.svc:hover .duo img { filter: none; }
.svc:hover .duo::after { opacity: 0; }

.svc__body {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  flex: 1;
  padding: clamp(18px, 2vw, 26px);
}

.svc__name {
  font-size: 1.0625rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  margin-bottom: 0.75rem;
}

.svc__detail { font-size: 0.8125rem; line-height: 2; color: var(--color-stone); }

/* ----------------------------------------------------------
   Armá tu turno — el configurador arma el mensaje de WhatsApp
   ---------------------------------------------------------- */

.turno { background: var(--color-cyprus); color: var(--color-sand); }
.turno .eyebrow { color: rgba(240, 237, 228, 0.55); }
.turno .section-title { color: var(--color-sand); }

.turno-grid {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: clamp(32px, 5vw, 60px);
  align-items: start;
}

.step { margin-bottom: clamp(24px, 3vw, 34px); }
.step:last-child { margin-bottom: 0; }

.step__n {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(240, 237, 228, 0.55);
  margin-bottom: 0.8125rem;
}

.chips { display: flex; flex-wrap: wrap; gap: 0.625rem; }

.chip {
  padding: 0.6875rem 1.25rem;
  border: 1px solid rgba(240, 237, 228, 0.32);
  border-radius: 40px;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.chip:hover { border-color: var(--color-sand); }

.chip[aria-pressed="true"] {
  background: var(--color-sand);
  border-color: var(--color-sand);
  color: var(--color-cyprus);
}

.preview {
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: var(--border-radius);
  background: rgba(0, 0, 0, 0.2);
}

.preview__cap {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(240, 237, 228, 0.55);
  margin-bottom: 1rem;
}

.bubble {
  min-height: 96px;
  padding: 1.125rem 1.25rem;
  border-radius: var(--border-radius) 14px 14px 14px;
  background: var(--color-sand);
  color: var(--color-carbon);
  font-size: 0.875rem;
  line-height: 1.65;
}

.preview .btn { width: 100%; justify-content: center; margin-top: 1.25rem; }

/* ----------------------------------------------------------
   El oficio — retrato en arco + detalles apilados
   ---------------------------------------------------------- */

.oficio { background: var(--color-light); }

.oficio-grid {
  display: grid;
  grid-template-columns: 0.92fr 1fr 0.6fr;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}

.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--arch);
  overflow: hidden;
  background: var(--color-stone);
}

.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }

/* z-index por encima del ::after del duotono, que si no
   viraría también el texto del pie */
.portrait__cap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem 1.125rem;
  background: linear-gradient(0deg, rgba(0, 51, 47, 0.92), transparent);
  color: var(--color-sand);
}

.portrait__cap strong { display: block; font-size: 0.9375rem; font-weight: 800; letter-spacing: 0.04em; }
.portrait__cap span { font-size: 0.6875rem; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }

.oficio-txt { padding-top: clamp(4px, 1vw, 14px); }
.oficio-txt .section-title { margin-bottom: 1.375rem; }
.oficio-txt .lead + .lead { margin-top: 1rem; }
.oficio-txt .btn { margin-top: 1.75rem; }

.stack { display: grid; gap: clamp(16px, 2vw, 24px); }

.stack figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--border-radius);
  overflow: hidden;
}

.stack img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------------
   Horarios y contacto
   ---------------------------------------------------------- */

.visita-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.horarios { border-top: 1px solid rgba(22, 22, 22, 0.14); }

.horarios li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 0.9375rem;
  border-bottom: 1px solid rgba(22, 22, 22, 0.09);
  font-size: 0.9375rem;
}

.horarios li.is-today { color: var(--color-cyprus); font-weight: 800; }

.horarios .dia { font-weight: 700; letter-spacing: 0.04em; }
.horarios .hora { font-variant-numeric: tabular-nums; color: #4A4A46; }
.horarios li.is-today .hora { color: var(--color-cyprus); }
.horarios .cerrado { color: var(--color-stone); font-style: italic; }

.contacto-list { display: grid; gap: 1.25rem; margin-bottom: 2rem; }

.contacto-item { display: flex; align-items: flex-start; gap: 1rem; }

.contacto-item .ico {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--color-cyprus);
  color: var(--color-sand);
  font-size: 0.9375rem;
  transition: background 0.3s ease;
}

a.contacto-item:hover .ico { background: var(--color-carbon); }

.contacto-item .k {
  display: block;
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-stone);
}

.contacto-item .v { font-size: 1rem; font-weight: 600; }

/* ----------------------------------------------------------
   Footer
   ---------------------------------------------------------- */

/* El padding de abajo es grande a propósito: el WhatsApp flotante
   se sienta ahí y taparía el crédito de autoría */
.footer { background: var(--color-carbon); color: var(--color-sand); padding-block: clamp(56px, 7vw, 88px) clamp(88px, 9vw, 108px); }

.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.1fr; gap: clamp(32px, 5vw, 56px); }

/* El logo original es negro sobre papel claro. La versión negada
   más el modo lighten hacen desaparecer el fondo sobre el carbón. */
.footer-mark {
  width: 240px;
  margin-bottom: 1.25rem;
  mix-blend-mode: lighten;
}

.footer h4 {
  font-size: 0.625rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-stone);
  margin-bottom: 1.125rem;
}

.footer li, .footer p { font-size: 0.8125rem; line-height: 2.1; color: rgba(240, 237, 228, 0.72); }

.footer a:hover { color: var(--color-sand); }

.social { display: flex; gap: 0.75rem; margin-top: 0.75rem; }

.social a {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(240, 237, 228, 0.22);
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.social a:hover { background: var(--color-sand); color: var(--color-carbon); border-color: var(--color-sand); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 1.375rem;
  border-top: 1px solid rgba(240, 237, 228, 0.13);
  font-size: 0.6875rem;
  color: var(--color-stone);
}

.footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------
   WhatsApp flotante
   ---------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  right: clamp(16px, 2.4vw, 26px);
  bottom: clamp(16px, 2.4vw, 26px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.9375rem 1.375rem;
  border-radius: 40px;
  background: var(--color-cyprus);
  color: var(--color-sand);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  box-shadow: 0 14px 36px -12px rgba(0, 71, 65, 0.65);
}

.whatsapp-float i { font-size: 1.125rem; }

/* ----------------------------------------------------------
   Watermark de demo
   ---------------------------------------------------------- */

.demo-watermark {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 6px 12px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  background: #111111;
  color: #ffffff;
  opacity: 0.85;
  pointer-events: none;
}

.demo-watermark-tile {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: difference;
  background-repeat: repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='200'%3E%3Ctext x='180' y='110' text-anchor='middle' transform='rotate(-35 180 110)' font-family='Arial, Helvetica, sans-serif' font-size='26' font-weight='700' letter-spacing='2' fill='%23808080'%3ELight Solutions%3C/text%3E%3C/svg%3E");
}

/* ===========================================================
   Responsive
   =========================================================== */

@media (max-width: 1100px) {
  .hero-stage {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.5rem;
  }

  /* En una columna las palabras van centradas: el corrimiento
     hacia el arco solo tiene sentido en el cartel de tres columnas */
  .hero-word--left, .hero-word--right {
    text-align: center;
    padding-bottom: 0;
    margin-inline: 0;
  }

  .hero-arch { order: -1; width: min(62vw, 340px); margin-bottom: 1rem; }

  /* Las cards dejan de flotar y se apilan debajo de la imagen */
  .hero-card {
    position: static;
    width: 100%;
    max-width: 520px;
    margin: 0.75rem auto 0;
  }

  .hero-cards { display: grid; gap: 0.75rem; margin-top: 2.5rem; }

  .svcs { grid-template-columns: 1fr; }
  .turno-grid, .visita-grid { grid-template-columns: 1fr; }

  .oficio-grid { grid-template-columns: 1fr 1fr; }
  .oficio-txt { grid-column: 1 / -1; order: 3; }
  .stack { grid-template-columns: repeat(3, 1fr); grid-column: 1 / -1; order: 4; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed;
    inset: calc(var(--demo-bar) + 68px) 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 1rem clamp(20px, 4vw, 48px) 1.75rem;
    background: var(--color-carbon);
    color: var(--color-sand);
    transform: translateY(-120%);
    transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
  }

  .nav-links.is-open { transform: translateY(0); }
  .nav-links a { padding-block: 0.9375rem; border-bottom: 1px solid rgba(240, 237, 228, 0.1); }

  .nav-toggle { display: flex; }
  .nav-cta { display: none; }

  .oficio-grid { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; }
  .stack { grid-template-columns: 1fr 1fr; }

  .footer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .hero-word { font-size: clamp(3.25rem, 17vw, 5rem); }
  .hero-arch { width: 74vw; }
  .stack { grid-template-columns: 1fr; }
  .svc__body { flex-direction: column; gap: 1.25rem; }
  .whatsapp-float span { display: none; }
  .whatsapp-float { padding: 1rem; }
}