/* ============================================================
   Giant Barber Studio — Dos tijeras en los laterales
   Fondo madera marrón · Contenido centrado · scrub suave
   ============================================================ */

/* ── Tijeras izquierda ──────────────────────────────────── */
#tijeras-izq,
#tijeras-der {
  position: fixed;
  top: 0;
  left: 0;
  width: fit-content;
  z-index: 200;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  will-change: transform, opacity;
}

#tijeras-canvas-izq,
#tijeras-canvas-der {
  display: block;
  background: transparent;
  /* Los frames son tijeras negras sobre alpha transparente: no necesitan blend.
     Antes había `mix-blend-mode: multiply`, pensado para frames con fondo blanco;
     con frames ya transparentes, multiply mezcla el negro con el marrón del hero
     y las tijeras quedan invisibles en desktop. */
  mix-blend-mode: normal;
}

/* ── Zona scroll: secciones directas ────────────────────── */
.video-scroll-zona {
  display: block;
  position: relative;
  width: 100%;
}

/* ── SECCIÓN 1 — HERO: fondo madera marrón ──────────────── */
.video-scroll-zona .hero {
  min-height: 100vh;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; /* centra horizontalmente el contenedor */
  background-color: #3e2723 !important;
  background-image: linear-gradient(135deg, #1e1008 0%, #3e2723 55%, #2a160c 100%) !important;
  overflow: hidden !important;
}

/* Sin overlays de foto */
.video-scroll-zona .hero::before,
.video-scroll-zona .hero::after { display: none !important; }

/* Contenedor: ancho automático para que el centrado funcione */
.video-scroll-zona .hero-contenedor {
  position: relative;
  z-index: 500;   /* encima de tijeras (200) en todos los dispositivos */
  width: auto !important;
  /* El contenido se estrecha dinámicamente según el tamaño de las tijeras */
  max-width: calc(100% - (var(--tijeras-size, 200px) * 2) - 4rem) !important;
}

/* Dos columnas: texto izq + imagen der */
.video-scroll-zona .hero-contenedor--duo {
  display: grid !important;
  grid-template-columns: minmax(0, 34rem) minmax(0, 20rem) !important;
  align-items: center !important;
  justify-content: center !important;
  column-gap: clamp(2rem, 4vw, 3rem) !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Imagen del barbero: columna derecha */
.video-scroll-zona .hero-visual {
  display: block !important;
  width: 100% !important;
}

.video-scroll-zona .hero-visual__marco {
  max-height: min(28rem, 60vh) !important;
}

/* ── Colores sobre fondo madera oscuro ──────────────────── */
.video-scroll-zona .hero-titulo {
  color: #faf8f4;
  text-shadow: 0 2px 16px rgba(0,0,0,0.35);
}
.video-scroll-zona .hero-titulo__linea--alt { color: rgba(250,248,244,0.45); }
.video-scroll-zona .hero-lead               { color: rgba(250,248,244,0.80); }
.video-scroll-zona .hero-lead__bar          { background: rgba(250,248,244,0.35); }
.video-scroll-zona .hero-descripcion        { color: rgba(250,248,244,0.55); }
.video-scroll-zona .hero-contenido--magazine { border-left-color: rgba(250,248,244,0.18); }

.video-scroll-zona .hero-chip {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
  color: rgba(250,248,244,0.90);
}
.video-scroll-zona .hero-chip--ghost {
  background: transparent;
  color: rgba(255,255,255,0.48);
  border-color: rgba(255,255,255,0.12);
}

/* Botones oscuros (z-index: 2 ya del .hero-contenedor) */
.video-scroll-zona .boton-cta-primario {
  background: #f5f3f0;
  color: #1a1816;
  box-shadow: 0 4px 20px rgba(0,0,0,0.32);
  position: relative;
  z-index: 300; /* encima de las tijeras */
}
.video-scroll-zona .boton-cta-primario:hover {
  background: #fff;
  box-shadow: 0 10px 32px rgba(0,0,0,0.42);
}
.video-scroll-zona .boton-cta-primario svg { color: #128c7e; }

.video-scroll-zona .boton-cta-secundario {
  color: rgba(255,255,255,0.88);
  border-color: rgba(255,255,255,0.32);
  position: relative;
  z-index: 300;
}
.video-scroll-zona .boton-cta-secundario:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.52);
}
.video-scroll-zona .boton-cta-secundario--resenas {
  color: rgba(245,230,211,0.90);
  border-color: rgba(245,230,211,0.48);
  position: relative;
  z-index: 300;
}

/* ── SECCIÓN 2 — diseño original ─────────────────────────── */
.video-scroll-zona .servicios {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}

/* ── EFECTO DE CORTE ──────────────────────────────────────── */
.corte-linea {
  position: fixed;
  top: 50%;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(245,230,211,0.75) 20%,
    rgba(245,230,211,0.75) 80%,
    transparent 100%
  );
  transform: translateY(-50%);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
}

