/* ===============================
   Sedusa — Branding (final, scoped)
   - Reemplazar todo el contenido previo
   - Solo estilos de branding y layout principal
   =============================== */

/* Scope base */
.sedusa-root {
  background-color: #0D0D0D;
  color: #DCDCDC;
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  box-sizing: border-box;
}

/* Contenedor principal (scoped) */
.sedusa-root .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
  box-sizing: border-box;
}

/* ---------- Banner: full-bleed, clicable (img inside wrapper) ---------- */
.sedusa-root .sedusa-top-banner {
  width: 100%;
  display: block;
  margin: 0;
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}
.sedusa-root .sedusa-top-banner a {
  display: block;
  width: 100%;
  text-decoration: none;
}
.sedusa-root .sedusa-top-banner img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;        /* allow full-bleed */
  object-fit: cover;      /* fills horizontally; keep center */
  object-position: center;
  border: 0;
}

/* ---------- Search: siempre debajo del banner y centrado ---------- */
.sedusa-root .sedusa-header-search-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 12px 12px 18px;
  box-sizing: border-box;
  background: transparent;
  z-index: 5;
}
.sedusa-root .sedusa-header-search {
  width: 760px;
  max-width: calc(100% - 48px);
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}
.sedusa-root .sedusa-header-search input[type="search"] {
  flex: 1 1 420px;
  max-width: 620px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #0b0b0b;
  color: #DCDCDC;
  font-size: 15px;
  box-sizing: border-box;
}
.sedusa-root .sedusa-header-search .sedusa-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 12px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg,#D6A553,#BF8C38);
  color: #0D0D0D;
  font-weight: 700;
  cursor: pointer;
  box-sizing: border-box;
}
/* Hide any emoji <img> WP may inject and show a single icon via ::after */
.sedusa-root .sedusa-header-search .sedusa-search-btn img { display: none !important; width: 0; height: 0; }
.sedusa-root .sedusa-header-search .sedusa-search-btn::after { content: "🔎"; display:inline-block; font-size:18px; line-height:1; }

/* ---------- Header / Nav: centered on desktop, wrap if needed ---------- */
.sedusa-root .main-header-bar,
.sedusa-root .ast-primary-header-bar,
.sedusa-root .site-header {
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
}

/* Center nav bar area and allow wrapping */
.sedusa-root .main-header-bar-navigation {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
  box-sizing: border-box;
}

/* Menu items inline with wrapping (desktop/tablet). Do NOT prevent mobile collapse. */
.sedusa-root .main-header-menu {
  display: inline-flex !important;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap; /* allows line-wrap instead of forcing hamburger on desktop */
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.sedusa-root .main-header-menu .menu-item {
  display: inline-block !important;
  float: none !important;
}
.sedusa-root .main-header-menu .menu-item a {
  color: #DCDCDC !important;
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 6px;
  background: transparent;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  box-sizing: border-box;
}
/* hover / active */
.sedusa-root .main-header-menu .menu-item a:hover,
.sedusa-root .main-header-menu .menu-item.current-menu-item a {
  background: rgba(214,165,83,0.12);
  color: #D6A553 !important;
}

/* Font-size responsive for menu: scales down gracefully */
.sedusa-root .main-header-menu .menu-item a { font-size: clamp(13px, 1.2vw, 16px); }

/* Respect Astra's mobile hamburger behavior: do NOT hide .menu-toggle by default.
   But ensure header background doesn't become white at breakpoints (brand colors kept). */
.sedusa-root .ast-header-break-point,
.sedusa-root .ast-builder-menu,
.sedusa-root .ast-mobile-header {
  background: transparent !important;
  color: #DCDCDC !important;
}

/* ---------- Video grid / cards / player (minimal, scoped) ---------- */
.sedusa-root .video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 18px;
  box-sizing: border-box;
}
@media (max-width: 920px) {
  .sedusa-root .video-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .sedusa-root .video-grid { grid-template-columns: repeat(2, 1fr); }
}

