/* =========================================================
   INTROSHOWS — estilos específicos de la subpágina
   Reutiliza variables y tokens definidos en css/style.css
========================================================= */

:root {
  /* Delineado suave de los contenedores de vídeo y título */
  --block-outline: rgba(255, 255, 255, 0.8);
  --block-glow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 0 28px rgba(255, 255, 255, 0.07);
}

.introshows-main {
  padding-top: var(--header-h);
  background: var(--color-bg);
  min-height: 100vh;
}

/* =========================================================
   1. TEXTO INTRODUCTORIO
========================================================= */
.introshow-intro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 90px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.introshow-intro p {
  margin: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
}

.introshow-intro .accent-text {
  color: var(--color-accent);
}

/* =========================================================
   1b. CTA DE CONTACTO (después del texto introductorio)
========================================================= */
.visuals-cta {
  max-width: 900px;
  margin: 0 auto;
  padding: 40px 40px 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.visuals-cta-text {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}

.visuals-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.visuals-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--color-fg);
  transition: border-color 0.25s var(--ease-fast), background 0.25s var(--ease-fast), transform 0.25s var(--ease-fast);
}

.visuals-cta-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* WhatsApp: fondo transparente, borde + texto + logo en verde */
.visuals-cta-btn--whatsapp {
  background: transparent;
  border: 1px solid #25d366;
  color: #25d366;
}

.visuals-cta-btn--whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  transform: translateY(-2px);
}

.visuals-cta-btn--email {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.visuals-cta-btn--email:hover {
  border-color: var(--color-accent);
  background: rgba(0, 217, 255, 0.08);
  transform: translateY(-2px);
}

/* =========================================================
   2. LISTA DE INTROSHOWS
   Cada ítem: vídeo de escaparate + título superpuesto.

   --media-width / --media-gap definen el vídeo (78% de ancho,
   desplazado un 4% hacia el centro). --title-anchor calcula
   automáticamente en qué punto termina el vídeo dentro del
   bloque (100% - 4% - 78% = 18%): ahí es donde se ancla el
   recuadro del título ANTES de aplicar translate(50%) o
   translate(-50%). Como el translate desplaza siempre la
   MITAD del ANCHO PROPIO del recuadro (sea cual sea su
   tamaño), su centro cae siempre justo en el borde del
   vídeo — así la mitad del título queda superpuesta sobre
   el vídeo y la mitad fuera, independientemente de si el
   texto es corto o largo.
========================================================= */
.introshow-list {
  --media-width: 78%;
  --media-gap: 4%;
  --title-anchor: calc(100% - var(--media-gap) - var(--media-width));

  display: flex;
  flex-direction: column;
  gap: 170px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 70px 40px 180px;
}

.introshow-item {
  position: relative;
}

.introshow-media {
  position: relative;
  width: var(--media-width);
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--block-outline);
  box-shadow: var(--block-glow);
  cursor: pointer;
}

.introshow-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.introshow-title-box {
  position: absolute;
  top: 50%;
  max-width: 60%;
  background: var(--color-overlay-strong);
  border: 1px solid var(--block-outline);
  box-shadow: var(--block-glow);
  border-radius: 20px;
  padding: 22px 34px;
  backdrop-filter: blur(6px);
}

.introshow-title-box h3 {
  margin: 0;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: 0.02em;
  color: var(--color-fg);
}

/* --- Variante A: vídeo a la izquierda, título sobresaliendo a la derecha --- */
.introshow-item--media-left .introshow-media {
  margin-left: var(--media-gap);
  margin-right: 0;
}

.introshow-item--media-left .introshow-title-box {
  right: var(--title-anchor);
  left: auto;
  transform: translate(50%, -50%); /* centra el recuadro exactamente en el borde del vídeo */
}

/* --- Variante B: título sobresaliendo a la izquierda, vídeo a la derecha --- */
.introshow-item--media-right .introshow-media {
  margin-left: auto;
  margin-right: var(--media-gap);
}

.introshow-item--media-right .introshow-title-box {
  left: var(--title-anchor);
  right: auto;
  transform: translate(-50%, -50%); /* centra el recuadro exactamente en el borde del vídeo */
}

/* =========================================================
   3. MODAL REPRODUCTOR DE VÍDEO GRANDE (idéntico a VisualShows)
========================================================= */
.video-player-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s var(--ease-smooth), visibility 0.3s;
}

.video-player-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.video-player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
}

.video-player-panel {
  position: relative;
  z-index: 1;
  width: min(1000px, 90vw);
  max-height: 92vh;
}

.video-player-close {
  position: absolute;
  top: -46px;
  right: 0;
  z-index: 2;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--color-fg);
  border-radius: 50%;
  transition: background 0.2s var(--ease-fast);
}

.video-player-close:hover { background: rgba(255, 255, 255, 0.1); }

