/* ============================================================
   SOLUCIONES ORIENTEK — Sistema de diseño
   Paleta basada en el logotipo (azul brillante + navy + gris)
   Tipografía: Sora (títulos) + Inter (texto)
   ============================================================ */

:root{
  --navy:        #0B3D63;
  --navy-ink:    #0A2E4B;
  --blue:        #1CADE4;
  --blue-deep:   #0F6E96;
  --blue-pale:   #E6F6FC;
  --ink:         #10202E;
  --slate:       #5B6672;
  --paper:       #F5F9FC;
  --paper-2:     #FFFFFF;
  --line:        #DCE7EF;
  --ok:          #1CADE4;
  --radius:      6px;
  --container:   1160px;
  --shadow-soft: 0 10px 30px -18px rgba(11,61,99,.35);
}

*{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }

body{
  font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,.font-display{
  font-family:"Sora",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--navy);
  font-weight:650;
  letter-spacing:-0.01em;
  line-height:1.14;
}
h1{ font-weight:700; }

a{ color:var(--blue-deep); text-decoration:none; }
a:hover{ color:var(--navy); }

.container-oti{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-left:1.25rem;
  padding-right:1.25rem;
}

/* Focus visibility (accesibilidad) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--blue);
  outline-offset:2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ---------------- Navbar ---------------- */
.oti-navbar{
  background:rgba(245,249,252,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:.7rem 0;
}
.oti-navbar .navbar-brand img{ height:38px; }
.oti-navbar .nav-link{
  color:var(--navy-ink);
  font-weight:500;
  font-size:.96rem;
  padding:.5rem .9rem !important;
}
.oti-navbar .nav-link:hover,
.oti-navbar .nav-link.active{ color:var(--blue-deep); }
.oti-navbar .dropdown-menu{
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
  border-radius:var(--radius);
}
.oti-navbar .btn-nav-cta{
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius);
  padding:.55rem 1.15rem;
  font-weight:600;
  font-size:.92rem;
}
.oti-navbar .btn-nav-cta:hover{ background:var(--blue-deep); color:#fff; }

/* ---------------- Botones ---------------- */
.btn-oti-primary{
  background:var(--navy);
  color:#fff;
  border:1px solid var(--navy);
  border-radius:var(--radius);
  padding:.8rem 1.6rem;
  font-weight:600;
  font-family:"Sora",sans-serif;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:background .15s ease, transform .15s ease;
}
.btn-oti-primary:hover{ background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; transform:translateY(-1px); }

.btn-oti-outline{
  background:transparent;
  color:var(--navy);
  border:1.5px solid var(--navy);
  border-radius:var(--radius);
  padding:.78rem 1.6rem;
  font-weight:600;
  font-family:"Sora",sans-serif;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:all .15s ease;
}
.btn-oti-outline:hover{ background:var(--navy); color:#fff; }

.btn-oti-whatsapp{
  background:#1CADE4;
  color:#fff;
  border:1px solid #1CADE4;
  border-radius:var(--radius);
  padding:.8rem 1.6rem;
  font-weight:600;
  font-family:"Sora",sans-serif;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  transition:background .15s ease, transform .15s ease;
}
.btn-oti-whatsapp:hover{ background:var(--navy); color:#fff; transform:translateY(-1px); }

/* ---------------- Eyebrow / kicker ---------------- */
.oti-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  color:var(--blue-deep);
  font-weight:600;
  font-size:.82rem;
  font-family:"Sora",sans-serif;
  margin-bottom:.75rem;
}
.oti-eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--blue);
  display:inline-block;
}

