/* ==========================================================================
   Nueva Paleta de Colores SS Digital
   ========================================================================== */

:root {
  --ss-rosado: #E973AA;
  --ss-naranja: #E75119;
  --ss-turquesa: #20AF95;
  --ss-morado-oscuro: #1A1933;
  --ss-amarillo: #EF8909;
  --ss-azul: #0CA9BD;
}

/* ==========================================================================
   Header Principal - Mismo color que sticky header desde el inicio
   ========================================================================== */

/* Header principal con fondo oscuro desde el inicio */
.main-header {
  background: var(--ss-morado-oscuro) !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1) !important;
}

/* Header lower con fondo oscuro */
.main-header .header-lower {
  background: var(--ss-morado-oscuro) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Menú principal con texto blanco */
.main-header .main-menu .navigation > li > a {
  color: #ffffff !important;
  font-weight: 500 !important;
}

/* Hover del menú principal */
.main-header .main-menu .navigation > li > a:hover,
.main-header .main-menu .navigation > li.current > a {
  color: var(--ss-rosado) !important;
}

/* Botón de búsqueda con color blanco */
.main-header .outer-box .search-btn .search {
  color: #ffffff !important;
}

.main-header .outer-box .search-btn .search:hover {
  color: var(--ss-rosado) !important;
}

/* Botón móvil con color blanco */
.main-header .outer-box .mobile-nav-toggler i {
  color: #ffffff !important;
}

.main-header .outer-box .mobile-nav-toggler:hover i {
  color: var(--ss-rosado) !important;
}

/* Sticky header mantiene el mismo fondo */
.sticky-header {
  background: var(--ss-morado-oscuro) !important;
}

.sticky-header .main-menu .navigation > li > a {
  color: #ffffff !important;
}

.sticky-header .main-menu .navigation > li.current > a,
.sticky-header .main-menu .navigation > li:hover > a {
  color: var(--ss-rosado) !important;
}

/* ==========================================================================
   Responsive para Historias de Éxito - Subtítulos siempre visibles en móvil
   ========================================================================== */

/* En móvil (tablets y teléfonos), mostrar siempre el contenido */
@media (max-width: 991.98px) {
  .project-block-two .inner-box .image-box .content-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background: linear-gradient(135deg, rgba(233, 115, 170, 0.95), rgba(231, 81, 25, 0.95)) !important;
  }
  
  /* Ajustar el padding para móvil */
  .project-block-two .inner-box .image-box .content-box {
    padding: 20px 15px 15px !important;
  }
  
  /* Hacer el texto más legible en móvil */
  .project-block-two .inner-box .image-box .content-box .title {
    font-size: 16px !important;
    line-height: 22px !important;
    margin-bottom: 8px !important;
  }
  
  .project-block-two .inner-box .image-box .content-box span {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }
  
  .project-block-two .inner-box .image-box .content-box .text {
    font-size: 13px !important;
    line-height: 18px !important;
  }
}

/* En móvil pequeño, ajustar aún más */
@media (max-width: 575.98px) {
  .project-block-two .inner-box .image-box .content-box {
    padding: 15px 12px 12px !important;
  }
  
  .project-block-two .inner-box .image-box .content-box .title {
    font-size: 14px !important;
    line-height: 20px !important;
  }
  
  .project-block-two .inner-box .image-box .content-box span {
    font-size: 11px !important;
  }
  
  .project-block-two .inner-box .image-box .content-box .text {
    font-size: 12px !important;
    line-height: 16px !important;
  }
}

/* Mantener el efecto hover solo en desktop */
@media (min-width: 992px) {
  .project-block-two .inner-box:hover .image-box .content-box {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    background: linear-gradient(135deg, rgba(233, 115, 170, 0.9), rgba(231, 81, 25, 0.9)) !important;
  }
}

/* Botones con gradientes de la nueva paleta */
.theme-btn {
  background: linear-gradient(135deg, var(--ss-rosado), var(--ss-naranja)) !important;
  border: none !important;
  color: #ffffff !important;
  position: relative;
  display: inline-block;
  padding: 15px 40px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: all 300ms ease;
  z-index: 1;
}

.theme-btn:hover {
  background: linear-gradient(135deg, var(--ss-naranja), var(--ss-turquesa)) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(233, 115, 170, 0.3);
}

.theme-btn-v2 {
  background: linear-gradient(135deg, var(--ss-turquesa), var(--ss-azul)) !important;
  border: none !important;
  color: #ffffff !important;
  position: relative;
  display: inline-block;
  padding: 15px 40px;
  line-height: 24px;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  border-radius: 50px;
  overflow: hidden;
  transition: all 300ms ease;
  z-index: 1;
}

.theme-btn-v2:hover {
  background: linear-gradient(135deg, var(--ss-azul), var(--ss-rosado)) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(32, 175, 149, 0.3);
}

/* Botones de contacto con colores alternativos */
.contact-btn {
  background: linear-gradient(135deg, var(--ss-amarillo), var(--ss-naranja)) !important;
  border: none !important;
  color: #ffffff !important;
  padding: 12px 30px;
  border-radius: 25px;
  transition: all 300ms ease;
}

.contact-btn:hover {
  background: linear-gradient(135deg, var(--ss-naranja), var(--ss-amarillo)) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(239, 137, 9, 0.3);
}

