/* ============================================================================
 * LA OG BARBER · capa propia
 * ----------------------------------------------------------------------------
 * Va DESPUÉS de theme.css y de tailwind.css, así que gana los empates.
 *
 * QUÉ ES ESTE ARCHIVO
 * -------------------
 * theme.css trae las piezas (tarjetas, botones, campos, calendario) en gris
 * y blanco, iguales para todas las barberías. Aquí se les pone el color y el
 * carácter de La OG: muro verde, negro, blanco y luz.
 *
 * EL ENCARGO (17/09/2026)
 * -----------------------
 * El dueño pidió dejar atrás el neón de calle: "mis colores son verde
 * esperanza, blanco y negro" y "la imagen que quiero transmitir es premium".
 * De ahí salen las tres reglas que sostienen todo lo de abajo:
 *
 *   1. UN SOLO VERDE. El de la marca (--verde). No hay segundo color de
 *      acento: lo que no es verde es blanco, negro o gris.
 *   2. LA LUZ NO SE MUEVE. Nada de tiras, parpadeos ni chispas. La luz son
 *      manchas grandes, quietas y muy difuminadas, y filos de un píxel. Se ve
 *      cara y, de paso, no cuesta nada de batería.
 *   3. AIRE. Tipografía con serifa, fina y grande, y mucho espacio en blanco.
 *      Lo apretado se lee barato.
 *
 * RENDIMIENTO (no deshacer)
 * -------------------------
 * El muro es una capa FIJA detrás de todo. Con algo fijo detrás, el vidrio
 * esmerilado (backdrop-filter) obliga al navegador a rehacer el desenfoque en
 * cada cuadro y el scroll del teléfono se traba. Por eso --glass-blur: none y
 * las tarjetas llevan color sólido. Tampoco hay parallax ni filtros animados.
 * ========================================================================== */

/* ─────────────────────────────── 1 · COLOR ──────────────────────────────── */
:root {
  /* El verde de la marca. Sobre negro se abre un punto para que el texto
     encima siga siendo legible; el de la lata es más cerrado. */
  --verde:       #16B75C;
  --verde-luz:   #45E58C;
  --verde-hondo: #0A5E31;
  --verde-humo:  rgba(22, 183, 92, .12);

  --muro:        #2F3B26;   /* el color medio de la foto del muro */
  --carbon:      #050706;
  --hueso:       #F4F7F2;

  /* theme.css pinta con estas: cambiarlas aquí tiñe de verde los botones,
     las palomitas, el día elegido del calendario y la hora seleccionada. */
  --accent:      #16B75C;
  --accent-lit:  #45E58C;
  --accent-dim:  #0D8B44;
  --accent-rgb:  22, 183, 92;
  --led-cool:    120, 200, 155;

  --ink:         #050706;
  --ink-soft:    #070A08;
  --panel:       #0A0E0B;
  --card:        #0C110D;
  --raised:      #111711;

  --text:        #F1F4EF;
  --text-soft:   #A3AFA5;
  --text-faint:  #69766B;

  --line:        rgba(255, 255, 255, .075);
  --line-lit:    rgba(69, 229, 140, .30);

  --ok:          #45E58C;

  --radius:      16px;
  --radius-lg:   24px;

  /* Ver la nota de rendimiento de arriba. */
  --glass-blur:  none;
  --vidrio:      rgba(5, 8, 6, .82);
  --vidrio-soft: rgba(5, 8, 6, .66);

  --f-titulo: 'Cormorant Garamond', 'Times New Roman', serif;
  --f-texto:  Inter, system-ui, -apple-system, sans-serif;
}

/* ──────────────────────────── 2 · TIPOGRAFÍA ───────────────────────────── */
.og { font-family: var(--f-texto); background: var(--carbon); color: var(--text); }

.og .font-display,
.og h1, .og h2, .og h3, .og h4 {
  font-family: var(--f-titulo);
  font-weight: 300;
  letter-spacing: .005em;
}

/* La línea de arriba de cada sección: pequeña, en versal y muy espaciada.
   Es la que da el tono de catálogo caro. */
.og-eyebrow {
  display: inline-block;
  font-family: var(--f-texto);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .42em;
  text-transform: uppercase;
  color: var(--verde-luz);
}
/* El número de sección, en cursiva y apagado: aire de catálogo impreso. */
.og-eyebrow b {
  font-family: var(--f-titulo); font-style: italic; font-weight: 400;
  font-size: 1.05rem; letter-spacing: 0; text-transform: none;
  color: var(--text-faint);
  margin-right: .7rem; vertical-align: -1px;
}
.og-eyebrow::after {
  content: '';
  display: block;
  width: 26px; height: 1px;
  margin: .7rem auto 0;
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
  transform: scaleX(0);
  transition: transform .9s cubic-bezier(.2,.7,.3,1) .15s;
}
.reveal.seen .og-eyebrow::after,
.og-entra .og-eyebrow::after { transform: scaleX(1); }
.og-cabeza { text-align: center; margin-bottom: var(--gap-lg); }

.og-h2 {
  margin-top: 1.1rem;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.06;
  font-weight: 300;
  letter-spacing: -.01em;
}
.og-h2 em { font-style: italic; }
.og-grad { color: var(--verde-luz); font-style: italic; }

.og-sub {
  margin: 1rem auto 0;
  max-width: 34rem;
  font-size: .95rem;
  line-height: 1.75;
  color: var(--text-soft);
}
.og-centro { text-align: center; margin-top: var(--gap-lg); }

.og .h-sub { font-family: var(--f-titulo); font-weight: 400; font-size: 1.45rem; letter-spacing: 0; }
.og .label,
.og .eyebrow {
  font-family: var(--f-texto);
  font-size: .66rem; font-weight: 500;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--text-soft);
}

