/*
 Theme Name:   Divi Child — Daniel Web
 Theme URI:    https://danielweb.net
 Description:  Divi child theme for Daniel Web
 Author:       Daniel
 Author URI:   https://danielweb.net
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  divi-child-danielweb
*/

/*
 * Tus estilos CSS personalizados van aquí.
 * Este archivo se carga DESPUÉS del CSS de Divi,
 * por lo que cualquier regla aquí tiene prioridad.
 */


/* ===== MOBILE MENU OVERLAY — DanielWeb ===== */

/* Ocultar Contact en desktop */
li.contact-mobile {
  display: none !important;
}

/* Mostrar solo en mobile */
@media (max-width: 980px) {
  li.contact-mobile {
    display: block !important;
  }
}

@media (max-width: 980px) {
	
  .et_mobile_menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: #0a0a0a !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 0 40px !important;
    z-index: 99998 !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
  }

  /* Divi abre el menú agregando .opened al div padre .mobile_nav */
  .mobile_nav.opened .et_mobile_menu {
    opacity: 1 !important;
    pointer-events: all !important;
  }

  .et_mobile_menu li {
    border-bottom: 1px solid rgba(255,255,255,0.07) !important;
    background: transparent !important;
    padding: 0 !important;
    transform: translateY(40px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.16,1,0.3,1), opacity 0.4s ease;
  }

  .mobile_nav.opened .et_mobile_menu li:nth-child(1) { transform: translateY(0); opacity: 1; transition-delay: 0.05s; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(2) { transform: translateY(0); opacity: 1; transition-delay: 0.10s; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(3) { transform: translateY(0); opacity: 1; transition-delay: 0.15s; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(4) { transform: translateY(0); opacity: 1; transition-delay: 0.20s; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(5) { transform: translateY(0); opacity: 1; transition-delay: 0.25s; }
  .mobile_nav.opened .et_mobile_menu li:nth-child(6) { transform: translateY(0); opacity: 1; transition-delay: 0.30s; }

  .et_mobile_menu li a {
    color: rgba(255,255,255,0.5) !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    padding: 20px 0 !important;
    background: transparent !important;
    border: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
  }

  .et_mobile_menu li a:hover,
  .et_mobile_menu li.current-menu-item > a,
  .et_mobile_menu li.current_page_item > a {
    color: #2DE89B !important;
    background: transparent !important;
  }

  .mobile_menu_bar {
    position: relative !important;
    z-index: 99999 !important;
  }

  .mobile_menu_bar:before {
    color: #fff !important;
  }

  body.mobile_nav_opened {
    overflow: hidden !important;
  }
}

/* Hamburguesa animada → X */
@media (max-width: 980px) {

  .mobile_menu_bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    cursor: pointer !important;
    padding: 6px !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  /* Ocultar el ícono de font-icon de Divi */
  .mobile_menu_bar:before {
    display: none !important;
  }

  /* Las 3 líneas via pseudo-elementos — usamos el span que Divi genera */
  .mobile_menu_bar span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #fff !important;
    transition: all 0.35s cubic-bezier(0.77,0,0.175,1) !important;
    transform-origin: center !important;
  }

  /* Estado abierto — X */
  .mobile_nav.opened .mobile_menu_bar span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mobile_nav.opened .mobile_menu_bar span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .mobile_nav.opened .mobile_menu_bar span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}

@media (max-width: 980px) {

  .et_mobile_menu > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .et_mobile_menu > li > a::after {
    content: '→' !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    color: rgba(255,255,255,0.25) !important;
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: 0 !important;
    flex-shrink: 0 !important;
    transition: color 0.2s ease !important;
  }

  .et_mobile_menu > li > a:hover::after,
  .et_mobile_menu li.current-menu-item > a::after,
  .et_mobile_menu li.current_page_item > a::after {
    color: #2DE89B !important;
  }
}

@media (max-width: 980px) {

  .mobile_menu_bar {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 5px !important;
    width: 32px !important;
    height: 32px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  .mobile_menu_bar:before {
    display: none !important;
  }

  .mobile_menu_bar span {
    display: block !important;
    width: 24px !important;
    height: 2px !important;
    background: #ffffff !important;
    transition: all 0.35s cubic-bezier(0.77,0,0.175,1) !important;
    transform-origin: center !important;
  }

  .mobile_nav.opened .mobile_menu_bar span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  .mobile_nav.opened .mobile_menu_bar span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .mobile_nav.opened .mobile_menu_bar span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }
}



/* El círculo verde estático */
.dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background-color: #34d399;
    border-radius: 50%;
    top: 9px;
    left: -20px;
}

/* El efecto de pulso (animación) */
.dot::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #34d399;
  border-radius: 50%;
  z-index: -1;
  /* Aplicamos la animación */
  animation: pulse 2s infinite;
}

/* Definición de la animación */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(3); /* Crece hasta el triple de su tamaño */
    opacity: 0; /* Se desvanece por completo */
  }
}

/* Etiqueta que va con títulos */

.label-title {
    border-radius: 33554400px;
    border: 1px solid rgba(52, 211, 153, 0.40);
    background: rgba(52, 211, 153, 0.10);
}

/* FORMULARIO CONTACT */

#forminator-module-1095 {
	display: grid;
	gap: 0.625rem;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: auto;
}

#forminator-module-1095 .forminator-row {
	margin-bottom: 0;
}

#forminator-module-1095 .forminator-row:nth-child(2) {
	grid-column: 1 / 2;
	grid-row: 1 / 2;
}

#forminator-module-1095 .forminator-row:nth-child(3) {
	grid-column: 2 / 3;
	grid-row: 1 / 2;
}

