/*
 *  Theme Name:   Divi Child – Smiles Motion
 *  Theme URI:    https://smilesmotion.com
 *  Description:  Child theme personalizado para Smiles Motion v2
 *  Author:       Smiles Motion Creative Studios
 *  Author URI:   https://smilesmotion.com
 *  Template:     Divi
 *  Version:      2.0.0
 *  License:      GPL-2.0+
 *  Text Domain:  smiles-motion
 * /
/*
 ================================================================
 SMILES MOTION — style.css (Header + Hero únicamente)
 ================================================================
 Versión recortada: solo incluye los estilos del HEADER global
 (Theme Builder) y del HERO. El resto de las secciones (Medios,
 Servicios, Nosotros, Casos, Contacto, Footer) NO están incluidas
 en este archivo por ahora.

 ID real del menú confirmado: #menu-menu-principal

 INSTRUCCIONES:
 - Reemplazar completamente el contenido de tu style.css actual
   por este archivo (mantené arriba el header del child theme:
   Theme Name: ... Template: Divi ... )
 ================================================================
*/

/* ============================================================
   0. VARIABLES & RESET
   ============================================================ */
:root {
  --sm-crimson:      #8B1A2B;
  --sm-crimson-dark: #5a0f1b;
  --sm-gold:         #E8B86D;
  --sm-blush:        #F2C4C4;
  --sm-pink:         #ffb7b8;
  --sm-teal:         #1B3A35;
  --sm-dark:         #1a1a1a;
  --sm-darker:       #111111;
  --sm-off-white:    #FAF7F4;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'DM Sans', sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

/* ============================================================
   1. HEADER GLOBAL (Theme Builder)
   ============================================================ */

/* Por si el blanco viene del <body> o un wrapper general detrás del header */
body.et_header_style_centered #main-header,
body.et_header_style_left #main-header,
body.et_header_style_split #main-header,
body .et-l--header {
  background-color: var(--sm-teal) !important;
}

/* ── CENTRADO VERTICAL DEL HEADER: posicionamiento absoluto ──
   El enfoque anterior (flex/grid en .et_pb_row) no funcionaba porque
   Divi inserta wrappers internos desconocidos entre la sección y la
   fila (ej. .et_pb_row_inner) que rompen la herencia de altura/flex.
   Solución robusta: la sección se vuelve "position: relative" con
   altura fija, y la fila se centra con position absolute + transform,
   lo cual ignora completamente cualquier wrapper intermedio. */
#sm-main-header {
  /*height: 86px !important;
  min-height: 86px !important;*/
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

#sm-main-header .et_pb_column_1_4,
#sm-main-header .et_pb_column_1_2,
#sm-main-header .et_pb_column_2_4 {
  width: auto !important;
}

#sm-main-header .et_pb_row {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

#sm-main-header .et_pb_column {
  display: flex !important;
  align-items: center !important;
}

/* Anular márgenes/paddings por defecto que Divi agrega a CADA módulo
   (et_pb_module siempre trae margin-bottom y a veces padding-top que
   descentran verticalmente el contenido dentro de columnas flex) */
#sm-main-header .et_pb_column > .et_pb_module {
  margin: 0 !important;
  padding: 0 5% 0 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

/* Anular el margin-top de 8px que Divi aplica por defecto a cada
   item del menú (regla nativa: .et_pb_menu--without-logo .et_pb_menu__menu>nav>ul>li) */
.et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li,
#sm-main-menu .et_pb_menu--without-logo .et_pb_menu__menu > nav > ul > li {
  margin-top: 0px !important;
}

/* ── Logo: espacio a la izquierda para que no quede pegado al borde ── */
#sm-main-header .et_pb_column:first-child {
	justify-content: left !important;
	padding: 0 0 0 5%;
}
#sm-main-header .et_pb_image {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sm-main-header .et_pb_image img {
  display: block !important;
  margin: 0 !important;
  max-height: 50px !important;
  width: auto !important;
}

/* ── Columna del menú: ancho mínimo y centrado vertical ── */
#sm-main-menu,
#sm-main-menu.et_pb_module {
  min-width: 970px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: right !important;
  height: auto !important;
}

#sm-main-menu .et_pb_menu,
#sm-main-menu .et_pb_menu__menu,
#sm-main-menu .et_pb_menu__wrap {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

