/* =====================================================================
   TIOX · styles.css
   Estándares TIOX — diseño corporativo, animaciones y mobile-first.
   Paleta: navy profundo + azul acero + gris pizarra.
   ===================================================================== */

:root{
  --navy:       #0B1B33;   /* casi negro azulado, primario profundo */
  --blue:       #17325C;   /* primario medio */
  --blue-2:     #24518F;   /* acento de marca (círculo del isotipo IO) */
  --steel:      #7C93B3;   /* azul grisáceo, acento suave */
  --slate:      #3A4451;   /* gris pizarra, monocromo secundario */
  --mist:       #EEF1F6;   /* superficie suave */
  --paper:      #FFFFFF;
  --muted:      #5C6B7A;
  --live:       #2E8B57;   /* verde estado "en producción" */
  --line:       rgba(11,27,51,.10);
  --line-light: rgba(255,255,255,.14);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace;
  --shadow: 0 18px 40px -20px rgba(11,27,51,.35);
  --radius: 14px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:78px; }

body{
  font-family:var(--font);
  color:var(--navy);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ text-decoration:none; }

/* ---------- Tipografía utilitaria ---------- */
.tx-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono);
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--steel);
  margin-bottom:1rem;
}
.tx-eyebrow--dark{ color:var(--blue-2); }