.video-player-wrapper {
  position: relative;
  width: 100%;
  max-height: 82vh;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#videoPlayerEl {
  width: 100%;
  max-height: 80vh;
  display: block;
  background: #000;
}

/* --- Controles personalizados --- */
.video-player-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
  transition: opacity 0.3s var(--ease-fast), transform 0.3s var(--ease-fast);
  opacity: 1;
}

.video-player-controls.is-hidden {
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
}

.vp-progress-row { margin-bottom: 8px; }

.vp-progress,
.vp-volume {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.28);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}

.vp-progress::-webkit-slider-thumb,
.vp-volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}

.vp-progress::-moz-range-thumb,
.vp-volume::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
}

.vp-buttons-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.vp-buttons-left,
.vp-buttons-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.vp-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-fg);
  border-radius: 50%;
  transition: background 0.2s var(--ease-fast);
}

.vp-btn:hover { background: rgba(255,255,255,0.1); }

.vp-btn svg { width: 20px; height: 20px; }

.vp-time {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
  white-space: nowrap;
  min-width: 92px;
}

.vp-volume { width: 90px; }

/* =========================================================
   4. RESPONSIVE
========================================================= */
@media (max-width: 900px) {
  .introshow-intro { padding: 70px 22px 20px; gap: 34px; }

  .visuals-cta { padding: 30px 22px 0; gap: 24px; }

  .visuals-cta-buttons { width: 100%; flex-direction: column; }

  .visuals-cta-btn { width: 100%; justify-content: center; }

  .introshow-list { gap: 90px; padding: 50px 20px 120px; }

  .introshow-media {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md);
  }

  /* En móvil el vídeo vuelve a ocupar el 100% del ancho:
     anula los márgenes usados solo en escritorio */
  .introshow-item--media-left .introshow-media,
  .introshow-item--media-right .introshow-media {
    margin-left: 0;
    margin-right: 0;
  }

  /* El título pasa a ir debajo del vídeo, SIN solaparse,
     centrado en el eje horizontal. Se resetea explícitamente
     "transform" en las reglas de cada variante (no solo en la
     genérica), ya que esas reglas tienen más especificidad y,
     si no se anulan aquí también, seguirían desplazando el
     recuadro hacia un lado en vez de dejarlo centrado. */
  .introshow-title-box,
  .introshow-item--media-left .introshow-title-box,
  .introshow-item--media-right .introshow-title-box {
    position: static;
    left: auto;
    right: auto;
    transform: none;
    max-width: 88%;
    width: fit-content;
    margin: 22px auto 0;
    padding: 18px 26px;
    backdrop-filter: none;
  }

  .introshow-title-box h3 {
    white-space: normal;
    text-align: center;
    font-size: 1.5rem;
  }

  /* --- Reproductor a pantalla completa en móvil --- */
  .video-player-panel { width: 100vw; }

  .video-player-wrapper {
    border-radius: 0;
    max-height: 100svh;
    height: 100svh;
  }

  #videoPlayerEl {
    max-height: 100svh;
    height: 100%;
    object-fit: contain;
  }

  .video-player-close {
    top: calc(10px + env(safe-area-inset-top, 0px));
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
  }

  .vp-time { display: none; }
  .vp-volume { width: 56px; }
  .video-player-controls {
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px));
  }
}


/* =========================================================
   3. FOOTER
========================================================= */
.site-footer {
  background: var(--color-bg);
  padding: 72px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-top {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 60px;
  padding-bottom: 48px;
}

/* --- Columna de marca --- */
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.footer-logo-img {
  height: 40px;
  width: auto;
  margin: 0;
}

.footer-tagline {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.98rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  max-width: 340px;
  margin: 0;
  text-align: left;
}

.footer-social {
  display: flex;
  gap: 16px;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: #ffffff;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease-fast), transform 0.25s var(--ease-fast);
}

.footer-social-link svg {
  width: 20px;
  height: 20px;
}

.footer-social-link:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-tiktok-mask {
  display: block;
  width: 50px;
  height: 50px;
  background-color: currentColor;
  -webkit-mask-image: url('../Logos/tiktok.png');
  mask-image: url('../Logos/tiktok.png');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  mask-type: alpha;
}

/* --- Columna "Secciones" --- */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-nav-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-nav a {
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  transition: color 0.25s var(--ease-fast);
}

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

/* --- Línea inferior: copyright + crédito --- */
.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}

.footer-copy {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.footer-credit {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}

.footer-credit a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s var(--ease-fast);
}

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

@media (max-width: 600px) {

    .footer-credit {
        font-size: 0.7rem;
        margin-top: 7px;
        padding: 0 20px;
    }

}

@media (max-width: 480px) {
  .introshow-title-box h3 { font-size: 1.3rem; }

  .vp-volume { display: none; }
  .vp-buttons-right { gap: 6px; }
}