/* ==========================================================
   SITIO WEB CLICK — Capa de identidad de marca
   Basada en el Manual de Identidad Corporativa 2026
   Colores: Rojo Vivo #fd073c (principal), Azul Violáceo #3902a0,
            Blanco Pureza #ffffff, Rojo Fresa #ff698a, Lavanda Suave #d7c1ff
   Tipografía: Baumans (títulos / marca) + Arimo (textos web)
   ========================================================== */

:root {
  --rojo: #fd073c;
  --morado: #3902a0;
  --fresa: #ff698a;
  --lavanda: #d7c1ff;
  --lavanda-claro: #f3ecff;
  --blanco: #ffffff;
  --font-marca: 'Baumans', 'Arimo', sans-serif;
  --font-texto: 'Arimo', Arial, Helvetica, sans-serif;
}

/* Tipografía corporativa */
*, body { font-family: var(--font-texto); }
h1, .section-title, .marca-title { font-family: var(--font-marca); font-weight: 400 !important; letter-spacing: 0.5px; }
h1 :not(i), .section-title :not(i), .marca-title :not(i), .banda-nextia h2 :not(i), .frase-marca blockquote :not(i), .cta-final h2 :not(i) { font-family: inherit; font-weight: inherit; }

/* El Rojo Vivo es el color que debe predominar en los llamados a la acción */
.btn:not(.btn-whatsapp):not(.btn-outline):not(.btn-white) {
  background: var(--rojo);
  border-color: var(--rojo);
  box-shadow: 0 10px 20px rgba(253, 7, 60, 0.28);
}
.btn:not(.btn-whatsapp):not(.btn-outline):not(.btn-white):hover {
  background: var(--morado);
  border-color: var(--morado);
  box-shadow: 0 10px 20px rgba(57, 2, 160, 0.3);
}
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--fresa); outline-offset: 3px; }

/* Enlace activo de la navegación */
.nav-links a.activo { color: var(--rojo); }
.nav-links a.activo::after { width: 100%; }

/* Claim corporativo */
.claim-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--lavanda-claro); color: var(--morado);
  border: 1px solid var(--lavanda); border-radius: 50px;
  padding: 7px 16px; font-size: 0.85rem; font-weight: 700;
  margin-bottom: 18px; letter-spacing: 0.3px;
}
.claim-chip i { color: var(--rojo); }
.footer-claim { font-family: var(--font-marca); font-size: 1.05rem; color: var(--lavanda); margin: -8px 0 16px; letter-spacing: 0.5px; }

/* ---------- Componentes nuevos ---------- */
.eyebrow { display: block; text-align: center; color: var(--rojo); font-weight: 700; font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; }