/* Botones: en versalita muy espaciada, no en mayúscula gorda. */
.og .btn {
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-radius: 999px;
}
.og .btn-primary {
  background: var(--verde);
  color: #04160C;
  border: 1px solid var(--verde-luz);
  box-shadow: 0 18px 40px -22px rgba(22, 183, 92, .9);
}
.og .btn-primary:hover {
  background: var(--verde-luz);
  box-shadow: 0 22px 52px -20px rgba(69, 229, 140, .75);
}
.og .btn-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .18);
  color: var(--text);
}
.og .btn-ghost:hover { border-color: var(--verde); color: var(--verde-luz); background: rgba(22, 183, 92, .07); }

/* El destello que cruzaba los botones se queda, pero blanco y lento: un
   reflejo, no un anuncio. */
.og .btn-beam::after { background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.22) 50%, transparent 65%); }

/* ───────────────────────── 3 · EL MURO Y LA LUZ ────────────────────────── */
/* La foto del muro verde, quieta detrás de toda la página. */
.og-muro {
  position: fixed; inset: 0; z-index: -3;
  background: var(--muro) url('https://img-servicios.prismstudio.com.mx/barber/la-og/imagenes/muro.88abfa17.webp') center / cover no-repeat;
  pointer-events: none;
}
/* Lo que hace que el muro parezca una pared iluminada y no un fondo de
   pantalla: se apaga hacia las esquinas y hacia abajo. */
.og-muro::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(5,8,6,.10) 0%, rgba(5,8,6,.52) 55%, rgba(5,8,6,.86) 100%),
    linear-gradient(180deg, rgba(5,8,6,.18) 0%, rgba(5,8,6,.62) 45%, rgba(5,8,6,.90) 100%);
}

/* Las dos lámparas. Quietas, enormes y difuminadas: es luz de sala, no una
   tira de LED. */
.og-luces { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.og-luces i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(120px); opacity: .5;
}
.og-luces i:nth-child(1) {
  width: 62vw; height: 62vw; max-width: 720px; max-height: 720px;
  top: -18vw; left: 50%; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%);
}
.og-luces i:nth-child(2) {
  width: 55vw; height: 55vw; max-width: 620px; max-height: 620px;
  top: 38%; left: -18vw;
  background: radial-gradient(circle, rgba(22,183,92,.22), transparent 70%);
}
.og-luces i:nth-child(3) {
  width: 48vw; height: 48vw; max-width: 560px; max-height: 560px;
  bottom: -12vw; right: -14vw;
  background: radial-gradient(circle, rgba(22,183,92,.16), transparent 70%);
}

/* El grano: una capa finísima que le quita el aspecto de degradado plano.
   Va en SVG para no pedir otra imagen. */
.og-grano {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .30; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* El filo que separa las secciones: dos hilos de luz y un rombo en medio.
   Los hilos se abren desde el centro cuando el separador entra en pantalla —
   es lo que convierte un corte de sección en una transición. */
.og-filo {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem; height: 1px; margin: 0;
}
.og-filo i {
  display: block; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(69,229,140,.5), rgba(255,255,255,.3));
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.og-filo i:last-child {
  background: linear-gradient(90deg, rgba(255,255,255,.3), rgba(69,229,140,.5), transparent);
  transform-origin: 0 50%;
}
.og-filo.seen i { transform: scaleX(1); }
/* El rombo: pequeño, quieto, y con un punto verde dentro. */
.og-filo span {
  flex: none; width: 9px; height: 9px;
  border: 1px solid rgba(69,229,140,.55);
  transform: rotate(45deg) scale(.4); opacity: 0;
  transition: transform .8s cubic-bezier(.2,.7,.3,1) .25s, opacity .8s ease .25s;
}
.og-filo.seen span { transform: rotate(45deg) scale(1); opacity: 1; }

.og-sec { position: relative; padding: var(--gap-xl) 1.25rem; }
.og-ancho { max-width: 1180px; margin: 0 auto; }
@media (min-width: 640px) { .og-sec { padding-left: 2rem; padding-right: 2rem; } }

/* ──────────────────────────── 4 · SUPERFICIES ──────────────────────────── */
/* Piedra pulida: negro casi puro, un filo claro arriba y sombra larga. */
.og .surface,
.og .surface-soft {
  background: linear-gradient(180deg, rgba(18,24,19,.92), rgba(7,10,8,.94));
  border: 1px solid var(--line);
  box-shadow: 0 30px 70px -40px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter: none;
}
.og .surface-soft { background: rgba(9, 13, 10, .82); }

/* El borde iluminado de theme.css: aquí es un filo verde arriba, quieto. */
.og .edge-lit::before,
.og .led-edge::after {
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
  animation: none; opacity: .55;
}
.og .glow-lit { box-shadow: 0 30px 80px -44px rgba(22,183,92,.45), 0 30px 70px -40px rgba(0,0,0,.95); }

.og .chip {
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-soft);
}
.og .chip-lit { border-color: var(--line-lit); color: var(--verde-luz); background: var(--verde-humo); }

.og .field {
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
}
.og .field:focus { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(22,183,92,.16); }