#menu-menu-principal {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  height: auto !important;
}

#menu-menu-principal > li {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
}

/* ── Menú: tipografía Rubik ──
   Selector exacto que Divi genera para el módulo de menú del
   Theme Builder Header (clase dinámica .et_pb_menu_X_tb_header),
   combinado con el ID real del menú #menu-menu-principal.
   Se usa !important porque Divi aplica DM Sans con !important
   por defecto en esa misma regla, y un selector normal no le gana. */
.et_pb_menu.et_pb_menu_0_tb_header ul#menu-menu-principal li a,
[class*="et_pb_menu_"][class*="_tb_header"] #menu-menu-principal li a,
#sm-main-menu #menu-menu-principal > li > a {
  /*font-family: 'Rubik', sans-serif !important;
  font-weight: 400 !important;
  font-size: 18px !important;
  color: #ffffff !important;*/
  padding: 8px 10px !important;
  margin: 0 2px !important;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  transition: border-color 0.2s ease !important;
  white-space: nowrap !important;
}

/* ── Menú: hover con recuadro rosa ── */
.et_pb_menu.et_pb_menu_0_tb_header ul#menu-menu-principal li a:hover,
[class*="et_pb_menu_"][class*="_tb_header"] #menu-menu-principal li a:hover,
#sm-main-menu #menu-menu-principal > li > a:hover {
  border: 1px solid var(--sm-pink) !important;
}

/* ── Menú: item activo/actual (Rubik Semibold + rosa) ── */
.et_pb_menu.et_pb_menu_0_tb_header ul#menu-menu-principal li.current-menu-item a,
[class*="et_pb_menu_"][class*="_tb_header"] #menu-menu-principal li.current-menu-item a,
#sm-main-menu #menu-menu-principal > li.current-menu-item > a,
#sm-main-menu #menu-menu-principal > li.current_page_item > a {
  /*font-family: 'Rubik', sans-serif !important;*/
  font-weight: 600 !important;
  /*color: var(--sm-pink) !important;*/
}

.et_pb_menu.et_pb_menu_0_tb_header ul#menu-menu-principal li.current-menu-item a:hover,
#sm-main-menu #menu-menu-principal > li.current-menu-item > a:hover {
  border: 1px solid var(--sm-pink) !important;
}

/* ── Columna de iconos sociales: centrado vertical respecto al header ── */
#sm-social-icons,
#sm-social-icons.et_pb_module {
  display: flex !important;
  align-items: center !important;
  justify-content: right !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

#sm-social-icons ul,
#sm-social-icons .et_pb_social_media_follow {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#sm-social-icons li {
  display: flex !important;
  align-items: center !important;
  margin: 0 6px !important;
  list-style: none !important;
}

/* ── Iconos sociales del header: blancos, fondo transparente, borde circular ──
   Clase real confirmada por inspección: .icon.et_pb_with_border
   El glifo del ícono (LinkedIn/Instagram) lo pinta Divi vía ::before
   con su fuente de iconos ET — por eso el borde y tamaño se aplican
   al <a> directamente, y el color/tamaño del glifo se ajusta en ::before. */
#sm-social-icons a.icon.et_pb_with_border {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: 1px solid #ffffff !important;
  border-radius: 50% !important;
  /*width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;*/
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  transition: background 0.2s ease, border-color 0.2s ease !important;
  text-decoration: none !important;
}

#sm-social-icons a.icon.et_pb_with_border:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--sm-pink) !important;
}

#sm-social-icons a.icon.et_pb_with_border::before {
  color: #ffffff !important;
  /*font-size: 15px !important;*/
  line-height: 1 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ocultar el texto "Follow" oculto que Divi inyecta para accesibilidad
   (ya tiene aria-hidden, pero por si acaso no afecta el layout visual) */
#sm-social-icons .et_pb_social_media_follow_network_name {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ============================================================
   11. FOOTER
   ============================================================ */
.menu-footer.et_pb_menu .et_pb_menu__menu, 
.menu-footer.et_pb_menu .et_pb_menu__menu>nav, 
.menu-footer.et_pb_menu .et_pb_menu__menu>nav>ul {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
}

.wpcf7-response-output {
    color: #FFFFFF !important;
}
@media (max-width: 480px) {
	span.sce-nav__label {
		font-size: 20px;
	}
}