.tx-h2{
  font-size:clamp(1.7rem, 1.1rem + 2.4vw, 2.6rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.1;
  color:var(--navy); margin:0 0 1rem;
}
.tx-h2--light{ color:var(--paper); }

.tx-lead{ font-size:1.06rem; color:var(--muted); max-width:60ch; }
.tx-lead--light{ color:rgba(255,255,255,.78); }

.tx-accent-text{ color:var(--steel); }

.tx-help{ font-size:.82rem; color:var(--muted); }

.tx-head{ max-width:720px; margin:0 auto 3rem; text-align:center; }
.tx-head .tx-lead{ margin-inline:auto; }

/* ---------- Botones ---------- */
.btn-tx-accent{
  --bs-btn-color:#fff;
  background:var(--blue-2); border:0; color:#fff;
  font-weight:700; border-radius:999px;
  box-shadow:0 10px 24px -10px rgba(36,81,143,.6);
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn-tx-accent:hover{ background:#2c5fa3; color:#fff; transform:translateY(-2px); }

.btn-tx-ghost{
  background:transparent; border:1.5px solid rgba(255,255,255,.45);
  color:#fff; font-weight:600; border-radius:999px;
  transition:border-color .18s ease, background .18s ease;
}
.btn-tx-ghost:hover{ background:rgba(255,255,255,.08); border-color:#fff; color:#fff; }

/* ---------- Navbar ---------- */
.tx-nav{
  background:rgba(11,27,51,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);
  padding-block:.55rem;
  transition:background .25s ease, box-shadow .25s ease;
}
.tx-nav.is-scrolled{ background:rgba(11,27,51,.98); box-shadow:0 10px 30px -18px rgba(0,0,0,.7); }

.tx-brand{ display:inline-flex; align-items:center; }
.tx-brand__mark{ height:26px; width:auto; filter:brightness(0) invert(1); }
.tx-brand__mark--footer{ height:28px; }

.tx-nav .nav-link{
  color:rgba(255,255,255,.82); font-weight:500; font-size:.95rem;
  padding-inline:.9rem; position:relative;
}
.tx-nav .nav-link:hover,
.tx-nav .nav-link:focus{ color:#fff; }
.tx-nav .nav-link::after{
  content:""; position:absolute; left:.9rem; right:.9rem; bottom:.35rem; height:2px;
  background:var(--steel); transform:scaleX(0); transform-origin:left; transition:transform .2s ease;
}
.tx-nav .nav-link:hover::after{ transform:scaleX(1); }

.navbar-toggler{ border:1px solid var(--line-light); color:#fff; padding:.3rem .55rem; }
.navbar-toggler:focus{ box-shadow:0 0 0 .2rem rgba(124,147,179,.4); }
.navbar-toggler .bi{ font-size:1.4rem; }

/* ---------- HERO ---------- */
.tx-hero{ position:relative; color:#fff; overflow:hidden; padding:9.5rem 0 5rem; }
.tx-hero__bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,147,179,.16), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(36,81,143,.4), transparent 55%),
    linear-gradient(160deg, #0B1B33 0%, #12294A 55%, #0B1B33 100%);
}

/* signature: red de nodos que representa estaciones / flotillas / plazas conectadas al núcleo TIOX */
.tx-hero__grid{
  position:absolute; inset:0; width:100%; height:100%; z-index:0;
  opacity:.55;
}
.tx-grid__lines line{
  stroke:rgba(124,147,179,.35); stroke-width:1.2;
}
.tx-node{ fill:var(--steel); opacity:.85; }
.tx-node--core{
  fill:var(--paper);
  animation:corePulse 2.6s ease-in-out infinite;
}
.tx-node:not(.tx-node--core){ animation:nodePulse 3.4s ease-in-out infinite; }
.tx-grid__nodes circle:nth-child(2){ animation-delay:.2s; }
.tx-grid__nodes circle:nth-child(3){ animation-delay:.6s; }
.tx-grid__nodes circle:nth-child(4){ animation-delay:1s; }
.tx-grid__nodes circle:nth-child(5){ animation-delay:1.4s; }
.tx-grid__nodes circle:nth-child(6){ animation-delay:1.8s; }
.tx-grid__nodes circle:nth-child(7){ animation-delay:2.2s; }
.tx-grid__nodes circle:nth-child(8){ animation-delay:.4s; }

@keyframes corePulse{
  0%,100%{ opacity:1; r:10; }
  50%{ opacity:.7; r:13; }
}
@keyframes nodePulse{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}

.tx-hero__inner{ position:relative; z-index:1; max-width:900px; }
.tx-hero__title{
  font-size:clamp(1.9rem, 1rem + 3.4vw, 3.1rem);
  font-weight:800; letter-spacing:-.025em; line-height:1.12; margin:0 0 1.3rem;
}
.tx-hero__sub{ font-size:1.1rem; color:rgba(255,255,255,.82); max-width:64ch; margin-bottom:2rem; }

.tx-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-bottom:2.6rem; }

.tx-hero__stats{
  display:flex; flex-wrap:wrap; gap:2.4rem; list-style:none; padding:0; margin:0 0 1.4rem;
  border-top:1px solid var(--line-light); padding-top:1.6rem;
}
.tx-hero__stats strong{ display:block; font-size:1.35rem; color:var(--steel); letter-spacing:.02em; font-family:var(--font-mono); }
.tx-hero__stats span{ font-size:.82rem; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.08em; }

.tx-hero__tagline{
  font-family:var(--font-mono); font-size:.85rem; color:var(--steel);
  letter-spacing:.04em; margin:0;
}

/* ---------- TICKER DE CUMPLIMIENTO ---------- */
.tx-marquee{
  background:var(--navy); border-block:1px solid var(--line-light);
  overflow:hidden; padding:1.05rem 0;
}
.tx-marquee__track{ display:flex; width:max-content; animation:marquee 28s linear infinite; }
.tx-marquee__group{ display:flex; align-items:center; }
.tx-marquee__group span{
  display:inline-flex; align-items:center; gap:.55rem; white-space:nowrap;
  font-family:var(--font-mono);
  color:rgba(255,255,255,.72); font-weight:500; font-size:.85rem; letter-spacing:.02em;
  padding:0 2.2rem; border-right:1px solid var(--line-light);
}
.tx-marquee__group span .bi{ color:var(--steel); font-size:1.05rem; }
.tx-marquee:hover .tx-marquee__track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0); }
  to{   transform:translateX(-50%); }
}

/* ---------- SECCIONES ---------- */
.tx-section{ padding:5.5rem 0; }
.tx-section--soft{ background:var(--mist); }
.tx-section--ink{
  background:
    radial-gradient(700px 400px at 90% 0%, rgba(124,147,179,.14), transparent 60%),
    linear-gradient(160deg, #0B1B33, #12294A);
  color:#fff;
}

/* ---------- CARDS PLATAFORMAS ---------- */
.tx-card{
  height:100%; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.9rem 1.8rem;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  display:flex; flex-direction:column;
}
.tx-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent; }
.tx-card__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.tx-card__icon{
  display:grid; place-items:center; width:50px; height:50px; border-radius:13px; flex:0 0 auto;
  background:rgba(23,50,92,.08); color:var(--blue-2); font-size:1.4rem;
  transition:background .22s ease, color .22s ease;
}
.tx-card:hover .tx-card__icon{ background:var(--blue-2); color:#fff; }

.tx-card__logo{
  display:grid; place-items:center; width:56px; height:56px; border-radius:13px; flex:0 0 auto;
  background:var(--mist); overflow:hidden; padding:.4rem;
  transition:box-shadow .22s ease;
}
.tx-card__logo img{ width:100%; height:100%; object-fit:contain; }
.tx-card:hover .tx-card__logo{ box-shadow:0 8px 20px -10px rgba(23,50,92,.4); }
.tx-card__logo--cover{ padding:0; }
.tx-card__logo--cover img{ object-fit:cover; }
.tx-card__logo--tiox{ object-fit:contain; transform:scale(1.35); }
.tx-card h3{ font-size:1.22rem; font-weight:700; margin:0 0 .55rem; }
.tx-card p{ color:var(--muted); font-size:.96rem; margin:0; }
.tx-card--feature{ border:1.5px solid var(--blue-2); box-shadow:0 14px 34px -22px rgba(23,50,92,.5); }
.tx-card__link{
  display:inline-flex; align-items:center; gap:.2rem; margin-top:1rem;
  color:var(--blue-2); font-weight:700; font-size:.92rem;
}
.tx-card__link:hover{ color:var(--steel); }

.tx-status{
  font-family:var(--font-mono); font-size:.68rem; font-weight:700; letter-spacing:.06em;
  padding:.32rem .6rem; border-radius:999px; white-space:nowrap;
}
.tx-status--live{ background:rgba(46,139,87,.12); color:var(--live); }
.tx-status--available{ background:rgba(23,50,92,.1); color:var(--blue-2); }
.tx-status--open{ background:rgba(124,147,179,.16); color:var(--slate); }

/* ---------- NOSOTROS / PILARES ---------- */
.tx-pillars{ display:grid; gap:1rem; }
.tx-pillar{
  position:relative; padding:1.4rem 1.6rem;
  background:rgba(255,255,255,.04); border:1px solid var(--line-light);
  border-left:3px solid var(--steel); border-radius:0 12px 12px 0;
}
.tx-pillar__tag{
  display:inline-block; font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--steel); margin-bottom:.5rem;
}
.tx-pillar p{ margin:0; color:rgba(255,255,255,.85); }

/* ---------- CLIENTES ---------- */
.tx-client{
  height:100%; min-height:120px; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); display:flex; align-items:center; justify-content:center;
  padding:1.4rem; transition:transform .22s ease, box-shadow .22s ease;
}
.tx-client img{ max-height:56px; width:auto; max-width:100%; object-fit:contain; }
.tx-client:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }

/* ---------- FORMULARIO ---------- */
.tx-contactlist{ list-style:none; padding:0; margin:1.4rem 0 0; display:grid; gap:.9rem; }
.tx-contactlist li{ display:flex; align-items:flex-start; gap:.8rem; color:var(--navy); }
.tx-contactlist .bi{ color:var(--steel); font-size:1.15rem; margin-top:.15rem; }
.tx-contactlist--light li{ color:rgba(255,255,255,.85); }
.tx-contactlist--light a{ color:rgba(255,255,255,.85); }
.tx-contactlist--light a:hover{ color:var(--steel); }

.tx-form{ background:rgba(255,255,255,.04); border:1px solid var(--line-light); border-radius:var(--radius); padding:1.8rem; }
.tx-form .form-label{ color:rgba(255,255,255,.85); font-weight:600; font-size:.9rem; margin-bottom:.3rem; }
.tx-form .form-control,
.tx-form .form-select{
  background:rgba(255,255,255,.06); border:1px solid var(--line-light); color:#fff;
  border-radius:10px; padding:.7rem .9rem;
}
.tx-form .form-control::placeholder{ color:rgba(255,255,255,.45); }
.tx-form .form-control:focus,
.tx-form .form-select:focus{
  background:rgba(255,255,255,.1); border-color:var(--steel); color:#fff;
  box-shadow:0 0 0 .2rem rgba(124,147,179,.25);
}
.tx-form .form-select option{ color:#000; }
.tx-form .is-invalid{ border-color:#ff6b6b !important; box-shadow:0 0 0 .2rem rgba(255,107,107,.25) !important; }

.tx-check .form-check-input{ background-color:rgba(255,255,255,.1); border-color:var(--line-light); }
.tx-check .form-check-input:checked{ background-color:var(--steel); border-color:var(--steel); }
.tx-check .form-check-label{ color:rgba(255,255,255,.85); font-size:.92rem; }
.tx-check a{ color:var(--steel); text-decoration:underline; }

.tx-form__status{ margin:.9rem 0 0; font-weight:600; min-height:1.2rem; }
.tx-form__status.is-ok{ color:#8FE3B0; }
.tx-form__status.is-error{ color:#ff8f8f; }

/* ---------- FOOTER ---------- */
.tx-footer{ background:var(--navy); color:rgba(255,255,255,.72); padding:3.5rem 0 1.8rem; }
.tx-brand--footer{ margin-bottom:1rem; }
.tx-footer__about{ font-size:.92rem; max-width:38ch; }
.tx-footer__social a{
  display:inline-grid; place-items:center; width:38px; height:38px; border-radius:9px;
  background:rgba(255,255,255,.07); color:#fff; font-size:1.1rem; transition:background .2s ease;
}
.tx-footer__social a:hover{ background:var(--steel); color:var(--navy); }
.tx-footer h4{ color:#fff; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; }
.tx-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.55rem; }
.tx-footer ul a{ color:rgba(255,255,255,.72); font-size:.94rem; }
.tx-footer ul a:hover{ color:var(--steel); }
.tx-footer__rule{ border-color:var(--line-light); margin:2.4rem 0 1.4rem; }
.tx-footer__bottom{ display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; font-size:.86rem; }
.tx-footer__legal{ display:flex; flex-wrap:wrap; gap:1.2rem; list-style:none; padding:0; margin:0; }
.tx-footer__legal a{ color:rgba(255,255,255,.72); }
.tx-footer__legal a:hover{ color:var(--steel); }

/* ---------- MODALES ---------- */
.tx-modal{ border:0; border-radius:var(--radius); }
.tx-modal .modal-header{ border-bottom:1px solid var(--line); }
.tx-modal .modal-title{ font-weight:800; color:var(--blue-2); }
.tx-modal .modal-body p{ font-size:.96rem; }

/* ---------- WHATSAPP FLOTANTE ---------- */
.whatsapp-float{
  position:fixed; right:20px; bottom:20px; z-index:1040;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center;
  background:#25D366; color:#fff; font-size:1.7rem;
  box-shadow:0 12px 28px -8px rgba(37,211,102,.7);
  animation:waPulse 2.4s ease-in-out infinite;
  transition:transform .2s ease;
}
.whatsapp-float:hover{ color:#fff; transform:scale(1.08); }
@keyframes waPulse{
  0%,100%{ box-shadow:0 12px 28px -8px rgba(37,211,102,.7), 0 0 0 0 rgba(37,211,102,.4); }
  50%{ box-shadow:0 12px 28px -8px rgba(37,211,102,.7), 0 0 0 14px rgba(37,211,102,0); }
}

/* =====================================================================
   MOBILE-FIRST · reglas obligatorias del manual TIOX
   ===================================================================== */

@media (max-width:991.98px){
  .tx-nav .navbar-collapse{
    background:rgba(11,27,51,.98); margin-top:.6rem; padding:1rem;
    border-radius:12px; border:1px solid var(--line-light);
  }
  .tx-nav .nav-item{ margin-bottom:.2rem; }
  .tx-nav .btn-tx-accent{ width:100%; margin-top:.5rem; }
}

@media (max-width:767.98px){
  .tx-card:hover,
  .tx-client:hover,
  .btn-tx-accent:hover,
  .whatsapp-float:hover{
    transform:none !important;
  }
  .tx-hero{ padding-top:7.5rem; }
  .tx-hero__stats{ gap:1.4rem; }
  .tx-section{ padding:3.5rem 0; }
  .tx-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; scroll-behavior:auto !important; }
}

a:focus-visible, button:focus-visible, .btn:focus-visible,
.form-control:focus-visible, .form-select:focus-visible{
  outline:2px solid var(--steel); outline-offset:2px;
}