.og .pick {
  background: rgba(10, 14, 11, .78);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.og .pick:hover { border-color: rgba(69,229,140,.35); transform: none; background: rgba(14, 20, 15, .85); }
.og .pick[data-on="true"] {
  border-color: var(--verde);
  background: linear-gradient(180deg, rgba(22,183,92,.12), rgba(10,14,11,.9));
  box-shadow: inset 0 0 0 1px rgba(69,229,140,.25);
}
.og .pick[data-no="true"] { opacity: .42; }

/* La tarjeta mientras se conecta Mercado Pago: se ve, se entiende y no se
   puede elegir. Sin el letrero parecería una opción rota. */
.og .pick[data-pendiente="true"] { opacity: .55; cursor: default; }
.og .pick[data-pendiente="true"]:hover { border-color: var(--line); background: rgba(10, 14, 11, .78); }
.og .pick[data-pendiente="true"] .text-faint {
  color: var(--verde-luz);
  letter-spacing: .16em; text-transform: uppercase; font-size: .58rem;
}

.og .step-num {
  font-family: var(--f-titulo); font-weight: 400; font-size: 1.1rem;
  border-radius: 999px;
}

/* ───────────────────────────── 5 · LA BARRA ────────────────────────────── */
.og #nav { background: transparent; }
/* La clase la pone app.js al bajar de 40 px. */
.og #nav.nav-solido {
  background: rgba(5, 8, 6, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: none;
}
.og-marca { display: flex; align-items: center; gap: .65rem; }
.og-marca__logo { width: 42px; height: auto; }
.og-marca__txt {
  font-family: var(--f-titulo); font-weight: 400;
  font-size: 1.2rem; letter-spacing: .14em; text-transform: uppercase;
}
.og-marca__txt b { font-weight: 600; color: var(--verde-luz); }
.og-menu a {
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-soft); position: relative;
}
.og-menu a::after {
  content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 1px;
  background: var(--verde); transition: right .35s ease;
}
.og-menu a:hover { color: var(--text); }
.og-menu a:hover::after { right: 0; }
.og .navlink { letter-spacing: .18em; text-transform: uppercase; font-size: .8rem; }

/* ───────────────────────────── 6 · PORTADA ─────────────────────────────── */
.og-hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 7rem 1.5rem 4rem;
}

/* El marco fino que encierra la portada. Es el gesto más "caro" de la página:
   una línea de un píxel, separada de los bordes. */
.og-marco {
  position: absolute; inset: 5.5rem 1.1rem 2rem;
  border: 1px solid rgba(255,255,255,.12);
  pointer-events: none;
  opacity: 0;
  animation: ogAparece 1.2s ease .15s forwards;
}
/* Los dos filos verdes de los costados se abren desde el centro al cargar. */
.og-marco::before,
.og-marco::after {
  content: ''; position: absolute; width: 1px;
  background: linear-gradient(180deg, transparent, var(--verde), transparent);
  transform: scaleY(0);
  animation: ogAbreY 1.4s cubic-bezier(.2,.7,.3,1) .5s forwards;
}
.og-marco::before { left: -1px; top: 18%; bottom: 18%; }
.og-marco::after  { right: -1px; top: 18%; bottom: 18%; }

/* Las cuatro escuadras de las esquinas. Son el detalle que hace que el marco
   parezca puesto a mano y no un borde de CSS. */
.og-marco i {
  position: absolute; width: 16px; height: 16px;
  border: 0 solid var(--verde-luz);
  opacity: 0;
  animation: ogAparece .8s ease forwards;
}
.og-marco i:nth-child(1) { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; animation-delay: 1.1s; }
.og-marco i:nth-child(2) { top: -1px; right: -1px; border-top-width: 1px; border-right-width: 1px; animation-delay: 1.2s; }
.og-marco i:nth-child(3) { bottom: -1px; right: -1px; border-bottom-width: 1px; border-right-width: 1px; animation-delay: 1.3s; }
.og-marco i:nth-child(4) { bottom: -1px; left: -1px; border-bottom-width: 1px; border-left-width: 1px; animation-delay: 1.4s; }

.og-hero__marca { position: relative; margin-bottom: 1.6rem; }
.og-hero__logo {
  width: clamp(150px, 34vw, 230px); height: auto;
  /* El logo se materializa: entra desenfocado y un punto más grande, y se
     enfoca. Una vez, al cargar. */
  opacity: 0;
  animation: ogEnfoca 1.4s cubic-bezier(.2,.7,.3,1) .1s forwards;
}
/* El halo del logo: una sola mancha, que sube de intensidad al entrar y ahí
   se queda. No late: un resplandor que parpadea se ve barato y cansa. */
.og-hero__halo {
  position: absolute; left: 50%; top: 52%;
  width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.7);
  background: radial-gradient(circle, rgba(69,229,140,.20), transparent 62%);
  filter: blur(24px); pointer-events: none;
  opacity: 0;
  animation: ogHalo 1.8s cubic-bezier(.2,.7,.3,1) .35s forwards;
}

.og-titulo {
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: clamp(2.7rem, 11vw, 6.2rem);
  line-height: .98;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin: 0;
}
.og-titulo b { font-weight: 500; color: var(--verde-luz); font-style: italic; }

.og-lema {
  margin-top: 1.4rem;
  font-family: var(--f-titulo);
  font-style: italic;
  font-size: clamp(1.05rem, 3.6vw, 1.6rem);
  color: var(--hueso);
  letter-spacing: .01em;
}
.og-lema span { color: var(--verde-luz); }

.og-pleca {
  margin-top: 1.6rem;
  display: inline-flex; align-items: center; gap: .9rem;
  font-size: .62rem; letter-spacing: .34em; text-transform: uppercase;
  color: var(--text-soft);
}
.og-pleca i { display: block; width: 34px; height: 1px; background: rgba(255,255,255,.28); }

.og-hero__botones {
  margin-top: 2.4rem;
  display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center;
}

/* Las tres promesas bajo la portada. */
.og-promesas {
  margin-top: 3rem;
  display: grid; gap: .9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(100%, 640px);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-soft);
}
.og-promesas div { padding: .9rem .4rem; border-top: 1px solid var(--line); }
.og-promesas b { display: block; font-family: var(--f-titulo); font-size: 1.5rem; font-weight: 400; letter-spacing: 0; color: var(--hueso); text-transform: none; margin-bottom: .15rem; }

/* Cuenta atrás del día. Se queda, pero discreta. */
.og-reloj {
  margin-top: 2.2rem;
  display: inline-flex; flex-direction: column; align-items: center; gap: .3rem;
  padding: .9rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(5,8,6,.55);
}
.og-reloj__rot { font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--verde-luz); }
.og-reloj__num { font-family: var(--f-titulo); font-size: 1.7rem; font-weight: 400; font-variant-numeric: tabular-nums; }
.og-reloj__pie { font-size: .68rem; color: var(--text-faint); }

.og .scroll-cue { border-color: rgba(255,255,255,.22); }

