*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      /* ── Naranja (primary) ── */
      --o700: #C94F02;
      --o600: #E85D04;
      --o500: #F77F00;
      --o400: #FB9B3A;
      --o100: #FEE9D0;
      --o050: #FFF6EE;
      /* ── Azul (secondary) ── */
      --b800: #0F3D7A;
      --b700: #1554A0;
      --b600: #1A6BC1;
      --b500: #2E86DE;
      --b400: #60A8E8;
      --b050: #EBF4FD;
      /* ── Surfaces ── */
      --bg:   #F0F2F5;
      --surf: #FFFFFF;
      --surf2:#F8F9FB;
      /* ── Text ── */
      --t1: #1A1D23;
      --t2: #3D4350;
      --t3: #6B7385;
      --t4: #9EA6B4;
      /* ── Borders ── */
      --bdr:  #E8EAEE;
      --bdr2: #D1D5DC;
      /* ── Radius ── */
      --r:    4px;
      --r-sm: 3px;
      --r-md: 8px;
      --r-lg: 12px;
      --r-xl: 16px;
      /* ── Shadows ── */
      --sh-card: 0 2px 16px rgba(15,61,122,.09), 0 1px 4px rgba(0,0,0,.05);
      --sh-btn:  0 4px 14px rgba(232,93,4,.35);
    }

    html { scroll-behavior: smooth; font-size: 16px; }
    body { font-family: 'Poppins', sans-serif; color: var(--t1); background: #fff; overflow-x: hidden; }
    a { text-decoration: none; color: inherit; }
    img { max-width: 100%; display: block; }

    /* ─────────────────────────────────────────
       TOP BAR
    ───────────────────────────────────────── */
    .top-bar {
      background: linear-gradient(90deg, var(--b800) 0%, var(--b700) 40%, var(--o600) 100%);
      text-align: center;
      padding: 10px 20px;
      font-size: 13px;
      font-weight: 600;
      color: #fff;
      letter-spacing: 0.01em;
    }
    .top-bar a { color: #FDE68A; border-bottom: 1px solid rgba(253,230,138,0.4); }
    .top-bar a:hover { color: #FEF3C7; }

    /* ─────────────────────────────────────────
       NAVBAR
    ───────────────────────────────────────── */
    .navbar {
      position: sticky; top: 0; z-index: 200;
      height: 68px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 48px;
      background: rgba(255,255,255,.97);
      backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--bdr);
      box-shadow: 0 1px 8px rgba(0,0,0,.05);
    }
    .nav-left { display: flex; align-items: center; gap: 36px; }
    .nav-logo { display: flex; align-items: center; gap: 10px; }
    .nav-logo-icon {
      width: 34px; height: 34px; border-radius: var(--r-md);
      background: linear-gradient(135deg, var(--b800), var(--o600));
      display: flex; align-items: center; justify-content: center;
    }
    .nav-logo-icon svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .nav-logo-text {
      font-size: 18px; font-weight: 800; letter-spacing: -0.5px; color: var(--t1);
    }
    .nav-logo-text span { color: var(--o600); }
    .nav-menu { display: flex; list-style: none; gap: 4px; }
    .nav-menu > li {
      position: relative;
      padding: 8px 14px; border-radius: var(--r);
      font-size: 14px; font-weight: 500; color: var(--t2);
      cursor: pointer; transition: background .15s, color .15s;
    }
    .nav-menu > li:hover { background: var(--o050); color: var(--o600); }
    .nav-menu > li > span { display: flex; align-items: center; gap: 4px; }
    .chevron { font-size: 10px; transition: transform .2s; }
    .nav-menu > li:hover .chevron { transform: rotate(180deg); }

    /* Dropdown */
    .nav-dropdown {
      display: none; position: absolute; top: 100%; left: -8px;
      padding-top: 8px; /* espacio visual sin perder hover */
      background: transparent;
      min-width: 300px;
      z-index: 300;
    }
    .nav-dropdown-inner {
      background: var(--surf); border: 1px solid var(--bdr); border-radius: var(--r-lg);
      box-shadow: 0 12px 40px rgba(15,61,122,.13);
      padding: 12px;
      animation: dropIn .15s ease;
    }
    @keyframes dropIn { from { opacity:0; transform:translateY(-4px) } to { opacity:1; transform:none } }
    .nav-menu > li:hover .nav-dropdown { display: block; }
    /* Mantener dropdown visible cuando el mouse está sobre él */
    .nav-dropdown:hover { display: block; }
    .dropdown-section-title {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: .08em; color: var(--t4); padding: 4px 10px 8px;
    }
    .dropdown-item {
      display: flex; align-items: center; gap: 12px;
      padding: 10px 12px; border-radius: var(--r-md);
      transition: background .12s;
    }
    .dropdown-item:hover { background: var(--o050); }
    .dropdown-icon {
      width: 38px; height: 38px; border-radius: var(--r-md);
      background: var(--surf2); display: flex; align-items: center;
      justify-content: center; font-size: 18px; flex-shrink: 0;
    }
    .dropdown-text strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--t1); }
    .dropdown-text span  { font-size: 12px; color: var(--t3); }
    .dropdown-divider { border: none; border-top: 1px solid var(--bdr); margin: 8px 0; }

    .nav-right { display: flex; align-items: center; gap: 10px; }
    .btn-nav-ghost {
      padding: 8px 16px; font-size: 13.5px; font-weight: 500;
      color: var(--t2); border-radius: var(--r);
      transition: background .15s, color .15s;
    }
    .btn-nav-ghost:hover { background: var(--surf2); color: var(--t1); }
    .btn-nav-outline {
      padding: 8px 16px; font-size: 13.5px; font-weight: 600;
      color: var(--b700); border: 1.5px solid var(--b500);
      border-radius: var(--r); transition: all .15s;
    }
    .btn-nav-outline:hover { background: var(--b050); }
    .btn-nav-primary {
      padding: 9px 20px; font-size: 13.5px; font-weight: 700;
      color: #fff; background: linear-gradient(135deg, var(--o600), var(--o500));
      border-radius: var(--r); border: none; cursor: pointer;
      box-shadow: var(--sh-btn); transition: all .15s;
    }
    .btn-nav-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,93,4,.45); }

    /* ─────────────────────────────────────────
       HERO
    ───────────────────────────────────────── */
    .hero {
      padding: 88px 48px 0;
      background: linear-gradient(160deg, var(--surf) 55%, var(--o050) 100%);
      position: relative; overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; top: -120px; right: -120px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(247,127,0,.08) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero::after {
      content: '';
      position: absolute; bottom: 60px; left: -80px;
      width: 400px; height: 400px; border-radius: 50%;
      background: radial-gradient(circle, rgba(46,134,222,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .hero-inner {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 48px; align-items: end;
      position: relative; z-index: 1;
    }
    .hero-content { padding-bottom: 64px; }
    .hero-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--o050); border: 1px solid var(--o100);
      color: var(--o700); padding: 6px 14px; border-radius: 100px;
      font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
      text-transform: uppercase; margin-bottom: 24px;
    }
    .hero-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--o500); animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.4);opacity:.7} }
    .hero h1 {
      font-size: clamp(34px, 4.5vw, 58px);
      font-weight: 900; letter-spacing: -1.5px; line-height: 1.08;
      color: var(--t1); margin-bottom: 20px;
    }
    .hero h1 span { color: var(--o600); }
    .hero-subtitle {
      font-size: 18px; font-weight: 500; color: var(--t2);
      line-height: 1.6; margin-bottom: 12px;
    }
    .hero-desc {
      font-size: 15px; color: var(--t3); line-height: 1.75; margin-bottom: 36px;
      max-width: 480px;
    }
    .hero-cta-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .btn-hero {
      display: inline-flex; align-items: center; gap: 9px;
      padding: 15px 32px; border-radius: var(--r-md);
      font-size: 15px; font-weight: 700; color: #fff;
      background: linear-gradient(135deg, var(--o700) 0%, var(--o500) 100%);
      box-shadow: 0 6px 24px rgba(232,93,4,.38);
      transition: all .2s;
    }
    .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 10px 32px rgba(232,93,4,.5); }
    .btn-hero svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .hero-fine { font-size: 13px; color: var(--t4); font-weight: 500; }
    .hero-fine-dot { color: var(--bdr2); }

    .hero-image-wrap { display: flex; align-items: flex-end; justify-content: center; }
    .hero-image-wrap img {
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      box-shadow: 0 -8px 64px rgba(15,61,122,.14);
      border: 1px solid var(--bdr);
      max-height: 420px; object-fit: cover; object-position: top;
    }

    /* ─────────────────────────────────────────
       TRUST STRIP
    ───────────────────────────────────────── */
    .trust-strip {
      background: var(--surf);
      border-top: 1px solid var(--bdr);
      border-bottom: 1px solid var(--bdr);
      padding: 36px 48px;
    }
    .trust-grid {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: repeat(4,1fr);
    }
    .trust-item {
      display: flex; flex-direction: column; align-items: center; gap: 10px;
      padding: 0 28px;
      border-right: 1px solid var(--bdr);
      text-align: center;
    }
    .trust-item:last-child { border-right: none; }
    .trust-icon {
      width: 50px; height: 50px; border-radius: var(--r-md);
      background: linear-gradient(135deg, var(--o050), var(--b050));
      display: flex; align-items: center; justify-content: center; font-size: 22px;
      border: 1px solid var(--bdr);
    }
    .trust-item h4 { font-size: 13.5px; font-weight: 700; color: var(--t1); line-height: 1.35; }
    .trust-item p  { font-size: 12.5px; color: var(--t3); line-height: 1.55; }

    /* ─────────────────────────────────────────
       SHARED SECTION HELPERS
    ───────────────────────────────────────── */
    .section-tag {
      display: inline-block;
      font-size: 11px; font-weight: 700;
      letter-spacing: .1em; text-transform: uppercase;
      color: var(--o600); background: var(--o050);
      border: 1px solid var(--o100);
      padding: 4px 12px; border-radius: 100px; margin-bottom: 12px;
    }
    .section-title {
      font-size: clamp(22px, 2.8vw, 36px);
      font-weight: 800; letter-spacing: -.6px;
      line-height: 1.18; color: var(--t1); margin-bottom: 12px;
    }
    .section-title span { color: var(--o600); }
    .section-sub { font-size: 15.5px; color: var(--t3); line-height: 1.7; max-width: 520px; }
    .section-header { margin-bottom: 52px; }
    .text-center { text-align: center; }
    .text-center .section-sub { margin: 0 auto; }

    /* ─────────────────────────────────────────
       SOLUTIONS
    ───────────────────────────────────────── */
    .solutions-section { padding: 96px 48px; background: var(--surf); }
    .solutions-wrap { max-width: 1200px; margin: 0 auto; }

    .product-tabs {
      display: flex;
      gap: 8px;
      margin-bottom: 40px;
      overflow-x: auto;
      padding-bottom: 4px;
      scrollbar-width: none;
      -ms-overflow-style: none;
      flex-wrap: wrap;
    }
    .product-tabs::-webkit-scrollbar { display: none; }
    .tab-pill {
      display: flex; align-items: center; gap: 8px;
      padding: 12px 20px;
      font-size: 13.5px; font-weight: 600;
      color: var(--t3); background: none; border: none; cursor: pointer;
      border-bottom: 3px solid transparent; margin-bottom: -2px;
      border-radius: 0; transition: all .2s;
    }
    .tab-pill.active { color: var(--o600); border-bottom-color: var(--o600); }
    .tab-pill:hover  { color: var(--o600); }
    .tab-pill-icon   { font-size: 17px; }

    .tab-panel { display: none; }
    .tab-panel.active {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 64px; align-items: center;
    }

    .solution-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
    .solution-brand-icon {
      width: 52px; height: 52px; border-radius: var(--r-md);
      display: flex; align-items: center; justify-content: center; font-size: 24px;
    }
    .solution-brand-icon.orange { background: linear-gradient(135deg, var(--o050), var(--o100)); border: 1px solid var(--o100); }
    .solution-brand-icon.blue   { background: linear-gradient(135deg, var(--b050), #D6EAFB); border: 1px solid #C3E0F8; }
    .solution-brand-name { font-size: 21px; font-weight: 800; color: var(--t1); }
    .solution-brand-sub  { font-size: 13px; color: var(--t3); }

    .solution-panel-title {
      font-size: 25px; font-weight: 800; letter-spacing: -.4px;
      color: var(--t1); margin-bottom: 20px; line-height: 1.25;
    }
    .solution-list {
      list-style: none; display: flex; flex-direction: column;
      gap: 11px; margin-bottom: 32px;
    }
    .solution-list li {
      display: flex; align-items: flex-start; gap: 10px;
      font-size: 14.5px; color: var(--t2); line-height: 1.5;
    }
    .check-badge {
      width: 20px; height: 20px; border-radius: 50%;
      background: linear-gradient(135deg, var(--o100), var(--o050));
      color: var(--o700); border: 1px solid var(--o100);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 800; flex-shrink: 0; margin-top: 2px;
    }
    .solution-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    .btn-solid {
      padding: 11px 22px; border-radius: var(--r);
      font-size: 13.5px; font-weight: 700; color: #fff;
      background: linear-gradient(135deg, var(--o600), var(--o500));
      border: none; cursor: pointer;
      box-shadow: var(--sh-btn); transition: all .15s;
    }
    .btn-solid:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(232,93,4,.45); }
    .btn-ghost-orange {
      padding: 11px 22px; border-radius: var(--r);
      font-size: 13.5px; font-weight: 600;
      color: var(--o700); background: transparent;
      border: 1.5px solid var(--o400); cursor: pointer; transition: all .15s;
    }
    .btn-ghost-orange:hover { background: var(--o050); }
    .solution-screenshot {
      border-radius: var(--r-xl); overflow: hidden;
      box-shadow: 0 20px 64px rgba(15,61,122,.12), 0 2px 12px rgba(0,0,0,.06);
      border: 1px solid var(--bdr);
    }
    .solution-screenshot img { width: 100%; display: block; }

    /* ─────────────────────────────────────────
       TESTIMONIALS
    ───────────────────────────────────────── */
    .testimonials-section {
      padding: 96px 48px;
      background: linear-gradient(160deg, var(--surf2) 0%, var(--b050) 100%);
    }
    .testimonials-grid {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 24px; margin-top: 0;
    }
    .testimonial-card {
      background: var(--surf); border: 1px solid var(--bdr);
      border-radius: var(--r-xl); padding: 28px 28px 24px;
      position: relative; transition: box-shadow .2s, transform .2s;
      box-shadow: var(--sh-card);
    }
    .testimonial-card::before {
      content: '';
      position: absolute; top: 0; left: 0; right: 0; height: 3px;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      background: linear-gradient(90deg, var(--o600), var(--o400));
    }
    .testimonial-card:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(15,61,122,.12); }
    .stars { color: var(--o500); font-size: 15px; letter-spacing: 2px; margin-bottom: 14px; }
    .testimonial-text {
      font-size: 14.5px; color: var(--t2); line-height: 1.75; margin-bottom: 20px; font-style: italic;
    }
    .testimonial-author { display: flex; align-items: center; gap: 12px; }
    .author-photo {
      width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
      background: linear-gradient(135deg, var(--o100), var(--b050));
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0; border: 2px solid var(--bdr);
    }
    .author-photo img { width: 100%; height: 100%; object-fit: cover; }
    .author-initials { font-size: 14px; font-weight: 800; color: var(--o700); }
    .author-name { font-size: 13.5px; font-weight: 700; color: var(--t1); }
    .author-role { font-size: 12px; color: var(--t3); }
    .author-logo { margin-left: auto; }

    /* ─────────────────────────────────────────
       CTA BANNER
    ───────────────────────────────────────── */
    .cta-section {
      background: linear-gradient(135deg, var(--b800) 0%, var(--b700) 45%, var(--o700) 80%, var(--o500) 100%);
      padding: 88px 48px;
      text-align: center;
      position: relative; overflow: hidden;
    }
    .cta-section::before {
      content: '';
      position: absolute; inset: 0;
      background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.04"><circle cx="30" cy="30" r="1.5"/></g></g></svg>') repeat;
      opacity: 1;
    }
    .cta-section::after {
      content: '';
      position: absolute; top: -200px; right: -200px;
      width: 600px; height: 600px; border-radius: 50%;
      background: radial-gradient(circle, rgba(255,255,255,.06) 0%, transparent 65%);
    }
    .cta-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 2; }
    .cta-section h2 {
      font-size: clamp(26px, 3.5vw, 42px);
      font-weight: 800; letter-spacing: -1px;
      color: #fff; line-height: 1.2; margin-bottom: 16px;
    }
    .cta-section > .cta-inner > p {
      font-size: 16px; color: rgba(255,255,255,.8); margin-bottom: 36px; line-height: 1.65;
    }
    .cta-checks { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
    .cta-check-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.9);
    }
    .cta-check-icon {
      width: 22px; height: 22px; border-radius: 50%;
      background: rgba(255,255,255,.2);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; color: #fff;
    }
    .btn-cta-white {
      display: inline-block;
      padding: 15px 40px; border-radius: var(--r-md);
      font-size: 15.5px; font-weight: 700;
      color: var(--o700); background: #fff;
      box-shadow: 0 8px 28px rgba(0,0,0,.2); transition: all .2s;
    }
    .btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(0,0,0,.28); }
    .cta-fine { margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.55); }

    /* ─────────────────────────────────────────
       FAQ
    ───────────────────────────────────────── */
    .faq-section { padding: 96px 48px; background: var(--surf); }
    .faq-inner { max-width: 820px; margin: 0 auto; }
    .faq-list { display: flex; flex-direction: column; gap: 10px; margin-top: 48px; }
    .faq-item {
      border: 1.5px solid var(--bdr);
      border-radius: var(--r-md);
      overflow: hidden; background: var(--surf);
      transition: border-color .2s, box-shadow .2s;
    }
    .faq-item.open { border-color: var(--o400); box-shadow: 0 4px 20px rgba(247,127,0,.09); }
    .faq-question {
      display: flex; align-items: center; justify-content: space-between;
      padding: 20px 24px; cursor: pointer;
      font-size: 15px; font-weight: 600; color: var(--t1);
      gap: 16px; user-select: none; transition: color .2s;
    }
    .faq-item.open .faq-question { color: var(--o600); }
    .faq-toggle {
      width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
      border: 1.5px solid var(--bdr);
      display: flex; align-items: center; justify-content: center;
      color: var(--t4); font-size: 16px; transition: all .3s;
    }
    .faq-item.open .faq-toggle {
      background: linear-gradient(135deg, var(--o600), var(--o500));
      border-color: var(--o600); color: #fff;
      transform: rotate(45deg);
    }
    .faq-answer {
      max-height: 0; overflow: hidden;
      padding: 0 24px;
      font-size: 14.5px; color: var(--t3); line-height: 1.75;
      transition: max-height .38s ease, padding .2s;
    }
    .faq-item.open .faq-answer { max-height: 600px; padding: 0 24px 22px; }
    .faq-answer ul { margin: 10px 0 0 20px; display: flex; flex-direction: column; gap: 6px; }
    .faq-answer li { font-size: 14px; color: var(--t3); }

    /* ─────────────────────────────────────────
       FOOTER
    ───────────────────────────────────────── */
    /* ── FOOTER REDISEÑADO ── */
    .site-footer { background: #0d1929; color: #cbd5e1; border-top: 1px solid #1e293b; }
    .footer-main {
      max-width: 1200px; margin: 0 auto;
      display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.2fr;
      gap: 48px; padding: 64px 48px 52px;
    }
    .footer-logo-wrap { margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
    .footer-logo-text { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -.5px; }
    .footer-logo-text span { color: var(--o400); }
    .footer-tagline { font-size: 13.5px; color: #94a3b8; line-height: 1.7; max-width: 280px; margin: 0 0 4px; }
    .footer-flag-row { display: flex; flex-wrap: wrap; gap: 6px; }
    .flag-item { font-size: 11px; color: #64748b; padding: 4px 10px; border-radius: 100px; border: 1px solid #1e3a5f; transition: all .15s; }
    .flag-item.active { color: var(--o400); border-color: rgba(251,155,58,.3); background: rgba(251,155,58,.07); }
    .flag-item:hover  { color: #cbd5e1; border-color: #2e4a6e; }
    .footer-col h5 { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #f1f5f9; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.07); }
    .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer-col a { font-size: 13px; color: #94a3b8; transition: all .2s; display: flex; align-items: center; gap: 8px; text-decoration: none; }
    .footer-col a i { font-size: 11px; color: #475569; transition: color .15s; width: 14px; text-align: center; }
    .footer-col a:hover { color: #f1f5f9; padding-left: 4px; }
    .footer-col a:hover i { color: var(--o400); }
    .badge-new, .badge-popular { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 100px; }
    .badge-new     { background: rgba(247,127,0,.2); color: var(--o400); border: 1px solid rgba(247,127,0,.25); }
    .badge-popular { background: rgba(46,134,222,.2); color: var(--b400); border: 1px solid rgba(46,134,222,.25); }
    .footer-bottom-bar { background: #07101e; border-top: 1px solid #1e293b; }
    .footer-bottom-inner { max-width: 1200px; margin: 0 auto; padding: 18px 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
    .footer-copy  { font-size: 12px; color: #64748b; display: flex; align-items: center; gap: 4px; }
    .footer-trees { font-size: 12px; color: #64748b; }
    .footer-legal { display: flex; gap: 16px; align-items: center; }
    .footer-legal a { font-size: 12px; color: #64748b; transition: color .15s; text-decoration: none; }
    .footer-legal a:hover { color: var(--o400); }

    /* ─────────────────────────────────────────
       COOKIE BAR
    ───────────────────────────────────────── */
    .cookie-bar {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 500;
      background: var(--b800);
      border-top: 1px solid #1E3A5F;
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 48px; gap: 24px;
    }
    .cookie-text { font-size: 13px; color: #94A3B8; }
    .cookie-text a { color: var(--o400); text-decoration: underline; text-underline-offset: 2px; }
    .cookie-btns { display: flex; gap: 10px; flex-shrink: 0; }
    .btn-cookie-reject {
      padding: 8px 18px; border-radius: var(--r); font-size: 13px; font-weight: 600;
      color: #94A3B8; background: #1E3A5F; border: none; cursor: pointer; transition: background .15s;
    }
    .btn-cookie-reject:hover { background: #243F6E; }
    .btn-cookie-accept {
      padding: 8px 18px; border-radius: var(--r); font-size: 13px; font-weight: 700;
      color: #fff; background: linear-gradient(135deg, var(--o600), var(--o500));
      border: none; cursor: pointer; box-shadow: var(--sh-btn); transition: all .15s;
    }
    .btn-cookie-accept:hover { transform: translateY(-1px); }

    /* ─────────────────────────────────────────
       WHATSAPP FAB
    ───────────────────────────────────────── */
    .wa-fab {
      position: fixed; bottom: 80px; right: 28px; z-index: 400;
      width: 54px; height: 54px; border-radius: 50%;
      background: linear-gradient(135deg, var(--o600), var(--o500));
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 6px 24px rgba(232,93,4,.45);
      transition: transform .2s, box-shadow .2s;
    }
    .wa-fab:hover { transform: scale(1.08); box-shadow: 0 10px 32px rgba(232,93,4,.55); }
    .wa-fab svg { width: 26px; height: 26px; fill: #fff; }

    /* ─────────────────────────────────────────
       REVEAL ANIMATION
    ───────────────────────────────────────── */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .55s ease, transform .55s ease; }
    .reveal.visible { opacity: 1; transform: none; }

    /* ─────────────────────────────────────────
       RESPONSIVE
    ───────────────────────────────────────── */
    /* ── HAMBURGER & MOBILE DRAWER ── */
    .nav-hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      transition: background .15s;
      z-index: 1001;
      position: relative;
    }
    .nav-hamburger:hover { background: var(--o050); }
    .nav-hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--t2);
      border-radius: 2px;
      transition: all .3s cubic-bezier(.4,0,.2,1);
      transform-origin: center;
    }
    .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
    /* Overlay */
    .nav-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.45);
      z-index: 998;
      backdrop-filter: blur(2px);
    }
    .nav-overlay.show { display: block; }
    /* Drawer */
    .nav-drawer {
      display: contents; /* desktop: sin efecto */
    }

    @media (max-width: 960px) {
      .navbar   { padding: 0 16px; }
      .nav-menu, .btn-nav-outline { display: none; }
      .nav-hamburger { display: flex; }
      .hide-mobile { display: none !important; }
      /* Drawer móvil — panel lateral derecho */
      #navDrawer {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(300px, 82vw);
        height: 100vh;
        background: var(--surf);
        z-index: 999;
        box-shadow: -4px 0 24px rgba(0,0,0,.18);
        transition: right .3s cubic-bezier(.4,0,.2,1);
        padding: 68px 0 32px;
        overflow-y: auto;
        display: flex !important;
        flex-direction: column;
        gap: 0;
      }
      #navDrawer.open { right: 0; }
      /* Menú dentro del drawer */
      #navDrawer .nav-menu {
        display: flex !important;
        flex-direction: column;
        gap: 2px;
        padding: 8px 12px 16px;
        border-bottom: 1px solid var(--bdr);
        margin-bottom: 12px;
      }
      #navDrawer .nav-menu > li {
        border-radius: 10px;
      }
      #navDrawer .nav-menu > li > span,
      #navDrawer .nav-menu > li > a {
        padding: 11px 14px;
        font-size: 15px;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
      }
      #navDrawer .nav-dropdown {
        position: static !important;
        box-shadow: none !important;
        border: 1px solid var(--bdr) !important;
        background: var(--bg2) !important;
        border-radius: 10px !important;
        margin: 4px 8px 8px;
        padding: 8px !important;
        display: none;
      }
      #navDrawer .nav-menu > li.submenu-open .nav-dropdown { display: block; }
      /* Botones del nav-right dentro del drawer */
      #navDrawer .nav-right-mobile {
        display: flex;
        flex-direction: column;
        padding: 0 12px;
        gap: 8px;
      }
      #navDrawer .nav-right-mobile a,
      #navDrawer .nav-right-mobile button {
        display: flex !important;
        justify-content: center;
        text-align: center;
        width: 100%;
        box-sizing: border-box;
      }
      .hero     { padding: 56px 20px 0; }
      .hero-inner { grid-template-columns: 1fr; }
      .hero-image-wrap { display: none; }
      .trust-strip, .solutions-section, .testimonials-section,
      .cta-section, .faq-section { padding-left: 20px; padding-right: 20px; }
      .trust-grid { grid-template-columns: 1fr 1fr; }
      .trust-item { border-right: none; border-bottom: 1px solid var(--bdr); padding: 16px; }
      .tab-panel.active { grid-template-columns: 1fr; }
      .solution-screenshot { display: none; }
      .testimonials-grid { grid-template-columns: 1fr; }
      .footer-main { grid-template-columns: 1fr 1fr; padding: 40px 20px 32px; gap: 32px; }
      .footer-bottom-inner { padding: 14px 20px; }
      .cookie-bar { padding: 16px 20px; flex-wrap: wrap; }
    }

.faq-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  align-items: start;
}
@media (max-width: 820px) {
  .faq-2col { grid-template-columns: 1fr; }
  .faq-inner { max-width: 100% !important; }
}

/* Estilos para respuestas HTML (TinyMCE) dentro de .faq-answer */
.faq-answer p        { margin: 0 0 .75em; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer ul       { padding-left: 1.4em; margin: .5em 0 .75em; list-style: disc; }
.faq-answer ol       { padding-left: 1.4em; margin: .5em 0 .75em; }
.faq-answer li       { margin-bottom: .35em; font-size: 14px; color: var(--t3); }
.faq-answer strong   { font-weight: 700; color: var(--t2); }
.faq-answer a        { color: var(--o600); text-decoration: underline; text-underline-offset: 2px; }
.faq-answer a:hover  { color: var(--o700); }
.faq-answer code     { background: var(--surf2); border: 1px solid var(--bdr); border-radius: 4px; padding: 1px 6px; font-size: .88em; }
.faq-answer blockquote { border-left: 3px solid var(--o400); padding-left: 1em; color: var(--t3); margin: .75em 0; font-style: italic; }