/* ============================= */
/* MODO OSCURO AUTOMÁTICO */
/* ============================= */

@media (prefers-color-scheme: dark) {
  :root {
    --color-primary: #8FBCE6;
    --color-primary-dark: #5E9CD3;
    --color-dark: #ffffff;
    --color-black: #ffffff;
    --color-text: #e5e7eb;
    --color-muted: #aab4c3;
    --color-light: #0f172a;
    --color-white: #0b1120;
    --color-border: rgba(255, 255, 255, 0.12);

    --shadow-soft: 0 18px 60px rgba(0, 0, 0, 0.45);
    --shadow-card: 0 12px 35px rgba(0, 0, 0, 0.35);
  }

  body {
    background: #050816;
    color: #e5e7eb;
  }

  .header {
    background: rgba(5, 8, 22, 0.92);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .logo__text strong,
  .nav__link {
    color: #ffffff;
  }

  .logo__text span,
  .nav__link:hover,
  .nav__link.active {
    color: #8FBCE6;
  }

  .logo__icon {
    background: linear-gradient(135deg, #8FBCE6, #0B1F3A);
    color: #ffffff;
  }

  .btn--primary {
    background: #8FBCE6;
    color: #07162A;
    box-shadow: 0 10px 28px rgba(143, 188, 230, 0.25);
  }

  .btn--primary i {
    color: #07162A;
  }

  .btn--primary:hover {
    background: #5E9CD3;
    color: #07162A;
  }

  .btn--outline {
    background: transparent;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.18);
  }

  .btn--outline:hover {
    background: rgba(143, 188, 230, 0.12);
    border-color: #8FBCE6;
    color: #ffffff;
  }

  .btn--light {
    background: #ffffff;
    color: #07162A;
  }

  .section,
  .page-hero,
  .hero,
  .services,
  .projects,
  .posts,
  .resources,
  .quick-services,
  .faq-section,
  .contact-section,
  .newsletter,
  .featured-post,
  .about-process {
    background: #050816;
  }

  .page-hero,
  .hero {
    background:
      radial-gradient(circle at right center, rgba(143, 188, 230, 0.12), transparent 35%),
      linear-gradient(180deg, #050816 0%, #0b1120 100%);
  }

  .section-tag {
    color: #8FBCE6;
  }

  h1,
  h2,
  h3,
  .section-header h2,
  .page-hero h1,
  .hero h1 {
    color: #ffffff;
  }

  p,
  .section-header p,
  .page-hero p,
  .hero p {
    color: #aab4c3;
  }

  .service-card,
  .service-detail-card,
  .project-card,
  .portfolio-card,
  .post-card,
  .resource-card,
  .quick-service-card,
  .plan-card,
  .mission-card,
  .value-card,
  .team-card,
  .method-card,
  .deliverable-card,
  .contact-form,
  .faq-list,
  .faq-item,
  .contact-info-card,
  .newsletter__container,
  .featured-post__container,
  .about-process__container,
  .process-step,
  .blog-hero-card,
  .contact-hero-card,
  .floating-note,
  .floating-contact {
    background: #0b1120;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-card);
  }

  .service-card h3,
  .service-detail-card h3,
  .project-card h3,
  .portfolio-card h3,
  .post-card h3,
  .resource-card h3,
  .quick-service-card h3,
  .plan-card h3,
  .mission-card h3,
  .value-card h3,
  .team-card h3,
  .method-card h3,
  .deliverable-card h3,
  .contact-info-card h3,
  .faq-item summary,
  .process-step h3 {
    color: #ffffff;
  }

  .service-card p,
  .service-detail-card p,
  .project-card p,
  .portfolio-card p,
  .post-card p,
  .resource-card p,
  .quick-service-card p,
  .plan-card p,
  .mission-card p,
  .value-card p,
  .team-card p,
  .method-card p,
  .deliverable-card p,
  .contact-info-card span,
  .faq-item p,
  .process-step p {
    color: #aab4c3;
  }

  input,
  select,
  textarea {
    background: #050816;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.16);
  }

  input::placeholder,
  textarea::placeholder {
    color: #7b8797;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #8FBCE6;
    box-shadow: 0 0 0 4px rgba(143, 188, 230, 0.14);
  }

  .category-btn,
  .filter-btn {
    background: #0b1120;
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.14);
  }

  .category-btn.active,
  .category-btn:hover,
  .filter-btn.active,
  .filter-btn:hover {
    background: #8FBCE6;
    color: #07162A;
  }

  .final-cta__container {
    background: linear-gradient(135deg, #102B4C, #07162A);
  }

  .final-cta__text h2,
  .final-cta__text p {
    color: #ffffff;
  }

  .final-cta__icon {
    background: #ffffff;
    color: #07162A;
  }

  .final-cta__container .btn--light {
    background: #ffffff;
    color: #07162A;
  }

  .footer {
    background: #020617;
  }

  .footer__column h3,
  .logo--footer .logo__text strong {
    color: #ffffff;
  }

  .footer__column a,
  .footer__brand p,
  .footer__bottom p,
  .footer__bottom a {
    color: rgba(255, 255, 255, 0.68);
  }

  .footer__column a:hover,
  .footer__bottom a:hover,
  .footer__contact i {
    color: #8FBCE6;
  }

  .nav {
    background: rgba(5, 8, 22, 0.96);
  }
}
/* ============================= */
/* CORRECCIÓN FONDOS EN MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {
  html,
  body,
  main {
    background: #050816;
  }

  .hero,
  .services,
  .projects,
  .about-process,
  .testimonials-faq,
  .final-cta,
  .stats,
  .section {
    background: #050816 !important;
  }

  .final-cta {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .final-cta__container {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
  }

  .final-cta__text h2,
  .final-cta__text p {
    color: #ffffff !important;
  }

  .final-cta__icon {
    background: #ffffff !important;
    color: #07162A !important;
  }

  .final-cta__icon i {
    color: #07162A !important;
  }

  .final-cta__container .btn--light {
    background: #ffffff !important;
    color: #07162A !important;
  }

  .final-cta__container .btn--light i {
    color: #07162A !important;
  }

  .footer {
    background: #020617 !important;
  }
}
/* ============================= */
/* CORRECCIÓN TARJETAS HERO EN MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .page-hero__visual,
  .hero__visual {
    background: transparent;
  }

  .page-hero__visual .hero-card,
  .page-hero__visual .hero-stat,
  .page-hero__visual .floating-card,
  .page-hero__visual .floating-note,
  .page-hero__visual .floating-contact,
  .page-hero__visual .service-hero-card,
  .page-hero__visual .services-hero-card,
  .page-hero__visual .contact-hero-card,
  .page-hero__visual .blog-hero-card,
  .page-hero__visual [class*="card"],
  .page-hero__visual [class*="stat"] {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.22) !important;
    color: #ffffff !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35) !important;
  }

  .page-hero__visual h2,
  .page-hero__visual h3,
  .page-hero__visual h4,
  .page-hero__visual p,
  .page-hero__visual span,
  .page-hero__visual strong,
  .page-hero__visual small,
  .page-hero__visual i {
    color: #ffffff !important;
  }

  .page-hero__visual p,
  .page-hero__visual small,
  .page-hero__visual span:not(.logo__text span) {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  .page-hero__visual .hero-card__icon,
  .page-hero__visual .service-hero-card__icon,
  .page-hero__visual .contact-hero-card__icon,
  .page-hero__visual .blog-hero-card__icon,
  .page-hero__visual [class*="icon"] {
    background: rgba(143, 188, 230, 0.14) !important;
    color: #8FBCE6 !important;
  }

  .page-hero__visual [class*="icon"] i {
    color: #8FBCE6 !important;
  }

}
/* ============================= */
/* CORRECCIÓN PROCESO DE TRABAJO EN MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .mini-process,
  .work-process,
  .process-section,
  .services-process {
    background: #050816 !important;
  }

  .mini-process .section-header h2,
  .work-process .section-header h2,
  .process-section .section-header h2,
  .services-process .section-header h2 {
    color: #ffffff !important;
  }

  .mini-process .section-tag,
  .work-process .section-tag,
  .process-section .section-tag,
  .services-process .section-tag {
    color: #8FBCE6 !important;
  }

  .mini-process__grid article,
  .mini-process-card,
  .process-card,
  .process-step-card,
  .work-process-card,
  .services-process-card {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.22) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35) !important;
  }

  .mini-process__grid article span,
  .mini-process-card span,
  .process-card span,
  .process-step-card span,
  .work-process-card span,
  .services-process-card span {
    color: #8FBCE6 !important;
  }

  .mini-process__grid article h3,
  .mini-process-card h3,
  .process-card h3,
  .process-step-card h3,
  .work-process-card h3,
  .services-process-card h3 {
    color: #ffffff !important;
  }

  .mini-process__grid article p,
  .mini-process-card p,
  .process-card p,
  .process-step-card p,
  .work-process-card p,
  .services-process-card p {
    color: #cbd5e1 !important;
  }
}
/* ============================= */
/* ARREGLO FUERTE - CUADROS BLANCOS EN SERVICIOS */
/* ============================= */

@media (prefers-color-scheme: dark) {

  /* Fondo de toda la sección */
  .mini-process,
  .process-section,
  .work-process,
  .services-process,
  .steps-section {
    background: #050816 !important;
  }

  /* Cualquier contenedor de pasos dentro de servicios */
  .mini-process__grid > *,
  .process__grid > *,
  .steps__grid > *,
  .work-process__grid > *,
  .services-process__grid > *,
  .process-cards > *,
  .steps-cards > *,
  .mini-process article,
  .process-section article,
  .work-process article,
  .services-process article,
  .steps-section article {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
  }

  /* Números */
  .mini-process__grid > * span,
  .process__grid > * span,
  .steps__grid > * span,
  .work-process__grid > * span,
  .services-process__grid > * span,
  .process-cards > * span,
  .steps-cards > * span,
  .mini-process article span,
  .process-section article span,
  .work-process article span,
  .services-process article span,
  .steps-section article span {
    color: #8FBCE6 !important;
  }

  /* Títulos de las tarjetas */
  .mini-process__grid > * h3,
  .process__grid > * h3,
  .steps__grid > * h3,
  .work-process__grid > * h3,
  .services-process__grid > * h3,
  .process-cards > * h3,
  .steps-cards > * h3,
  .mini-process article h3,
  .process-section article h3,
  .work-process article h3,
  .services-process article h3,
  .steps-section article h3 {
    color: #ffffff !important;
  }

  /* Textos de las tarjetas */
  .mini-process__grid > * p,
  .process__grid > * p,
  .steps__grid > * p,
  .work-process__grid > * p,
  .services-process__grid > * p,
  .process-cards > * p,
  .steps-cards > * p,
  .mini-process article p,
  .process-section article p,
  .work-process article p,
  .services-process article p,
  .steps-section article p {
    color: #cbd5e1 !important;
  }
}
/* ============================= */
/* CORRECCIÓN RESULTADOS / ESTADÍSTICAS EN MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .results,
  .results-section,
  .stats,
  .stats-section {
    background: #050816 !important;
  }

  .results__grid > *,
  .results-grid > *,
  .stats__grid > *,
  .stats-grid > *,
  .result-card,
  .results-card,
  .stat-card,
  .stat-item,
  .result-number {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.4) !important;
    color: #ffffff !important;
  }

  .results__grid > * h3,
  .results-grid > * h3,
  .stats__grid > * h3,
  .stats-grid > * h3,
  .result-card h3,
  .results-card h3,
  .stat-card h3,
  .stat-item h3,
  .result-number h3,
  .result-number strong {
    color: #8FBCE6 !important;
  }

  .results__grid > * p,
  .results-grid > * p,
  .stats__grid > * p,
  .stats-grid > * p,
  .result-card p,
  .results-card p,
  .stat-card p,
  .stat-item p,
  .result-number p,
  .result-number span {
    color: #cbd5e1 !important;
  }
}
/* ============================= */
/* ARREGLO FINAL CHIPS NOSOTROS */
/* ============================= */

@media (prefers-color-scheme: dark) {

  /* Primero quitamos el fondo raro del texto interno */
  .who-we-are span,
  .who-we-are strong,
  .who-we-are b,
  .about-content span,
  .about-content strong,
  .about-content b {
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Ahora damos estilo a la pastilla completa */
  .who-we-are span:has(i),
  .about-content span:has(i),
  .who-we-are li:has(i),
  .about-content li:has(i),
  .who-we-are div:has(> i),
  .about-content div:has(> i) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;

    padding: 13px 18px !important;

    background: #102B4C !important;
    color: #ffffff !important;

    border: 1px solid rgba(143, 188, 230, 0.35) !important;
    border-radius: 999px !important;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
  }

  /* Texto dentro de la pastilla */
  .who-we-are span:has(i) *,
  .about-content span:has(i) *,
  .who-we-are li:has(i) *,
  .about-content li:has(i) *,
  .who-we-are div:has(> i) *,
  .about-content div:has(> i) * {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  /* Palomita */
  .who-we-are span:has(i) i,
  .about-content span:has(i) i,
  .who-we-are li:has(i) i,
  .about-content li:has(i) i,
  .who-we-are div:has(> i) i,
  .about-content div:has(> i) i {
    color: #8FBCE6 !important;
  }
}/* ============================= */
/* CORRECCIÓN HERO PROCESO MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .process-hero-card {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45) !important;
  }

  .process-hero-card h3,
  .process-hero-card p {
    color: #ffffff !important;
  }

  .process-hero-card p {
    color: #cbd5e1 !important;
  }

  .process-hero-card__icon {
    background: rgba(143, 188, 230, 0.15) !important;
    color: #8FBCE6 !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .process-hero-card__icon i {
    color: #8FBCE6 !important;
  }

  .floating-step {
    background: #102B4C !important;
    border: 1px solid rgba(143, 188, 230, 0.3) !important;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.4) !important;
  }

  .floating-step strong,
  .floating-step span,
  .floating-step p {
    color: #ffffff !important;
  }

  .floating-step strong {
    color: #8FBCE6 !important;
  }

  .floating-step span,
  .floating-step p {
    color: #dbeafe !important;
  }

  .process-hero-card__bars span,
  .process-hero-card .bar,
  .process-hero-card [class*="bar"] {
    background: #8FBCE6 !important;
  }
}/* ============================= */
/* CORRECCIÓN CATEGORÍAS BLOG MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .categories {
    background: #050816 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .categories__container {
    background: transparent !important;
  }

  .category-btn {
    background: #0B1120 !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .category-btn:hover,
  .category-btn.active {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
  }

  .category-btn:hover i,
  .category-btn.active i {
    color: #07162A !important;
  }
}/* ============================= */
/* CORRECCIÓN TAGS DEL HERO BLOG EN MODO OSCURO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .blog-hero-card__tags span {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border: 1px solid #8FBCE6 !important;
    font-weight: 900 !important;
  }

  .blog-hero-card__tags span * {
    color: #07162A !important;
  }

  .blog-hero-card {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .blog-hero-card h3 {
    color: #ffffff !important;
  }

  .blog-hero-card p {
    color: #cbd5e1 !important;
  }

  .floating-note {
    background: #102B4C !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .floating-note span {
    color: #ffffff !important;
  }

  .floating-note i {
    background: rgba(143, 188, 230, 0.14) !important;
    color: #8FBCE6 !important;
  }
}
/* ===================================================== */
/* PARCHE FINAL PARA THEME.CSS - MODO OSCURO */
/* SOCIALITY WEBS */
/* ===================================================== */

@media (prefers-color-scheme: dark) {

  /* ============================= */
  /* FONDO GENERAL */
  /* ============================= */

  html,
  body,
  main {
    background: #050816 !important;
    color: #e5e7eb !important;
  }

  section,
  .section,
  .hero,
  .page-hero,
  .services,
  .projects,
  .posts,
  .resources,
  .quick-services,
  .faq-section,
  .contact-section,
  .newsletter,
  .featured-post,
  .about-process,
  .final-cta,
  .categories,
  .stats,
  .results,
  .mini-process,
  .process-section,
  .work-process,
  .services-process,
  .steps-section,
  .testimonials-faq {
    background: #050816 !important;
  }


  /* ============================= */
  /* HEADER */
  /* ============================= */

  .header {
    background: rgba(5, 8, 22, 0.96) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .nav__link {
    color: #ffffff !important;
  }

  .nav__link:hover,
  .nav__link.active {
    color: #8FBCE6 !important;
  }

  .nav__link.active::after {
    background: #8FBCE6 !important;
  }

  .logo__icon {
    background: linear-gradient(135deg, #8FBCE6, #0B1F3A) !important;
    color: #ffffff !important;
  }

  .logo__text strong {
    color: #ffffff !important;
  }

  .logo__text span {
    color: #8FBCE6 !important;
  }


  /* ============================= */
  /* TEXTOS GENERALES */
  /* ============================= */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  .section-header h2,
  .page-hero h1,
  .hero h1 {
    color: #ffffff !important;
  }

  p,
  .section-header p,
  .page-hero p,
  .hero p {
    color: #cbd5e1 !important;
  }

  .section-tag {
    color: #8FBCE6 !important;
  }


  /* ============================= */
  /* BOTONES */
  /* ============================= */

  .btn--primary {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
    box-shadow: 0 10px 28px rgba(143, 188, 230, 0.24) !important;
  }

  .btn--primary,
  .btn--primary *,
  .btn--primary i {
    color: #07162A !important;
  }

  .btn--outline {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
  }

  .btn--outline:hover {
    background: rgba(143, 188, 230, 0.12) !important;
    color: #ffffff !important;
    border-color: #8FBCE6 !important;
  }

  .btn--light,
  .btn--light *,
  .btn--light i {
    background: #ffffff !important;
    color: #07162A !important;
  }


  /* ============================= */
  /* TARJETAS Y CUADROS GENERALES */
  /* ============================= */

  .service-card,
  .service-detail-card,
  .project-card,
  .portfolio-card,
  .post-card,
  .resource-card,
  .quick-service-card,
  .plan-card,
  .mission-card,
  .value-card,
  .team-card,
  .method-card,
  .deliverable-card,
  .contact-form,
  .faq-list,
  .faq-item,
  .contact-info-card,
  .newsletter__container,
  .featured-post__container,
  .about-process__container,
  .process-step,
  .blog-hero-card,
  .contact-hero-card,
  .process-hero-card,
  .floating-note,
  .floating-contact,
  .floating-step,
  .result-card,
  .results-card,
  .stat-card,
  .stat-item,
  .result-number,
  .timeline-item,
  .timeline-content,
  .type-card,
  .benefit-item {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
    color: #ffffff !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35) !important;
  }

  .service-card h3,
  .service-detail-card h3,
  .project-card h3,
  .portfolio-card h3,
  .post-card h3,
  .resource-card h3,
  .quick-service-card h3,
  .plan-card h3,
  .mission-card h3,
  .value-card h3,
  .team-card h3,
  .method-card h3,
  .deliverable-card h3,
  .contact-info-card h3,
  .faq-item summary,
  .process-step h3,
  .blog-hero-card h3,
  .contact-hero-card h3,
  .process-hero-card h3,
  .timeline-content h3,
  .type-card h3,
  .benefit-item h3 {
    color: #ffffff !important;
  }

  .service-card p,
  .service-detail-card p,
  .project-card p,
  .portfolio-card p,
  .post-card p,
  .resource-card p,
  .quick-service-card p,
  .plan-card p,
  .mission-card p,
  .value-card p,
  .team-card p,
  .method-card p,
  .deliverable-card p,
  .contact-info-card span,
  .faq-item p,
  .process-step p,
  .blog-hero-card p,
  .contact-hero-card p,
  .process-hero-card p,
  .timeline-content p,
  .type-card p,
  .benefit-item p {
    color: #cbd5e1 !important;
  }


  /* ============================= */
  /* CUADROS FLOTANTES DE HERO */
  /* ============================= */

  .page-hero__visual [class*="card"],
  .page-hero__visual [class*="stat"],
  .page-hero__visual .floating-note,
  .page-hero__visual .floating-contact,
  .page-hero__visual .floating-step {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
    color: #ffffff !important;
  }

  .page-hero__visual [class*="card"] *,
  .page-hero__visual [class*="stat"] *,
  .page-hero__visual .floating-note *,
  .page-hero__visual .floating-contact *,
  .page-hero__visual .floating-step * {
    color: #ffffff !important;
  }

  .floating-step strong,
  .result-number h3,
  .result-number strong,
  .stat-card h3,
  .stat-item h3 {
    color: #8FBCE6 !important;
  }


  /* ============================= */
  /* ICONOS */
  /* ============================= */

  [class*="icon"],
  [class*="icon"] i,
  .footer__contact i,
  .post-meta i {
    color: #8FBCE6 !important;
  }


  /* ============================= */
  /* BLOG: CATEGORÍAS Y ETIQUETAS */
  /* ============================= */

  .categories {
    background: #050816 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  }

  .category-btn,
  .filter-btn {
    background: #0B1120 !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .category-btn.active,
  .category-btn:hover,
  .filter-btn.active,
  .filter-btn:hover {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
  }

  .category-btn.active *,
  .category-btn:hover *,
  .filter-btn.active *,
  .filter-btn:hover * {
    color: #07162A !important;
  }

  .blog-hero-card__tags span,
  .post-card__image span {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
  }

  .blog-hero-card__tags span *,
  .post-card__image span * {
    color: #07162A !important;
  }


  /* ============================= */
  /* NOSOTROS: CHIPS / PALOMITAS */
  /* ============================= */

  .who-we-are__features span,
  .who-we-are__tags span,
  .about-tags span,
  .about-badges span,
  .feature-tags span,
  .about-checks span,
  .check-list span,
  .tags span {
    background: #102B4C !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.35) !important;
    box-shadow: none !important;
  }

  .who-we-are__features span *,
  .who-we-are__tags span *,
  .about-tags span *,
  .about-badges span *,
  .feature-tags span *,
  .about-checks span *,
  .check-list span *,
  .tags span * {
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
  }

  .who-we-are__features span i,
  .who-we-are__tags span i,
  .about-tags span i,
  .about-badges span i,
  .feature-tags span i,
  .about-checks span i,
  .check-list span i,
  .tags span i {
    color: #8FBCE6 !important;
  }


  /* ============================= */
  /* FORMULARIOS */
  /* ============================= */

  input,
  select,
  textarea {
    background: #0B1120 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.16) !important;
  }

  input::placeholder,
  textarea::placeholder {
    color: #7b8797 !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #8FBCE6 !important;
    box-shadow: 0 0 0 4px rgba(143, 188, 230, 0.14) !important;
  }


  /* ============================= */
  /* CTA FINAL */
  /* ============================= */

  .final-cta {
    background: #050816 !important;
  }

  .final-cta__container {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .final-cta__text h2,
  .final-cta__text p {
    color: #ffffff !important;
  }

  .final-cta__icon {
    background: #ffffff !important;
    color: #07162A !important;
  }

  .final-cta__icon i {
    color: #07162A !important;
  }

  .final-cta__container .btn--light,
  .final-cta__container .btn--light * {
    background: #ffffff !important;
    color: #07162A !important;
  }


  /* ============================= */
  /* FOOTER */
  /* ============================= */

  .footer {
    background: #020617 !important;
  }

  .footer__column h3,
  .logo--footer .logo__text strong {
    color: #ffffff !important;
  }

  .footer__column a,
  .footer__brand p,
  .footer__bottom p,
  .footer__bottom a {
    color: rgba(255, 255, 255, 0.72) !important;
  }

  .footer__column a:hover,
  .footer__bottom a:hover,
  .footer__contact i {
    color: #8FBCE6 !important;
  }

  .footer__social a {
    color: rgba(255, 255, 255, 0.85) !important;
  }

  .footer__social a:hover {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
  }

  .footer__social a:hover i {
    color: #07162A !important;
  }
}/* ============================= */
/* PARCHE: TEXTO OSCURO EN TAGS CLAROS DEL BLOG */
/* ============================= */

@media (prefers-color-scheme: dark) {
  .blog-hero-card__tags span,
  .blog-hero-card__tags span a,
  .blog-hero-card__tags span strong,
  .blog-hero-card__tags span small,
  .blog-hero-card__tags span p,
  .blog-hero-card__tags span * {
    color: #07162A !important;
  }

  .blog-hero-card__tags span {
    background: #8FBCE6 !important;
    border: 1px solid #8FBCE6 !important;
    font-weight: 800 !important;
  }
}
/* ============================= */
/* PARCHE DEFINITIVO TAGS BLOG */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .page-hero__visual .blog-hero-card .blog-hero-card__tags span {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border: 1px solid #8FBCE6 !important;
    font-weight: 900 !important;
    text-shadow: none !important;
  }

  .page-hero__visual .blog-hero-card .blog-hero-card__tags span * {
    color: #07162A !important;
    background: transparent !important;
    text-shadow: none !important;
  }

}
/* ============================= */
/* PARCHE CONTACTO - CUADROS DEL HERO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .contact-hero-card__info span {
    background: #102B4C !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.35) !important;
    box-shadow: none !important;
  }

  .contact-hero-card__info span i {
    color: #8FBCE6 !important;
    background: transparent !important;
  }

  .contact-hero-card__info span * {
    color: inherit !important;
    background: transparent !important;
  }

  .contact-hero-card {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    border: 1px solid rgba(143, 188, 230, 0.25) !important;
  }

  .contact-hero-card h3 {
    color: #ffffff !important;
  }

  .contact-hero-card p {
    color: #cbd5e1 !important;
  }

  .floating-contact {
    background: #102B4C !important;
    border: 1px solid rgba(143, 188, 230, 0.35) !important;
  }

  .floating-contact strong {
    color: #ffffff !important;
  }

  .floating-contact span {
    color: #cbd5e1 !important;
  }

  .floating-contact i {
    color: #8FBCE6 !important;
    background: rgba(143, 188, 230, 0.14) !important;
  }
}/* ============================= */
/* PARCHE CONTACTO - BLOQUE SÍGUENOS */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .contact-social {
    background: linear-gradient(135deg, #102B4C, #07162A) !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.3) !important;
    box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35) !important;
  }

  .contact-social h3 {
    color: #ffffff !important;
  }

  .contact-social a {
    background: rgba(143, 188, 230, 0.12) !important;
    color: #ffffff !important;
    border: 1px solid rgba(143, 188, 230, 0.3) !important;
  }

  .contact-social a i {
    color: #8FBCE6 !important;
    background: transparent !important;
  }

  .contact-social a:hover {
    background: #8FBCE6 !important;
    color: #07162A !important;
    border-color: #8FBCE6 !important;
  }

  .contact-social a:hover i {
    color: #07162A !important;
  }
}
/* ============================= */
/* PARCHE PROYECTOS - TAGS 2025 / CATÁLOGO */
/* ============================= */

@media (prefers-color-scheme: dark) {

  .portfolio-card__meta span,
  .project-card__meta span,
  .project-meta span,
  .portfolio-meta span,
  .card-meta span,
  .portfolio-card span,
  .project-card span {
    color: #07162A !important;
  }

  .portfolio-card__meta span,
  .project-card__meta span,
  .project-meta span,
  .portfolio-meta span,
  .card-meta span {
    background: #8FBCE6 !important;
    border: 1px solid #8FBCE6 !important;
    color: #07162A !important;
    font-weight: 800 !important;
  }

  .portfolio-card__meta span i,
  .project-card__meta span i,
  .project-meta span i,
  .portfolio-meta span i,
  .card-meta span i {
    color: #07162A !important;
    background: transparent !important;
  }

  .portfolio-card__content a,
  .project-card__content a,
  .portfolio-card a,
  .project-card a {
    color: #ffffff !important;
  }

  .portfolio-card__content a i,
  .project-card__content a i,
  .portfolio-card a i,
  .project-card a i {
    color: #8FBCE6 !important;
  }
}/* ===================================================== */
/* PARCHE MODO CLARO - GRIS AZULADO ELEGANTE */
/* ===================================================== */

@media (prefers-color-scheme: light) {

  html,
  body,
  main {
    background: #F3F6FB !important;
    color: #111827 !important;
  }

  section,
  .section,
  .hero,
  .page-hero,
  .services,
  .projects,
  .posts,
  .resources,
  .quick-services,
  .faq-section,
  .contact-section,
  .newsletter,
  .featured-post,
  .about-process,
  .categories,
  .stats,
  .results,
  .mini-process,
  .process-section,
  .work-process,
  .services-process,
  .steps-section,
  .testimonials-faq {
    background: #F3F6FB !important;
  }

  .header {
    background: rgba(243, 246, 251, 0.92) !important;
    border-bottom: 1px solid #DDE5F0 !important;
  }

  .hero,
  .page-hero {
    background:
      radial-gradient(circle at right center, rgba(11, 31, 58, 0.08), transparent 35%),
      linear-gradient(180deg, #F8FAFC 0%, #EEF3F9 100%) !important;
  }

  .service-card,
  .service-detail-card,
  .project-card,
  .portfolio-card,
  .post-card,
  .resource-card,
  .quick-service-card,
  .plan-card,
  .mission-card,
  .value-card,
  .team-card,
  .method-card,
  .deliverable-card,
  .contact-form,
  .faq-list,
  .faq-item,
  .contact-info-card,
  .newsletter__container,
  .featured-post__container,
  .about-process__container,
  .process-step,
  .blog-hero-card,
  .contact-hero-card,
  .process-hero-card,
  .floating-note,
  .floating-contact,
  .floating-step,
  .result-card,
  .results-card,
  .stat-card,
  .stat-item,
  .result-number,
  .timeline-item,
  .timeline-content,
  .type-card,
  .benefit-item {
    background: #FFFFFF !important;
    border: 1px solid #DDE5F0 !important;
    box-shadow: 0 18px 45px rgba(11, 31, 58, 0.08) !important;
  }

  .categories {
    background: #EAF0F8 !important;
    border-top: 1px solid #DDE5F0 !important;
    border-bottom: 1px solid #DDE5F0 !important;
  }

  .category-btn,
  .filter-btn {
    background: #FFFFFF !important;
    border: 1px solid #DDE5F0 !important;
    color: #0B1F3A !important;
  }

  .category-btn.active,
  .category-btn:hover,
  .filter-btn.active,
  .filter-btn:hover {
    background: #0B1F3A !important;
    color: #FFFFFF !important;
    border-color: #0B1F3A !important;
  }

  input,
  select,
  textarea {
    background: #FFFFFF !important;
    border-color: #DDE5F0 !important;
    color: #111827 !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    border-color: #0B1F3A !important;
    box-shadow: 0 0 0 4px rgba(11, 31, 58, 0.12) !important;
  }

  .final-cta {
    background: #F3F6FB !important;
  }

  .final-cta__container {
    background: linear-gradient(135deg, #12345A, #0B1F3A) !important;
    box-shadow: 0 24px 60px rgba(11, 31, 58, 0.18) !important;
  }

  .final-cta__text h2,
  .final-cta__text p {
    color: #FFFFFF !important;
  }

  .final-cta__container .btn--light {
    background: #FFFFFF !important;
    color: #0B1F3A !important;
  }

  .footer {
    background: #030712 !important;
  }
}/* ============================= */
/* LOGO CON IMAGEN SOCIALITY */
/* ============================= */

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo__image {
  width: 44px;
  height: 44px;

  border-radius: 14px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #050816;

  box-shadow: 0 12px 28px rgba(11, 31, 58, 0.25);
}

.logo__image img {
  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  display: block;
}

.logo__text strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
}

.logo__text span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2.2px;
}
/* ===================================================== */
/* ARREGLO REAL NEWSLETTER BLOG */
/* Pegar al FINAL de theme.css */
/* ===================================================== */

.blog-page .posts,
.posts.section {
  padding-bottom: 35px !important;
}

.newsletter {
  display: block !important;
  padding: 25px 0 80px !important;
  margin: 0 !important;
  background: #EEF3F9 !important;
}

.newsletter .container {
  width: min(1180px, 92%) !important;
  margin: 0 auto !important;
}

.newsletter__container {
  display: grid !important;
  grid-template-columns: 1.1fr 0.9fr !important;
  align-items: center !important;
  gap: 45px !important;

  width: 100% !important;
  margin: 0 auto !important;
  padding: 55px !important;

  background: #ffffff !important;
  border: 1px solid #D8E2EE !important;
  border-radius: 28px !important;

  box-shadow: 0 24px 60px rgba(11, 31, 58, 0.10) !important;
}

.newsletter__content {
  display: block !important;
}

.newsletter__content .section-tag {
  display: inline-block !important;
  margin-bottom: 18px !important;
  color: #0B1F3A !important;
}

.newsletter__content h2 {
  font-family: var(--font-title) !important;
  font-size: clamp(34px, 4vw, 54px) !important;
  line-height: 1.05 !important;
  color: #07162A !important;
  margin-bottom: 18px !important;
}

.newsletter__content p {
  max-width: 520px !important;
  color: #405066 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  margin: 0 !important;
}

.newsletter__form {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
}

.newsletter__form input[type="email"] {
  flex: 1 !important;
  height: 58px !important;

  padding: 0 20px !important;

  background: #F8FAFC !important;
  border: 1px solid #D8E2EE !important;
  border-radius: 14px !important;

  font-size: 15px !important;
  color: #07162A !important;
}

.newsletter__form button {
  height: 58px !important;
  white-space: nowrap !important;
}

/* Notificación */
.newsletter-notification {
  position: fixed !important;
  left: 50% !important;
  bottom: 30px !important;

  transform: translateX(-50%) translateY(30px) !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 16px 22px !important;

  background: #0B1F3A !important;
  color: #ffffff !important;

  border-radius: 16px !important;

  font-size: 15px !important;
  font-weight: 700 !important;

  box-shadow: 0 18px 45px rgba(11, 31, 58, 0.28) !important;

  opacity: 0 !important;
  pointer-events: none !important;

  z-index: 99999 !important;

  transition: all 0.3s ease !important;
}

.newsletter-notification--show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.newsletter-notification i {
  color: #8FBCE6 !important;
  font-size: 18px !important;
}

.newsletter-notification--error {
  background: #991b1b !important;
}

.newsletter-notification--error i {
  color: #fecaca !important;
}

/* Responsive */
@media (max-width: 850px) {
  .posts.section {
    padding-bottom: 25px !important;
  }

  .newsletter {
    padding: 20px 0 65px !important;
  }

  .newsletter__container {
    grid-template-columns: 1fr !important;
    padding: 34px 24px !important;
    gap: 28px !important;
  }

  .newsletter__form {
    flex-direction: column !important;
  }

  .newsletter__form input,
  .newsletter__form button {
    width: 100% !important;
  }
}
/* ============================= */
/* LOGO REAL EN HEADER Y FOOTER */
/* ============================= */

.logo__image,
.logo__image--footer {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;
  background: #000;
  box-shadow: 0 10px 24px rgba(11, 31, 58, 0.22);
}

.logo__image img,
.logo__image--footer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Oculta el icono viejo si todavía existe */
.logo__icon {
  display: none !important;
}

.logo--footer .logo__text strong {
  color: #ffffff !important;
}

.logo--footer .logo__text span {
  color: #8FBCE6 !important;
}