/* ============================================================
   NAVBAR
   ============================================================ */
.nav { position:sticky; top:0; z-index:var(--z-nav); background:var(--clr-white); border-bottom:1px solid var(--clr-border); box-shadow:var(--shadow-sm); transition: box-shadow var(--transition); }
.nav--scrolled { box-shadow:var(--shadow-md); }
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:66px; }
.nav__logo { display:flex; align-items:center; gap:var(--s3); }
.nav__logo-mark { width:36px; height:36px; background:var(--clr-primary); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition: transform var(--transition), background var(--transition); }
.nav__logo:hover .nav__logo-mark { background:var(--clr-accent); transform:rotate(-4deg) scale(1.05); }
.nav__logo-mark svg { width:20px; height:20px; stroke:var(--clr-accent); fill:none; stroke-width:2; }
.nav__logo:hover .nav__logo-mark svg { stroke:var(--clr-primary); }
.nav__logo-text { font-size:18px; font-weight:800; letter-spacing:-0.5px; color:var(--clr-primary); }
.nav__logo-text em { color:var(--clr-accent); font-style:normal; }
.nav__links { display:flex; align-items:center; }
.nav__link { display:flex; align-items:center; gap:var(--s1); padding:0 14px; height:66px; font-size:var(--sz-sm); font-weight:600; color:var(--clr-text-mid); border-bottom:3px solid transparent; white-space:nowrap; transition: color var(--transition), border-color var(--transition); }
.nav__link:hover { color:var(--clr-primary); border-bottom-color:var(--clr-primary); }
.nav__chevron { font-size:9px; opacity:0.5; transition: transform var(--transition); }
.nav__link:hover .nav__chevron { transform:rotate(180deg); opacity:1; }
.nav__actions { display:flex; align-items:center; gap:var(--s3); }
.nav__phone { font-size:var(--sz-sm); font-weight:700; color:var(--clr-primary); white-space:nowrap; transition: color var(--transition); }
.nav__phone:hover { color:var(--clr-primary-light); }
.nav__burger { display:none; flex-direction:column; gap:5px; padding:var(--s2); }
.nav__burger span { display:block; width:22px; height:2px; background:var(--clr-text); border-radius:2px; transition: transform var(--transition), opacity var(--transition); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.nav__links--open { display:flex!important; flex-direction:column; position:absolute; top:66px; left:0; right:0; background:var(--clr-white); border-bottom:1px solid var(--clr-border); padding:8px 0 16px; box-shadow:var(--shadow-md); z-index:var(--z-nav); animation:slideDown 0.25s ease-in-out; }
.nav__links--open .nav__link { height:auto; padding:12px 24px; border-bottom:none; }
@keyframes slideDown { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb { background:var(--clr-off); border-bottom:1px solid var(--clr-border); padding:10px 0; }
.crumb__list { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); font-size:var(--sz-xs); color:var(--clr-text-light); }
.crumb__link:hover { color:var(--clr-primary); text-decoration:underline; }
.crumb__sep { color:var(--clr-border); }
.crumb__current { color:var(--clr-text-mid); font-weight:600; }

/* ============================================================
   HERO
   ============================================================ */
.hero { position:relative; background:var(--clr-primary); overflow:hidden; padding:72px 0 80px; }
.hero::before { content:''; position:absolute; top:-60px; right:-80px; width:480px; height:480px; border-radius:50%; background:rgba(255,255,255,0.04); pointer-events:none; }
.hero::after  { content:''; position:absolute; bottom:-100px; right:200px; width:300px; height:300px; border-radius:50%; background:rgba(240,165,0,0.06); pointer-events:none; }
.hero__inner { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; }
.hero__tag { display:inline-flex; align-items:center; gap:var(--s2); background:rgba(240,165,0,0.12); border:1px solid rgba(240,165,0,0.3); color:var(--clr-accent); font-size:var(--sz-xs); font-weight:700; letter-spacing:1px; text-transform:uppercase; padding:5px 12px; border-radius:100px; margin-bottom:var(--s5); }
.hero__title { font-size:var(--sz-3xl); font-weight:900; color:var(--clr-white); line-height:var(--lh-tight); margin-bottom:var(--s5); letter-spacing:-1px; }
.hero__title span { color:var(--clr-accent); }
.hero__sub   { font-size:var(--sz-base); color:rgba(255,255,255,0.7); line-height:var(--lh-relaxed); margin-bottom:var(--s7); max-width:440px; }
.hero__actions { display:flex; gap:var(--s3); flex-wrap:wrap; }
.hero__visual { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1); border-radius:var(--radius-lg); padding:var(--s7); }
.hero__stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); }
.hero__stat { text-align:center; }
.hero__stat-num { font-size:32px; font-weight:900; color:var(--clr-accent); letter-spacing:-1px; line-height:1; margin-bottom:var(--s1); }
.hero__stat-lbl { font-size:var(--sz-xs); color:rgba(255,255,255,0.55); font-weight:600; letter-spacing:0.5px; text-transform:uppercase; }
.hero__divider  { height:1px; background:rgba(255,255,255,0.08); margin:var(--s6) 0; }
.hero__trust    { font-size:var(--sz-xs); color:rgba(255,255,255,0.45); text-align:center; letter-spacing:0.5px; text-transform:uppercase; }