.sedusa-root .video-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.02));
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  padding: 8px;
  box-sizing: border-box;
}
.sedusa-root .video-card img,
.sedusa-root .video-card .video-thumb {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
  border-radius: 6px;
  background: #111111;
}
.sedusa-root .video-card .video-body { padding: 8px 4px; box-sizing: border-box; }
.sedusa-root .video-card .video-title { color: #DCDCDC; font-size: 15px; margin: 0 0 6px; }

/* Player (single) basic */
.sedusa-root .player-wrap {
  background-color: #0b0b0b;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.6);
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}
.sedusa-root .player-wrap video,
.sedusa-root .player-wrap .video-js {
  width: 100%;
  height: auto;
  max-height: 640px;
  border-radius: 8px;
  background: #000;
  display: block;
  outline: none;
}

/* Actions area (outside player) */
.sedusa-root .actions {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:12px;
  box-sizing: border-box;
}
.sedusa-root .like-btn {
  background: #BF8C38;
  color: #0D0D0D;
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display:inline-flex;
  gap:8px;
  align-items:center;
}
.sedusa-root .like-btn.active { background: #EEDB79; transform: scale(1.03); }

/* Keep Video.js control bar visible and do not hide useful controls.
   We don't attempt to remove specific dynamic menu items here (JS handles 'download' removal). */
.sedusa-root .video-js .vjs-control-bar { z-index: 2; position: relative; }

/* Accessibility focus states */
.sedusa-root a:focus,
.sedusa-root button:focus,
.sedusa-root input:focus {
  outline: 3px solid rgba(214,165,83,0.14);
  outline-offset: 2px;
}

/* Small devices tweaks */
@media (max-width: 820px) {
  .sedusa-root .sedusa-header-search { width: calc(100% - 32px); max-width: 720px; }
  .sedusa-root .main-header-menu .menu-item a { font-size: 14px; padding: 6px 8px; }
}
@media (max-width: 480px) {
  .sedusa-root .main-header-menu { gap: 8px; }
  .sedusa-root .main-header-menu .menu-item a { font-size: 13px; padding: 6px 6px; }
  .sedusa-root .sedusa-header-search input[type="search"] { font-size: 14px; }
}

/* Small safety: prevent accidental horizontal scroll from large images */
html, body { overflow-x: hidden; }

/* ===============================
   Fix móvil: forzar fondo oscuro y colores del branding
   Activa en breakpoints móviles/tablet para corregir el comportamiento
   =============================== */

@media (max-width: 921px) {

  /* Contenedores del header / menú móvil: fondo oscuro */
  .ast-header-break-point .main-header-bar,
  .ast-header-break-point .ast-primary-header-bar,
  .ast-header-break-point .ast-mobile-header,
  .ast-mobile-header-wrap,
  .ast-mobile-popup,
  .ast-mobile-popup .main-header-bar-navigation,
  .ast-mobile-popup .main-header-menu,
  .ast-builder-menu .main-header-bar-navigation,
  .ast-builder-menu .main-header-menu,
  .ast-mobile-header .main-header-bar-navigation,
  .main-header-bar .ast-mobile-popup,
  .ast-builder-menu-overlay {
    background-color: #0D0D0D !important;
    color: #DCDCDC !important;
  }

  /* Toggle (hamburguesa) apariencia */
  .ast-header-break-point .menu-toggle,
  .ast-mobile-header .menu-toggle,
  .menu-toggle,
  .ast-mobile-header .mobile-header {
    color: #DCDCDC !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.04) !important;
    box-shadow: none !important;
  }

  /* Links del menú expandido: color, peso y tamaño legible */
  .ast-mobile-popup .main-header-menu .menu-item a,
  .ast-header-break-point .main-header-menu .menu-item a,
  .ast-mobile-header .main-header-menu .menu-item a {
    color: #DCDCDC !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    text-decoration: none !important;
    background: transparent !important;
  }

  /* Hover / activo en móvil */
  .ast-mobile-popup .main-header-menu .menu-item a:hover,
  .ast-mobile-popup .main-header-menu .menu-item.current-menu-item a,
  .ast-header-break-point .main-header-menu .menu-item a:hover,
  .ast-header-break-point .main-header-menu .menu-item.current-menu-item a {
    color: #0D0D0D !important;
    background: #D6A553 !important;
  }

  /* Sub-menús dentro del panel móvil */
  .ast-mobile-popup .sub-menu,
  .ast-mobile-popup .sub-menu .menu-item,
  .ast-mobile-popup .sub-menu a {
    background: transparent !important;
    color: #DCDCDC !important;
    font-weight: 600 !important;
  }

  /* Asegurar que el panel off-canvas o overlay también sea oscuro */
  .ast-mobile-menu,
  .ast-mobile-menu-overlay,
  .ast-mobile-popup-inner,
  .ast-builder-menu-overlay {
    background-color: #0D0D0D !important;
  }

  /* Evitar que el logo/brand area quede con fondo blanco en mobile */
  .ast-header-break-point .site-logo,
  .ast-header-break-point .custom-logo-link {
    background: transparent !important;
  }

  /* Si Astra inyecta estilos inline o clases distintas, forzamos color de texto enlaces */
  .ast-header-break-point a,
  .ast-header-break-point .ast-builder-menu a {
    color: #DCDCDC !important;
  }
}

/* ===== Sedusa — Estilos para Contact Form 7 (corregido) ===== */
/* Scope general para no colisionar con el theme */
.sedusa-root .wpcf7-form,
.sedusa-root .wpcf7 {
  font-family: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #DCDCDC;
  box-sizing: border-box;
}

/* Headings dentro del formulario (títulos de secciones) */
.sedusa-root .wpcf7-form h1,
.sedusa-root .wpcf7-form h2,
.sedusa-root .wpcf7-form h3 {
  color: #DCDCDC;
  font-weight: 600;
  margin: 0 0 10px;
  line-height: 1.15;
  font-size: 18px;
}

/* Labels / párrafos dentro del form */
.sedusa-root .wpcf7-form p,
.sedusa-root .wpcf7-form label {
  color: #DCDCDC;
  font-size: 15px;
  margin: 0 0 8px;
}

/* Campos (inputs / textarea) */
.sedusa-root .wpcf7-form input[type="text"],
.sedusa-root .wpcf7-form input[type="email"],
.sedusa-root .wpcf7-form input[type="search"],
.sedusa-root .wpcf7-form input[type="url"],
.sedusa-root .wpcf7-form textarea {
  width: 100%;
  background: #0b0b0b;
  color: #DCDCDC;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 10px 12px;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 14px;
}

/* Placeholder claro y sutil */
.sedusa-root .wpcf7-form ::placeholder {
  color: rgba(214,214,214,0.36);
}

/* Botón enviar */
.sedusa-root .wpcf7-submit,
.sedusa-root .wpcf7-form input[type="submit"] {
  background: linear-gradient(180deg,#D6A553,#BF8C38);
  color: #0D0D0D;
  border: none;
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

/* Mensajes de respuesta (éxito/errores) */
.sedusa-root .wpcf7-response-output {
  color: #DCDCDC;
  background: rgba(214,165,83,0.06);
  border-left: 4px solid #D6A553;
  padding: 10px;
  border-radius: 6px;
  margin: 10px 0;
}

/* Si CF7 sigue aplicando reglas muy específicas, usar versión con más prioridad (usar solo si hace falta) */
.sedusa-root .wpcf7 .wpcf7-form input[type="text"],
.sedusa-root .wpcf7 .wpcf7-form textarea,
.sedusa-root .wpcf7 .wpcf7-form input[type="email"] {
  /* Forzar estilos de campo (descomenta si no se aplican los anteriores) */
  /* background: #0b0b0b !important;
     color: #DCDCDC !important;
     border: 1px solid rgba(255,255,255,0.06) !important; */
}