/* ============================================================
   TEMA CLARO de las secciones informativas (2026-09-28)
   El hero del robot se queda en negro; todo lo demás (servicios,
   equipos, planes, avances, testimonios, cifras, proceso, equipo,
   tecnologías, contacto) pasa a fondo claro para leerse mejor.
   Colores planos, sin degradados ni glows. Se carga DESPUÉS de
   styles.css; lo usan index.html y planes.html.

   Paleta (contraste sobre #ffffff / #f4f5f7):
     texto principal   #111318  18.6 / 17.0  (AAA)
     texto de párrafo  #3a3f47  10.6 /  9.7  (AAA)
     texto secundario  #5a606a   6.3 /  5.8  (AA)
     acento (verde)    #3d6600   6.8 /  6.2  (AA)  — el lima #b6ff3c
                       queda solo como RELLENO de botones/insignias
                       con texto oscuro encima (15.4).
   ============================================================ */

/* ---------- 1. Variables dentro de las secciones claras ---------- */
.section-services,
.section-teams,
#planes-web,
.section-log,
.section-testimonials,
.section-stats,
.section-process,
.section-team,
.section-stack,
.section-cta,
.team-modal-dialog {
  --text-primary: #111318;
  --text-secondary: #3a3f47;
  --text-muted: #5a606a;
  --text-faint: #616771;
  --text-bg-mega: #eef0f3;
  --border-subtle: #e6e8ec;
  --border-card: #dde0e5;
  --border-strong: #c3c8cf;
  --lime: #3d6600;          /* acento legible sobre claro */
  --lime-fill: #b6ff3c;     /* lima de marca, solo como relleno */
  --lime-glow: transparent; /* sin glows */
  --lime-soft: #eef7df;
  --bg-card: #ffffff;
  --bg-card-solid: #ffffff;
  --card-shadow: 0 1px 2px rgba(17, 19, 24, 0.05), 0 6px 18px rgba(17, 19, 24, 0.05);
  color: var(--text-primary);
}