.corte-cortinas {
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  visibility: hidden;
}

/* Superior coincide con el fondo marrón del hero */
.corte-cortinas__superior {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50.5%;
  background: #2a160c;
  transform: translateY(0);
  will-change: transform;
}

/* Inferior coincide con el fondo crema de servicios */
.corte-cortinas__inferior {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 50.5%;
  background: #faf7f3;
  transform: translateY(0);
  will-change: transform;
}

/* ── TABLET ≤ 900px ──────────────────────────────────────── */
@media (max-width: 900px) {
  .video-scroll-zona .hero-contenedor--duo {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 38rem !important;
    padding-inline: clamp(1rem, 4vw, 2rem) !important;
  }
}

/* ── MÓVIL ≤ 768px ───────────────────────────────────────── */
@media (max-width: 768px) {
  /* z-index alto para que sean visibles, pero el contenedor hero
     tiene z-index:2 y los botones z-index:300 dentro de él,
     así que el contenido siempre queda encima de las tijeras */
  #tijeras-izq, #tijeras-der { z-index: 200; opacity: 0.85; }
  /* mix-blend-mode puede fallar en iOS Safari con fixed+canvas */
  #tijeras-canvas-izq, #tijeras-canvas-der { mix-blend-mode: normal; }
  .corte-cortinas, .corte-linea { display: none; }

  .video-scroll-zona .hero { min-height: 100svh; }

  /* Sección 1 muy estrecha: 140px libres a cada lado */
  .video-scroll-zona .hero-contenedor {
    width: calc(100% - 280px) !important;
    max-width: calc(100% - 280px) !important;
  }

  /* Sección 2 (servicios): un poco estrecho, tijeras pasan por encima */
  .video-scroll-zona .servicios .contenedor {
    padding-inline: 50px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Header "Servicios premium" visible obligatoriamente */
  .video-scroll-zona .servicios .servicios-header {
    display: block !important;
  }

  /* El grid interno ocupa el 100% del contenedor ya recortado */
  .video-scroll-zona .hero-contenedor--duo {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0 !important;
  }

  /* Ocultar imagen del barbero en móvil para no estrechar el contenido */
  .video-scroll-zona .hero-visual { display: none !important; }

  .video-scroll-zona .hero-contenido--magazine {
    text-align: center !important;
    border-left: none !important;
    border-top: none !important;
    padding-left: 0 !important;
    padding-top: 1rem;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Todos los elementos del hero centrados */
  .video-scroll-zona .hero-titulo,
  .video-scroll-zona .hero-lead,
  .video-scroll-zona .hero-descripcion,
  .video-scroll-zona .hero-meta {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline: auto !important;
    width: 100% !important;
  }

  /* Botones: columna, ancho completo del contenedor estrecho */
  .video-scroll-zona .hero-botones {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  .video-scroll-zona .hero-botones .boton-cta-primario,
  .video-scroll-zona .hero-botones .boton-cta-secundario {
    width: 50% !important;
    justify-content: center !important;
    padding-inline: 0.5rem !important;
  }
}

/* ── Prefers reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #tijeras-izq, #tijeras-der { display: none; }
  .corte-cortinas, .corte-linea { display: none; }
}