/* Rejilla de beneficios */
.grid-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.why-card { background: var(--blanco); border-radius: 18px; padding: 28px 26px; box-shadow: 0 10px 30px rgba(57, 2, 160, 0.06); border-left: 4px solid var(--lavanda); transition: 0.3s; }
.why-card:hover { border-left-color: var(--rojo); transform: translateY(-6px); box-shadow: 0 18px 36px rgba(57, 2, 160, 0.12); }
.why-card i { font-size: 1.6rem; color: var(--rojo); margin-bottom: 14px; }
.why-card h3 { font-size: 1.1rem; margin-bottom: 8px; color: var(--oscuro, #0e0e1a); }
.why-card p { color: var(--gris, #6c6c7a); font-size: 0.95rem; line-height: 1.65; }

/* Banda destacada NextIAData */
.banda-nextia { background: linear-gradient(135deg, var(--morado) 0%, #24006b 60%, #5a0b8c 100%); color: #fff; border-radius: 28px; padding: 56px 6%; display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center; position: relative; overflow: hidden; }
.banda-nextia::after { content: ''; position: absolute; width: 420px; height: 420px; right: -120px; top: -120px; border-radius: 50%; border: 2px solid rgba(253, 7, 60, 0.35); }
.banda-nextia h2 { font-family: var(--font-marca); font-size: 2.3rem; font-weight: 400; margin-bottom: 14px; }
.banda-nextia h2 span { color: var(--fresa); }
.banda-nextia p { opacity: 0.92; line-height: 1.75; margin-bottom: 22px; }
.nextia-lista { list-style: none; display: grid; gap: 12px; position: relative; z-index: 1; }
.nextia-lista li { display: flex; gap: 12px; align-items: flex-start; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); padding: 14px 16px; border-radius: 14px; font-size: 0.95rem; }
.nextia-lista i { color: var(--fresa); margin-top: 3px; }
.btn-white { display: inline-block; background: #fff; color: var(--morado); padding: 14px 30px; border-radius: 50px; text-decoration: none; font-weight: 700; transition: 0.3s; border: 2px solid #fff; }
.btn-white:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; transform: translateY(-3px); }

/* Sectores / para quién */
.grid-sectores { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.sector { background: var(--blanco); border-radius: 18px; padding: 26px 22px; text-align: left; border: 1px solid #eee8fb; transition: 0.3s; }
.sector:hover { border-color: var(--fresa); box-shadow: 0 14px 30px rgba(253, 7, 60, 0.1); }
.sector .ico { width: 48px; height: 48px; border-radius: 14px; background: var(--lavanda-claro); color: var(--morado); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; margin-bottom: 14px; }
.sector h3 { font-size: 1.02rem; margin-bottom: 6px; }
.sector p { color: var(--gris, #6c6c7a); font-size: 0.9rem; line-height: 1.6; }

/* Línea del tiempo */
.timeline { position: relative; max-width: 900px; margin: 0 auto; padding-left: 34px; }
.timeline::before { content: ''; position: absolute; left: 10px; top: 6px; bottom: 6px; width: 3px; background: linear-gradient(var(--rojo), var(--morado)); border-radius: 3px; }
.t-item { position: relative; background: var(--blanco); border-radius: 16px; padding: 22px 24px; margin-bottom: 20px; box-shadow: 0 8px 24px rgba(57, 2, 160, 0.06); }
.t-item::before { content: ''; position: absolute; left: -31px; top: 26px; width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 4px solid var(--rojo); }
.t-item.final::before { border-color: var(--morado); background: var(--lavanda); }
.t-etapa { font-size: 0.75rem; font-weight: 700; color: var(--rojo); letter-spacing: 1.5px; text-transform: uppercase; }
.t-item h3 { font-family: var(--font-marca); font-weight: 400; font-size: 1.35rem; color: var(--morado); margin: 4px 0 6px; }
.t-item p { color: var(--gris, #6c6c7a); line-height: 1.65; font-size: 0.95rem; }

/* Fundadores */
.grid-fundadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; max-width: 980px; margin: 0 auto; }
.fundador { background: var(--blanco); border-radius: 22px; padding: 32px 28px; box-shadow: 0 12px 32px rgba(57, 2, 160, 0.08); display: flex; gap: 20px; align-items: flex-start; }
.avatar { flex-shrink: 0; width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(135deg, var(--rojo), var(--morado)); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-marca); font-size: 1.6rem; }
.fundador h3 { font-size: 1.15rem; margin-bottom: 2px; }
.fundador .rol { color: var(--rojo); font-weight: 700; font-size: 0.85rem; margin-bottom: 10px; display: block; }
.fundador p { color: var(--gris, #6c6c7a); font-size: 0.93rem; line-height: 1.65; }

/* Misión / Visión / Propósito */
.grid-mvp { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
.mvp { border-radius: 22px; padding: 34px 28px; color: #fff; }
.mvp.mision { background: var(--rojo); }
.mvp.vision { background: var(--morado); }
.mvp.proposito { background: #fff; color: var(--oscuro, #0e0e1a); border: 2px solid var(--lavanda); }
.mvp i { font-size: 1.8rem; margin-bottom: 14px; }
.mvp.proposito i { color: var(--rojo); }
.mvp h3 { font-family: var(--font-marca); font-weight: 400; font-size: 1.6rem; margin-bottom: 10px; }
.mvp p { line-height: 1.7; font-size: 0.97rem; opacity: 0.95; }

/* Valores */
.grid-valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.valor { background: var(--blanco); border-radius: 18px; padding: 26px 20px; text-align: center; border-top: 4px solid var(--rojo); box-shadow: 0 8px 22px rgba(57, 2, 160, 0.06); }
.valor:nth-child(even) { border-top-color: var(--morado); }
.valor i { font-size: 1.7rem; color: var(--morado); margin-bottom: 12px; }
.valor h3 { font-size: 1.02rem; margin-bottom: 8px; }
.valor p { font-size: 0.88rem; color: var(--gris, #6c6c7a); line-height: 1.6; }

/* Cita / frase de marca */
.frase-marca { max-width: 860px; margin: 0 auto; text-align: center; }
.frase-marca blockquote { font-family: var(--font-marca); font-size: 1.9rem; line-height: 1.35; color: var(--morado); }
.frase-marca blockquote span { color: var(--rojo); }
.frase-marca cite { display: block; margin-top: 16px; color: var(--gris, #6c6c7a); font-style: normal; font-size: 0.95rem; }

/* Chips de cobertura */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip { background: var(--blanco); border: 1px solid var(--lavanda); color: var(--morado); padding: 9px 18px; border-radius: 50px; font-weight: 700; font-size: 0.9rem; }
.chip.futuro { background: transparent; border-style: dashed; color: var(--gris, #6c6c7a); font-weight: 400; }
.chip i { color: var(--rojo); margin-right: 6px; }

/* Encabezado de páginas internas */
.page-hero { padding: 140px 5% 70px; text-align: center; position: relative; }
.page-hero h1 { font-size: 3rem; color: var(--oscuro, #0e0e1a); line-height: 1.15; max-width: 900px; margin: 0 auto 18px; }
.page-hero h1 span { color: var(--rojo); }
.page-hero p { color: var(--gris, #6c6c7a); max-width: 680px; margin: 0 auto; font-size: 1.08rem; line-height: 1.75; }

/* Banda CTA final */
.cta-final { background: var(--rojo); color: #fff; border-radius: 28px; padding: 54px 6%; text-align: center; }
.cta-final h2 { font-family: var(--font-marca); font-weight: 400; font-size: 2.2rem; margin-bottom: 10px; }
.cta-final p { opacity: 0.95; max-width: 620px; margin: 0 auto 26px; line-height: 1.7; }
.cta-final .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-final .btn-white { color: var(--rojo); }
.cta-final .btn-white:hover { background: var(--morado); border-color: var(--morado); color: #fff; }

@media (max-width: 768px) {
  .banda-nextia { grid-template-columns: 1fr; padding: 40px 7%; border-radius: 22px; }
  .banda-nextia h2 { font-size: 1.9rem; }
  .page-hero { padding: 115px 6% 50px; }
  .page-hero h1 { font-size: 2.1rem; }
  .frase-marca blockquote { font-size: 1.45rem; }
  .fundador { flex-direction: column; }
  .cta-final h2 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Contraste en la barra inferior del pie de página */
.footer-bottom-bar a { color: var(--fresa); }

/* Evita desplazamiento horizontal en celular (animaciones laterales) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }

/* ==========================================================
   ENCABEZADO EN CELULAR + MENÚ MÓVIL RENOVADO (oct 2026)
   ========================================================== */
.nav-brand { display: none; }

@media (max-width: 900px) {
  /* Mismo punto de cambio en todas las páginas */
  .top-nav .nav-links { display: none !important; }
  .top-nav .menu-btn { display: flex !important; }

  .top-nav { justify-content: flex-start; gap: 10px; }
  .top-nav .nav-logo { flex-shrink: 0; display: flex; align-items: center; }
  .top-nav .nav-logo img { height: 42px; }

  /* Nombre de marca + sección actual: llena el espacio vacío */
  .nav-brand {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 0; flex: 1; text-decoration: none; line-height: 1.1;
  }
  .nav-brand .nb-name {
    font-family: 'Baumans', 'Arimo', sans-serif; font-size: 19px;
    color: #3902a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav-brand .nb-page {
    font-family: 'Arimo', Arial, sans-serif; font-size: 11px; font-weight: 700;
    color: #fd073c; letter-spacing: .4px; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 3px;
  }

  /* Botón hamburguesa más visible */
  .top-nav .menu-btn {
    flex-shrink: 0; width: 44px; height: 44px; border-radius: 14px;
    align-items: center; justify-content: center; font-size: 20px;
    background: #f1eaff; color: #3902a0; border: 1px solid #D7C1FF;
    transition: transform .2s, background .2s;
  }
  .top-nav .menu-btn:active { transform: scale(.92); background: #D7C1FF; }
}

/* ---------- Menú lateral ---------- */
.overlay { z-index: 10040 !important; background: rgba(28, 0, 80, .45) !important;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

.side-menu.swc-menu {
  z-index: 10050 !important;
  width: 86%; max-width: 340px; height: 100vh; height: 100dvh;
  padding: 0 !important; border-right: 0 !important;
  background:
    radial-gradient(circle at 110% 0%, rgba(253, 7, 60, .35), transparent 45%),
    radial-gradient(circle at -10% 100%, rgba(255, 105, 138, .25), transparent 45%),
    linear-gradient(160deg, #3902a0 0%, #26007a 60%, #1c0050 100%) !important;
  box-shadow: 8px 0 40px rgba(28, 0, 80, .45) !important;
  display: flex; flex-direction: column; overflow: hidden;
  transition: left .45s cubic-bezier(.22, 1, .36, 1) !important;
}

.swc-menu .sm-head {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 18px 16px; border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.swc-menu .sm-head img { width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 2px; }
.swc-menu .sm-head-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.swc-menu .sm-head-txt strong { font-family: 'Baumans', sans-serif; font-weight: 400; font-size: 20px; color: #fff; }
.swc-menu .sm-head-txt span { font-size: 12px; color: #D7C1FF; margin-top: 2px; }
.swc-menu .close-btn {
  margin: 0 !important; align-self: center !important; flex-shrink: 0;
  width: 40px !important; height: 40px !important; font-size: 22px !important;
  background: rgba(255, 255, 255, .12) !important; color: #fff !important;
  box-shadow: none !important; border: 1px solid rgba(255, 255, 255, .25) !important;
}
.swc-menu .close-btn:hover, .swc-menu .close-btn:active { background: #fd073c !important; transform: rotate(90deg); }

.swc-menu .sm-links {
  flex: 1; overflow-y: auto; padding: 14px 14px 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.swc-menu a.sm-link {
  display: flex !important; align-items: center; gap: 14px;
  margin: 0 !important; padding: 11px 12px !important; border: 0 !important;
  border-radius: 14px; color: #fff !important; font-size: 16.5px !important;
  font-weight: 700; text-decoration: none;
  opacity: 0; transform: translateX(-40px);
  transition: transform .5s cubic-bezier(.22, 1, .36, 1), opacity .4s ease, background .25s;
}
.swc-menu a.sm-link.desde-der { transform: translateX(40px); }
.swc-menu.open a.sm-link {
  opacity: 1; transform: translateX(0);
  transition-delay: calc(var(--i, 0) * 60ms + 120ms), calc(var(--i, 0) * 60ms + 120ms), 0s;
}
.swc-menu .sm-ico {
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); color: #FF698A; font-size: 15px;
  transition: background .25s, color .25s, transform .25s;
}
.swc-menu .sm-txt { flex: 1; }
.swc-menu .sm-arrow { font-size: 12px; opacity: 0; transform: translateX(-8px); transition: .25s; color: #FF698A; }

/* Al tocar o pasar el cursor: el renglón se desplaza y aparece la flecha */
.swc-menu.open a.sm-link:hover, .swc-menu.open a.sm-link:active {
  background: rgba(255, 255, 255, .1); transform: translateX(6px); transition-delay: 0s;
}
.swc-menu a.sm-link:hover .sm-arrow, .swc-menu a.sm-link:active .sm-arrow { opacity: 1; transform: translateX(0); }
.swc-menu a.sm-link:hover .sm-ico { transform: rotate(-8deg) scale(1.08); }

/* Página actual: píldora roja de marca */
.swc-menu a.sm-link.actual { background: #fd073c; box-shadow: 0 8px 22px rgba(253, 7, 60, .35); }
.swc-menu a.sm-link.actual .sm-ico { background: rgba(255, 255, 255, .22); color: #fff; }
.swc-menu a.sm-link.actual .sm-arrow { opacity: 1; transform: none; color: #fff; }

.swc-menu .sm-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .12); }
.swc-menu a.sm-cta {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 12px !important; padding: 13px !important; border: 0 !important;
  border-radius: 50px; background: #fd073c; color: #fff !important;
  font-size: 15px !important; font-weight: 700; text-decoration: none;
  box-shadow: 0 10px 24px rgba(253, 7, 60, .4);
  animation: smPulse 2.4s ease-in-out infinite;
}
.swc-menu a.sm-cta i { font-size: 20px; }
@keyframes smPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }

/* Frase de marca que corre de derecha a izquierda */
.swc-menu .sm-marquee { overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.swc-menu .sm-marquee-track { display: inline-flex; animation: smMarquee 16s linear infinite; }
.swc-menu .sm-marquee span { font-family: 'Baumans', sans-serif; font-size: 14px; color: #D7C1FF; padding-right: 8px; }
.swc-menu .sm-marquee b { color: #fd073c; font-weight: 400; margin: 0 6px; }
@keyframes smMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Pantallas bajas (celular horizontal) */
@media (max-height: 560px) {
  .swc-menu a.sm-link { padding: 7px 10px !important; font-size: 15px !important; }
  .swc-menu .sm-ico { width: 30px; height: 30px; }
  .swc-menu .sm-marquee { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .swc-menu a.sm-link, .swc-menu a.sm-link.desde-der { transform: none; opacity: 1; transition: background .2s; }
  .swc-menu a.sm-cta, .swc-menu .sm-marquee-track { animation: none; }
}