/* ============================================================
   TABS
   ============================================================ */
.tabs { background:var(--clr-white); border-bottom:1px solid var(--clr-border); position:sticky; top:66px; z-index:calc(var(--z-nav) - 1); }
.tabs__list { display:flex; overflow-x:auto; }
.tabs__list::-webkit-scrollbar { display:none; }
.tabs__link { display:inline-block; padding:14px 18px; font-size:var(--sz-sm); font-weight:600; color:var(--clr-text-light); border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap; transition: color var(--transition), border-color var(--transition); }
.tabs__link:hover { color:var(--clr-primary); }
.tabs__link--active { color:var(--clr-primary); border-bottom-color:var(--clr-accent); font-weight:700; }

/* ============================================================
   CONTENT & SECTIONS
   ============================================================ */
.content { max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
.section { padding:var(--s9) 0; border-bottom:1px solid var(--clr-border); }
.section:last-child { border-bottom:none; }
.section__lead { font-size:var(--sz-base); color:var(--clr-text-mid); line-height:var(--lh-relaxed); margin-bottom:var(--s6); max-width:720px; margin-left: auto; margin-right: auto; text-align: center; }
.section__body p { font-size:var(--sz-base); color:var(--clr-text-mid); line-height:var(--lh-relaxed); margin-bottom:var(--s4); }
.section__body p:last-child { margin-bottom:0; }

/* ============================================================
   SPLIT LAYOUT
   ============================================================ */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:var(--s8); align-items:center; }
.split__img { width:100%; aspect-ratio:4/3; border-radius:var(--radius-lg); overflow:hidden; }
.split__img img { width:100%; height:100%; object-fit:cover; }

/* ============================================================
   WARNING / WHEN GRID
   ============================================================ */
.when-grid { display:grid; grid-template-columns:260px 1fr; gap:var(--s8); align-items:start; }
.when-grid__img { width:100%; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; }
.when-grid__img img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); }

/* ============================================================
   STEPS GRID
   ============================================================ */
.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }

/* ============================================================
   CONTACT BAND
   ============================================================ */
.contact-band { background:var(--clr-subtle); border-radius:var(--radius-lg); padding:var(--s7); display:grid; grid-template-columns:1fr auto; gap:var(--s7); align-items:center; }
.contact-band__title { font-size:var(--sz-xl); font-weight:800; color:var(--clr-primary); margin-bottom:var(--s2); }
.contact-band__text  { font-size:var(--sz-sm); color:var(--clr-text-mid); line-height:var(--lh-relaxed); }
.contact-band__actions { display:flex; gap:var(--s3); flex-wrap:wrap; justify-content:flex-end; }

/* ============================================================
   SOLUTIONS SECTION
   ============================================================ */
