/* ============================================================
   Barbería Zona Sur — capa moderna (responsive + flexbox + CTA)
   Se carga DESPUÉS del CSS de Divi para poder sobreescribirlo.
   ============================================================ */

/* ---- 1. Medios fluidos: ninguna imagen desborda su contenedor ---- */
img, svg, video, iframe, canvas {
  max-width: 100%;
  height: auto;
}
picture { display: block; }
picture > img { display: block; width: 100%; height: auto; }

/* Las imágenes con caja de relación fija (galería, blurb) se recortan
   en vez de deformarse. */
.et_pb_blurb img,
.et_pb_post img,
.et_post_gallery img,
.et_pb_slider img {
  object-fit: cover;
}

/* ---- 2. Flexbox: los hijos pueden encogerse (evita overflow-x) ---- */
.et_pb_column,
.et_pb_module,
.et_pb_row_inner,
.et_pb_blurb,
.et_pb_blurb_container,
.et_pb_text,
.et_pb_code_inner {
  min-width: 0;
}
.et_pb_section, .et_pb_row, .et_pb_row_inner { max-width: 100%; }

html, body { overflow-x: hidden; }

/* ---- 3. Apilado real en móvil: las columnas pasan a bloque ---- */
@media (max-width: 767px) {
  .et_pb_column,
  .et_pb_column_1_2, .et_pb_column_1_3, .et_pb_column_2_3,
  .et_pb_column_1_4, .et_pb_column_3_4, .et_pb_column_1_5,
  .et_pb_column_2_5, .et_pb_column_3_5, .et_pb_column_1_6 {
    width: 100% !important;
    margin-right: 0 !important;
    float: none !important;
    clear: both !important;
  }
  .et_pb_row { padding-left: 16px !important; padding-right: 16px !important; }
}

/* Galería: rejilla fluida en vez de floats fijos */
.et_post_gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 14px;
}
.et_post_gallery img { width: 100%; aspect-ratio: 4 / 3; }

/* ============================================================
   BANNER CTA — RESERVAR EN BOOKSY (negro + calavera con barba)
   ============================================================ */
.bz-banner {
  position: relative;
  background: #0b0b0b;
  color: #f2e8d5;
  overflow: hidden;
  padding: clamp(28px, 6vw, 64px) clamp(16px, 5vw, 56px);
  border-top: 4px solid #c9a227;
  border-bottom: 4px solid #c9a227;
}
/* Rayas de poste de barbero, sutiles, al fondo */
.bz-banner::before {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(201,162,39,.10) 0 14px,
    rgba(242,232,213,.05) 14px 28px,
    transparent 28px 56px);
  pointer-events: none;
}
.bz-banner-inner {
  position: relative;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 5vw, 56px);
  flex-wrap: wrap;
  text-align: center;
}
.bz-skull {
  width: clamp(120px, 22vw, 220px);
  height: auto;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 22px rgba(201,162,39,.35));
}
.bz-banner-copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.bz-kicker {
  font-size: clamp(.72rem, 2vw, .95rem);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #c9a227;
  font-weight: 700;
}
.bz-title {
  font-size: clamp(2rem, 7vw, 4.2rem);
  line-height: 1.02;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #f2e8d5;
  text-shadow: 0 2px 0 #000, 0 0 34px rgba(201,162,39,.45);
}
.bz-title em { font-style: normal; color: #c9a227; }
.bz-sub {
  font-size: clamp(.95rem, 2.4vw, 1.15rem);
  color: #cfc4ad;
  max-width: 46ch;
}
.bz-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 16px 34px;
  background: #c9a227;
  color: #0b0b0b;
  font-weight: 900;
  font-size: clamp(1rem, 2.6vw, 1.3rem);
  text-transform: uppercase;
  letter-spacing: .06em;
  text-decoration: none;
  border: 3px solid #f2e8d5;
  border-radius: 999px;
  box-shadow: 0 8px 26px rgba(201,162,39,.4);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.bz-cta:hover, .bz-cta:focus-visible {
  background: #f2e8d5;
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 34px rgba(201,162,39,.55);
}
.bz-cta img { width: 26px; height: auto; }

/* ---- Botón CTA compacto (sustituye a los antiguos de WhatsApp) ---- */
.bz-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 30px;
  background: #0b0b0b;
  color: #f2e8d5;
  border: 2px solid #c9a227;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1.02rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.bz-btn img { width: 22px; height: auto; }
.bz-btn:hover, .bz-btn:focus-visible {
  background: #c9a227;
  color: #0b0b0b;
  transform: translateY(-2px);
}
.bz-btn-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 26px 0;
}

/* Centrado del banner cuando sustituye a un módulo de código Divi */
.et_pb_code_inner > .bz-banner { margin: 0 -8px; }

@media (prefers-reduced-motion: reduce) {
  .bz-cta, .bz-btn { transition: none; }
}