/* ========================= */
/*      TIPOGRAFÍAS          */
/* ========================= */
@font-face {
  font-family: 'Jomolhari';
  src: url('../fonts/Jomolhari-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========================= */
/*   SEPARADORES (GENÉRICO)  */
/* ========================= */

/* Contenedor a pantalla completa */
.Separador_img {
  position: relative;
  width: 100%;
  height: 100dvh;
  height: 100vh; /* fallback */
  overflow: hidden;
}

/* Imágenes: llenan el contenedor */
.Separador_img img {
  position: relative;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;        /* se muestra según orientación */
  z-index: 1;
}

/* Mostrar horizontal/vertical según orientación */
@media (orientation: landscape) {
  .Separador_img .img-horizontal { display: block; }
}
@media (orientation: portrait) {
  .Separador_img .img-vertical { display: block; }
}

/* Capa oscura para legibilidad */
.Separador_img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.25),
    rgba(0,0,0,0.45)
  );
  z-index: 2;
  pointer-events: none;
}

/* Contenido superpuesto (títulos + botón) */
.sep-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;     /* centrado vertical */
  gap: clamp(8px, 2.5vh, 20px);
  padding: clamp(12px, 3vw, 32px);
  text-align: center;
  box-sizing: border-box;
}

/* ========================= */
/*   TÍTULOS DE SEPARADOR    */
/* ========================= */

/* Aplica SOLO a los títulos de separadores */
.sep-text1,
.sep-text2 {
  font-family: 'Jomolhari', 'Times New Roman', serif;
  color: #ffffff;
  margin: 0;
  line-height: 1.1;
  letter-spacing: 0.5px;
  text-wrap: balance;
}

/* H1 principal */
.sep-text1 {
  font-weight: 400;
  font-size: clamp(1.8rem, 6vw, 4.2rem);
}

/* H2 secundario */
.sep-text2 {
  font-weight: 400;
  font-size: clamp(1.2rem, 3.5vw, 2.4rem);
  opacity: 0.95;
}

/* Opcional: ligero borde para contraste en fondos muy claros */
@supports (text-shadow: 0 1px 2px rgba(0,0,0,.35)) {
  .sep-text1,
  .sep-text2 {
    text-shadow: 0 2px 10px rgba(0,0,0,.35);
  }
}

/* ========================= */
/*   BOTÓN WHATSAPP          */
/* ========================= */

.sep-whatsapp {
  display: inline-block;
  width: clamp(56px, 10vw, 88px);
  height: clamp(56px, 10vw, 88px);
  border-radius: 50%;
  overflow: hidden;
  outline: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sep-whatsapp img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Hover/active (solo desktop) */
@media (hover: hover) and (pointer: fine) {
  .sep-whatsapp { transition: transform .2s ease; }
  .sep-whatsapp:hover { transform: scale(1.05); }
  .sep-whatsapp:active { transform: scale(0.98); }
}

/* ========================= */
/*   AJUSTES RESPONSIVE      */
/* ========================= */

/* Ajuste en pantallas muy chicas */
@media (max-width: 380px) {
  .sep-content {
    gap: 10px;
    padding: 12px;
  }
  .sep-text1 { font-size: clamp(1.6rem, 7vw, 3rem); }
  .sep-text2 { font-size: clamp(1.05rem, 4vw, 1.8rem); }
}

/* Ajuste en pantallas muy grandes */
@media (min-width: 1600px) {
  .sep-text1 { font-size: clamp(2.2rem, 5.2vw, 5rem); }
  .sep-text2 { font-size: clamp(1.4rem, 3vw, 3rem); }
}