.solutions-sec { background:var(--clr-off); padding:var(--s9) 0; }
.solutions-sec__header { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:var(--s7); gap:var(--s5); }
.sol-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5); }
.sol-nav { display:flex; gap:var(--s2); }
.sol-nav__btn { width:36px; height:36px; border-radius:50%; border:1.5px solid var(--clr-border); background:var(--clr-white); color:var(--clr-primary); font-size:18px; display:flex; align-items:center; justify-content:center; transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); cursor:pointer; }
.sol-nav__btn:hover { background:var(--clr-primary); color:var(--clr-white); border-color:var(--clr-primary); transform:scale(1.1); }
.sol-nav__btn:disabled { opacity:0.35; cursor:not-allowed; transform:none; }

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band { background:var(--clr-primary); padding:var(--s8) var(--gap); text-align:center; position:relative; overflow:hidden; }
.cta-band::before { content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%); width:600px; height:300px; border-radius:50%; background:rgba(240,165,0,0.07); pointer-events:none; }
.cta-band__title { font-size:var(--sz-2xl); font-weight:900; color:var(--clr-white); margin-bottom:var(--s3); position:relative; }
.cta-band__sub   { font-size:var(--sz-base); color:rgba(255,255,255,0.6); margin-bottom:var(--s7); position:relative; }
.cta-band__actions { display:flex; justify-content:center; gap:var(--s3); flex-wrap:wrap; position:relative; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background:var(--clr-footer-bg); color:var(--clr-footer-text); padding:var(--s9) 0 var(--s6); }
.footer__top { display:grid; grid-template-columns:220px 1fr 1fr 1fr; gap:var(--s8); margin-bottom:var(--s8); }
.footer__logo-wrap { display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5); }
.footer__logo-mark { width:32px; height:32px; background:var(--clr-primary-mid); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; }
.footer__logo-mark svg { width:18px; height:18px; stroke:var(--clr-accent); fill:none; stroke-width:2; }
.footer__logo-text { font-size:16px; font-weight:800; color:var(--clr-white); }
.footer__logo-text em { color:var(--clr-accent); font-style:normal; }
.footer__tagline  { font-size:var(--sz-sm); color:var(--clr-footer-text); line-height:var(--lh-relaxed); margin-bottom:var(--s5); }
.footer__contact-item { display:flex; align-items:center; gap:var(--s2); font-size:var(--sz-sm); color:var(--clr-footer-text); margin-bottom:var(--s2); }
.footer__contact-item a { color:var(--clr-footer-text); transition: color var(--transition); }
.footer__contact-item a:hover { color:var(--clr-white); }
.footer__col-title { font-size:var(--sz-xs); font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--clr-white); margin-bottom:var(--s4); }
.footer__col-links { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:var(--s2); }
.footer__col-link  { font-size:var(--sz-sm); color:var(--clr-footer-text); transition: color var(--transition), padding-left var(--transition); text-decoration:none; }
.footer__col-link:hover { color:var(--clr-white); padding-left:4px; }
.footer__bottom { border-top:1px solid rgba(255,255,255,0.08); padding-top:var(--s5); display:flex; justify-content:space-between; align-items:center; font-size:var(--sz-xs); color:rgba(148,168,184,0.6); }
.footer__legal { display:flex; gap:var(--s5); }
.footer__legal a { color:rgba(148,168,184,0.6); transition: color var(--transition); }
.footer__legal a:hover { color:var(--clr-white); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px) {
  .steps-grid  { grid-template-columns:1fr 1fr; }
  .footer__top { grid-template-columns:1fr 1fr; gap:var(--s6); }
}
@media (max-width:768px) {
  /* Ocultamos los links y los botones del header en celular */
  .nav__links { display:none; }
  .nav__actions { display:none; }
  .nav__links--open .nav__mobile-actions { display: flex !important; flex-direction: column; gap: 10px; margin-top: 15px; border-top: 1px solid var(--clr-border); padding-top: 20px; width: 100%; }
  
  /* Comportamiento del menú al abrirse */
  .nav__links--open { 
    display:flex !important; 
    flex-direction:column; 
    position:absolute; 
    top:66px; 
    left:0; 
    width:100%; 
    background:var(--clr-white); 
    padding:20px; 
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); 
    border-top:1px solid var(--clr-border); 
    gap:15px; 
  }
  
  /* Mostramos las tres rayitas */
  .nav__burger { display:flex; }
  
  /* Hacemos el Hero más parecido a escritorio (ya no ocultamos el panel de estadísticas) */
  .hero__inner { grid-template-columns:1fr; text-align:center; }
  .hero__actions { justify-content:center; }
  .hero__visual { display:block; margin-top:30px; }
  .hero__stat-grid { grid-template-columns:1fr 1fr; gap:15px; } /* Estadísticas en grilla 2x2 */
  
  .split, .when-grid { grid-template-columns:1fr; }
  .split__img, .when-grid__img { aspect-ratio:16/9; }
  
  /* Mantenemos las tarjetas en grillas limpias */
  .steps-grid { grid-template-columns:1fr; }
  .sol-grid { grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); }
  .contact-band { grid-template-columns:1fr; text-align:center; }
  .contact-band__actions { justify-content:center; }
}
@media (max-width:480px) {
  .sol-grid    { grid-template-columns:1fr; }
  .hero__actions, .cta-band__actions { flex-direction:column; }
  .form__row   { grid-template-columns:1fr; }
}

.tab-btn {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: var(--clr-primary);
  border: none;
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
  z-index: 5;
  padding: 5px;
}
.prev-tab { left: 0; }
.next-tab { right: 0; }

@media (max-width: 768px) {
  /* En celulares mostramos las flechas */
  .tab-btn { display: block; }
  
  /* Convertimos la lista en una pista deslizable */
  .scrollable-tabs {
    display: flex;
    justify-content: flex-start !important; /* Anula el centrado de PC */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Oculta la barra en Firefox */
    gap: 10px;
  }
  .scrollable-tabs::-webkit-scrollbar { 
    display: none; /* Oculta la barra en Chrome/Safari/Móviles */
  }
  
  /* Cada enlace mantiene su tamaño sin aplastarse */
  .scrollable-tabs li { 
    scroll-snap-align: start; 
    flex-shrink: 0; 
  }
}