/* ===== VARIABLES CSS ===== */
:root {
  --turquesa: #308A9E;
  --cerulean: #1F75AE;
  --ruby: #CD3334;
  --verde: #25D366;
  --naranja: #E28413;
  --gold: #D5A838;
  --smoke: #F3F2F1;
  --negro: #000;
}

/* ===== RESET Y ESTILOS GLOBALES ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* Asegurar que las imágenes escalen en pantallas pequeñas */
.navbar-logo, .footer-logo, img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ===== EFECTO DEL LOGO ===== */
/* Efecto Glitch para desktop (hover) */
@media (hover: hover) {
  .navbar-logo:hover {
    animation: glitch 0.3s linear infinite;
  }
}

/* Efecto Glitch para móviles (active/tap) */
@media (hover: none) {
  .navbar-logo:active {
    animation: glitch 0.3s linear 2; /* 2 ciclos al tocar */
  }
}

/* Animación Glitch (personalizada con tus colores) */
@keyframes glitch {
  0% {
    filter: drop-shadow(-2px 0 #CD3334);
    transform: translateX(0);
  }
  25% {
    filter: drop-shadow(2px 0 #E28413);
    transform: translateX(-2px);
  }
  50% {
    filter: drop-shadow(-2px 0 #CD3334);
    transform: translateX(2px);
  }
  75% {
    filter: drop-shadow(2px 0 #E28413);
    transform: translateX(0);
  }
  100% {
    filter: none;
  }
}

/* ===== BARRA DE NAVEGACIÓN ===== */
/* Estilos generales de la barra de navegación */
.navbar {
  width: 100%;
  background-color: #F3F3F3;
  border-bottom: 5px solid black;
  padding: 0.5rem;
}

.navbar-brand {
  font-size: 1.8rem;
  font-weight: bold;
  padding: 0.5rem 1rem;
  margin-left: 0.5rem;
}

/* Icono del toggler */
.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background: no-repeat center center;
  background-size: 100% 100%;
  font-size: 1.5rem;
  line-height: 1;
}

/* Solución para cierre en móviles */
.navbar-collapse.show {
  transition: all 0.3s ease;
}

/* Enlaces del menú */
.navbar-nav .nav-link {
  font-family: 'Matter SQ Regular', sans-serif;
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  padding: 1rem 1.5rem;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: #E28413;
  background-color: rgba(0, 0, 0, 0.05);
  transform: scale(1.05);
}

/* ===== DROPDOWN ===== */
/* Estilos del dropdown */
.dropdown-menu {
  background-color: #CD3334;
  border: 4px solid black !important;
  padding: 0;
  margin-top: 5px;
  transform: scale(0.98);
  transform-origin: top center;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1.1);
  box-shadow: 6px 6px 0px rgba(0,0,0,0.3);
}

/* Mostrar dropdown al hacer hover (solo en desktop) */
@media (min-width: 992px) {
  .dropdown:hover .dropdown-menu {
    display: block;
    transform: scale(1);
    box-shadow: 8px 8px 0px rgba(0,0,0,0.4);
  }
}

/* Items del dropdown */
.dropdown-item {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  transition: all 0.3s ease;
  border-bottom: 3px solid black;
  position: relative;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: #060606;
  color: #ffffff;
  transform: scale(1.02);
  z-index: 1;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

/* ===== BOTÓN WHATSAPP ===== */
.btn-whatsapp {
  background-color: transparent;
  color: #25D366;
  font-weight: bold;
  border: 4px solid #25D366;
  padding: 0.8rem 1.2rem;
  font-size: 1.2rem;
  margin-left: auto;
  margin-right: 1rem;
  border-radius: 0;
  transition: all 0.3s ease;
}

.btn-whatsapp:hover {
  background-color: #25D366;
  color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 991.98px) {
  .navbar-collapse {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    background-color: #F3F3F3;
    z-index: 1000;
    padding: 15px;
    border-bottom: 5px solid black;
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    transform: translateY(-150%);
    transition: transform 0.3s ease-out;
  }
  
  .navbar-collapse.show {
    transform: translateY(0);
  }
  
  .navbar-nav .nav-link {
    padding: 0.8rem 1rem;
  }
  
  .dropdown-menu {
    position: static !important;
    transform: none !important;
    float: none;
    width: 100%;
    margin-top: 0;
  }
  
  .btn-whatsapp {
    margin: 15px 0 0 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .navbar-brand, .nav-link, .btn-whatsapp {
    font-size: 1rem;
  }
  
  .navbar-brand img {
    max-height: 40px;
  }
}

/* ------------------------ FIN - Menú  ------------------------ */

/* ===== 1. BREADCRUMB ===== */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-family: 'Matter SQ Regular', sans-serif;
  margin-bottom: 20px;
}

.breadcrumb a {
  color: var(--turquesa);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb i {
  font-size: 12px;
  color: #666;
}

.breadcrumb span {
  color: #000;
  font-weight: 700;
}

/* ===== 2. HERO SUBPÁGINA ===== */
.servicio-hero {
  background: linear-gradient(135deg, var(--turquesa) 0%, var(--cerulean) 100%);
  padding: 60px 20px;
  border-bottom: 5px solid #000;
}

.servicio-hero-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
}

.servicio-badge {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 8px 20px;
  font-size: 0.8rem;
  font-weight: 900;
  text-transform: uppercase;
  font-family: "Hakuna Sans";
  border: 3px solid #000;
  margin-bottom: 25px;
  letter-spacing: 1px;
}

.servicio-titulo-1 {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  font-family: "Hakuna Sans";
  margin-bottom: 20px;
  text-transform: uppercase;
  line-height: 1.2;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.titulo-subline {
  display: block;
  font-size: 2rem;
  color: var(--gold);
  margin-top: 5px;
}

.servicio-subtitulo {
  font-size: 1.3rem;
  color: #fff;
  font-family: 'Matter SQ Regular', sans-serif;
  margin-bottom: 40px;
  line-height: 1.5;
}

.servicio-subtitulo strong {
  font-weight: 900;
  font-family: "Hakuna Sans";
}

/* Métricas hero */
.hero-metricas {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.metrica-item {
  background-color: rgba(255,255,255,0.15);
  border: 3px solid rgba(0,0,0,0.2);
  padding: 20px 25px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
  text-align: center;
  min-width: 140px;
}

.metrica-item.metrica-destacada {
  border-color: var(--gold);
  background-color: rgba(213,168,56,0.2);
}

.metrica-numero {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  font-family: "Hakuna Sans";
  line-height: 1;
  margin-bottom: 8px;
}

.metrica-super {
  font-size: 1.5rem;
  vertical-align: super;
  margin-left: 2px;
}

.metrica-label {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.95);
  text-transform: uppercase;
  font-family: 'Matter SQ Regular', sans-serif;
  font-weight: 600;
}

/* CTAs Hero */
.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-hero-primary,
.btn-hero-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  font-size: 1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Hakuna Sans";
  border: 4px solid #000;
  box-shadow: 5px 5px 0px #000;
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-hero-primary {
  background-color: var(--verde);
  color: #000;
}

.btn-hero-secondary {
  background-color: #fff;
  color: #000;
}

.btn-hero-primary:hover,
.btn-hero-secondary:hover {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0px #000;
}

.btn-hero-primary:hover {
  background-color: #1da851;
}

.btn-hero-secondary:hover {
  background-color: var(--smoke);
}

/* ===== RESPONSIVE HERO ===== */
@media (max-width: 768px) {
  .servicio-hero {
    padding: 40px 15px;
  }
  
  .servicio-titulo-1 {
    font-size: 2rem;
  }
  
  .titulo-subline {
    font-size: 1.6rem;
  }
  
  .servicio-subtitulo {
    font-size: 1.1rem;
  }
  
  .hero-metricas {
    gap: 10px;
  }
  
  .metrica-item {
    min-width: 120px;
    padding: 15px 10px;
  }
  
  .metrica-numero {
    font-size: 2rem;
  }
  
  .btn-hero-primary,
  .btn-hero-secondary {
    padding: 14px 24px;
    font-size: 0.9rem;
  }
}





/* ===== FIN -  BREADCRUMB ===== */






/* ===== 2. SECCIÓN METODOLOGÍA ===== */
.metodologia-section {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.metodologia-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #2c3e50, #3498db, #2c3e50);
}

.metodologia-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Encabezado */
.metodologia-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.badge-metodologia {
    display: inline-block;
    background: linear-gradient(135deg, #2c3e50, #3498db);
    color: white;
    padding: 8px 20px;
    border-radius: 30px;
    font-family: "Hakuna Sans", sans-serif;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    border: 2px solid white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.metodologia-titulo {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    font-weight: 900;
    color: #2c3e50;
    font-family: "Hakuna Sans", sans-serif;
    margin-bottom: 20px;
    line-height: 1.2;
    text-transform: uppercase;
}

.metodologia-intro {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #5a6c7d;
    max-width: 800px;
    margin: 0 auto;
    font-family: 'Matter SQ Regular', 'Segoe UI', sans-serif;
}

.metodologia-intro strong {
    color: #2c3e50;
    font-weight: 900;
}

.metodologia-intro em {
    font-style: italic;
    color: #3498db;
    font-weight: 600;
}

/* Acordeón de Capas */
.capas-acordeon {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.capa-item {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.capa-item:hover {
    border-color: #3498db;
    box-shadow: 0 8px 25px rgba(52, 152, 219, 0.15);
}

.capa-item.capa-activa {
    border-color: #3498db;
    box-shadow: 0 8px 30px rgba(52, 152, 219, 0.2);
}

.capa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 25px 30px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.capa-header:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
}

.capa-numero {
    font-size: 2.5rem;
    font-weight: 900;
    color: #3498db;
    font-family: "Hakuna Sans", sans-serif;
    min-width: 60px;
    line-height: 1;
}

.capa-info {
    flex: 1;
    padding: 0 20px;
}

.capa-titulo {
    font-size: 1.5rem;
    font-weight: 900;
    color: #2c3e50;
    font-family: "Hakuna Sans", sans-serif;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.capa-subtitulo {
    font-size: 1rem;
    color: #5a6c7d;
    font-family: 'Matter SQ Regular', 'Segoe UI', sans-serif;
    font-weight: 600;
    margin: 0;
}

.capa-icon {
    font-size: 1.2rem;
    color: #3498db;
    transition: transform 0.3s ease;
}

.capa-item.capa-activa .capa-icon {
    transform: rotate(180deg);
}

/* Contenido de la Capa - ¡IMPORTANTE! - ARREGLADO */
.capa-contenido {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    background: white;
    transition: max-height 0.8s ease, padding 0.3s ease;
}

.capa-item.capa-activa .capa-contenido {
    max-height: 100000px; /* Valor muy grande para acomodar todo el contenido */
    overflow: visible;
    padding: 30px;
}

.capa-body {
    padding: 0;
    opacity: 0;
    transition: opacity 0.3s ease 0.2s;
}

.capa-item.capa-activa .capa-body {
    opacity: 1;
}

/* ===== SECCIÓN CAPA - ESTILOS GENERALES ===== */
.capa-seccion {
    margin-bottom: 2.5rem;
}

.capa-seccion:last-child {
    margin-bottom: 0;
}

.capa-seccion h4 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #2C3E50;
    font-family: "Hakuna Sans", sans-serif;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #4ECDC4;
}

.capa-seccion h4 i {
    color: #4ECDC4;
    font-size: 1.5rem;
}

/* ===== LISTAS CHECKLIST ===== */
.lista-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 15px;
    padding-left: 10px;
    font-family: 'Matter SQ Regular', 'Segoe UI', sans-serif;
    line-height: 1.6;
    color: #5a6c7d;
}

.lista-checklist li i {
    color: #27ae60;
    font-size: 1.1rem;
    margin-top: 3px;
    flex-shrink: 0;
}

.lista-checklist li strong {
    color: #2c3e50;
    font-weight: 900;
}

/* ===== GRIDS GENERALES - ¡¡ARREGLADO!! ===== */
/* Grids que se rompían porque estaban dentro de media queries mal cerradas */

.herramientas-grid,
.metricas-grid,
.extraccion-grid {
    display: grid;
    gap: 20px;
    margin-top: 15px;
}


/* Cards dentro de grids */
.herramienta-card,
.metrica-card,
.extraccion-card,
.factor {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    text-align: center;
}

.herramienta-card:hover,
.metrica-card:hover,
.extraccion-card:hover,
.factor:hover {
    background: #e3f2fd;
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.1);
}

/* Iconos específicos */
.herramienta-icon,
.extraccion-icon {
    background: #3498db;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.metrica-card i,
.factor i {
    color: #3498db;
    font-size: 1.8rem;
    margin-top: 5px;
    flex-shrink: 0;
}

/* Títulos y texto */
.herramienta-card h5,
.metrica-card h5,
.extraccion-card h5,
.factor h5 {
    font-size: 1rem;
    font-weight: 900;
    color: #2c3e50;
    margin-bottom: 5px;
    font-family: "Hakuna Sans", sans-serif;
}

.herramienta-card p,
.metrica-card div p,
.extraccion-card p,
.factor div p {
    font-size: 0.9rem;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* ===== TABLAS - ¡ARREGLADO! ===== */
.tabla-container {
    overflow-x: auto;
    margin: 25px 0;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    max-width: 100%;
}

.tabla-resultados {
    width: 100%;
    border-collapse: collapse;
    min-width: 500px;
}

.tabla-resultados thead {
    background: #2c3e50;
}

.tabla-resultados th {
    color: white;
    font-weight: 900;
    padding: 15px;
    text-align: left;
    font-family: "Hakuna Sans", sans-serif;
    text-transform: uppercase;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tabla-resultados tbody tr {
    border-bottom: 1px solid #e0e0e0;
    transition: background 0.3s ease;
}

.tabla-resultados tbody tr:hover {
    background: #f8f9fa;
}

.tabla-resultados td {
    padding: 15px;
    font-family: 'Matter SQ Regular', 'Segoe UI', sans-serif;
    vertical-align: top;
}

.tabla-resultados tr.critico {
    background: rgba(231, 76, 60, 0.05);
}

.tabla-resultados tr.severo {
    background: rgba(243, 156, 18, 0.05);
}

.tabla-resultados tr.alto {
    background: rgba(241, 196, 15, 0.05);
}

.badge-negativo {
    display: inline-block;
    background: #e74c3c;
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
    min-width: 60px;
    text-align: center;
}

.score-critico {
    color: #e74c3c;
    font-weight: 900;
    font-size: 1.2rem;
    display: block;
}

.score-severo {
    color: #f39c12;
    font-weight: 900;
    font-size: 1.2rem;
    display: block;
}

.score-alto {
    color: #f1c40f;
    font-weight: 900;
    font-size: 1.2rem;
    display: block;
}

.tabla-resultados small {
    font-size: 0.8rem;
    color: #999;
    display: block;
    margin-top: 3px;
}

/* ===== TIMELINE DETALLADO ===== */
.timeline-detallado {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.5rem 0;
}

.timeline-item {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 1.5rem;
    align-items: center;
    background: white;
    border: 2px solid #E5E7EB;
    border-left: 4px solid #4ECDC4;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.timeline-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.15);
    border-left-color: #E63946;
}

.timeline-item.pico {
    border-left-color: #E63946;
    background: linear-gradient(to right, rgba(230, 57, 70, 0.05), white);
}

.timeline-fecha {
    font-size: 1rem;
    font-weight: 700;
    color: #2C3E50;
    text-align: center;
    padding: 0.75rem;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 6px;
    white-space: nowrap;
    min-width: 80px;
}

.timeline-item.pico .timeline-fecha {
    background: #E63946;
    color: white;
    border-color: #E63946;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeline-content h5 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2C3E50;
    margin: 0 0 0.25rem 0;
}

.timeline-content p {
    font-size: 0.9375rem;
    color: #6B7280;
    margin: 0 0 0.75rem 0;
}

.timeline-bar {
    height: 12px;
    background: linear-gradient(90deg, #4ECDC4 0%, #A8D8EA 100%);
    border-radius: 6px;
    transition: width 0.6s ease;
    box-shadow: 0 2px 4px rgba(78, 205, 196, 0.2);
}

.timeline-item.pico .timeline-bar {
    background: linear-gradient(90deg, #E63946 0%, #FF9F1C 100%);
    box-shadow: 0 2px 4px rgba(230, 57, 70, 0.2);
}

/* ===== INSIGHT BOXES ===== */
.insight-box {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 8px;
    border: 2px solid;
    margin-top: 1.5rem;
    line-height: 1.6;
}

.insight-box i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.insight-box strong {
    color: inherit;
}

.insight-oportunidad {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(168, 216, 234, 0.1) 100%);
    border-color: #4ECDC4;
    color: #115E59;
}

.insight-oportunidad i {
    color: #4ECDC4;
}

.insight-alerta {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(255, 159, 28, 0.1) 100%);
    border-color: #E63946;
    color: #7F1D1D;
}

.insight-alerta i {
    color: #E63946;
}

.insight-estrategico {
    background: linear-gradient(135deg, rgba(255, 159, 28, 0.1) 0%, rgba(168, 216, 234, 0.1) 100%);
    border-color: #FF9F1C;
    color: #78350F;
}

.insight-estrategico i {
    color: #FF9F1C;
}

/* ===== KEYWORDS RANKING ===== */
.keywords-container {
    margin: 1.5rem 0;
}

.keyword-ranking {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.keyword-item {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.keyword-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.keyword-1 {
    border-left: 5px solid #E63946;
}

.keyword-2 {
    border-left: 5px solid #FF9F1C;
}

.keyword-3 {
    border-left: 5px solid #4ECDC4;
}

.keyword-4 {
    border-left: 5px solid #A8D8EA;
}

.keyword-rank {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    background: #F9FAFB;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    color: #2C3E50;
    flex-shrink: 0;
}

.keyword-1 .keyword-rank {
    background: #E63946;
    color: white;
    border-color: #E63946;
}

.keyword-2 .keyword-rank {
    background: #FF9F1C;
    color: white;
    border-color: #FF9F1C;
}

.keyword-3 .keyword-rank {
    background: #4ECDC4;
    color: white;
    border-color: #4ECDC4;
}

.keyword-4 .keyword-rank {
    background: #A8D8EA;
    color: #2C3E50;
    border-color: #A8D8EA;
}

.keyword-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.keyword-text {
    font-size: 1.375rem;
    font-weight: 700;
    color: #2C3E50;
    text-transform: lowercase;
    font-family: "Hakuna Sans", sans-serif;
}

.keyword-1 .keyword-text {
    color: #E63946;
}

.keyword-2 .keyword-text {
    color: #FF9F1C;
}

.keyword-3 .keyword-text {
    color: #4ECDC4;
}

.keyword-4 .keyword-text {
    color: #2C3E50;
}

.keyword-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.keyword-count {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2C3E50;
}

.keyword-narrativa {
    font-size: 0.875rem;
    color: #6B7280;
    font-style: italic;
    line-height: 1.5;
}

/* ===== PARETO BOX ===== */
.pareto-box {
    background: linear-gradient(135deg, #2c3e50, #34495e);
    color: white;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
}

.pareto-icon {
    font-size: 3rem;
    color: #3498db;
    flex-shrink: 0;
}

.pareto-content h4 {
    color: white;
    margin-bottom: 10px;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.pareto-lema {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: "Hakuna Sans", sans-serif;
}

.pareto-dato {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.1);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 1rem;
    border-left: 3px solid #3498db;
}

.pareto-dato i {
    color: #3498db;
    font-size: 1.2rem;
}

/* ===== FORMULA SCORE ===== */
.formula-score {
    background: #f8f9fa;
    border-radius: 12px;
    padding: 25px;
    margin: 20px 0;
    border: 2px solid #e0e0e0;
}

.formula-header {
    font-size: 1.2rem;
    font-weight: 900;
    color: #2c3e50;
    margin-bottom: 20px;
    font-family: "Hakuna Sans", sans-serif;
    text-align: center;
}

/* ===== USUARIOS RANKING ===== */
.usuarios-ranking {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 25px 0;
}

.usuario-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    gap: 20px;
    border: 2px solid #e0e0e0;
    transition: all 0.3s ease;
}

.usuario-card:hover {
    border-color: #3498db;
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(52, 152, 219, 0.15);
}

.usuario-card.usuario-neutral {
    border-left: 5px solid #3498db;
}

.usuario-card.usuario-indirecto {
    border-left: 5px solid #f39c12;
}

.usuario-card.usuario-directo {
    border-left: 5px solid #e74c3c;
}

.usuario-rank {
    font-size: 2rem;
    font-weight: 900;
    color: #2c3e50;
    font-family: "Hakuna Sans", sans-serif;
    min-width: 60px;
    text-align: center;
}

.usuario-info {
    flex: 1;
}

.usuario-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 10px;
}

.usuario-header h5 {
    font-size: 1.2rem;
    font-weight: 900;
    color: #2c3e50;
    margin: 0;
    font-family: "Hakuna Sans", sans-serif;
}

.usuario-score {
    background: #2c3e50;
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.9rem;
}

.usuario-metrics {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 15px;
}

.usuario-metrics .metric {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
    color: #5a6c7d;
}

.usuario-metrics .metric i {
    color: #3498db;
}

.usuario-sentimiento {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 15px;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sentimiento-neutral {
    background: rgba(52, 152, 219, 0.1);
    color: #2c3e50;
    border: 1px solid rgba(52, 152, 219, 0.3);
}

.sentimiento-indirecto {
    background: rgba(243, 156, 18, 0.1);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.3);
}

.sentimiento-directo {
    background: rgba(231, 76, 60, 0.1);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}

.usuario-comentario {
    background: #f8f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-style: italic;
    color: #5a6c7d;
    border-left: 3px solid #3498db;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.usuario-comentario i {
    color: #3498db;
    margin-top: 3px;
}

.usuario-insight,
.usuario-estrategia {
    font-size: 0.9rem;
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

.usuario-insight::before {
    content: '💡';
    position: absolute;
    left: 0;
    top: 2px;
}

.usuario-estrategia::before {
    content: '🎯';
    position: absolute;
    left: 0;
    top: 2px;
}

.usuario-insight strong,
.usuario-estrategia strong {
    color: #2c3e50;
}

/* ===== HALLAZGO CLAVE ===== */
.hallazgo-clave {
    background: linear-gradient(135deg, #27ae60, #2ecc71);
    color: white;
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
    border: 3px solid white;
    box-shadow: 0 5px 20px rgba(39, 174, 96, 0.2);
}

.hallazgo-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.hallazgo-content {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;
}

.hallazgo-content strong {
    font-weight: 900;
    font-family: "Hakuna Sans", sans-serif;
}

/* ===== ENTREGABLE BOX - ¡¡ARREGLADO!! ===== */
.entregable-box {
    background: linear-gradient(135deg, #050505, #080808);
    color: white;
    border-radius: 12px;
    padding: 25px;
    margin-top: 30px;
    border: 2px solid #3498db;
    position: relative;
}

.entregable-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #3498db, #2ecc71, #3498db);
    border-radius: 12px 12px 0 0;
}

.entregable-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.entregable-header i {
    font-size: 2rem;
    color: #3498db;
}

.entregable-header h5 {
    font-size: 1.3rem;
    font-weight: 900;
    color: #3498db;
    margin: 0;
    font-family: "Hakuna Sans", sans-serif;
    text-transform: uppercase;
}

.entregable-box p {
    color: #ffffff;
    line-height: 1.7;
    font-size: 1.05rem;
    margin: 0;
    padding-left: 55px;  /* Para desktop */
    font-weight: 500;
}

/* RESPONSIVE PARA MÓVILES */
@media (max-width: 768px) {
    .entregable-box {
        padding: 20px;
    }
    
    .entregable-box p {
        padding-left: 0;  /* Quita el padding en móvil */
        font-size: 0.95rem;
        line-height: 1.6;
    }
    
    .entregable-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .entregable-header i {
        font-size: 1.5rem;
    }
    
    .entregable-header h5 {
        font-size: 1.1rem;
    }
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .herramientas-grid,
    .metricas-grid,
    .extraccion-grid,
    .factores-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .metodologia-section {
        padding: 60px 15px;
    }
    
    .capa-header {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    
    .capa-numero {
        font-size: 2rem;
        min-width: auto;
    }
    
    .capa-info {
        padding: 0;
    }
    
    .capa-body {
        padding: 20px;
    }
    
    .herramientas-grid,
    .metricas-grid,
    .extraccion-grid,
    .factores-grid {
        grid-template-columns: 1fr;
    }
    
    .pareto-box {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .usuario-card {
        flex-direction: column;
        gap: 15px;
    }
    
    .usuario-rank {
        text-align: left;
        font-size: 1.5rem;
    }
    
    .usuario-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .usuario-metrics {
        gap: 10px;
    }
    
    .hallazgo-clave {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
    
    .entregable-box p {
        padding-left: 0;
    }
    
    .keyword-item {
        grid-template-columns: 48px 1fr;
        gap: 1rem;
        padding: 1rem;
    }
    
    .keyword-rank {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .keyword-text {
        font-size: 1.125rem;
    }
    
    .timeline-item {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .timeline-fecha {
        text-align: left;
        width: fit-content;
    }
    
    .capa-seccion h4 {
        font-size: 1.125rem;
    }
    
    .insight-box {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .metodologia-titulo {
        font-size: 1.8rem;
    }
    
    .metodologia-intro {
        font-size: 1rem;
    }
    
    .capa-titulo {
        font-size: 1.2rem;
    }
    
    .tabla-resultados {
        font-size: 0.85rem;
    }
    
    .keyword-stats {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }
    
    .insight-box {
        flex-direction: column;
        gap: 10px;
    }
}



/* ===== FIN DE LA SECCION DE METDOLOGÍA  ===== */






/* ===== SECCIÓN 5: PROBLEMA/SOLUCIÓN ===== */

.problema-solucion-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 100%);
}

.problema-solucion-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Grid de 2 columnas */
.problema-solucion-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* ===== CARDS BASE ===== */
.problema-card,
.solucion-card {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.problema-card {
    border-left: 5px solid #E63946;
}

.solucion-card {
    border-left: 5px solid #4ECDC4;
}

.problema-card:hover {
    box-shadow: 0 8px 24px rgba(230, 57, 70, 0.12);
}

.solucion-card:hover {
    box-shadow: 0 8px 24px rgba(78, 205, 196, 0.12);
}

/* ===== HEADERS DE CARDS ===== */
.card-header {
    padding: 2rem;
    text-align: center;
}

.problema-header {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.1) 0%, rgba(255, 159, 28, 0.1) 100%);
    border-bottom: 2px solid #E63946;
}

.solucion-header {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(168, 216, 234, 0.1) 100%);
    border-bottom: 2px solid #4ECDC4;
}

.card-header i {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.problema-header i {
    color: #E63946;
}

.solucion-header i {
    color: #4ECDC4;
}

.card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 0.5rem;
    line-height: 1.3;
}

.card-subtitle {
    font-size: 0.9375rem;
    color: #6B7280;
    font-weight: 500;
    margin: 0;
}

/* ===== BODY DE CARDS ===== */
.card-body {
    padding: 2rem;
}

/* ===== ITEMS DENTRO DE LAS CARDS ===== */
.problema-item,
.solucion-item {
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #E5E7EB;
}

.problema-item:last-child,
.solucion-item:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.problema-item h3,
.solucion-item h3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

.problema-item h3 i {
    color: #E63946;
    font-size: 1.25rem;
}

.solucion-item h3 i {
    color: #10B981;
    font-size: 1.25rem;
}

.problema-item p,
.solucion-item p {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.6;
    margin: 0 0 1rem 0;
}

.problema-item p:last-child,
.solucion-item p:last-child {
    margin-bottom: 0;
}

/* ===== CAJAS DE DATOS DESTACADOS ===== */
.dato-destacado {
    background: linear-gradient(135deg, rgba(230, 57, 70, 0.08) 0%, rgba(255, 159, 28, 0.08) 100%);
    border-left: 4px solid #E63946;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2C3E50;
    margin-top: 1rem;
}

.dato-destacado.verificado {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(78, 205, 196, 0.08) 100%);
    border-left-color: #10B981;
}

/* ===== CAJAS DE EJEMPLO ===== */
.ejemplo-box {
    background: #F9FAFB;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin-top: 1rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.ejemplo-box strong {
    color: #2C3E50;
    font-weight: 700;
}

.ejemplo-box.exito {
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.05) 0%, rgba(168, 216, 234, 0.05) 100%);
    border-color: #4ECDC4;
}

/* Textos de color en ejemplos */
.text-neutral {
    color: #6B7280;
    font-weight: 600;
}

.text-success {
    color: #10B981;
    font-weight: 700;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .problema-solucion-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .problema-card,
    .solucion-card {
        border-left-width: 4px;
    }
}

@media (max-width: 768px) {
    .problema-solucion-section {
        padding: 3rem 0;
    }
    
    .problema-solucion-container {
        padding: 0 1.5rem;
    }
    
    .precios-analisis-titulo {
        font-size: 1.75rem;
        margin-bottom: 2rem;
    }
    
    .problema-solucion-grid {
        gap: 1.5rem;
    }
    
    .card-header {
        padding: 1.5rem;
    }
    
    .card-header i {
        font-size: 2.5rem;
    }
    
    .card-header h2 {
        font-size: 1.25rem;
    }
    
    .card-body {
        padding: 1.5rem;
    }
    
    .problema-item,
    .solucion-item {
        margin-bottom: 1.5rem;
        padding-bottom: 1.5rem;
    }
    
    .problema-item h3,
    .solucion-item h3 {
        font-size: 1rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .dato-destacado,
    .ejemplo-box {
        padding: 0.875rem 1rem;
        font-size: 0.875rem;
    }
}

@media (max-width: 480px) {
    .problema-solucion-section {
        padding: 2rem 0;
    }
    
    .problema-solucion-container {
        padding: 0 1rem;
    }
    
    .precios-analisis-titulo {
        font-size: 1.5rem;
    }
    
    .card-header {
        padding: 1.25rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
}

/* ===== 4. CASO REAL ===== */
.caso-real-section {
  background-color: #fff;
  padding: 70px 20px;
  border-bottom: 5px solid #000;
}

.caso-real-container {
  max-width: 1200px;
  margin: 0 auto;
}

.caso-real-banner {
  background-color: var(--smoke);
  border: 5px solid #000;
  padding: 40px;
  box-shadow: 6px 6px 0px #000;
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.caso-icon {
  font-size: 4rem;
  color: var(--gold);
  flex-shrink: 0;
}

.caso-content {
  flex: 1;
}

.caso-titulo {
  font-size: 1.8rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
}

.caso-contexto {
  font-size: 1.1rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin-bottom: 30px;
}

.caso-contexto strong {
  color: #000;
  font-weight: 700;
}

/* Comparativa antes/después */
.caso-comparativa {
  display: grid;
  grid-template-columns: 1fr 80px 1fr;
  gap: 0;
  margin-bottom: 30px;
}

.caso-antes,
.caso-despues {
  background-color: #fff;
  border: 4px solid #000;
  padding: 25px;
  text-align: center;
}

.caso-antes {
  border-color: var(--ruby);
}

.caso-despues {
  border-color: var(--verde);
}

.caso-label {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: "Hakuna Sans";
  margin-bottom: 12px;
  color: #666;
}

.caso-dato {
  font-size: 2.5rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #000;
  line-height: 1;
  margin-bottom: 10px;
}

.caso-dato-critico {
  color: var(--ruby);
}

.caso-conclusion {
  font-size: 0.9rem;
  color: #666;
  font-family: 'Matter SQ Regular', sans-serif;
}

.caso-conclusion-critica {
  color: var(--ruby);
  font-weight: 700;
}

.caso-vs {
  display: flex;
  align-items: center;
  justify-content: center;
}

.caso-vs i {
  font-size: 3rem;
  color: var(--turquesa);
  animation: pulse-arrow 2s infinite;
}

@keyframes pulse-arrow {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(5px); }
}

/* Insights */
.caso-insights {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.insight-item {
  background-color: #FFF9E6;
  border: 3px solid var(--gold);
  padding: 15px 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.insight-item i {
  font-size: 1.5rem;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

.insight-item span {
  font-size: 0.95rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.5;
}

.insight-item strong {
  color: #000;
  font-weight: 700;
}

/* ===== PROCESO/METODOLOGÍA - FASES DEL SERVICIO ===== */

.proceso-section {
  background: linear-gradient(135deg, #F3F2F1 0%, #FFFFFF 100%);
  padding: 70px 20px;
  border-bottom: 5px solid #000;
}

.proceso-container {
  max-width: 1200px;
  margin: 0 auto;
}

.proceso-header {
  text-align: center;
  margin-bottom: 50px;
}

.proceso-titulo {
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
}

.proceso-subtitulo {
  font-size: 1.2rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

/* Wrapper de cada fase */
.proceso-fase-wrapper {
  margin-bottom: 60px;
}

/* Fase individual */
.proceso-fase {
  background: #FFFFFF;
  border: 5px solid #000;
  border-left: 10px solid #4ECDC4;
  padding: 40px 35px;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.15);
  position: relative;
}

.proceso-fase-gestion {
  border-left-color: #E63946;
}

.proceso-fase-recuperacion {
  border-left-color: #FF9F1C;
}

/* Header de fase */
.fase-header {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  margin-bottom: 35px;
  padding-bottom: 25px;
  border-bottom: 3px solid #E5E7EB;
}

.fase-numero-grande {
  font-size: 5rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #4ECDC4;
  line-height: 1;
  opacity: 0.3;
  min-width: 90px;
}

.proceso-fase-gestion .fase-numero-grande {
  color: #E63946;
}

.proceso-fase-recuperacion .fase-numero-grande {
  color: #FF9F1C;
}

.fase-header-content {
  flex: 1;
}

.fase-timing {
  display: inline-block;
  background-color: #000;
  color: #FFF;
  font-size: 0.75rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 6px 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}

.fase-titulo {
  font-size: 2rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #2C3E50;
  margin-bottom: 12px;
  line-height: 1.2;
}

.fase-objetivo {
  font-size: 1rem;
  color: #6B7280;
  font-family: 'Matter SQ Regular', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fase-objetivo i {
  color: #4ECDC4;
  font-size: 1.1rem;
}

/* Protocolo destacado (opcional - para gestión) */
.protocolo-destacado {
  background: linear-gradient(135deg, rgba(230,57,70,0.1) 0%, rgba(255,159,28,0.1) 100%);
  border: 3px solid #E63946;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 30px;
  text-align: center;
}

.protocolo-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background-color: #E63946;
  color: #FFF;
  font-size: 1rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 10px 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 4px 4px 0px rgba(0,0,0,0.2);
  margin-bottom: 12px;
}

.protocolo-descripcion {
  font-size: 0.95rem;
  color: #374151;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
}

/* Pasos de la fase */
.fase-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.paso-card {
  background: #F9FAFB;
  border: 3px solid #E5E7EB;
  border-radius: 8px;
  padding: 25px;
  position: relative;
  transition: all 0.3s ease;
}

.paso-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  border-color: #4ECDC4;
}

.paso-numero {
  position: absolute;
  top: -15px;
  right: 20px;
  background-color: #000;
  color: #FFF;
  font-size: 1.1rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 8px 16px;
  border-radius: 4px;
  box-shadow: 3px 3px 0px rgba(0,0,0,0.2);
}

.paso-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.paso-icon i {
  font-size: 1.5rem;
  color: #FFF;
}

.paso-nombre {
  font-size: 1.15rem;
  font-weight: 700;
  font-family: "Hakuna Sans";
  color: #2C3E50;
  margin-bottom: 10px;
  line-height: 1.3;
}

.paso-descripcion {
  font-size: 0.9rem;
  color: #6B7280;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin-bottom: 15px;
}

.paso-detalles {
  list-style: none;
  padding: 0;
  margin: 0;
}

.paso-detalles li {
  font-size: 0.85rem;
  color: #374151;
  font-family: 'Matter SQ Regular', sans-serif;
  padding: 6px 0 6px 24px;
  position: relative;
  line-height: 1.4;
}

.paso-detalles li:before {
  content: "→";
  position: absolute;
  left: 0;
  color: #4ECDC4;
  font-weight: 700;
}

/* Entregable de fase */
.fase-entregable {
  background: linear-gradient(135deg, #25D366 0%, #1FAD52 100%);
  border: 4px solid #000;
  padding: 20px 25px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  box-shadow: 6px 6px 0px rgba(0,0,0,0.15);
  margin-top: 25px;
}

.fase-entregable .entregable-icon {
  width: 50px;
  height: 50px;
  background-color: rgba(255,255,255,0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fase-entregable .entregable-icon i {
  font-size: 1.75rem;
  color: #FFF;
}

.fase-entregable .entregable-content {
  flex: 1;
  color: #FFF;
  font-family: 'Matter SQ Regular', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
}

.fase-entregable .entregable-content strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  margin-bottom: 6px;
}

/* Conector entre fases */
.fase-connector {
  text-align: center;
  margin: 35px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fase-connector i {
  font-size: 2.5rem;
  color: #4ECDC4;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.fase-connector span {
  background-color: #000;
  color: #FFF;
  font-size: 0.8rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 8px 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 20px;
}
/* ===== ENTREGABLES SECTION ===== */
.entregables-section {
  background-color: #fff;
  padding: 70px 20px;
  border-bottom: 5px solid #000;
}

.entregables-container {
  max-width: 1200px;
  margin: 0 auto;
}

.entregables-header {
  text-align: center;
  margin-bottom: 50px;
}

.entregables-titulo {
  font-size: 2rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
}

.entregables-subtitulo {
  font-size: 1.1rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
}

.entregables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.entregable-card {
  background-color: #F3F2F1;
  border: 4px solid #000;
  padding: 30px 25px;
  box-shadow: 4px 4px 0px #000;
  transition: all 0.3s ease;
}

.entregable-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0px #000;
}

.entregable-icon {
  font-size: 3rem;
  color: #308A9E;
  text-align: center;
  margin-bottom: 20px;
}

.entregable-card h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-align: center;
  margin-bottom: 10px;
  line-height: 1.3;
}

.entregable-detalle {
  font-size: 0.85rem;
  color: #666;
  font-family: 'Matter SQ Regular', sans-serif;
  text-align: center;
  margin-bottom: 20px;
  font-style: italic;
}

.entregable-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.entregable-card li {
  font-size: 0.9rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
  padding-left: 10px;
}

.entregable-card li:last-child {
  border-bottom: none;
}

.entregable-card li:before {
  content: "→ ";
  color: #308A9E;
  font-weight: 700;
  margin-right: 8px;
}

.tiempo-entrega {
  background-color: #F3F2F1;
  border: 3px dashed #308A9E;
  padding: 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.tiempo-entrega i {
  font-size: 2rem;
  color: #308A9E;
}

.tiempo-entrega div {
  text-align: left;
}

.tiempo-entrega strong {
  color: #000;
  font-weight: 700;
  font-family: "Hakuna Sans";
}

.nota-urgente {
  display: block;
  font-size: 0.9rem;
  color: #CD3334;
  font-weight: 600;
  margin-top: 5px;
}

/* Responsive */
@media (max-width: 768px) {
  .entregables-grid {
    grid-template-columns: 1fr;
  }
  
  .tiempo-entrega {
    flex-direction: column;
    text-align: center;
  }
  
  .tiempo-entrega div {
    text-align: center;
  }

  /* Reduce padding and font sizes for smaller screens */
  .entregables-section {
    padding: 30px 14px;
  }

  .entregable-card {
    padding: 18px;
  }

  .entregable-icon {
    font-size: 2rem;
    margin-bottom: 12px;
  }

  .entregable-card h3 {
    font-size: 1.1rem;
  }

  .entregable-card li {
    padding: 6px 0;
  }
}
/* ===== PRECIOS SECTION - PRINCIPAL (4 SERVICIOS) ===== */

.precios-section {
  background-color: #FFFFFF;
  padding: 70px 20px;
  border-bottom: 5px solid #000;
}

.precios-container {
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.precios-header {
  text-align: center;
  margin-bottom: 40px;
}

.precios-title {
  font-size: 2.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
  line-height: 1.2;
}

.precios-subtitle {
  font-size: 1.2rem;
  color: #374151;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto;
}

.precios-subtitle strong {
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #2C3E50;
}

/* Nota superior */
.precios-nota-superior {
  background: linear-gradient(135deg, rgba(78,205,196,0.1) 0%, rgba(168,216,234,0.1) 100%);
  border: 3px solid #4ECDC4;
  border-radius: 8px;
  padding: 20px 25px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-bottom: 40px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.precios-nota-superior i {
  font-size: 1.75rem;
  color: #4ECDC4;
  flex-shrink: 0;
  margin-top: 2px;
}

.precios-nota-superior div {
  font-size: 0.95rem;
  color: #374151;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
}

.precios-nota-superior strong {
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #2C3E50;
}

.nota-destacada {
  display: inline-block;
  background-color: #25D366;
  color: #FFF;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 4px 12px;
  border-radius: 4px;
  margin-top: 8px;
  font-size: 0.9rem;
}

/* Grid de precios */
.precios-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 50px;
}

/* Card de precio */
.precio-card {
  background: #FFFFFF;
  border: 4px solid #E5E7EB;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.precio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.15);
  border-color: #4ECDC4;
}

/* Card destacado */
.precio-destacado {
  border-color: #E63946;
  border-width: 5px;
  box-shadow: 0 6px 20px rgba(230,57,70,0.2);
}

.precio-destacado:hover {
  border-color: #E63946;
  box-shadow: 0 12px 32px rgba(230,57,70,0.3);
}

/* Badge "Más solicitado" */
.precio-badge {
  position: absolute;
  top: 15px;
  right: -35px;
  background-color: #E63946;
  color: #FFF;
  font-size: 0.7rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  padding: 6px 45px;
  text-transform: uppercase;
  letter-spacing: 1px;
  transform: rotate(45deg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 10;
}

/* Header del card */
.precio-header {
  padding: 30px 25px 20px;
  text-align: center;
  background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
  border-bottom: 2px solid #E5E7EB;
}

.precio-icono {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 4px 12px rgba(78,205,196,0.25);
}

.precio-destacado .precio-icono {
  background: linear-gradient(135deg, #E63946 0%, #FF9F1C 100%);
  box-shadow: 0 4px 12px rgba(230,57,70,0.3);
}

.precio-icono i {
  font-size: 2rem;
  color: #FFF;
}

.precio-nombre {
  font-size: 1.35rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #2C3E50;
  margin-bottom: 10px;
  line-height: 1.3;
}

.precio-descripcion-corta {
  font-size: 0.9rem;
  color: #6B7280;
  font-family: 'Matter SQ Regular', sans-serif;
  margin: 0;
}

/* Monto */
.precio-monto {
  padding: 20px 25px;
  text-align: center;
  background-color: #F9FAFB;
  border-bottom: 2px solid #E5E7EB;
}

.monto-desde {
  display: block;
  font-size: 0.8rem;
  color: #9CA3AF;
  font-family: 'Matter SQ Regular', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.monto-principal {
  font-size: 3.5rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #4ECDC4;
  line-height: 1;
  display: inline-block;
}

.precio-destacado .monto-principal {
  color: #E63946;
}

.monto-moneda {
  font-size: 1.1rem;
  color: #6B7280;
  font-weight: 600;
  font-family: 'Matter SQ Regular', sans-serif;
  margin-left: 6px;
  vertical-align: top;
}

/* Lo que incluye */
.precio-incluye {
  padding: 25px;
}

.precio-incluye h4 {
  font-size: 0.9rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  color: #2C3E50;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}

.precio-incluye ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.precio-incluye li {
  font-size: 0.9rem;
  color: #374151;
  font-family: 'Matter SQ Regular', sans-serif;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.5;
}

.precio-incluye li:last-child {
  border-bottom: none;
}

.precio-incluye li i {
  color: #4ECDC4;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.precio-destacado .precio-incluye li i {
  color: #E63946;
}

/* Tiempo de entrega */
.precio-tiempo {
  padding: 15px 25px;
  background-color: #F9FAFB;
  border-top: 2px solid #E5E7EB;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.9rem;
  color: #6B7280;
  font-family: 'Matter SQ Regular', sans-serif;
  font-weight: 600;
}

.precio-tiempo i {
  color: #4ECDC4;
  font-size: 1.1rem;
}

/* CTA del card */
.precio-cta {
  display: block;
  background-color: #4ECDC4;
  color: #FFF;
  font-size: 1rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  text-align: center;
  padding: 18px 25px;
  text-decoration: none;
  transition: all 0.3s ease;
  border-top: 3px solid #3DB5AD;
}

.precio-cta:hover {
  background-color: #3DB5AD;
  color: #FFF;
  text-decoration: none;
  transform: translateY(-2px);
}

.precio-destacado .precio-cta {
  background-color: #E63946;
  border-top-color: #D32735;
}

.precio-destacado .precio-cta:hover {
  background-color: #D32735;
}

/* Nota final de precios (opcional) */
.precios-nota-final {
  background-color: #2C3E50;
  color: #FFF;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  margin-top: 40px;
}

.precios-nota-final h3 {
  font-size: 1.5rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  margin-bottom: 12px;
}

.precios-nota-final p {
  font-size: 1rem;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin-bottom: 0;
}

.precios-nota-final strong {
  color: #4ECDC4;
}


/* ===== PRECIOS ANÁLISIS SECTION ===== */
.precios-analisis-section {
  background-color: #F3F2F1;
  padding: 70px 20px;
  border-bottom: 5px solid #000;
}

.precios-analisis-container {
  max-width: 1200px;
  margin: 0 auto;
}

.precios-analisis-titulo {
  font-size: 2rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 15px;
}

.precios-analisis-subtitulo {
  font-size: 1.1rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  text-align: center;
  line-height: 1.6;
  margin-bottom: 50px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Precio Base Card */
.precio-base-card {
  background-color: #fff;
  border: 5px solid #25D366;
  padding: 0;
  box-shadow: 6px 6px 0px #000;
  margin-bottom: 40px;
  position: relative;
}

.precio-base-badge {
  background-color: #25D366;
  color: #000;
  padding: 10px 25px;
  font-size: 0.9rem;
  font-weight: 900;
  text-transform: uppercase;
  font-family: "Hakuna Sans";
  text-align: center;
  border-bottom: 4px solid #000;
}

.precio-base-contenido {
  padding: 40px 35px;
}

.precio-base-monto {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 30px;
}

.precio-simbolo {
  font-size: 2rem;
  font-weight: 900;
  color: #25D366;
  font-family: "Hakuna Sans";
}

.precio-cifra {
  font-size: 4rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  line-height: 1;
}

.precio-unidad {
  font-size: 1.2rem;
  color: #666;
  font-family: 'Matter SQ Regular', sans-serif;
  font-weight: 600;
}

.precio-base-descripcion {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 30px;
  border-bottom: 3px solid #F3F2F1;
}

.precio-base-descripcion h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  margin-bottom: 15px;
}

.precio-base-descripcion p {
  font-size: 1rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
}

.precio-base-descripcion strong {
  color: #000;
  font-weight: 700;
}

.precio-base-incluye {
  margin-bottom: 30px;
}

.precio-base-incluye h4 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
  text-align: center;
}

.precio-base-incluye ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.precio-base-incluye li {
  font-size: 0.95rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.precio-base-incluye i {
  color: #25D366;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.precio-base-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 40px;
  background-color: #25D366;
  color: #000;
  border: 4px solid #000;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Hakuna Sans";
  box-shadow: 4px 4px 0px #000;
  transition: all 0.3s ease;
}

.precio-base-cta:hover {
  transform: translate(-3px, -3px);
  box-shadow: 7px 7px 0px #000;
  background-color: #000;
  color: #25D366;
}

.precio-base-cta i {
  font-size: 1.5rem;
}

/* Nota Complejidad */
.complejidad-nota {
  background-color: #6EC1E4;
  border: 4px solid #000;
  padding: 30px;
  margin-bottom: 40px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 4px 4px 0px #000;
}

.complejidad-icon {
  font-size: 3rem;
  color: #000;
  flex-shrink: 0;
}

.complejidad-contenido h3 {
  font-size: 1.3rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  margin-bottom: 12px;
}

.complejidad-contenido p {
  font-size: 1rem;
  color: #000;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin: 0;
}

.complejidad-contenido strong {
  font-weight: 700;
}

/* Factores de Costo */
.factores-costo {
  background-color: #fff;
  border: 5px solid #000;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 6px 6px 0px #000;
}

.factores-titulo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.factores-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 25px;
}

.factor-card {
  background-color: #F3F2F1;
  border: 3px solid #000;
  padding: 25px;
  box-shadow: 3px 3px 0px #000;
  transition: all 0.3s ease;
}

.factor-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0px #000;
}

.factor-icono {
  font-size: 2.5rem;
  color: #308A9E;
  text-align: center;
  margin-bottom: 15px;
}

.factor-card h4 {
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-align: center;
  margin-bottom: 12px;
  line-height: 1.3;
}

.factor-card p {
  font-size: 0.9rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 15px;
}

.factor-impacto {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  color: #666;
}

.impacto-medio {
  color: #E28413;
  font-size: 1.1rem;
}

.impacto-alto {
  color: #CD3334;
  font-size: 1.1rem;
}

/* Ejemplos de Precios */
.ejemplos-precios {
  background-color: #fff;
  border: 5px solid #000;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 6px 6px 0px #000;
}

.ejemplos-titulo {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.ejemplos-tabla {
  overflow-x: auto;
}

.tabla-ejemplos {
  width: 100%;
  border-collapse: collapse;
}

.tabla-ejemplos thead {
  background-color: #000;
  color: #fff;
}

.tabla-ejemplos th,
.tabla-ejemplos td {
  padding: 15px;
  text-align: left;
  border: 2px solid #000;
  font-size: 0.95rem;
}

.tabla-ejemplos th {
  font-weight: 900;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  font-size: 0.9rem;
}

.tabla-ejemplos td {
  font-family: 'Matter SQ Regular', sans-serif;
}

.tabla-ejemplos tbody tr:nth-child(even) {
  background-color: #F3F2F1;
}

.precio-ejemplo {
  font-weight: 900;
  color: #25D366;
  font-family: "Hakuna Sans";
  font-size: 1.05rem;
}

/* Proceso Cotización */
.proceso-cotizacion {
  background-color: #fff;
  border: 5px solid #000;
  padding: 40px;
  margin-bottom: 40px;
  box-shadow: 6px 6px 0px #000;
}

.proceso-cotizacion-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 30px;
}

.proceso-cotizacion-header i {
  font-size: 2.5rem;
  color: #308A9E;
}

.proceso-cotizacion-header h3 {
  font-size: 1.5rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin: 0;
}

.proceso-cotizacion-pasos {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.cotizacion-paso {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background-color: #F3F2F1;
  border: 3px solid #000;
  padding: 20px;
}

.cotizacion-numero {
  width: 50px;
  height: 50px;
  background-color: #308A9E;
  color: #fff;
  border: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 900;
  font-family: "Hakuna Sans";
  flex-shrink: 0;
}

.cotizacion-contenido strong {
  display: block;
  font-size: 1.1rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  margin-bottom: 5px;
}

.cotizacion-contenido p {
  font-size: 0.95rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.5;
  margin: 0;
}

/* Garantía */
.precio-garantia {
  background-color: #FFF9E6;
  border: 4px solid #D5A838;
  padding: 25px 30px;
  margin-bottom: 40px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: 4px 4px 0px #000;
}

.precio-garantia i {
  font-size: 2.5rem;
  color: #D5A838;
  flex-shrink: 0;
}

.precio-garantia h4 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #000;
  font-family: "Hakuna Sans";
  margin-bottom: 10px;
}

.precio-garantia p {
  font-size: 1rem;
  color: #333;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin: 0;
}

.precio-garantia strong {
  color: #000;
  font-weight: 700;
}

/* CTA Final */
.precios-cta {
  background: linear-gradient(135deg, #25D366 0%, #308A9E 100%);
  border: 5px solid #000;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 6px 6px 0px #000;
}

.precios-cta h3 {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 15px;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.precios-cta p {
  font-size: 1.1rem;
  color: #fff;
  font-family: 'Matter SQ Regular', sans-serif;
  margin-bottom: 25px;
}

.precios-cta strong {
  font-weight: 900;
  font-family: "Hakuna Sans";
}

.precios-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 40px;
  background-color: #fff;
  color: #000;
  border: 4px solid #000;
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  font-family: "Hakuna Sans";
  box-shadow: 5px 5px 0px #000;
  transition: all 0.3s ease;
}

.precios-cta-btn:hover {
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0px #000;
  background-color: #000;
  color: #fff;
}

.precios-cta-btn i {
  font-size: 1.5rem;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .precio-base-incluye ul {
    grid-template-columns: 1fr;
  }
  
  .factores-grid {
    grid-template-columns: 1fr;
  }
  
  .complejidad-nota {
    flex-direction: column;
  }
  
  .precio-garantia {
    flex-direction: column;
  }
  
  .tabla-ejemplos {
    font-size: 0.85rem;
  }
  
  .tabla-ejemplos th,
  .tabla-ejemplos td {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .precio-cifra {
    font-size: 3rem;
  }
  
  .precios-cta-btn {
    width: 100%;
    justify-content: center;
  }
  /* === PROCESO Y FASES === */
  .proceso-fase {
    padding: 25px 20px !important;
    border-left-width: 6px !important;
  }

  .fase-header {
    flex-direction: column !important;
    gap: 15px !important;
  }

  .fase-numero-grande {
    font-size: 3.5rem !important;
    min-width: auto !important;
  }

  .fase-titulo {
    font-size: 1.5rem !important;
  }

  .fase-pasos {
    grid-template-columns: 1fr !important;
    gap: 15px !important;
  }

  .paso-card {
    padding: 20px !important;
  }

  .paso-icon {
    width: 48px !important;
    height: 48px !important;
  }

  .paso-icon i {
    font-size: 1.3rem !important;
  }

  .fase-entregable {
    flex-direction: column !important;
    padding: 18px !important;
    gap: 12px !important;
  }

  .fase-entregable .entregable-icon {
    width: 44px !important;
    height: 44px !important;
  }

  .fase-entregable .entregable-icon i {
    font-size: 1.5rem !important;
  }

  .protocolo-destacado {
    padding: 15px !important;
  }

  .protocolo-badge {
    font-size: 0.85rem !important;
    padding: 8px 15px !important;
  }

  /* === PRECIOS PRINCIPAL === */
  .precios-grid {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
  }

  .precio-card {
    border-width: 3px !important;
  }

  .precio-destacado {
    border-width: 4px !important;
  }

  .precio-badge {
    font-size: 0.65rem !important;
    padding: 5px 40px !important;
    top: 12px !important;
    right: -32px !important;
  }

  .precio-header {
    padding: 25px 20px 18px !important;
  }

  .precio-icono {
    width: 60px !important;
    height: 60px !important;
  }

  .precio-icono i {
    font-size: 1.75rem !important;
  }

  .precio-nombre {
    font-size: 1.2rem !important;
  }

  .precio-monto {
    padding: 18px 20px !important;
  }

  .monto-principal {
    font-size: 2.8rem !important;
  }

  .precio-incluye {
    padding: 20px !important;
  }

  .precio-incluye li {
    font-size: 0.85rem !important;
    padding: 8px 0 !important;
  }

  .precio-tiempo {
    padding: 12px 20px !important;
    font-size: 0.85rem !important;
  }

  .precio-cta {
    padding: 16px 20px !important;
    font-size: 0.95rem !important;
  }

  .precios-nota-superior {
    flex-direction: column !important;
    padding: 18px 20px !important;
    gap: 12px !important;
  }

  .precios-nota-superior i {
    font-size: 1.5rem !important;
  }

  .precios-nota-final {
    padding: 25px 20px !important;
  }

  .precios-nota-final h3 {
    font-size: 1.3rem !important;
  }

  .precios-title {
    font-size: 1.75rem !important;
  }

  .precios-subtitle {
    font-size: 1rem !important;
  }
}









/* --------------------- FOOTER MEJORADO --------------------- */
#footer {
  background-color: #ffffff;
  color: #333333;
  font-family: 'Nunito', sans-serif;
  padding: 50px 0 20px;
  border-top: 4px solid #000000;
}
.footer-container {
  max-width: 1200px;
  margin: 0 auto;
}
.footer-col {
  padding: 15px;
  background-color: transparent;
  transition: all 0.3s ease;
}
.footer-box {
  border: 3px solid #060606;
  padding: 20px;
  height: 100%;
  box-shadow: 4px 4px #000000;
  background: white;
  transition: all 0.3s ease;
}
/* Efectos hover con los colores específicos */
.footer-col[data-hover-color="#32ACC5"]:hover .footer-box {
  background-color: #32ACC5;
}
.footer-col[data-hover-color="#6EC1E4"]:hover .footer-box {
  background-color: #6EC1E4;
}
.footer-col[data-hover-color="#E28413"]:hover .footer-box {
  background-color: #E28413;
}
.footer-col[data-hover-color="#CD3334"]:hover .footer-box {
  background-color: #CD3334;
}
.footer-col:hover .footer-box {
  transform: translate(-4px, -4px);
  box-shadow: 8px 8px #000000;
}
.footer-title {
  font-weight: 800;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  text-transform: uppercase;
  color: #000;
}
.footer-text {
  margin-bottom: 1rem;
  line-height: 1.6;
  font-size: 0.95rem;
}
/* Mapa del sitio mejor organizado */
.sitemap-section {
  margin-bottom: 1rem;
}
.sitemap-header {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #000;
}
.sitemap-links {
  list-style: none;
  padding-left: 0;
}
.sitemap-links li {
  margin-bottom: 0.3rem;
}
.sitemap-links a {
  color: #333;
  text-decoration: none;
  font-size: 0.9rem;
  position: relative;
  padding-left: 0;
  transition: all 0.2s ease;
}
.sitemap-links a:hover {
  color: #000;
  font-weight: bold;
  padding-left: 5px;
}
.sitemap-links a:before {
  content: "•";
  margin-right: 5px;
  color: #E28413;
}
/* Contacto */
.contact-list {
  list-style: none;
  
  padding-left: 0;
}
.contact-list li {
  margin-bottom: 0.8rem;
  display: flex;
  align-items: center;
}
.contact-list i {
  margin-right: 10px;
  width: 20px;
  text-align: center;
  color: #000;
}
.contact-list a {
  color: #333333; /* Mismo color que el texto normal del footer */
  text-decoration: none; /* Quita el subrayado */
  transition: all 0.3s ease; /* Transición suave para efectos hover */
}
/* Social icons */
.social-icons {
  display: flex;
  justify-content: center;
  gap: 15px;
}
.social-icon {
  color: #000;
  background: #fff;
  border: 2px solid #000;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  transition: all 0.3s ease;
}
.social-icon:hover {
  background: #000;
  color: #fff;
  transform: translateY(-3px);
}
/* Copyright */
.copyright {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #000;
}
.copyright p {
  font-size: 0.85rem;
  margin-bottom: 0;
}
.legal-links {
  font-size: 0.8rem;  /* Tamaño más pequeño */
}
.legal-link {
  color: #000000 !important;  /* Negro puro */
  text-decoration: none;      /* Sin subrayado */
  margin: 0 10px;            /* Espaciado entre enlaces */
  transition: all 0.3s ease; /* Transición suave (opcional) */
}
.legal-link:hover {
  color: #000000 !important;  /* Mantiene negro al pasar el mouse */
  text-decoration: underline; /* Subrayado al hover (opcional) */
}

/* Responsive */
@media (max-width: 991.98px) {
  .footer-col {
    margin-bottom: 20px;
  }
  
  .footer-box {
    padding: 15px;
  }
}
@media (max-width: 767.98px) {
  .footer-title {
    font-size: 1.1rem;
  }
  
  .footer-text, .contact-list li, .sitemap-links a {
    font-size: 0.85rem;
  }
}




/* ======================== FOOTER BRUTALISTA HYPERCONECTADO ======================== */

.footer-hyperconectado {
  background-color: #2D3748;
  border-top: 5px solid #000;
  padding: 0;
  margin: 0;
}

.footer-main {
  padding: 60px 20px 40px 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 40px;
}

/* Columnas */
/* Logo Column */
.footer-col-logo {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-tagline {
  font-size: 0.9rem;
  color: #6EC1E4;
  font-family: 'Matter SQ Regular', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 1rem;
  margin: 0;
}

/* Redes Sociales */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 15px;
}

.social-link {
  width: 45px;
  height: 45px;
  background-color: transparent;
  border: 3px solid #fff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.social-link:hover {
  background-color: #308A9E;
  border-color: #308A9E;
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0px #000;
}

/* Licencia */
.footer-license {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid rgba(255,255,255,0.1);
}

.footer-license img {
  display: block;
  margin-bottom: 8px;
}

.license-text {
  font-size: 0.75rem;
  color: #999;
  font-family: 'Matter SQ Regular', sans-serif;
  margin: 0;
  line-height: 1.4;
}

/* Títulos de Columnas */
.footer-col-titulo {
  font-size: 1rem;
  font-weight: 900;
  color: #fff;
  font-family: "Hakuna Sans";
  text-transform: uppercase;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 3px solid #308A9E;
  letter-spacing: 1px;
}

/* Links Generales */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #E0E0E0;
  text-decoration: none;
  font-size: 0.9rem;
  font-family: 'Matter SQ Regular', sans-serif;
  display: inline-block;
  transition: all 0.2s ease;
  position: relative;
  padding-left: 15px;
}

.footer-links a:before {
  content: "→";
  position: absolute;
  left: 0;
  color: #308A9E;
  font-weight: 700;
  transition: all 0.2s ease;
}

.footer-links a:hover {
  color: #fff;
  transform: translateX(3px);
}

.footer-links a:hover:before {
  color: #6EC1E4;
}

/* Contacto */
.footer-contacto {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
}

.footer-contacto li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #E0E0E0;
  font-family: 'Matter SQ Regular', sans-serif;
}

.footer-contacto i {
  color: #308A9E;
  font-size: 1.1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.footer-contacto a {
  color: #E0E0E0;
  text-decoration: none;
  transition: color 0.2s ease;
}

.footer-contacto a:hover {
  color: #6EC1E4;
}

.footer-descripcion {
  font-size: 0.85rem;
  color: #999;
  font-family: 'Matter SQ Regular', sans-serif;
  line-height: 1.6;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 2px solid rgba(255,255,255,0.1);
}

/* Copyright */
.footer-copyright {
  background-color: #000;
  padding: 20px;
  text-align: center;
  border-top: 3px solid #308A9E;
}

.footer-copyright p {
  color: #999;
  font-size: 0.85rem;
  font-family: 'Matter SQ Regular', sans-serif;
  margin: 0;
}

.footer-copyright #current-year {
  color: #fff;
  font-weight: 700;
}

/* ===== RESPONSIVE ===== */

/* Tablet */
@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
  
  .footer-col-logo {
    grid-column: 1 / -1;
    text-align: center;
    align-items: center;
  }
  
  .footer-logo {
    margin-left: auto;
    margin-right: auto;
  }
  
  .footer-social {
    justify-content: center;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .footer-main {
    padding: 40px 20px 30px 20px;
  }
  
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
  
  .footer-col-logo {
    grid-column: 1;
    padding-bottom: 30px;
    border-bottom: 3px solid rgba(48,138,158,0.3);
  }
  
  .footer-col-titulo {
    font-size: 0.95rem;
  }
  
  .footer-links a {
    font-size: 0.85rem;
  }
  
  .footer-contacto li {
    font-size: 0.85rem;
  }
  
  .social-link {
    width: 50px;
    height: 50px;
  }
}

/* Extra Small */
@media (max-width: 480px) {
  .footer-main {
    padding: 30px 15px 20px 15px;
  }
  
  .footer-grid {
    gap: 30px;
  }
  
  .footer-logo {
    max-width: 150px;
  }
  
  .footer-social {
    gap: 10px;
  }
  
  .social-link {
    width: 45px;
    height: 45px;
    font-size: 1.1rem;
  }
}

/* ===== SECCIÓN 7: FAQ ===== */

.faq-section {
    padding: 4rem 0;
    background: linear-gradient(180deg, #F9FAFB 0%, #FFFFFF 100%);
}

.faq-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.faq-header {
    text-align: center;
    margin-bottom: 3rem;
}

.faq-titulo {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 1rem;
    font-family: "Hakuna Sans", sans-serif;
    line-height: 1.2;
}

.faq-subtitulo {
    font-size: 1.125rem;
    color: #6B7280;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== ACORDEÓN FAQ ===== */
.faq-acordeon {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 3rem;
}

/* Item de FAQ */
.faq-item {
    background: white;
    border: 2px solid #E5E7EB;
    border-left: 5px solid #4ECDC4;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.12);
    border-left-color: #E63946;
}

.faq-item.faq-activa {
    border-left-color: #E63946;
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.12);
}

/* Botón pregunta */
.faq-pregunta {
    width: 100%;
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    gap: 1rem;
    align-items: center;
    padding: 1.5rem;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease;
}

.faq-pregunta:hover {
    background-color: rgba(78, 205, 196, 0.05);
}

.faq-item.faq-activa .faq-pregunta {
    background-color: rgba(230, 57, 70, 0.03);
}

/* Número de FAQ */
.faq-numero {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    flex-shrink: 0;
}

.faq-item.faq-activa .faq-numero {
    background: linear-gradient(135deg, #E63946 0%, #FF9F1C 100%);
}

/* Texto pregunta */
.faq-texto h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #2C3E50;
    margin: 0;
    line-height: 1.4;
}

/* Icono chevron */
.faq-icon {
    font-size: 1.5rem;
    color: #4ECDC4;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.faq-activa .faq-icon {
    transform: rotate(180deg);
    color: #E63946;
}

/* ===== RESPUESTA ===== */
.faq-respuesta {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.36s ease;
}

.faq-contenido {
    padding: 0 1.5rem 1.5rem 1.5rem;
    padding-left: calc(60px + 1.5rem + 1rem); /* Alineado con el texto de la pregunta */
}

.faq-contenido p {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.faq-contenido p:last-child {
    margin-bottom: 0;
}

/* Caja destacada dentro de respuesta */
.faq-destacado {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(168, 216, 234, 0.1) 100%);
    border-left: 4px solid #4ECDC4;
    padding: 1rem 1.25rem;
    border-radius: 6px;
    margin-top: 1rem;
}

.faq-destacado i {
    font-size: 1.5rem;
    color: #E63946;
    flex-shrink: 0;
}

.faq-destacado span {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2C3E50;
}

/* ===== CTA FINAL ===== */
.faq-cta {
    background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 12px rgba(78, 205, 196, 0.2);
}

.faq-cta-contenido {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 1.5rem;
    align-items: center;
}

.faq-cta-contenido > i {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 12px;
    font-size: 2rem;
    color: #4ECDC4;
}

.faq-cta-contenido h4 {
    font-size: 1.375rem;
    font-weight: 700;
    color: #2C3E50;
    margin: 0 0 0.25rem 0;
}

.faq-cta-contenido p {
    font-size: 0.9375rem;
    color: #374151;
    margin: 0;
}

.btn-faq-contacto {
    display: inline-block;
    background: #E63946;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-faq-contacto:hover {
    background: #D32735;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);
    text-decoration: none;
    color: white;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .faq-section {
        padding: 3rem 0;
    }
    
    .faq-container {
        padding: 0 1.5rem;
    }
    
    .faq-titulo {
        font-size: 1.75rem;
    }
    
    .faq-subtitulo {
        font-size: 1rem;
    }
    
    .faq-pregunta {
        grid-template-columns: 48px 1fr 32px;
        gap: 0.75rem;
        padding: 1.25rem;
    }
    
    .faq-numero {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .faq-texto h3 {
        font-size: 1rem;
    }
    
    .faq-icon {
        font-size: 1.25rem;
    }
    
    .faq-contenido {
        padding: 0 1.25rem 1.25rem 1.25rem;
        padding-left: calc(48px + 1.25rem + 0.75rem);
    }
    
    .faq-contenido p {
        font-size: 0.875rem;
    }
    
    .faq-destacado {
        padding: 0.875rem 1rem;
        margin-top: 0.75rem;
    }
    
    .faq-destacado i {
        font-size: 1.25rem;
    }
    
    .faq-destacado span {
        font-size: 0.875rem;
    }
    
    /* CTA responsive */
    .faq-cta {
        padding: 1.5rem;
    }
    
    .faq-cta-contenido {
        grid-template-columns: 1fr;
        gap: 1rem;
        text-align: center;
    }
    
    .faq-cta-contenido > i {
        margin: 0 auto;
        width: 56px;
        height: 56px;
        font-size: 1.75rem;
    }
    
    .btn-faq-contacto {
        width: 100%;
        text-align: center;
    }
}

/* ESTO VA EN LUGAR DE LAS REGLAS CONFLICTIVAS */
@media (max-width: 480px) {
    .faq-pregunta {
        grid-template-columns: 1fr 32px;
        gap: 0.5rem;
        padding-left: calc(32px + 1.25rem + 0.75rem);
    }
    
    .faq-numero {
        /* ESTO ANULA EL position: absolute */
        display: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .faq-contenido {
        padding-left: calc(32px + 1.25rem + 0.75rem);
    }
}

/* ===== SECCIÓN 8: CTA FINAL DUAL ===== */

.cta-final-section {
    padding: 5rem 0;
    background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 50%, #FFFFFF 100%);
}

.cta-final-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.cta-final-header {
    text-align: center;
    margin-bottom: 3rem;
}

.cta-final-titulo {
    font-size: 2.5rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 1rem;
    font-family: "Hakuna Sans", sans-serif;
    line-height: 1.2;
}

.cta-final-subtitulo {
    font-size: 1.25rem;
    color: #6B7280;
    font-weight: 500;
}

/* Grid dual */
.cta-dual-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Cards CTA */
.cta-card {
    background: white;
    border: 3px solid #E5E7EB;
    border-radius: 12px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cta-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #4ECDC4 0%, #A8D8EA 100%);
}

.cta-urgente::before {
    background: linear-gradient(90deg, #E63946 0%, #FF9F1C 100%);
}

.cta-urgente {
    border-color: #E63946;
}

.cta-programada {
    border-color: #4ECDC4;
}

.cta-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

/* Icono grande */
.cta-icono {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.cta-icono.urgente {
    background: linear-gradient(135deg, #E63946 0%, #FF9F1C 100%);
}

.cta-icono.programada {
    background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
}

.cta-icono i {
    font-size: 2.5rem;
    color: white;
}

/* Badge */
.cta-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.cta-badge.urgente {
    background: rgba(230, 57, 70, 0.1);
    color: #E63946;
    border: 2px solid #E63946;
}

.cta-badge.programada {
    background: rgba(78, 205, 196, 0.1);
    color: #4ECDC4;
    border: 2px solid #4ECDC4;
}

/* Título card */
.cta-card-titulo {
    font-size: 1.5rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Descripción */
.cta-card-descripcion {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* Botones CTA */
.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 400px;
}

.btn-cta.urgente {
    background: #25D366; /* WhatsApp green */
    color: white;
}

.btn-cta.urgente:hover {
    background: #1FAD52;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(37, 211, 102, 0.3);
    color: white;
    text-decoration: none;
}

.btn-cta.programada {
    background: #4ECDC4;
    color: white;
}

.btn-cta.programada:hover {
    background: #3DB5AD;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(78, 205, 196, 0.3);
    color: white;
    text-decoration: none;
}

.btn-cta i {
    font-size: 1.5rem;
}

/* Teléfono y nota */
.cta-telefono,
.cta-nota {
    margin-top: 1rem;
    font-size: 0.9375rem;
    color: #6B7280;
}

.cta-telefono i {
    color: #25D366;
}

/* Email alternativo */
.cta-alternativa {
    background: white;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.cta-alternativa-contenido {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1rem;
}

.cta-alternativa-contenido > i {
    font-size: 1.5rem;
    color: #4ECDC4;
}

.cta-alternativa-contenido a {
    color: #4ECDC4;
    font-weight: 600;
    text-decoration: none;
}

.cta-alternativa-contenido a:hover {
    text-decoration: underline;
}

/* Confidencialidad */
.cta-confidencialidad {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(78, 205, 196, 0.1) 0%, rgba(168, 216, 234, 0.1) 100%);
    border: 2px solid #4ECDC4;
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.cta-confidencialidad > i {
    font-size: 1.75rem;
    color: #4ECDC4;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.cta-confidencialidad div {
    font-size: 0.9375rem;
    color: #374151;
    line-height: 1.6;
}

/* Quote final */
.cta-quote {
    background: #2C3E50;
    border-radius: 12px;
    padding: 2.5rem;
    position: relative;
    text-align: center;
    color: white;
}

.quote-icon {
    font-size: 5rem;
    font-family: Georgia, serif;
    color: #4ECDC4;
    line-height: 1;
    margin-bottom: 1rem;
    opacity: 0.3;
}

.quote-texto {
    font-size: 1.25rem;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 1rem;
    color: white;
}

.quote-autor {
    font-size: 1rem;
    font-weight: 600;
    color: #4ECDC4;
}

/* ===== SECCIÓN 9: SERVICIOS RELACIONADOS ===== */

.servicios-relacionados-section {
    padding: 4rem 0;
    background: #F9FAFB;
}

.servicios-relacionados-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header */
.servicios-header {
    text-align: center;
    margin-bottom: 3rem;
}

.servicios-titulo {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2C3E50;
    font-family: "Hakuna Sans", sans-serif;
}

/* Grid de servicios */
.servicios-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

/* Card de servicio */
.servicio-card {
    background: white;
    border: 2px solid #E5E7EB;
    border-left: 5px solid #4ECDC4;
    border-radius: 8px;
    padding: 2rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
}

.servicio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(78, 205, 196, 0.15);
    border-left-color: #E63946;
    text-decoration: none;
}

.servicio-ver-todos {
    border-left-color: #FF9F1C;
}

.servicio-ver-todos:hover {
    border-left-color: #E63946;
}

/* Icono servicio */
.servicio-icono {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4ECDC4 0%, #A8D8EA 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.servicio-icono.todos {
    background: linear-gradient(135deg, #FF9F1C 0%, #E63946 100%);
}

.servicio-icono i {
    font-size: 1.75rem;
    color: white;
}

/* Título servicio */
.servicio-titulo {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2C3E50;
    margin-bottom: 0.75rem;
    line-height: 1.3;
}

/* Descripción servicio */
.servicio-descripcion {
    font-size: 0.9375rem;
    color: #6B7280;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* Arrow */
.servicio-arrow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: #4ECDC4;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.servicio-card:hover .servicio-arrow {
    transform: translateX(4px);
    color: #E63946;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .servicios-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .cta-final-section,
    .servicios-relacionados-section {
        padding: 3rem 0;
    }
    
    .cta-final-container,
    .servicios-relacionados-container {
        padding: 0 1.5rem;
    }
    
    .cta-final-titulo {
        font-size: 1.75rem;
    }
    
    .cta-final-subtitulo {
        font-size: 1.125rem;
    }
    
    .cta-dual-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .cta-card {
        padding: 2rem;
    }
    
    .cta-icono {
        width: 64px;
        height: 64px;
    }
    
    .cta-icono i {
        font-size: 2rem;
    }
    
    .cta-card-titulo {
        font-size: 1.25rem;
    }
    
    .btn-cta {
        font-size: 1rem;
        padding: 0.875rem 1.5rem;
    }
    
    .cta-alternativa-contenido {
        flex-direction: column;
        text-align: center;
    }
    
    .cta-quote {
        padding: 2rem;
    }
    
    .quote-texto {
        font-size: 1.125rem;
    }
    
    .servicios-titulo {
        font-size: 1.75rem;
    }
    
    .servicio-card {
        padding: 1.5rem;
    }
    
    .servicio-icono {
        width: 56px;
        height: 56px;
    }
    
    .servicio-icono i {
        font-size: 1.5rem;
    }
}
/* ===== FOOTER LOGO - EFECTO NEÓN BRUTALISTA ===== */

/* Logo con resplandor base */
.footer-logo {
    filter: brightness(1.2) 
            drop-shadow(0 0 8px #4ECDC4) 
            drop-shadow(0 0 12px rgba(78, 205, 196, 0.6));
    transition: all 0.4s ease;
    max-width: 180px;
    height: auto;
}

/* Hover: Intensifica el glow turquesa y añade rojo */
.footer-logo:hover {
    filter: brightness(1.5) 
            drop-shadow(0 0 15px #4ECDC4) 
            drop-shadow(0 0 25px #4ECDC4)
            drop-shadow(0 0 35px #E63946)
            drop-shadow(0 0 45px rgba(230, 57, 70, 0.4));
    transform: scale(1.05);
    cursor: pointer;
}

/* Versión responsive: menos intensidad en mobile */
@media (max-width: 768px) {
    .footer-logo {
        filter: brightness(1.15) 
                drop-shadow(0 0 6px #4ECDC4);
        max-width: 140px;
    }
    
    .footer-logo:hover {
        filter: brightness(1.3) 
                drop-shadow(0 0 10px #4ECDC4) 
                drop-shadow(0 0 20px #E63946);
        transform: scale(1.03);
    }
}

/* Mobile fixes for Herramientas / Validación Humana visibility */
@media (max-width: 768px) {
  .herramientas-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .herramienta-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    padding: 12px !important;
  }

  .herramienta-icon {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.1rem !important;
  }

  .herramienta-card h5 {
    font-size: 1rem !important;
    margin: 0;
  }

  /* Reduce padding of capa-body on mobile so content is visible without overflow */
  .capa-body {
    padding: 12px !important;
  }

  /* Mobile fixes for Precios CTA section */
  .precios-cta {
    padding: 20px 15px !important;
    box-shadow: 4px 4px 0px #000 !important;
    margin-bottom: 15px !important;
  }

  .precios-cta h3 {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
  }

  .precios-cta p {
    font-size: 0.95rem !important;
    margin-bottom: 15px !important;
  }

  .precios-cta-btn {
    font-size: 0.95rem !important;
    padding: 12px 20px !important;
    gap: 8px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  .precios-cta-btn i {
    font-size: 1.2rem !important;
  }

  /* Mobile fixes for Caso Real section */
  .caso-real-banner {
    flex-direction: column !important;
    gap: 15px !important;
    padding: 20px 15px !important;
    box-shadow: 4px 4px 0px #000 !important;
  }

  .caso-icon {
    font-size: 2.5rem !important;
  }

  .caso-titulo {
    font-size: 1.3rem !important;
    margin-bottom: 12px !important;
  }

  .caso-contexto {
    font-size: 0.95rem !important;
    margin-bottom: 20px !important;
  }

  .caso-comparativa {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .caso-antes,
  .caso-despues {
    padding: 15px !important;
    border-width: 3px !important;
  }

  .caso-vs {
    display: none !important;
  }

  .caso-label {
    font-size: 0.75rem !important;
  }

  .caso-dato {
    font-size: 1.8rem !important;
    margin-bottom: 5px !important;
  }

  .caso-conclusion {
    font-size: 0.8rem !important;
  }

  .insight-item {
    padding: 12px 15px !important;
    gap: 10px !important;
    font-size: 0.85rem !important;
  }

  .insight-item i {
    font-size: 1.2rem !important;
  }

  .insight-item span {
    font-size: 0.85rem !important;
  }

  /* Mobile fixes for Proceso de Cotización section */
  .proceso-cotizacion {
    padding: 20px 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 4px 4px 0px #000 !important;
  }

  .proceso-cotizacion-header {
    flex-direction: column !important;
    gap: 10px !important;
    margin-bottom: 20px !important;
  }

  .proceso-cotizacion-header i {
    font-size: 1.8rem !important;
  }

  .proceso-cotizacion-header h3 {
    font-size: 1.1rem !important;
    text-align: center !important;
  }

  .cotizacion-paso {
    gap: 12px !important;
    padding: 15px !important;
    flex-wrap: wrap !important;
  }

  .cotizacion-numero {
    width: 40px !important;
    height: 40px !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
  }

  .cotizacion-contenido strong {
    font-size: 0.95rem !important;
    margin-bottom: 3px !important;
  }

  .cotizacion-contenido p {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
}