/*
Theme Name: Salient Child
Template: salient
*/

@import url('../salient/style.css');

/* === TIPOGRAFÍA GLOBAL: Helvetica Neue === */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, li, span, div,
input, textarea, select, button,
.wpb_content_element,
.vc_column_text,
#header-outer,
#footer-outer,
.rooom-footer {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}



/* ============================================================
   ROOOM ESTUDIO — Salient Child Theme CSS
   Última actualización: 25/04/2026
   ============================================================ */

/* === 1. Página Servicios (page-id-214): fondo negro total === */
body.page-id-214 #header-space,
body.page-id-214 #ajax-content-wrap,
body.page-id-214 #boxed,
body.page-id-214 .container-wrap,
body.page-id-214 #page-header-wrap,
body.page-id-214 #page-header-bg {
  background-color: #000000 !important;
}

/* Ocultar el título de página "Servicios" (el contenido ya lo tiene en el primer bloque) */
body.page-id-214 #page-header-wrap {
  display: none !important;
}

/* === 2. Home: hamburguesa negro (vence regla .transparent de Salient) === */
body.home #header-outer #top .container nav ul .slide-out-widget-area-toggle a .lines,
body.home #header-outer #top .container nav ul .slide-out-widget-area-toggle a .lines::before,
body.home #header-outer #top .container nav ul .slide-out-widget-area-toggle a .lines::after,
body.home #header-outer.transparent #top nav ul .slide-out-widget-area-toggle a .lines,
body.home #header-outer.transparent #top nav ul .slide-out-widget-area-toggle a .lines::before,
body.home #header-outer.transparent #top nav ul .slide-out-widget-area-toggle a .lines::after,
body.home #header-outer.light-text #top .container nav ul .slide-out-widget-area-toggle a .lines,
body.home #header-outer.light-text #top .container nav ul .slide-out-widget-area-toggle a .lines::before,
body.home #header-outer.light-text #top .container nav ul .slide-out-widget-area-toggle a .lines::after {
  background-color: #000000 !important;
}

/* === 3. Slider logos Servicios: full-width breakout === */
.rooom-logos-slider {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
}

/* === 4. Separadores HR Servicios: full-width 3px blanco === */
body.page-id-214 hr {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  border: none !important;
  border-top: 3px solid #ffffff !important;
  height: 0 !important;
  display: block !important;
}

/* === 5. Separadores Servicios: div full-width 3px blanco === */
.rooom-sep {
  display: block !important;
  width: 100vw !important;
  height: 3px !important;
  background-color: #ffffff !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  padding: 0 !important;
}


/* === 6. Servicios: todos los vc_row al 100% del viewport === */
body.page-id-214 .wpb_row.vc_row-fluid {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* Padding interno en columnas de contenido (excepto slider y separadores) */
body.page-id-214 .wpb_row.vc_row-fluid .vc_column_container > .vc_column-inner {
  padding-left: 80px !important;
  padding-right: 80px !important;
}

/* Sin padding en el slider, separadores y logos */
body.page-id-214 .vc_custom_11 .vc_column_container > .vc_column-inner,
body.page-id-214 .vc_custom_2 .vc_column_container > .vc_column-inner,
body.page-id-214 .vc_custom_4 .vc_column_container > .vc_column-inner,
body.page-id-214 .vc_custom_6 .vc_column_container > .vc_column-inner,
body.page-id-214 .vc_custom_9 .vc_column_container > .vc_column-inner,
body.page-id-214 .vc_custom_12 .vc_column_container > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}