#forminator-module-1095 .forminator-row:nth-child(4) {
	grid-column: 1 / 3;
	grid-row: 2 / 3;
}

#forminator-module-1095 .forminator-row:nth-child(5) {
	grid-column: 1 / 3;
	grid-row: 3 / 4;
}

#forminator-module-1095 .forminator-row.forminator-row-last {
	grid-column: 1 / 3;
}


#forminator-module-1095 .forminator-input {
	background-color: #0a0a0a;
	border: 1px solid #232323;
	border-radius: 8px;
	color: #fff;
}

#forminator-module-1095 .forminator-input:placeholder {
	color: #323232;
}

#forminator-module-1095 .forminator-label {
    color: #a8aaaa;
	font-size: 0.875rem !important;
	line-height: 1.2rem;
	font-weight: normal !important;
	margin: 0 0 5px 5px;
}

/* Color del texto del placeholder y fondo del cuadro principal */
.forminator-custom-form span.select2-selection.select2-selection--single {
	background-color: #0a0a0a !important;
	border: 1px solid #232323 !important;
	border-radius: 8px;
}

/* Cambiar el estilo del texto dentro del campo */
.forminator-custom-form .select2-selection__rendered {
	color: #3b3b3b !important; /* Color de las letras */
}

/* 1. Fondo general y bordes de la lista desplegable */
.forminator-select-dropdown {
    background-color: #0a0a0a !important; /* Cambia el fondo blanco actual */
    border: 1px solid #232323 !important; /* Color del borde de la caja */
    border-radius: 0 0 10px 10px !important;
}

/* 2. Estilo de los textos de las opciones (por defecto) */
.forminator-select-dropdown .select2-results__option {
    color: #ffffff !important; /* Cambia el color del texto (actualmente gris/negro) */
    padding: 10px 15px !important; /* Espaciado interno de cada opción */
    background-color: transparent !important;
}

/* 3. Estilo de la opción cuando pasas el ratón por encima (Hover) */
.forminator-select-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: #333333 !important; /* Fondo al pasar el cursor (el azul claro actual) */
    color: #00ffcc !important; /* Color del texto al pasar el cursor */
}

/* 4. Estilo de la opción que ya está seleccionada en la lista */
.forminator-select-dropdown .select2-results__option[aria-selected=true] {
    background-color: #222222 !important; /* Fondo de la opción activa */
    color: #ffffff !important;
}


/* 1. Estilo para los inputs normales (Nombre, Email, Mensaje) cuando están activos */
.forminator-custom-form .forminator-input:focus,
.forminator-custom-form .forminator-textarea:focus {
    border-color: #34d399 !important; /* Color verde de la imagen */
    box-shadow: 0 0 0 1px #34d399 !important; /* Contorno sutil */
    outline: none !important;
    border-radius: 8px !important; /* Ajusta el redondeado si lo necesitas más suave */
}

/* 2. Estilo para el campo desplegable (Select) cuando está abierto o seleccionado */
.forminator-custom-form .select2-container--focus .select2-selection--single,
.forminator-custom-form .select2-container--open .select2-selection--single {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 1px #34d399 !important;
    outline: none !important;
}

/* 3. Asegurar el redondeado de los inputs por defecto (para que coincida con la foto) */
.forminator-custom-form .forminator-input,
.forminator-custom-form .forminator-textarea,
.forminator-custom-form .select2-selection--single {
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important; /* Transición suave al hacer clic */
}


/* 1. Cambiar el borde azul del contenedor inferior de la lista desplegable */
.forminator-select.forminator-select-dropdown-container--open {
    border-color: #34d399 !important;
    box-shadow: 0 0 0 1px #34d399 !important;
}

/* 2. Forzar que la caja de opciones interna se fusione con el color verde */
.forminator-select-dropdown {
    border-color: #34d399 !important;
}

/* 3. Eliminar cualquier línea o contorno azul residual en los elementos internos */
.forminator-select-dropdown .select2-results__options,
.forminator-select-dropdown .select2-results__option {
    outline: none !important;
    border: none !important;
}


 #forminator-module-1095 .forminator-textarea {
	background-color: #0a0a0a !important;
	border: 1px solid #232323 !important;
	border-radius: 8px;
	color: #fff;
}

.forminator-ui#forminator-module-1095.forminator-design--default .forminator-button-submit {
	background-color: #34d399;
	border-radius: 1.25rem;
	color: #0a0a0a;
	font-weight: 700 !important;
	width: 100%;
	transition: all 300ms ease;
}


.forminator-ui#forminator-module-1095.forminator-design--default .forminator-button-submit:hover {
	background-color: #fff;
	color: #121212;
}

/* TABLE OF CONTENT ARTICLES */

/* TOC texto visible sobre fondo oscuro */

.cpc-toc {
    color: #ffffff;
}

.cpc-toc__header svg {
    stroke: #34d399;
    opacity: 1;
}

.cpc-toc__link {
    opacity: 0.5;
    color: #ffffff;
}

.cpc-toc__link:hover {
    opacity: 0.8;
}

.cpc-toc__list .cpc-toc__item.cpc-toc__item--active .cpc-toc__link {
    opacity: 1;
    color: #34d399;
    background: rgba(52, 211, 153, 0.10);
	border: 1px solid rgba(52, 211, 153, 0.2);
}

/* ── Eliminar bullets del TOC ── */
.cpc-toc__list,
.et_pb_column .cpc-toc__list {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.cpc-toc__item::before,
.cpc-toc__item {
    list-style: none !important;
}