/* ───────────────────────────── 7 · GALERÍA ─────────────────────────────── */
/* Mosaico de revista: una foto grande manda y tres la acompañan. En cuadrícula
   regular las siete fotos se leían como un catálogo de stock; con jerarquía se
   leen como el trabajo de alguien. */
.og-galeria {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
/* La grande manda en las dos columnas; la cuarta se tumba a lo ancho para que
   no quede ningún hueco. Con cuatro fotos iguales la rejilla se queda coja. */
.og-foto--grande,
.og-foto:nth-child(4) { grid-column: span 2; }
.og-foto:nth-child(4) img { aspect-ratio: 16 / 10; }
@media (min-width: 760px) {
  .og-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
  .og-foto--grande { grid-column: span 2; grid-row: span 2; }
  /* Con TRES fotos, las dos pequeñas se tumban a lo ancho junto a la grande;
     con CUATRO, van de dos en dos. Si no, la rejilla deja un hueco y se nota
     como una foto que falta. */
  .og-galeria--tres .og-foto:nth-child(n+2) { grid-column: span 2; }
  .og-galeria--tres .og-foto:nth-child(n+2) img { aspect-ratio: 16 / 9; }
  /* Con DOS fotos, mitad y mitad. */
  .og-galeria--dos .og-foto { grid-column: span 2; }
}

.og-foto {
  position: relative; margin: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 3px;
  background: #060806;
  box-shadow: 0 30px 60px -38px rgba(0,0,0,.95);
  /* La foto se descubre de abajo hacia arriba cuando entra en pantalla: es la
     prueba del trabajo, se merece que la mires. Una sola vez. */
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1s cubic-bezier(.77,0,.175,1) var(--d, 0s),
              border-color .4s ease, box-shadow .4s ease;
}
.reveal.seen .og-foto,
.og-galeria.og-vista .og-foto { clip-path: inset(0 0 0 0); }
.og-foto:nth-child(2) { --d: .09s; }
.og-foto:nth-child(3) { --d: .18s; }
.og-foto:nth-child(4) { --d: .27s; }
.og-foto:hover { border-color: rgba(69,229,140,.45); box-shadow: 0 30px 60px -34px rgba(22,183,92,.5); }

/* El botón es toda la foto: tocarla la abre en grande. */
.og-foto__ver {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: zoom-in;
  position: relative; overflow: hidden;
}
.og-foto img {
  display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: saturate(.92) contrast(1.04);
  /* Entra un punto más grande y se asienta con la cortina: así el descubrir
     no se siente plano. */
  transform: scale(1.07);
  transition: transform 1.2s cubic-bezier(.2,.7,.3,1) var(--d, 0s), filter .5s ease;
}
.reveal.seen .og-foto img,
.og-galeria.og-vista .og-foto img { transform: scale(1); }
.og-foto__ver:hover img { transform: scale(1.05); filter: saturate(1) contrast(1.06); }
.og-foto--grande img { aspect-ratio: 16 / 11; }
@media (min-width: 760px) { .og-foto--grande img { aspect-ratio: auto; } }

/* La lupa: aparece al pasar por encima, no antes. */
.og-foto__lupa {
  position: absolute; top: .7rem; right: .7rem;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25);
  background: rgba(5,8,6,.6);
  opacity: 0; transform: scale(.85);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.og-foto__lupa::before,
.og-foto__lupa::after {
  content: ''; position: absolute; background: var(--hueso);
}
.og-foto__lupa::before { left: 50%; top: 8px; bottom: 8px; width: 1px; transform: translateX(-50%); }
.og-foto__lupa::after  { top: 50%; left: 8px; right: 8px; height: 1px; transform: translateY(-50%); }
.og-foto__ver:hover .og-foto__lupa,
.og-foto__ver:focus-visible .og-foto__lupa { opacity: 1; transform: scale(1); }

.og-foto figcaption {
  position: absolute; inset: auto 0 0 0; pointer-events: none;
  padding: 2rem .85rem .75rem;
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: var(--hueso);
  background: linear-gradient(180deg, transparent, rgba(3,5,4,.9));
  transform: translateY(6px); opacity: .85;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease;
}
.og-foto:hover figcaption { transform: none; opacity: 1; }

/* Las dos familias de trabajo, en pestañas de texto. */
.og-filtros { display: flex; justify-content: center; gap: 1.8rem; margin-bottom: var(--gap); }
.og-filtro {
  background: none; border: 0; padding: .3rem 0;
  font-size: .64rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--text-faint); cursor: pointer; position: relative;
  transition: color .35s ease;
}
.og-filtro:hover { color: var(--text-soft); }
.og-filtro[aria-selected="true"] { color: var(--hueso); }
/* El subrayado se desliza en vez de saltar. */
.og-filtro::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1px;
  background: var(--verde);
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.2,.7,.3,1);
}
.og-filtro[aria-selected="true"]::after { transform: scaleX(1); }

/* ─────────────────── EL VISOR (una foto en grande) ─────────────────────── */
.og-visor {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 1.2rem;
  background: rgba(3, 5, 4, .95);
  opacity: 1;
  transition: opacity .28s ease;
}
.og-visor.is-hidden { opacity: 0; pointer-events: none; visibility: hidden; }
.og-visor__caja { margin: 0; max-width: min(92vw, 760px); text-align: center; }
.og-visor__caja img {
  display: block; width: 100%; height: auto; max-height: 78vh; object-fit: contain;
  border: 1px solid rgba(255,255,255,.12); border-radius: 3px;
  transform: scale(1); opacity: 1;
  transition: transform .32s cubic-bezier(.2,.7,.3,1), opacity .28s ease;
}
.og-visor.is-hidden .og-visor__caja img { transform: scale(.96); opacity: 0; }
.og-visor__caja figcaption:empty { display: none; }
.og-visor__caja figcaption {
  margin-top: 1rem;
  font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft);
}
.og-visor__cerrar {
  position: absolute; top: 1rem; right: 1.2rem;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: rgba(255,255,255,.04);
  color: var(--text); font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: border-color .3s ease, color .3s ease;
}
.og-visor__cerrar:hover { border-color: var(--verde); color: var(--verde-luz); }