/* === ROOOM FOOTER — estilos globales === */
.rooom-footer { background: #000; color: #fff; padding: 100px 80px 0; font-size: 17px; line-height: 1.6; }
.rooom-footer-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 60px; padding-bottom: 80px; }
.rooom-footer-arrow { font-size: 32px; margin: 0 0 12px; }
.rooom-footer-newsletter-title { font-size: 20px; margin: 0 0 24px; }
.rooom-newsletter-input { background: none; border: none; border-bottom: 1px solid rgba(255,255,255,0.4); color: #fff; font-size: 15px; padding: 8px 0; width: 100%; outline: none; margin-bottom: 16px; display: block; }
.rooom-newsletter-check { font-size: 12px; color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 8px; }
.rooom-newsletter-check input { margin: 0; }
.rooom-footer-label { font-size: 15px; opacity: 0.6; margin: 0 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.rooom-footer-link { color: #fff; text-decoration: none; }
.rooom-footer-link:hover { opacity: 0.7; }
.rooom-footer-social { display: flex; gap: 20px; margin-top: 30px; font-size: 24px; }
.rooom-social-icon { color: #fff; text-decoration: none; font-size: 20px; opacity: 0.8; }
.rooom-social-icon:hover { opacity: 1; }
.rooom-col-menu { display: flex; flex-direction: column; gap: 8px; }
.rooom-footer-menulink { color: #fff; text-decoration: none; font-size: 17px; }
.rooom-footer-menulink:hover { opacity: 0.7; }
.rooom-footer-logo { overflow: hidden; }
.rooom-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 20px 0 25px; border-top: 1px solid rgba(255,255,255,0.15); font-size: 14px; color: rgba(255,255,255,0.5); }
.rooom-footer-legal { display: flex; gap: 30px; }
.rooom-legal-link { color: rgba(255,255,255,0.5); text-decoration: none; }
.rooom-legal-link:hover { color: #fff; }


/* === Página Contacta (page-id-216): fondo negro + header transparente === */
body.page-id-216 #header-space,
body.page-id-216 #ajax-content-wrap,
body.page-id-216 #boxed,
body.page-id-216 .container-wrap,
body.page-id-216 #page-header-wrap {
  background-color: #000000 !important;
}
body.page-id-216 #page-header-wrap { display: none !important; }

/* Breakout rows en Contacta */
body.page-id-216 .wpb_row.vc_row-fluid {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
body.page-id-216 .wpb_row.vc_row-fluid .vc_column_container > .vc_column-inner {
  padding-left: 80px !important;
  padding-right: 80px !important;
}
body.page-id-216 .vc_custom_footer .vc_column_container > .vc_column-inner {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === CF7 Formulario Contacta: estilos inline === */
body.page-id-216 .wpcf7-form { width: 100%; }
body.page-id-216 .rooom-form-field { margin-bottom: 0; }
body.page-id-216 .rooom-form-field input[type="text"],
body.page-id-216 .rooom-form-field input[type="email"],
body.page-id-216 .rooom-form-field textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.5) !important;
  border-radius: 0 !important;
  color: #ffffff !important;
  font-size: 24px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  padding: 20px 0 !important;
  outline: none !important;
  box-shadow: none !important;
}
body.page-id-216 .rooom-form-field textarea {
  height: 80px !important;
  resize: none !important;
}
body.page-id-216 .rooom-form-field input::placeholder,
body.page-id-216 .rooom-form-field textarea::placeholder {
  color: rgba(255,255,255,0.5) !important;
}
body.page-id-216 .rooom-form-submit { margin-top: 40px; }
body.page-id-216 .rooom-form-submit input[type="submit"] {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  border-radius: 40px !important;
  color: #ffffff !important;
  font-size: 20px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  padding: 14px 40px !important;
  cursor: pointer !important;
  letter-spacing: 0.5px !important;
  transition: background 0.2s, color 0.2s !important;
}
body.page-id-216 .rooom-form-submit input[type="submit"]:hover {
  background: #ffffff !important;
  color: #000000 !important;
}
body.page-id-216 .wpcf7-not-valid-tip { color: rgba(255,100,100,0.8) !important; font-size: 12px !important; }
body.page-id-216 .wpcf7-response-output { color: rgba(255,255,255,0.6) !important; border: none !important; margin-top: 20px !important; }


/* ============================================================
   HEADER GLOBAL IMPERATIVO — NO MODIFICAR NUNCA
   Logo rooom izquierda total + Lupa/Hamburguesa derecha total
   Referencia: proyecto Destudio
   ============================================================ */

/* 1. Header full width — pegado a los bordes de pantalla */
#header-outer,
#header-outer header,
#header-outer #top {
  width: 100% !important;
  max-width: 100% !important;
  left: 0 !important;
  right: 0 !important;
}

/* 2. Container del header al 100% del viewport */
#header-outer #top .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* 3. Logo pegado al borde izquierdo */
#header-outer #top .container .logo-container,
#header-outer #top .container #logo-container {
  position: static !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}

/* 4. Ocultar los items de navegación de texto del menú principal */
#header-outer #top .container nav > ul > li:not(.slide-out-widget-area-toggle):not(.search-btn):not(.header-search-wrap) {
  display: none !important;
}

/* 5. Nav pegada al borde derecho */
#header-outer #top .container nav {
  float: none !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 6. Lupa y hamburguesa visibles y juntos a la derecha */
#header-outer #top .container nav ul li.search-btn,
#header-outer #top .container nav ul li.header-search-wrap,
#header-outer #top .container nav ul li.slide-out-widget-area-toggle {
  display: flex !important;
  align-items: center !important;
}