/* ---------------- Hero con animación (motivo del logo) ---------------- */
.oti-hero{
  position:relative;
  background:linear-gradient(180deg,#0A2E4B 0%, #0B3D63 62%, #0F6E96 100%);
  color:#fff;
  overflow:hidden;
  padding:6.5rem 0 5rem;
}
.oti-hero .container-oti{ position:relative; z-index:2; }
.oti-hero h1{ color:#fff; font-size:clamp(2.1rem, 4vw, 3.1rem); max-width:16ch; }
.oti-hero p.lead{ color:#CDEBF7; font-size:1.15rem; max-width:52ch; }

/* Motivo ecualizador: barras verticales que laten, tomadas del isotipo del logo.
   Sustituye al video de fondo: es CSS puro (0 KB de descarga) y refuerza marca. */
.oti-hero-bars{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  gap:7px;
  padding:0 4vw 0 0;
  opacity:.55;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 60%);
  mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 30%, #000 60%);
}
.oti-hero-bars span{
  width:8px;
  background:linear-gradient(180deg, var(--blue), rgba(28,173,228,0));
  border-radius:3px 3px 0 0;
  animation:oti-pulse 2.4s ease-in-out infinite;
}
@keyframes oti-pulse{
  0%,100%{ transform:scaleY(.35); opacity:.55; }
  50%{ transform:scaleY(1); opacity:1; }
}
.oti-hero-bars span:nth-child(1){ height:70px; animation-delay:0s; }
.oti-hero-bars span:nth-child(2){ height:120px; animation-delay:.15s; }
.oti-hero-bars span:nth-child(3){ height:60px; animation-delay:.3s; }
.oti-hero-bars span:nth-child(4){ height:150px; animation-delay:.45s; }
.oti-hero-bars span:nth-child(5){ height:90px; animation-delay:.6s; }
.oti-hero-bars span:nth-child(6){ height:170px; animation-delay:.75s; }
.oti-hero-bars span:nth-child(7){ height:75px; animation-delay:.9s; }
.oti-hero-bars span:nth-child(8){ height:130px; animation-delay:1.05s; }
.oti-hero-bars span:nth-child(9){ height:55px; animation-delay:1.2s; }
.oti-hero-bars span:nth-child(10){ height:110px; animation-delay:1.35s; }
.oti-hero-bars span:nth-child(11){ height:65px; animation-delay:1.5s; }
.oti-hero-bars span:nth-child(12){ height:140px; animation-delay:1.65s; }
.oti-hero-bars span:nth-child(13){ height:85px; animation-delay:1.8s; }
.oti-hero-bars span:nth-child(14){ height:100px; animation-delay:1.95s; }
.oti-hero-bars span:nth-child(15){ height:60px; animation-delay:2.1s; }
.oti-hero-bars span:nth-child(16){ height:150px; animation-delay:2.25s; }

/* Hero secundario (para páginas internas) */
.oti-hero-sub{
  background:linear-gradient(120deg,#0A2E4B, #0B3D63 55%, #0F6E96);
  color:#fff;
  padding:4.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.oti-hero-sub h1{ color:#fff; font-size:clamp(1.9rem,3.4vw,2.6rem); }
.oti-hero-sub p.lead{ color:#CDEBF7; }

/* ---------------- Sección genérica ---------------- */
.oti-section{ padding:4.5rem 0; }
.oti-section-alt{ background:var(--paper-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.oti-section-navy{ background:var(--navy); color:#fff; }
.oti-section-navy h2{ color:#fff; }
.oti-section-navy .oti-eyebrow{ color:var(--blue); }
.oti-section-navy .oti-eyebrow::before{ background:#fff; }

/* ---------------- Tarjetas de servicio (spec-sheet, no SaaS genérico) ---------------- */
.oti-svc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
@media (max-width: 900px){ .oti-svc-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 600px){ .oti-svc-grid{ grid-template-columns:1fr; } }

.oti-svc-card{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:2rem 1.7rem;
  position:relative;
  background:var(--paper-2);
  transition:background .15s ease;
}
.oti-svc-card::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:3px; background:transparent;
  transition:background .15s ease;
}
.oti-svc-card:hover{ background:var(--blue-pale); }
.oti-svc-card:hover::before{ background:var(--blue); }
.oti-svc-card i{ font-size:1.6rem; color:var(--blue-deep); }
.oti-svc-card h3{ font-size:1.08rem; margin:.9rem 0 .5rem; }
.oti-svc-card p{ color:var(--slate); font-size:.95rem; margin-bottom:.9rem; }
.oti-svc-card a.oti-card-link{ font-weight:600; font-size:.9rem; color:var(--navy); }
.oti-svc-card a.oti-card-link i{ font-size:.85rem; vertical-align:-1px; }

/* ---------------- Beneficios con numeración real (proceso) ---------------- */
.oti-step{ display:flex; gap:1.1rem; margin-bottom:1.6rem; }
.oti-step .num{
  font-family:"Sora",sans-serif; font-weight:700; color:var(--blue);
  font-size:1.6rem; line-height:1; min-width:2.4rem;
}
.oti-step h4{ font-family:"Sora",sans-serif; font-weight:650; color:var(--navy); font-size:1.03rem; margin-bottom:.25rem; }
.oti-step p{ color:var(--slate); margin:0; font-size:.96rem; }

/* ---------------- Listas de beneficios ---------------- */
.oti-benefit{ display:flex; gap:.85rem; margin-bottom:1.1rem; align-items:flex-start; }
.oti-benefit i{ color:var(--blue-deep); font-size:1.15rem; margin-top:.2rem; }
.oti-benefit strong{ color:var(--navy); }
.oti-benefit p{ margin:0; color:var(--ink); }

/* ---------------- Pains ("¿te suena familiar?") ---------------- */
.oti-pain-box{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-left:3px solid var(--blue);
  border-radius:var(--radius);
  padding:1.7rem 1.8rem;
}
.oti-pain-box li{ color:var(--slate); margin-bottom:.55rem; font-style:italic; }

/* ---------------- Tabla técnica ---------------- */
.table-oti{ border-color:var(--line); }
.table-oti thead th{
  background:var(--navy); color:#fff; font-family:"Sora",sans-serif;
  font-weight:600; font-size:.85rem; border-color:var(--navy);
}
.table-oti td{ font-size:.93rem; vertical-align:top; color:var(--ink); }

/* ---------------- CTA banda ---------------- */
.oti-cta-band{
  background:var(--navy);
  border-radius:10px;
  padding:2.6rem 2.4rem;
  color:#fff;
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.oti-cta-band h3{ color:#fff; margin-bottom:.35rem; font-size:1.35rem; }
.oti-cta-band p{ color:#CDEBF7; margin:0; }

/* ---------------- Productos ---------------- */
.oti-product-card{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-2);
  height:100%;
  display:flex; flex-direction:column;
}
.oti-product-card .band{ height:6px; }
.oti-product-card .body{ padding:1.8rem; flex:1; display:flex; flex-direction:column; }
.oti-product-card h3{ font-size:1.2rem; }
.oti-product-card p{ color:var(--slate); flex:1; }

/* ---------------- Valores ---------------- */
.oti-value{ border-left:2px solid var(--line); padding-left:1rem; margin-bottom:1.4rem; }
.oti-value h4{ font-family:"Sora",sans-serif; color:var(--navy); font-size:1rem; margin-bottom:.25rem; }
.oti-value p{ color:var(--slate); font-size:.92rem; margin:0; }

/* ---------------- Footer ---------------- */
.oti-footer{ background:var(--navy-ink); color:#B9D3E4; padding:3.5rem 0 1.5rem; }
.oti-footer h5{ color:#fff; font-family:"Sora",sans-serif; font-size:1rem; margin-bottom:1rem; }
.oti-footer a{ color:#B9D3E4; }
.oti-footer a:hover{ color:#fff; }
.oti-footer .fine{ border-top:1px solid rgba(255,255,255,.12); margin-top:2.2rem; padding-top:1.3rem; font-size:.82rem; color:#7E9DB4; }

/* ---------------- WhatsApp flotante ---------------- */
.oti-whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:1040;
  background:#1CADE4; color:#fff; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem;
  box-shadow:0 8px 24px -6px rgba(11,61,99,.55);
  transition:transform .15s ease;
}
.oti-whatsapp-float:hover{ transform:scale(1.07); color:#fff; }

/* ---------------- Campo trampa anti-spam (honeypot) ----------------
   Oculto para personas (sin display:none, para que algunos bots no lo
   detecten como oculto), visible solo para lectores de pantalla si algo
   falla, pero fuera del flujo visual y del tabulado normal. */
.oti-hp{
  position:absolute;
  left:-9999px;
  top:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

/* ---------------- Mensaje de resultado del formulario ---------------- */
.oti-msg-ok{
  background:var(--blue-pale);
  border:1px solid var(--blue);
  color:var(--navy);
  border-radius:var(--radius);
  font-weight:600;
}
.oti-msg-ok i{ color:var(--blue-deep); font-size:1.2rem; }
.oti-msg-err{
  background:#FDECEC;
  border:1px solid #E3B4B4;
  color:#8A2A2A;
  border-radius:var(--radius);
  font-weight:600;
}
.oti-msg-err i{ color:#B3261E; font-size:1.2rem; }

/* ---------------- Formulario ---------------- */
.form-control, .form-select{
  border-radius:var(--radius);
  border-color:var(--line);
  padding:.7rem .9rem;
}
.form-control:focus, .form-select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(28,173,228,.18);
}
label{ font-weight:600; color:var(--navy); font-size:.9rem; margin-bottom:.3rem; }

/* ---------------- Utilidades ---------------- */
.text-blue{ color:var(--blue-deep) !important; }
.oti-divider{ height:1px; background:var(--line); border:0; margin:0; }