/* ───────────────────────────── 8 · EQUIPO ──────────────────────────────── */
.og-equipo {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 900px; margin: 0 auto;
}
.og-barbero {
  position: relative;
  padding: 2.4rem 1.8rem 2rem;
  text-align: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(16,22,17,.92), rgba(6,9,7,.95));
  box-shadow: 0 40px 90px -55px rgba(0,0,0,1);
}
.og-barbero::before {
  content: ''; position: absolute; inset-inline: 22%; top: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--verde), transparent);
}
.og-barbero__aro {
  width: 128px; height: 128px; margin: 0 auto 1.4rem;
  border-radius: 50%; padding: 4px;
  background: conic-gradient(from 210deg, rgba(69,229,140,.65), rgba(255,255,255,.18), rgba(69,229,140,.65));
}
.og-barbero__aro img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #060806; }
.og-barbero__siglas {
  display: grid; place-items: center; width: 100%; height: 100%;
  border-radius: 50%; border: 3px solid #060806; background: #0b120d;
  font-family: var(--f-titulo); font-size: 2.6rem; color: var(--verde-luz); letter-spacing: .04em;
}
.og-barbero__rol { font-size: .6rem; letter-spacing: .3em; text-transform: uppercase; color: var(--verde-luz); }
.og-barbero__nombre { font-family: var(--f-titulo); font-size: 1.9rem; font-weight: 400; margin: .35rem 0 .7rem; }
.og-barbero__bio { font-size: .88rem; line-height: 1.7; color: var(--text-soft); }

/* La carta de cada quien, dentro de su tarjeta. */
.og-carta { margin: 1.4rem 0 1.2rem; text-align: left; }
.og-carta li {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .5rem 0;
  border-bottom: 1px dashed rgba(255,255,255,.08);
  font-size: .86rem;
}
.og-carta li:last-child { border-bottom: 0; }
.og-carta span { flex: 1; color: var(--text); }
.og-carta b { font-family: var(--f-titulo); font-size: 1.15rem; font-weight: 500; color: var(--verde-luz); }
.og-carta__tit {
  display: block; margin-bottom: .4rem;
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-faint);
}
.og-barbero__cuando {
  display: block; margin-bottom: 1.2rem;
  font-size: .74rem; color: var(--text-soft);
}
.og-barbero__cuando b { color: var(--hueso); font-weight: 500; }

/* ──────────────────────────── 9 · FILOSOFÍA ────────────────────────────── */
.og-lema-grande {
  position: relative;
  padding: var(--gap-xl) 1.5rem;
  text-align: center;
}
.og-lema-grande blockquote {
  max-width: 44rem; margin: 0 auto;
  font-family: var(--f-titulo);
  font-weight: 300; font-style: italic;
  font-size: clamp(1.6rem, 5.4vw, 3rem);
  line-height: 1.25;
  color: var(--hueso);
}
.og-lema-grande blockquote span { color: var(--verde-luz); }
.og-lema-grande cite {
  display: block; margin-top: 1.6rem;
  font-style: normal; font-size: .6rem; letter-spacing: .34em;
  text-transform: uppercase; color: var(--text-faint);
}

/* ──────────────────────── 10 · RESERVA Y PASOS ─────────────────────────── */
.og-reglas {
  display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: var(--gap-lg);
}
.og-reglas li {
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(8, 12, 9, .7);
}
.og-reglas b {
  display: block; margin-bottom: .2rem;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--verde-luz);
}
.og-reglas span { font-size: .82rem; color: var(--text-soft); line-height: 1.6; }

/* Tarjeta de servicio */
.og-svc__fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.og-svc__txt { min-width: 0; }
.og-svc__nombre {
  font-family: var(--f-titulo); font-size: 1.3rem; font-weight: 400; letter-spacing: 0;
}
.og-svc__quien {
  font-family: var(--f-texto); font-size: .6rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--verde-luz);
  margin-left: .5rem;
}
.og-svc__det { margin-top: .3rem; font-size: .8rem; line-height: 1.6; color: var(--text-soft); }
.og-svc__min { margin-top: .35rem; font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.og-svc__precios { margin-top: .4rem; display: flex; flex-wrap: wrap; gap: .8rem; font-size: .76rem; color: var(--text-soft); }
.og-svc__precios b { color: var(--hueso); font-weight: 500; }
.og-svc__precio {
  flex: none;
  font-family: var(--f-titulo); font-size: 1.6rem; font-weight: 500; line-height: 1;
  color: var(--verde-luz);
}
.og-extras-tit {
  display: block; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-faint);
}
.og-extras-tit b { color: var(--verde-luz); font-weight: 500; }
.og-cambiar {
  align-self: flex-start; background: none; border: 0; padding: .4rem 0;
  font-size: .64rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--text-soft); cursor: pointer; border-bottom: 1px solid var(--line-lit);
}
.og-cambiar:hover { color: var(--verde-luz); }

/* Tarjeta de barbero dentro del paso 1 */
.og-barb__fila { display: flex; align-items: center; gap: .95rem; }
.og-barb__foto { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; border: 1px solid rgba(255,255,255,.14); flex: none; }
.og-barb__inicial {
  display: grid; place-items: center;
  font-family: var(--f-titulo); font-size: 1.5rem; color: var(--verde-luz);
  background: rgba(22,183,92,.1);
}
.og-barb__txt { min-width: 0; flex: 1; }
.og-barb__nombre { font-family: var(--f-titulo); font-size: 1.3rem; font-weight: 400; }
.og-barb__rol { font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-top: .1rem; }
.og-barb__precio { font-family: var(--f-titulo); font-size: 1.3rem; color: var(--verde-luz); flex: none; }
.og-barb__desde { display: block; font-family: var(--f-texto); font-size: .55rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }

/* Equipo OG: al elegirlo se despliega quién del equipo te atiende. */
.og-miembros { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .2rem 0 .3rem; }
.og-miembros__tit { font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-soft); margin-right: .3rem; }
.og-miembro {
  font-family: var(--f-titulo); font-size: 1.15rem; color: var(--hueso);
  padding: .45rem 1.2rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.16);
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}
.og-miembro:hover { border-color: rgba(69,229,140,.55); }
.og-miembro[aria-pressed="true"] { background: var(--verde-luz); border-color: var(--verde-luz); color: #04160C; }

.og .slot[data-on="true"], .og .cal-day[data-on="true"] { color: #04160C; }

/* ─────────────────────────── 11 · OPINIONES ────────────────────────────── */
.og-google { margin-top: 1.4rem; display: flex; align-items: center; justify-content: center; gap: .7rem; }
.og-google__num { font-family: var(--f-titulo); font-size: 2rem; font-weight: 400; }
.og-google__estrellas { color: var(--verde-luz); letter-spacing: .1em; }
.og-google__txt { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }

.og-resenas {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.og-resena {
  position: relative; margin: 0; padding: 2rem 1.5rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(8, 12, 9, .78);
}
/* La comilla grande, en verde apagado: detalle de revista. */
.og-resena::before {
  content: '“';
  position: absolute; top: .1rem; left: 1.1rem;
  font-family: var(--f-titulo); font-size: 4rem; line-height: 1;
  color: rgba(69,229,140,.22);
}
.og-resena__estrellas { color: var(--verde-luz); font-size: .8rem; letter-spacing: .12em; }
.og-resena blockquote { margin: .7rem 0 1rem; font-size: .9rem; line-height: 1.75; color: var(--text); }
.og-resena figcaption { font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }
.og-resena-nota { margin-top: .8rem; font-size: .76rem; color: var(--text-faint); }

/* ─────────────────────────── 12 · VISÍTANOS ────────────────────────────── */
.og-horario { display: flex; flex-direction: column; gap: .55rem; }
.og-horario li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .85rem; }
.og-horario span { color: var(--text-soft); }
.og-horario b { font-weight: 500; color: var(--hueso); }
.og-horario .is-cerrado b { color: var(--text-faint); }
.og-abierto {
  margin-top: .9rem; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--verde-luz);
}
.og-abierto::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--verde-luz); box-shadow: 0 0 10px var(--verde-luz); }
.og-abierto[data-abierto="false"] { color: var(--text-faint); }
.og-abierto[data-abierto="false"]::before { background: var(--text-faint); box-shadow: none; }

.og-contacto { display: flex; flex-direction: column; gap: .5rem; font-size: .85rem; }
.og-contacto a { color: var(--text-soft); }
.og-contacto a:hover { color: var(--verde-luz); }
.og-mapa { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); min-height: 340px; }
.og-mapa iframe { width: 100%; height: 100%; min-height: 340px; filter: grayscale(1) invert(.92) hue-rotate(80deg) contrast(.9); }

/* ───────────────────────────── 13 · PIE ────────────────────────────────── */
.og-pie { position: relative; padding: var(--gap-xl) 0 2rem; border-top: 1px solid var(--line); background: rgba(3,5,4,.85); }
.og-pie__alto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.og-pie__marca { display: flex; align-items: center; gap: 1rem; }
.og-pie__marca img { width: 78px; height: auto; }
.og-pie__nombre { font-family: var(--f-titulo); font-size: 1.4rem; letter-spacing: .1em; text-transform: uppercase; }
.og-pie__nombre b { color: var(--verde-luz); font-weight: 500; }
.og-pie__lema { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-top: .2rem; }
.og-redes { display: flex; gap: .6rem; }
.og-redes a {
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--text-soft);
}
.og-redes a:hover { border-color: var(--verde); color: var(--verde-luz); }
.og-redes svg { width: 18px; height: 18px; }
.og-pie__bajo {
  margin-top: var(--gap-lg); padding-top: 1.4rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
  font-size: .7rem; color: var(--text-faint);
}
.og-pie__acceso { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint); background: none; border: 0; cursor: pointer; }
.og-pie__acceso:hover { color: var(--verde-luz); }

/* WhatsApp flotante: negro con filo verde, no el verde de WhatsApp. */
.og-wa {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 40;
  width: 54px; height: 54px; display: grid; place-items: center;
  border-radius: 50%; color: var(--verde-luz);
  background: rgba(5,8,6,.92); border: 1px solid var(--line-lit);
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
}
.og-wa:hover { border-color: var(--verde); box-shadow: 0 0 0 4px rgba(22,183,92,.12), 0 18px 40px -18px rgba(0,0,0,.9); }
.og-wa svg { width: 25px; height: 25px; }

/* ───────────────────────────── 14 · PANEL ──────────────────────────────── */
/* El panel del barbero vive dentro de la misma página (#adminModal), así que
   hereda todo esto. Aquí sólo está lo suyo: las comisiones, la rejilla del
   horario y los accesos del equipo. */
.og .og-adm-logo { width: 40px; height: auto; }

/* El panel tapa la página entera: negro liso y sin desenfoque. Con la del
   cliente translúcida por detrás se leía peor y costaba cuadros. */
.og #adminModal { background: var(--carbon); backdrop-filter: none; }
.og #adminModal .bg-ink\/90 { background: var(--carbon); backdrop-filter: none; }

/* Selector de periodo (comisiones) y de persona (horario). */
.og-com-periodos { display: flex; gap: .4rem; overflow-x: auto; padding: 2px; margin: 0 -2px .2rem; }
.og-com-periodo {
  flex: none; padding: .45rem .9rem; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--text-soft); cursor: pointer;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.og-com-periodo:hover { color: var(--text); border-color: var(--line-lit); }
.og-com-periodo[data-on="true"] { color: #04160C; background: var(--verde); border-color: var(--verde); }

.og-com-rango { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); }
.og-com-error { color: var(--danger); }