/* 7. Hamburguesa líneas negras en home (override transparent) */
body.home #header-outer.transparent .slide-out-widget-area-toggle a .lines,
body.home #header-outer.transparent .slide-out-widget-area-toggle a .lines::before,
body.home #header-outer.transparent .slide-out-widget-area-toggle a .lines::after,
body.home #header-outer.light-text .slide-out-widget-area-toggle a .lines,
body.home #header-outer.light-text .slide-out-widget-area-toggle a .lines::before,
body.home #header-outer.light-text .slide-out-widget-area-toggle a .lines::after {
  background-color: #000000 !important;
}


/* ============================================================
   HEADER GLOBAL — IMPERATIVO: igual en TODAS las páginas
   Logo izquierda, lupa + hamburguesa derecha. NO MODIFICAR.
   Referencia: proyecto Destudio
   ============================================================ */
#header-outer #top .container,
#header-outer #top .row {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 30px !important;
  padding-right: 30px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

#header-outer #top .col.span_3 {
  width: auto !important;
  float: none !important;
  flex-shrink: 0 !important;
}

#header-outer #top .col.span_9 {
  width: auto !important;
  float: none !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

/* Logo BLANCO en páginas con fondo negro — filter invert */
body.page-id-214 #logo img,
body.page-id-67 #logo img,
body.page-id-216 #logo img {
  filter: brightness(0) invert(1) !important;
}

/* Hamburguesa y lupa BLANCOS en páginas con fondo negro */
body.page-id-214 #header-outer .lines,
body.page-id-214 #header-outer .lines::before,
body.page-id-214 #header-outer .lines::after,
body.page-id-67 #header-outer .lines,
body.page-id-67 #header-outer .lines::before,
body.page-id-67 #header-outer .lines::after,
body.page-id-216 #header-outer .lines,
body.page-id-216 #header-outer .lines::before,
body.page-id-216 #header-outer .lines::after {
  background-color: #ffffff !important;
}

body.page-id-214 #header-outer .header-search a,
body.page-id-67 #header-outer .header-search a,
body.page-id-216 #header-outer .header-search a,
body.page-id-214 #header-outer li.search a,
body.page-id-67 #header-outer li.search a,
body.page-id-216 #header-outer li.search a {
  color: #ffffff !important;
}


/* Header opaco negro en páginas con fondo negro */
body.page-id-214 #header-outer,
body.page-id-67 #header-outer,
body.page-id-216 #header-outer {
  background-color: #000000 !important;
  box-shadow: none !important;
}

/* === BURGER: forzar visible en todas las páginas, ocultar nav normal === */
#top .span_9 > .slide-out-widget-area-toggle,
#top nav ul .slide-out-widget-area-toggle {
  display: block !important;
}

/* Ocultar items del menú nav que no sean burger/lupa */
#header-outer #top .container nav > ul > li:not(.slide-out-widget-area-toggle):not(.search-btn):not(.header-search-wrap):not(.search) {
  display: none !important;
}


/* === BURGER: forzar visible en todas las páginas, ocultar nav normal === */
#top .span_9 > .slide-out-widget-area-toggle,
#top nav ul .slide-out-widget-area-toggle {
  display: block !important;
}

/* Ocultar items del menú nav que no sean burger/lupa */
#header-outer #top .container nav > ul > li:not(.slide-out-widget-area-toggle):not(.search-btn):not(.header-search-wrap):not(.search) {
  display: none !important;
}
/* === Fix doble icono hamburguesa en escritorio ============================
   Anadido 2026-05-07 por Rooom + Claude.
   Salient renderiza dos toggles del menu lateral simultaneamente:
   uno con .mobile-icon (pensado para movil) y otro dentro del nav principal.
   En escritorio (>=1000px) ocultamos el .mobile-icon para que solo se vea uno.
   Selectores con specificidad alta para vencer reglas de Salient cargadas despues.
   ========================================================================== */
@media (min-width: 1000px) {
  html body #header-outer.transparent .col.span_9 > .slide-out-widget-area-toggle.mobile-icon,
  html body #header-outer .col.span_9 > .slide-out-widget-area-toggle.mobile-icon,
  html body #header-outer .slide-out-widget-area-toggle.mobile-icon,
  html body div#header-outer div.slide-out-widget-area-toggle.mobile-icon {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
  }
}