/* ---------- 2. Fondos planos, alternando blanco / gris muy claro ---------- */
.section-services     { background: #f4f5f7; }
.section-teams        { background: #ffffff; }
.section-log          { background: #f4f5f7; }
.section-testimonials { background: #f4f5f7; }
.section-stats        { background: #ffffff; }
.section-process      { background: #f4f5f7; border-color: #dde0e5; }
.section-team         { background: #ffffff; }
.section-stack        { background: #f4f5f7; }
.section-cta          { background: #ffffff; border-top: 1px solid #e6e8ec; }

/* Planes web: su sección tiene ancho máximo, el fondo se extiende a todo
   el ancho con una sombra sólida recortada (sigue siendo color plano). */
#planes-web {
  background: #f4f5f7;
  box-shadow: 0 0 0 100vmax #f4f5f7;
  clip-path: inset(0 -100vmax);
}

/* Decoración de fondo que era glow / degradado / rejilla: fuera */
.section-teams::before,
.testimonials-glow,
.process-bg-pattern,
.section-cta .robot-glow {
  display: none;
}

/* ---------- 3. Legibilidad ---------- */
:is(.section-services, .section-teams, .section-log, .section-testimonials,
    .section-stats, .section-process, .section-team, .section-stack, .section-cta) .eyebrow {
  font-size: 12px;
  color: var(--text-muted);
}
:is(.section-services, .section-teams, .section-log, .section-testimonials,
    .section-stats, .section-process, .section-team, .section-stack, .section-cta) .eyebrow-lime {
  color: var(--lime);
}
.section-head-desc,
.section-head-desc-center,
.cta-desc {
  line-height: 1.65;
  max-width: 62ch;
}
.service-desc,
.process-step-desc,
.log-item-desc,
.team-package-desc {
  font-size: 17px;
  line-height: 1.65;
  max-width: 70ch;
}
.teams-calc-role-desc {
  font-size: 14.5px;
  line-height: 1.55;
}
.service-tags li {
  font-size: 11px;
}
.service-card-link,
.stat-block-label {
  font-size: 12px;
}
@media (max-width: 768px) {
  .glass-card p.service-desc,
  p.team-package-desc {
    font-size: 16px;
    line-height: 1.6;
  }
}
/* Clientes (ya era clara): su eyebrow no llegaba a AA (3.99) */
.marquee-section .eyebrow-section {
  color: #5a606a;
}

/* Puntos decorativos: el blanco translúcido no se ve sobre claro */
:is(.section-services, .section-teams, .section-log, .section-testimonials,
    .section-stats, .section-process, .section-team, .section-stack, .section-cta) .dot {
  background: #9aa0a8;
}

/* ---------- 4. Tarjetas sobre claro: blanco + borde + sombra sutil ---------- */
.section-services .glass-card,
.team-package,
.teams-compare-table-wrap,
.teams-calculator,
.testimonial,
.stack-cloud {
  background: #ffffff;
  border: 1px solid var(--border-card);
  box-shadow: var(--card-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.service-card-featured,
.team-package-featured {
  background: #ffffff;
  border-color: var(--lime);
}
.service-card-featured .service-icon {
  filter: none;
}
.service-card-cta {
  background: transparent;
  box-shadow: none;
  border-style: dashed;
}
.service-badge {
  background: var(--lime-soft);
  border-color: var(--lime);
}

/* ---------- 5. Rellenos lima de marca (texto oscuro encima) ---------- */
:is(.section-services, .section-teams, .section-log, .section-testimonials,
    .section-stats, .section-process, .section-team, .section-stack, .section-cta) .pulse-lime,
.team-package-badge,
.team-package-cta-primary,
.team-package-cta-primary:hover,
.teams-compare-pkg-badge,
.teams-plan-btn.is-active,
.teams-calc-modality-btn.is-active,
.teams-calc-cta,
.log-filter.is-active,
.status-en-curso,
.status-continuo,
.stack-tag-lg::before,
.section-cta .btn-lime,
.testimonials-demo-notice .dot,
.testimonials-dot.is-active {
  background: var(--lime-fill);
}
.team-package-cta-primary,
.teams-plan-btn.is-active,
.teams-calc-modality-btn.is-active,
.teams-calc-cta,
.log-filter.is-active,
.section-cta .btn-lime {
  border: 1px solid #8fcf1f;
}
.team-package-cta-primary:hover,
.teams-calc-cta:hover,
.section-cta .btn-lime:hover {
  background: #a6f020;
}

/* ---------- 6. Ajustes puntuales de componentes ---------- */
.stat-block-num {
  text-shadow: none;
}
.num-suffix {
  color: #6f9a2a;
}
.log-filter-count {
  background: #eef0f3;
}
.log-filter:hover {
  border-color: var(--lime);
}
.teams-compare-pkg-col-featured,
.teams-compare-cell-featured {
  background: #f5fbe9;
}
.teams-calc-modality,
.teams-calc-stepper,
.teams-calc-summary {
  background: #f4f5f7;
}
.process-step-dot {
  background: #f4f5f7;
}
.process-step-line {
  background: var(--lime);
}
.process-step-deliverable {
  background: #ffffff;
}
.process-cta,
.process-cta:hover {
  background: #ffffff;
}
.stack-tag-lg,
.stack-tag-lg:hover {
  background: var(--lime-soft);
  box-shadow: none;
}
.btn-ghost {
  background: #ffffff;
  border: 1px solid var(--border-strong);
}
.testimonial-avatar {
  background: var(--lime-soft);
}
.team-photo,
.team-photo-placeholder,
.team-modal-photo {
  background: #e9ebee;
}
.team-modal-photo-placeholder {
  background: var(--lime-soft);
}
.teams-compare-table thead {
  background: #f4f5f7;
}
/* Robot de contacto: sin la sombra negra (sobre blanco se ve como mancha gris) */
.section-cta .robot-image {
  filter: none;
}

/* ---------- 7. Planes web (tiene su propio <style> en el HTML) ---------- */
body #planes-web {
  --bg: #f4f5f7;
  --surface: #ffffff;
  --surface-2: #ffffff;
  --border: #dde0e5;
  --border-strong: #c3c8cf;
  --text: #111318;
  --muted: #4f555e;
  --lime: #3d6600;
}
body #planes-web .card {
  box-shadow: var(--card-shadow);
}
body #planes-web .badge,
body #planes-web .cta.solid {
  background: #b6ff3c;
  color: #111318;
}
body #planes-web .cta.solid:hover {
  background: #a6f020;
}
body #planes-web .cta.ghost:hover {
  background: #f4f5f7;
}
body #planes-web .logo-chip {
  border: 1px solid #dde0e5;
}
body #planes-web .lead {
  line-height: 1.65;
}

/* ---------- 8. Barra superior: oscura sobre el robot, clara al bajar ---------- */
.hero .topbar {
  transition: background-color 0.25s ease, border-color 0.25s ease;
}
.hero .topbar.is-light {
  background: #ffffff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid #e6e8ec;
  --text-primary: #111318;
  --text-secondary: #3a3f47;
  --text-muted: #5a606a;
  --lime: #3d6600;
  color: #111318;
}

/* ---------- 9. Pantalla de carga del robot (precarga del 90%) ---------- */
/* Mientras html.is-preloading (lo pone y lo quita el script del <head> de
   index.html) la página no scrollea y la pantalla de carga cubre todo.
   La barra superior se esconde: el loader vive dentro del escenario sticky
   del robot (su propio contexto de apilamiento) y no puede quedar encima. */
html.is-preloading,
html.is-preloading body {
  overflow: hidden;
}
html.is-preloading .cinema-loader {
  position: fixed;
  z-index: 100;
}
html.is-preloading .hero .topbar {
  visibility: hidden;
}
.cinema-loader {
  background: #0a0a0b;
}
.cinema-loader-eyebrow::before {
  box-shadow: none; /* sin glow */
}
.cinema-loader-meta {
  color: #ffffff;
}

/* ---------- 10. Texto blanco sobre el robot ---------- */
/* Los grises del hero (menú, EST. 2015, ES / EN, CPU LOAD, tarjetas de
   principios, meta y SCROLL) pasan a blanco. El lima se queda lima y la
   barra en .is-light redefine sus variables (sigue oscura). */
.hero {
  --text-secondary: #ffffff;
  --text-muted: #f2f2f2;
  --text-faint: #f2f2f2;
}
.cinema-arc-label,
.cinema-big-meta,
.beat-card-speaker {
  color: #ffffff;
}
.beat-card-context,
.cinema-footer-meta {
  color: #f2f2f2;
}

/* ---------- 11. Móvil: el aviso del pie no pisa el texto del hero ---------- */
/* En ≤600px el aviso "Web site diseñado con IA…" ocupa 3-4 líneas sobre
   SCROLL ↓ (~105-125px desde abajo); el texto del hero estaba a 96px. */
@media (max-width: 600px) {
  .cinema-hero-text { bottom: 140px; }
}

/* ---------- 12. Modal de Servicios: enlace a planes (en lugar del precio) ---------- */
.services-modal-plans-link {
  color: #3d6600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.services-modal-plans-link:hover {
  color: #111318;
}

/* ---------- 13. Barra superior con 11 enlaces (se sumó Industrias) ---------- */
/* Entre 1101px (se oculta el menú) y ~1400px los enlaces no caben a 16px. */
.topbar-nav a {
  white-space: nowrap;
}
@media (min-width: 1101px) and (max-width: 1400px) {
  .topbar-nav { gap: 14px; }
  .topbar-nav a { font-size: 14px; }
}

/* ---------- 14. Enlace "Ver más sobre este servicio" y bloque Servicios del pie ---------- */
.services-modal-more {
  margin-top: 28px;
  font-size: 15px;
}
/* El pie pasa de 4 a 5 columnas (se sumó Servicios): cada columna toma el
   ancho de su contenido. En ≤900px la marca va arriba y las columnas en 2
   (antes, en móvil, las 4 columnas no cabían y se cortaban por la derecha). */
.footer-cols {
  grid-template-columns: repeat(5, auto);
  justify-content: space-between;
}
@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    row-gap: 36px;
  }
  .footer-col li { overflow-wrap: anywhere; }
}

/* ---------- 15. Hero: texto en lima plano, sin degradado ---------- */
.cinema-big-slide .cinema-big-title em {
  background: none;
  -webkit-text-fill-color: #b6ff3c;
  color: #b6ff3c;
  animation: none;
}