/* Iconos con colores de la paleta */
.icon-box {
  color: var(--ss-rosado) !important;
}

.icon-box:hover {
  color: var(--ss-naranja) !important;
}

/* Enlaces con colores de la paleta */
a:hover {
  color: var(--ss-rosado) !important;
}

/* Subtítulos con colores alternativos */
.sec-title .sub-title {
  color: var(--ss-rosado) !important;
}

.sec-title-two .sub-title {
  color: var(--ss-turquesa) !important;
}

/* Elementos activos y hover */
.main-menu .navigation > li.current > a,
.main-menu .navigation > li:hover > a {
  color: var(--ss-rosado) !important;
}

/* Footer con gradiente de colores */
.main-footer {
  background: linear-gradient(135deg, var(--ss-morado-oscuro), #2A2943) !important;
}

.footer-widget .widget-title {
  color: var(--ss-rosado) !important;
}

.footer-widget .social-icons li a:hover {
  background: var(--ss-rosado) !important;
  color: #ffffff !important;
}

/* Secciones con fondos alternados */
.service-section-two {
  background-image: url(../images/background/ser1-1.jpg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
}

.about-section-two {
  background: var(--ss-morado-oscuro) !important;
}

/* Bloques de servicios con colores alternados */
.service-block-two .inner-box:hover {
  background: linear-gradient(135deg, #2A2943, var(--ss-morado-oscuro)) !important;
  border-left: 4px solid var(--ss-rosado) !important;
}

.service-block-two .icon-box {
  color: var(--ss-rosado) !important;
}

.service-block-two:hover .icon-box {
  color: var(--ss-naranja) !important;
}

/* Proyectos con overlay de colores */
.project-block-two .inner-box:hover .content-box {
  background: linear-gradient(135deg, rgba(233, 115, 170, 0.9), rgba(231, 81, 25, 0.9)) !important;
}

/* Testimonios con acentos de color */
.testimonial-block-two .inner-box {
  background: #2A2943 !important;
  border-left: 4px solid var(--ss-turquesa) !important;
}

.testimonial-block-two .rating li i {
  color: var(--ss-amarillo) !important;
}

/* Scroll to top con gradiente */
.scroll-to-top {
  background: linear-gradient(135deg, var(--ss-rosado), var(--ss-naranja)) !important;
}

.scroll-to-top:hover {
  background: linear-gradient(135deg, var(--ss-naranja), var(--ss-turquesa)) !important;
}

/* Formularios con bordes de color */
.form-control:focus {
  border-color: var(--ss-rosado) !important;
  box-shadow: 0 0 0 0.2rem rgba(233, 115, 170, 0.25) !important;
}

/* Animaciones con colores de la paleta */
@keyframes colorPulse {
  0% { color: var(--ss-rosado); }
  25% { color: var(--ss-naranja); }
  50% { color: var(--ss-turquesa); }
  75% { color: var(--ss-amarillo); }
  100% { color: var(--ss-rosado); }
}

.color-pulse {
  animation: colorPulse 3s infinite;
}

/* Gradientes de fondo para secciones especiales */
.bg-gradient-ss {
  background: linear-gradient(135deg, var(--ss-morado-oscuro), #2A2943, var(--ss-morado-oscuro)) !important;
}

.bg-gradient-accent {
  background: linear-gradient(135deg, var(--ss-rosado), var(--ss-turquesa), var(--ss-azul)) !important;
}

/* Efectos hover para elementos interactivos */
.hover-color-1:hover {
  color: var(--ss-rosado) !important;
}

.hover-color-2:hover {
  color: var(--ss-naranja) !important;
}

.hover-color-3:hover {
  color: var(--ss-turquesa) !important;
}

.hover-color-4:hover {
  color: var(--ss-amarillo) !important;
}

.hover-color-5:hover {
  color: var(--ss-azul) !important;
}

/* Bordes con colores de la paleta */
.border-color-1 {
  border-color: var(--ss-rosado) !important;
}

.border-color-2 {
  border-color: var(--ss-naranja) !important;
}

.border-color-3 {
  border-color: var(--ss-turquesa) !important;
}

.border-color-4 {
  border-color: var(--ss-amarillo) !important;
}

.border-color-5 {
  border-color: var(--ss-azul) !important;
}

/* Clases de utilidad para colores */
.text-ss-rosado {
  color: var(--ss-rosado) !important;
}

.text-ss-naranja {
  color: var(--ss-naranja) !important;
}

.text-ss-turquesa {
  color: var(--ss-turquesa) !important;
}

.text-ss-amarillo {
  color: var(--ss-amarillo) !important;
}

.text-ss-azul {
  color: var(--ss-azul) !important;
}

.bg-ss-rosado {
  background-color: var(--ss-rosado) !important;
}

.bg-ss-naranja {
  background-color: var(--ss-naranja) !important;
}

.bg-ss-turquesa {
  background-color: var(--ss-turquesa) !important;
}

.bg-ss-amarillo {
  background-color: var(--ss-amarillo) !important;
}

.bg-ss-azul {
  background-color: var(--ss-azul) !important;
}

.bg-ss-morado-oscuro {
  background-color: var(--ss-morado-oscuro) !important;
}