/* ═══════════════════════════════════════════════════
   CIMEIRA v5
   Tipografía : Exo (400 · 500 · 600 · 700 · 800)
   Paleta     : Navy #0B1D3A · Azul #1A6EFF · Cian #00C4F4
   ═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500&display=swap');

/* ── Variables ── */
:root {
  --navy:       #0B1D3A;
  --navy-mid:   #0F2548;
  --navy-light: #162E56;
  --white:      #FFFFFF;
  --off-white:  #F4F7FF;
  --muted:      #7A8CA8;
  --subtle:     #B5C4D8;

  --blue:       #1A6EFF;
  --blue-dark:  #1258D0;
  --cyan:       #00C4F4;
  --cyan-dim:   rgba(0,196,244,.14);
  --cyan-bdr:   rgba(0,196,244,.28);

  --bdr-d:      rgba(255,255,255,.08);
  --bdr-l:      rgba(11,29,58,.1);

  --font: 'Exo', sans-serif;

  --r-sm: 6px;  --r-md: 14px;  --r-lg: 22px;  --r-xl: 30px;

  --sh-sm: 0 2px 8px  rgba(11,29,58,.07);
  --sh-md: 0 4px 24px rgba(11,29,58,.12);
  --sh-lg: 0 8px 48px rgba(11,29,58,.18);

  --nav-h: 72px;
  --ease:  cubic-bezier(.4,0,.2,1);
  --t:     .28s var(--ease);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  background:var(--white); color:var(--navy);
  font-family:var(--font); font-size:clamp(15px,1.45vw,17px);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img  { display:block; max-width:100% }
a    { color:inherit; text-decoration:none }
ul,ol{ list-style:none }
button,input,select,textarea { font-family:var(--font); cursor:pointer }
input,select,textarea { cursor:text }

/* ── A11y ── */
.skip-link {
  position:absolute; top:-120px; left:1rem;
  background:var(--cyan); color:var(--navy);
  padding:.5rem 1.2rem; border-radius:var(--r-sm);
  font-weight:700; font-size:.9rem; z-index:9999;
  transition:top .2s; text-decoration:none;
}
.skip-link:focus { top:1rem }
:focus-visible { outline:3px solid var(--cyan); outline-offset:3px; border-radius:3px }
.sr-only {
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ══════════════════════════════════════
   HEADER
   ══════════════════════════════════════ */
.site-header {
  position:sticky; top:0; z-index:200; height:var(--nav-h);
  background:rgba(11,29,58,.97);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--bdr-d);
  transition:box-shadow var(--t);
}
.site-header.scrolled { box-shadow:0 4px 32px rgba(0,0,0,.35) }
.nav-inner {
  max-width:1280px; margin:0 auto; padding:0 1.5rem;
  height:100%; display:flex; align-items:center; gap:.4rem;
}

/* Logo */
.site-logo { display:flex; align-items:center; gap:.55rem; flex-shrink:0; margin-right:.5rem }
.logo-mark {
  width:32px; height:32px; border-radius:7px;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.logo-mark svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round }
.logo-text { font-size:1.2rem; font-weight:800; color:var(--white); letter-spacing:.06em }

/* Nav items */
.nav-links { display:flex; align-items:center; gap:.05rem; margin-left:auto }
.nav-links > a,
.nav-dd > button {
  padding:.48rem .78rem; font-size:.8rem; font-weight:600;
  color:var(--subtle); border:none; background:none;
  border-radius:var(--r-sm); transition:color var(--t),background var(--t);
  min-height:44px; display:flex; align-items:center; gap:.3rem;
  white-space:nowrap; cursor:pointer; letter-spacing:.02em;
}
.nav-links > a:hover,
.nav-links > a[aria-current="page"],
.nav-dd > button:hover,
.nav-dd.open > button {
  color:var(--white); background:rgba(255,255,255,.08);
}
.nav-dd > button svg { transition:transform var(--t) }
.nav-dd.open > button svg { transform:rotate(180deg) }

/* Dropdown */
.nav-dd { position:relative }
.dd-menu {
  display:none; position:absolute;
  top:calc(100% + .5rem); left:0;
  background:var(--navy-mid); border:1px solid var(--bdr-d);
  border-radius:var(--r-md); padding:.5rem; min-width:220px;
  box-shadow:var(--sh-lg);
}
.nav-dd.open .dd-menu { display:block }
.dd-menu a {
  display:flex; align-items:center; gap:.6rem;
  padding:.6rem 1rem; font-size:.8rem; font-weight:500;
  color:var(--subtle); border-radius:var(--r-sm);
  transition:color var(--t),background var(--t); min-height:44px;
}
.dd-menu a:hover { color:var(--white); background:rgba(255,255,255,.07) }
.dd-icon { font-size:.9rem; width:18px; text-align:center; flex-shrink:0 }
.dd-sep  { border:none; border-top:1px solid var(--bdr-d); margin:.35rem .5rem }

.btn-nav {
  margin-left:.6rem; padding:.48rem 1.15rem;
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:var(--white); font-weight:700; font-size:.8rem;
  border:none; border-radius:var(--r-sm); min-height:44px;
  white-space:nowrap; letter-spacing:.03em;
  /* Sin esto el texto se apoya arriba y queda 3.7px más alto que el
     resto del menú, que sí centra con flex. */
  display:inline-flex; align-items:center; justify-content:center;
  transition:opacity var(--t),transform var(--t); flex-shrink:0;
}
.btn-nav:hover { opacity:.88; transform:translateY(-1px) }

/* Hamburger */
.hamburger {
  display:none; background:none; border:none;
  color:var(--white); min-width:44px; min-height:44px;
  align-items:center; justify-content:center; margin-left:auto;
}
.mobile-nav {
  display:none; position:fixed; inset:0; top:var(--nav-h);
  background:var(--navy); z-index:190;
  padding:1.5rem; flex-direction:column; gap:.5rem; overflow-y:auto;
}
.mobile-nav.open { display:flex }
.mobile-nav > a,
.mobile-nav details summary {
  padding:.85rem 1.1rem; font-size:.95rem; font-weight:600;
  color:var(--subtle); border-radius:var(--r-sm);
  border:1px solid var(--bdr-d);
  transition:color var(--t),background var(--t);
  min-height:44px; display:flex; align-items:center; cursor:pointer;
}
.mobile-nav > a:hover { color:var(--white); background:rgba(255,255,255,.05) }
.mobile-nav details { border:1px solid var(--bdr-d); border-radius:var(--r-sm); overflow:hidden }
.mobile-nav details summary { border:none; border-radius:0 }
.mobile-nav details a {
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem 1rem .65rem 2rem; font-size:.875rem;
  color:var(--subtle); border-top:1px solid var(--bdr-d);
  min-height:44px; transition:color var(--t),background var(--t);
}
.mobile-nav details a:hover { color:var(--white); background:rgba(255,255,255,.04) }
.mobile-cta {
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important; font-weight:700 !important;
  justify-content:center; border:none !important; margin-top:.5rem;
}

/* ══════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════ */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.8rem 1.9rem; min-height:50px;
  font-size:.9rem; font-weight:700; letter-spacing:.03em;
  border-radius:var(--r-sm); border:none;
  transition:all var(--t); text-decoration:none; line-height:1;
}
.btn-primary   { background:linear-gradient(135deg,var(--blue),var(--cyan)); color:#fff; box-shadow:0 4px 20px rgba(26,110,255,.3) }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(26,110,255,.4) }
.btn-secondary { background:transparent; color:var(--navy); border:2px solid var(--blue) }
.btn-secondary:hover { background:var(--blue); color:#fff }
.btn-white     { background:#fff; color:var(--navy); box-shadow:var(--sh-md) }
.btn-white:hover { transform:translateY(-2px); box-shadow:var(--sh-lg) }
.btn-gw        { background:transparent; color:#fff; border:2px solid rgba(255,255,255,.38) }
.btn-gw:hover  { background:rgba(255,255,255,.1); border-color:#fff }
.btn-gb        { background:transparent; color:var(--blue); border:2px solid var(--blue) }
.btn-gb:hover  { background:var(--blue); color:#fff }

/* ══════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════ */
.container  { max-width:1260px; margin:0 auto; padding:0 1.5rem }
.section    { padding:clamp(5rem,9vw,8rem) 0 }
.section-sm { padding:clamp(3rem,5vw,4.5rem) 0 }
.s-dark     { background:var(--navy);   color:#fff }
.s-navy     { background:var(--navy-mid); color:#fff }
.s-light    { background:var(--off-white) }
.s-white    { background:#fff }

/* ══════════════════════════════════════
   TYPOGRAPHY
   ══════════════════════════════════════ */
.d1   { font-size:clamp(2.6rem,5.5vw,5rem);   font-weight:800; line-height:1.08; letter-spacing:-.02em }
.d2   { font-size:clamp(2rem,4vw,3.4rem);      font-weight:700; line-height:1.1;  letter-spacing:-.015em }
.d3   { font-size:clamp(1.45rem,2.6vw,2.2rem); font-weight:700; line-height:1.15; letter-spacing:-.01em }
.eyebrow { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--cyan) }
.eyebrow.dark { color:var(--blue) }
.lead { font-size:clamp(.95rem,1.7vw,1.05rem); line-height:1.8; color:var(--muted) }
.lead.lt { color:var(--subtle) }

/* Section header */
.sh { margin-bottom:clamp(2.5rem,5vw,4rem) }
.sh.center { text-align:center }
.sh .eyebrow { margin-bottom:.7rem }
.sh .d2 { margin-bottom:.9rem }

/* ══════════════════════════════════════
   COMPONENTS
   ══════════════════════════════════════ */

/* Badge */
.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.28rem .8rem; background:var(--cyan-dim);
  border:1px solid var(--cyan-bdr); border-radius:100px;
  font-size:.7rem; font-weight:700; color:var(--cyan);
}
.badge.bl { background:rgba(26,110,255,.1); border-color:rgba(26,110,255,.3); color:var(--blue) }

/* Stat strip */
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); background:var(--navy); border-radius:var(--r-xl); overflow:hidden }
.stat-box { padding:2.5rem 1.5rem; text-align:center; border-right:1px solid var(--bdr-d); transition:background var(--t) }
.stat-box:last-child { border-right:none }
.stat-box:hover { background:var(--navy-mid) }
.stat-num { font-size:clamp(2rem,4.5vw,3rem); font-weight:800; color:var(--cyan); line-height:1; display:block }
.stat-label { font-size:.75rem; color:var(--muted); margin-top:.4rem; font-weight:600 }

/* Tech tags */
.tech-row { display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center }
.tech-tag {
  padding:.38rem .95rem; background:rgba(255,255,255,.06);
  border:1px solid var(--bdr-d); border-radius:100px;
  font-size:.75rem; font-weight:600; color:var(--subtle);
  transition:border-color var(--t),color var(--t),background var(--t);
}
.tech-tag:hover { border-color:var(--cyan-bdr); color:var(--cyan); background:var(--cyan-dim) }

/* Checklist */
.checklist li {
  display:flex; align-items:flex-start; gap:.6rem;
  padding:.48rem 0; font-size:.875rem; color:#4A5568;
  border-bottom:1px solid var(--bdr-l);
}
.checklist li:last-child { border-bottom:none }
.checklist li::before { content:'✓'; color:var(--blue); font-weight:800; flex-shrink:0 }
.checklist li.no::before { content:'—'; color:var(--muted) }
.checklist li.no { color:var(--muted) }
.checklist.lt li { color:var(--subtle); border-color:var(--bdr-d) }
.checklist.lt li::before { color:var(--cyan) }

/* Pricing */
.pricing-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start }
.p-card { background:#fff; border:2px solid var(--bdr-l); border-radius:var(--r-lg); padding:2.25rem; position:relative; transition:border-color var(--t),box-shadow var(--t),transform var(--t) }
.p-card:hover { transform:translateY(-5px); box-shadow:var(--sh-md) }
.p-card.featured { border-color:var(--blue); box-shadow:0 0 0 4px rgba(26,110,255,.08) }
.p-card.featured::before { content:'Más popular'; position:absolute; top:-1px; left:50%; transform:translateX(-50%); background:var(--blue); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:.3rem 1.1rem; border-radius:0 0 var(--r-sm) var(--r-sm) }
.plan-name { font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.14em; color:var(--muted); margin-bottom:.55rem }
.plan-price { font-size:clamp(2.4rem,4vw,3.1rem); font-weight:800; color:var(--navy); line-height:1 }
.plan-price sup { font-size:1rem; font-weight:500; vertical-align:super }
.plan-period { font-size:.76rem; color:var(--muted); margin-bottom:.2rem }
.plan-annual { font-size:.76rem; color:#4A5568; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid var(--bdr-l) }
.plan-annual strong { color:var(--blue); font-weight:700 }
.plan-feats { margin-bottom:2rem }

/* FAQ */
.faq-item { border-bottom:1px solid var(--bdr-l) }
.faq-btn { width:100%; background:none; border:none; text-align:left; color:var(--navy); font-size:.95rem; font-weight:700; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem; min-height:56px; padding:1.2rem 0 }
.faq-btn svg { flex-shrink:0; transition:transform var(--t); color:var(--blue) }
.faq-item.open .faq-btn svg { transform:rotate(180deg) }
.faq-body { display:none; padding-bottom:1.2rem; font-size:.875rem; color:#4A5568; line-height:1.75 }
.faq-item.open .faq-body { display:block }

/* Form */
.f-group { margin-bottom:1.2rem }
.f-group label { display:block; font-size:.8rem; font-weight:700; color:var(--navy); margin-bottom:.42rem; letter-spacing:.02em }
.f-group input,
.f-group select,
.f-group textarea {
  width:100%; background:#fff; border:2px solid #DDE4EE;
  border-radius:var(--r-sm); padding:.75rem 1rem; color:var(--navy);
  font-size:.875rem; transition:border-color var(--t),box-shadow var(--t); min-height:46px;
}
.f-group input:focus,.f-group select:focus,.f-group textarea:focus {
  outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,110,255,.12);
}
.f-group textarea { min-height:130px; resize:vertical }
.f-group select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%230B1D3A' stroke-width='1.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem }
.f-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1.2rem }

/* Image placeholder */
.img-ph {
  background:linear-gradient(135deg,#e8ecf4,#d0d8e8);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.6rem; color:#8a9bbf; font-size:.8rem; font-weight:600;
  border-radius:var(--r-lg); overflow:hidden; position:relative;
}
.img-ph svg { opacity:.4 }
.img-ph span { opacity:.7; letter-spacing:.04em }
/* When a real img is placed inside img-ph, it fills the container */
.img-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }

/* Logo placeholder */
.logo-ph {
  background:#eef1f8;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-sm); overflow:hidden;
}
.logo-ph img { width:100%; height:100%; object-fit:contain }

/* CTA block */
.cta-block {
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 55%,var(--blue-dark) 100%);
  border-radius:var(--r-xl); padding:clamp(3rem,6vw,5rem) clamp(2rem,5vw,4rem);
  text-align:center; color:#fff; position:relative; overflow:hidden;
}
.cta-block::before { content:''; position:absolute; top:-40%; right:-10%; width:600px; height:600px; background:radial-gradient(circle,rgba(0,196,244,.1) 0%,transparent 60%); pointer-events:none }
.cta-block::after  { content:''; position:absolute; bottom:-50%; left:-5%; width:400px; height:400px; background:radial-gradient(circle,rgba(26,110,255,.15) 0%,transparent 60%); pointer-events:none }

/* Ticker */
.ticker-wrap { overflow:hidden; background:var(--off-white); border-top:1px solid var(--bdr-l); border-bottom:1px solid var(--bdr-l); padding:1.2rem 0 }
.ticker-track { display:flex; width:max-content; animation:ticker 28s linear infinite }
.ticker-track:hover { animation-play-state:paused }
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-item { display:flex; align-items:center; gap:.7rem; padding:0 2.25rem; white-space:nowrap; font-size:.9rem; font-weight:600; color:var(--muted); border-right:1px solid var(--bdr-l) }
.ticker-dot { width:5px; height:5px; border-radius:50%; background:var(--cyan); flex-shrink:0 }

/* Footer */
.site-footer { background:var(--navy); color:#fff; padding:clamp(4rem,7vw,6rem) 0 2rem }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem }
.footer-tagline { font-size:.85rem; color:var(--muted); line-height:1.65; max-width:230px; margin:.6rem 0 1.25rem }
.footer-social { display:flex; gap:.5rem }
.footer-social a { width:36px; height:36px; border:1px solid var(--bdr-d); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:.8rem; font-weight:700; transition:border-color var(--t),color var(--t),background var(--t) }
.footer-social a:hover { border-color:var(--cyan); color:var(--cyan); background:var(--cyan-dim) }
.footer-col h3 { font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem }
.footer-col ul li { margin-bottom:.55rem }
.footer-col ul li a { font-size:.85rem; color:rgba(255,255,255,.48); transition:color var(--t) }
.footer-col ul li a:hover { color:#fff }
.footer-bottom { border-top:1px solid var(--bdr-d); padding-top:1.6rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.76rem; color:var(--muted) }
.footer-bottom a { color:var(--muted); transition:color var(--t) }
.footer-bottom a:hover { color:var(--subtle) }

/* ══════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════ */
@keyframes fadeUp { from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }
.anim-up { animation:fadeUp .65s var(--ease) both }
.dl1{animation-delay:.1s} .dl2{animation-delay:.2s} .dl3{animation-delay:.3s}
.dl4{animation-delay:.4s} .dl5{animation-delay:.5s}

.reveal   { opacity:0; transform:translateY(28px);  transition:opacity .65s var(--ease),transform .65s var(--ease) }
.reveal-l { opacity:0; transform:translateX(-28px); transition:opacity .65s var(--ease),transform .65s var(--ease) }
.reveal-r { opacity:0; transform:translateX(28px);  transition:opacity .65s var(--ease),transform .65s var(--ease) }
.reveal.visible,.reveal-l.visible,.reveal-r.visible { opacity:1; transform:none }

/* ── Reduced motion ── */
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
  html { scroll-behavior:auto }
  .reveal,.reveal-l,.reveal-r { opacity:1; transform:none; transition:none }
  .ticker-track { animation:none }
}
@media(prefers-contrast:high) {
  :root { --muted:#CCC; --subtle:#EEE; --bdr-d:rgba(255,255,255,.3); --bdr-l:rgba(0,0,0,.25) }
}

/* ── Responsive ── */
@media(max-width:1120px) { .nav-links > a,.nav-dd > button { padding:.45rem .6rem; font-size:.76rem } }
@media(max-width:1024px) {
  .stats-strip { grid-template-columns:repeat(2,1fr) }
  .stat-box:nth-child(2) { border-right:none }
  .footer-grid { grid-template-columns:1fr 1fr; gap:2rem }
  .pricing-grid { grid-template-columns:1fr }
}
@media(max-width:900px) { .nav-links,.btn-nav { display:none } .hamburger { display:flex } }
@media(max-width:768px) { .footer-grid { grid-template-columns:1fr } .footer-bottom { flex-direction:column; text-align:center } }
@media(max-width:560px) { .f-grid { grid-template-columns:1fr } .stats-strip { grid-template-columns:1fr 1fr } }