.og-com-cifras { display: grid; gap: .7rem; }
@media (min-width: 700px) { .og-com-cifras { grid-template-columns: repeat(3, 1fr); } }
.og-com-cifra {
  padding: 1rem 1.2rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: rgba(9, 13, 10, .8);
}
.og-com-cifra__rot { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--text-faint); }
.og-com-cifra__imp { font-family: var(--f-titulo); font-size: 2.1rem; font-weight: 400; line-height: 1.15; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.og-com-cifra.is-verde .og-com-cifra__imp { color: var(--verde-luz); }
.og-com-cifra.is-naranja .og-com-cifra__imp { color: var(--warn); }
.og-com-cifra__pie { font-size: .75rem; color: var(--text-soft); margin-top: .2rem; }
.og-com-cifra__pie.is-warn, .og-com-fila__linea.is-warn { color: var(--warn); }

.og-com-lista { display: flex; flex-direction: column; gap: .7rem; }
.og-com-fila { padding: 1rem 1.1rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(9, 13, 10, .8); }
.og-com-fila__alto { display: flex; align-items: center; gap: .8rem; }
.og-com-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; object-fit: cover;
  border: 1px solid var(--line-lit); background: rgba(22,183,92,.1);
  font-family: var(--f-titulo); font-size: 1.05rem; color: var(--verde-luz);
}
.og-com-fila__quien { min-width: 0; flex: 1; }
.og-com-fila__nombre { font-family: var(--f-titulo); font-size: 1.2rem; font-weight: 400; }
.og-com-fila__sub { font-size: .72rem; color: var(--text-faint); }
.og-com-fila__pago { text-align: right; }
.og-com-fila__pago span { display: block; font-size: .58rem; letter-spacing: .2em; text-transform: uppercase; color: var(--text-faint); }
.og-com-fila__pago strong { font-family: var(--f-titulo); font-weight: 500; font-size: 1.7rem; color: var(--verde-luz); font-variant-numeric: tabular-nums; }
.og-com-barra { margin: .75rem 0 .5rem; height: 5px; border-radius: 99px; background: rgba(255,255,255,.06); overflow: hidden; }
.og-com-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--verde-hondo), var(--verde-luz)); }
.og-com-fila__linea { font-size: .78rem; color: var(--text-soft); line-height: 1.5; }
.og-com-fila__linea b { color: var(--hueso); }
.og-com-fila__linea.is-casa { color: var(--text-faint); }
.og-com-nota { font-size: .74rem; color: var(--text-faint); line-height: 1.5; }

/* La rejilla del horario: una tecla por hora. En el teléfono caben cuatro por
   fila, que es lo que hace que se pueda marcar con el pulgar. */
.og-horas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
@media (min-width: 420px) { .og-horas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.og-hora {
  padding: .45rem .2rem; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(255,255,255,.03);
  color: var(--text-soft); cursor: pointer;
  font-size: .72rem; font-variant-numeric: tabular-nums;
}
.og-hora:hover:not(:disabled) { border-color: var(--line-lit); color: var(--text); }
.og-hora[data-on="true"] { background: var(--verde); border-color: var(--verde); color: #04160C; }
.og-hora:disabled { cursor: default; opacity: .75; }

/* ─────────────────────────── 15 · MOVIMIENTO ───────────────────────────── */
/*  CÓMO SE MUEVE ESTA PÁGINA, Y POR QUÉ
 *  ------------------------------------
 *  El 17/09/2026 el dueño pidió "más animaciones… elegante y distinto, pero no
 *  tan simple". Las reglas que se siguieron para que eso no acabe en una feria:
 *
 *   1. LO QUE SE MUEVE, SE MUEVE UNA VEZ. Nada late, parpadea ni gira solo
 *      llamando la atención: eso envejece mal y cansa al tercer scroll. Lo
 *      único que se repite es el aro de luz de la foto del barbero, y sólo
 *      mientras tienes el dedo o el ratón encima.
 *   2. SÓLO transform, opacity, clip-path y filter. Nada de width/height/top,
 *      que obligan a recalcular la página entera. El muro del fondo es una
 *      capa fija: con animaciones caras encima, el scroll del teléfono se
 *      traba (ya pasó una vez en este mismo sitio).
 *   3. Curva propia, cubic-bezier(.2,.7,.3,1): arranca rápido y se posa. Las
 *      curvas de fábrica (ease, ease-in-out) se notan flojas.
 *   4. Lo que entra, entra desenfocado (blur 6px → 0). Un elemento que se
 *      ENFOCA se siente físico; uno que sólo aparece, no.
 *   5. El formulario de la cita NO se adorna. Ahí la gente viene a hacer algo
 *      y cada milisegundo de espectáculo estorba: sólo el marcador del paso y
 *      el hilo que va marcando por dónde vas.
 *   6. Quien tenga el sistema en "reducir movimiento" no ve nada de esto, y la
 *      página se lee igual de bien.
 */

/* --- Entrada al bajar (la base de todo) --------------------------------- */
/* La clase `seen` la pone fx.js al asomar el elemento; el escalonado entre
   hermanos (--delay), también. */
.og .reveal {
  opacity: 0;
  transform: translateY(16px);
  filter: blur(6px);
  transition: opacity .75s ease var(--delay, 0s),
              transform .75s cubic-bezier(.2,.7,.3,1) var(--delay, 0s),
              filter .75s ease var(--delay, 0s);
}
.og .reveal.seen { opacity: 1; transform: none; filter: blur(0); }

/* --- Entrada al cargar (la portada) ------------------------------------- */
.og-entra { opacity: 0; animation: ogEntra .9s cubic-bezier(.2,.7,.3,1) var(--d, 0s) both; }
@keyframes ogEntra {
  from { opacity: 0; transform: translateY(18px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* El título, palabra por palabra: 130 ms entre una y otra. */
.og-pal { display: inline-block; opacity: 0; animation: ogPalabra 1s cubic-bezier(.2,.7,.3,1) var(--d, 0s) both; }
@keyframes ogPalabra {
  from { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes ogAparece { to { opacity: 1; } }
@keyframes ogAbreY   { to { transform: scaleY(1); } }
@keyframes ogLinea   { to { transform: scaleX(1); } }
@keyframes ogEnfoca {
  from { opacity: 0; transform: scale(1.06); filter: blur(14px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes ogHalo { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* El subrayado del antetítulo de la portada, que no tiene `seen` que lo
   dispare. */
.og-eyebrow.og-entra::after { animation: ogLinea .9s cubic-bezier(.2,.7,.3,1) calc(var(--d, 0s) + .3s) both; }

/* --- Botones ------------------------------------------------------------ */
/* Responder al tacto: hundirse un punto al presionar. 90 ms, porque esto se
   toca muchas veces y una animación lenta aquí se siente pastosa. */
.og .btn {
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background-color .3s ease,
              border-color .3s ease, box-shadow .35s ease, color .3s ease;
}
.og .btn:active { transform: translateY(0) scale(.98); transition-duration: .09s; }

/* --- Tarjetas que se levantan ------------------------------------------- */
.og-barbero, .og-resena, .og-reglas li {
  transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .5s ease, box-shadow .5s ease;
}
.og-barbero:hover {
  transform: translateY(-5px);
  border-color: rgba(69,229,140,.28);
  box-shadow: 0 50px 100px -55px rgba(0,0,0,1), 0 0 60px -34px rgba(22,183,92,.55);
}
.og-resena:hover { border-color: rgba(69,229,140,.22); }

/* El aro de luz de la foto sólo gira mientras pasas por encima. Encendido
   siempre sería una de esas luces que laten. */
.og-barbero__aro { position: relative; }
.og-barbero__aro::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(69,229,140,.85) 82%, transparent 100%);
  opacity: 0;
  transition: opacity .45s ease;
  animation: ogGira 5.5s linear infinite;
  animation-play-state: paused;
}
.og-barbero:hover .og-barbero__aro::before { opacity: 1; animation-play-state: running; }
@keyframes ogGira { to { transform: rotate(360deg); } }

/* Las filas de la carta entran escalonadas con su tarjeta. */
.og-carta li {
  opacity: 0; transform: translateY(8px);
  transition: opacity .5s ease var(--d, 0s), transform .5s cubic-bezier(.2,.7,.3,1) var(--d, 0s);
}
.reveal.seen .og-carta li { opacity: 1; transform: none; }
.og-carta li:nth-child(2) { --d: .06s; }
.og-carta li:nth-child(3) { --d: .12s; }
.og-carta li:nth-child(4) { --d: .18s; }

/* --- Los pasos de la cita (aquí manda acabar rápido, no el espectáculo) -- */
.og .step-num {
  transition: background-color .25s ease, border-color .25s ease, color .25s ease,
              transform .25s cubic-bezier(.2,.7,.3,1);
}
.og .step[data-done="true"] .step-num { transform: scale(1.06); }
/* El hilo que une los pasos se llena conforme avanzas: dice por dónde vas sin
   escribirlo. Sólo en pantalla ancha, que es donde hay sitio. */
@media (min-width: 640px) {
  .og .step { position: relative; }
  .og .step::before {
    content: ''; position: absolute; left: 17px; top: 42px; bottom: -2.4rem; width: 1px;
    background: linear-gradient(180deg, var(--verde), rgba(22,183,92,.06));
    transform: scaleY(0); transform-origin: 50% 0;
    transition: transform .6s cubic-bezier(.2,.7,.3,1);
  }
  .og .step:last-child::before { display: none; }
  .og .step[data-done="true"]::before { transform: scaleY(1); }
}
/* Elegir algo: la tarjeta responde al instante. */
.og .pick {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), border-color .25s ease,
              background-color .25s ease, box-shadow .25s ease;
}
.og .pick:active { transform: scale(.995); }
.og .slot, .og .cal-day { transition: transform .16s cubic-bezier(.2,.7,.3,1), background-color .2s ease, color .2s ease; }
.og .slot:active:not(:disabled), .og .cal-day:active:not(:disabled) { transform: scale(.95); }

/* --- El flotante de WhatsApp -------------------------------------------- */
.og-wa { transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease; }
.og-wa:hover { transform: translateY(-3px); }
.og-wa:active { transform: scale(.94); }

/* --- Reducir movimiento: se apaga todo y la página se lee igual --------- */
@media (prefers-reduced-motion: reduce) {
  .og *, .og *::before, .og *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .og .reveal, .og-entra, .og-pal, .og-marco, .og-marco i, .og-hero__logo, .og-hero__halo {
    opacity: 1 !important; transform: none !important; filter: none !important;
  }
  .og-foto { clip-path: none !important; }
  .og-foto img { transform: none !important; }
  .og-filo i { transform: scaleX(1) !important; }
  .og-filo span { opacity: 1 !important; transform: rotate(45deg) !important; }
  .og-carta li { opacity: 1 !important; transform: none !important; }
}

/* ───────────────────────────── 16 · MÓVIL ──────────────────────────────── */
@media (max-width: 640px) {
  :root { --gap-xl: 3.6rem; --gap-lg: 2.2rem; }
  /* En el teléfono, la barra de arriba es el logo, "Agendar" y el menú. El
     nombre escrito se partía en dos renglones y empujaba al botón. */
  .og-marca__txt { display: none; }
  .og-marco { inset: 4.8rem .7rem 1.4rem; }
  .og-pleca { font-size: .56rem; letter-spacing: .26em; gap: .6rem; }
  .og-pleca i { width: 22px; }
  .og-promesas { grid-template-columns: 1fr; width: 100%; max-width: 320px; }
  .og-promesas div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .og-promesas b { margin-bottom: 0; }
  .og-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .og-foto--alta { grid-row: span 1; }
  .og-svc__precio { font-size: 1.35rem; }
}