:root {
    --primary: #1E6FFF;
    --primary-dark: #0F52CC;
    --primary-light: #5B9EFF;
    --primary-soft: #E8F0FF;
    --navy: #0A1F44;
    --navy-2: #1A2E5C;
    --text: #0A1F44;
    --text-muted: #5C6B8C;
    --text-light: #8A95B0;
    --bg: #FFFFFF;
    --bg-soft: #F6F9FF;
    --bg-blue: #EEF3FF;
    --line: #E1E8F5;
    --line-strong: #C7D3EB;
    --success: #10B981;
    --shadow-sm: 0 1px 2px rgba(10, 31, 68, .06);
    --shadow-md: 0 6px 20px rgba(10, 31, 68, .08);
    --shadow-lg: 0 20px 50px rgba(30, 111, 255, .15);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    font-size: 16px;
  }

  .display {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    letter-spacing: -.02em;
  }

  .container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
  }

  /* ===== NAV ===== */
  nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
  }
  .nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    max-width: 1180px;
    margin: 0 auto;
  }
  .logo-img {
    height: 38px;
    width: auto;
    display: block;
  }
  .nav-links {
    display: flex;
    gap: 36px;
    align-items: center;
  }
  .nav-links a {
    color: var(--text);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 500;
    transition: color .2s;
  }
  .nav-links a:hover { color: var(--primary); }
  .nav-cta {
    background: var(--navy);
    color: white !important;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600 !important;
    transition: all .2s;
  }
  .nav-cta:hover {
    background: var(--primary);
  }
  @media (max-width: 768px) {
    .nav-links a:not(.nav-cta) { display: none; }
    .logo-img { height: 32px; }
  }

  /* ===== HERO ===== */
  .hero {
    padding: 90px 0 110px;
    background:
      radial-gradient(circle at 90% 10%, rgba(30, 111, 255, .12) 0%, transparent 50%),
      radial-gradient(circle at 10% 90%, rgba(91, 158, 255, .08) 0%, transparent 50%),
      var(--bg);
    position: relative;
    overflow: hidden;
  }
  /* Particles decoration nodding to the logo */
  .hero::before {
    content: "";
    position: absolute;
    top: 120px; left: 4%;
    width: 6px; height: 6px;
    background: var(--primary-light);
    border-radius: 50%;
    box-shadow:
      20px 10px 0 var(--primary-light),
      40px -5px 0 var(--primary),
      -10px 30px 0 var(--primary-light),
      60px 20px 0 var(--primary-light);
    opacity: .4;
  }
  .hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 80px;
    align-items: center;
    position: relative;
  }
  @media (max-width: 920px) {
    .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  }

  .hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 26px;
  }
  .hero-pill::before {
    content: "";
    width: 7px; height: 7px;
    background: var(--success);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .5; transform: scale(.85); }
  }

  h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(40px, 5.5vw, 64px);
    line-height: 1.05;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--navy);
    margin-bottom: 24px;
  }
  h1 .gradient {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .hero-sub {
    font-size: 19px;
    color: var(--text-muted);
    max-width: 540px;
    margin-bottom: 36px;
    line-height: 1.6;
  }
  .hero-ctas {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all .2s;
    cursor: pointer;
    border: none;
    font-family: 'Inter', sans-serif;
  }
  .btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 6px 18px rgba(30, 111, 255, .35);
  }
  .btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(30, 111, 255, .45);
  }
  .btn-secondary {
    background: white;
    color: var(--navy);
    border: 1.5px solid var(--line-strong);
  }
  .btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
  }
  .arrow-icon {
    display: inline-block;
    transition: transform .2s;
  }
  .btn:hover .arrow-icon { transform: translateX(4px); }

  .hero-note {
    margin-top: 22px;
    color: var(--text-light);
    font-size: 14px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .hero-note span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .hero-note .check {
    color: var(--primary);
    font-weight: 700;
  }

  /* Hero visual: el día típico */
  .day-card {
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow-lg);
    position: relative;
  }
  .day-card::after {
    content: "";
    position: absolute;
    top: -14px;
    right: 24px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    color: white;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    content: "Antes / después";
    box-shadow: 0 4px 12px rgba(30, 111, 255, .35);
  }
  .day-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--text-light);
    margin-bottom: 18px;
  }
  .day-list {
    list-style: none;
  }
  .day-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 14px;
  }
  .day-list li:last-child { border-bottom: none; }
  .day-list .task {
    font-weight: 500;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .day-list .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
    flex-shrink: 0;
  }
  .day-list .time {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-light);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
  }
  .day-list li.crossed .task {
    color: var(--text-light);
    text-decoration: line-through;
    text-decoration-color: var(--primary);
    text-decoration-thickness: 2px;
  }
  .day-list li.crossed .dot { background: var(--primary); }
  .day-list li.kept .dot { background: var(--success); }
  .day-list li.kept .task { color: var(--navy); font-weight: 600; }
  .day-list li.kept .time { color: var(--success); }
  .day-foot {
    margin-top: 22px;
    padding: 16px 18px;
    background: var(--bg-blue);
    border-radius: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
  .day-foot .lbl {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
  }
  .day-foot .val {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -.01em;
  }

  /* ===== LOGO STRIP ===== */
  .strip {
    padding: 50px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--bg);
  }
  .strip-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    color: var(--text-light);
  }
  .strip-label {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    color: var(--text-light);
  }
  .strip-tools {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
    color: var(--navy);
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    opacity: .55;
  }
  .strip-tools span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }
  .strip-tools .icn {
    display: inline-block;
    width: 20px; height: 20px;
    background: var(--navy);
    border-radius: 4px;
    opacity: .8;
  }

  /* ===== SECTION COMMON ===== */
  section {
    padding: 100px 0;
  }
  .eyebrow {
    display: inline-block;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 14px;
  }
  h2 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(32px, 4vw, 46px);
    line-height: 1.1;
    font-weight: 800;
    color: var(--navy);
    letter-spacing: -.025em;
    margin-bottom: 18px;
  }
  h2 .gradient {
    background: linear-gradient(90deg, var(--primary) 0%, var(--primary-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .section-sub {
    font-size: 18px;
    color: var(--text-muted);
    max-width: 640px;
    line-height: 1.6;
  }
  .section-header.center {
    text-align: center;
    margin: 0 auto 60px;
    max-width: 720px;
  }
  .section-header.center .section-sub { margin: 0 auto; }

  /* ===== CÓMO TRABAJAMOS ===== */
  .work {
    background: var(--bg-soft);
    position: relative;
  }
  .work-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    margin-bottom: 70px;
    align-items: end;
  }
  @media (max-width: 768px) {
    .work-header { grid-template-columns: 1fr; gap: 20px; }
  }
  .work-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  @media (max-width: 920px) {
    .work-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 600px) {
    .work-grid { grid-template-columns: 1fr; }
  }
  .work-card {
    background: white;
    padding: 30px 28px;
    border-radius: 16px;
    border: 1px solid var(--line);
    position: relative;
    transition: all .25s;
  }
  .work-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
  }
  .work-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 14px;
    font-weight: 800;
    color: var(--primary);
    background: var(--primary-soft);
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .work-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 10px;
    line-height: 1.25;
  }
  .work-card p {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.6;
  }

  /* ===== CASOS DE USO ===== */
  .cases-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 24px;
  }
  .case {
    background: white;
    border: 1px solid var(--line);
    padding: 36px;
    border-radius: 18px;
    transition: all .25s;
    position: relative;
    overflow: hidden;
  }
  .case:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-light);
  }
  .case.big { grid-column: span 7; }
  .case.small { grid-column: span 5; }
  .case.full {
    grid-column: span 12;
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--navy);
  }
  @media (max-width: 768px) {
    .case.big, .case.small, .case.full { grid-column: span 12; }
  }
  .case-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 18px;
  }
  .case.full .case-tag {
    background: rgba(255,255,255,.15);
    color: white;
  }
  .case h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 12px;
    line-height: 1.2;
  }
  .case.full h3 { color: white; }
  .case p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
  }
  .case.full p { color: rgba(255,255,255,.85); }
  .case-quote {
    color: var(--text-light);
    font-size: 13.5px;
    font-style: italic;
    margin-bottom: 14px;
  }
  .case.full .case-quote { color: rgba(255,255,255,.6); }
  .case-metric {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .case.full .case-metric { border-top-color: rgba(255,255,255,.15); }
  .case-metric .number {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -.02em;
  }
  .case.full .case-metric .number { color: var(--primary-light); }
  .case-metric .label {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .case.full .case-metric .label { color: rgba(255,255,255,.7); }
  .case.full .btn-primary {
    background: white;
    color: var(--navy);
    box-shadow: none;
    margin-top: 8px;
  }
  .case.full .btn-primary:hover {
    background: var(--primary-light);
    color: white;
  }

  /* ===== PRECIOS ===== */
  .pricing {
    background: var(--bg-soft);
  }
  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 60px;
  }
  @media (max-width: 920px) {
    .pricing-grid { grid-template-columns: 1fr; max-width: 440px; margin-left: auto; margin-right: auto; }
  }
  .plan {
    background: white;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: all .25s;
  }
  .plan:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
  .plan.featured {
    background: linear-gradient(180deg, var(--navy) 0%, var(--primary-dark) 100%);
    color: white;
    border-color: var(--navy);
    transform: scale(1.03);
    box-shadow: var(--shadow-lg);
  }
  @media (max-width: 920px) {
    .plan.featured { transform: none; }
  }
  .plan-tag {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(30, 111, 255, .4);
  }
  .plan-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--primary);
    margin-bottom: 12px;
  }
  .plan.featured .plan-name { color: var(--primary-light); }
  .plan-price {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    color: var(--navy);
    line-height: 1.1;
    letter-spacing: -.02em;
    margin-bottom: 4px;
  }
  .plan.featured .plan-price { color: white; }
  .plan-price .from {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
    letter-spacing: 0;
  }
  .plan.featured .plan-price .from { color: rgba(255,255,255,.6); }
  .plan-price .unit {
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
    margin-left: 4px;
    font-family: 'Inter', sans-serif;
  }
  .plan.featured .plan-price .unit { color: rgba(255,255,255,.6); }
  .plan-desc {
    color: var(--text-muted);
    font-size: 14.5px;
    margin: 20px 0 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    line-height: 1.5;
    min-height: 80px;
  }
  .plan.featured .plan-desc {
    color: rgba(255,255,255,.75);
    border-bottom-color: rgba(255,255,255,.15);
  }
  .plan-features {
    list-style: none;
    flex-grow: 1;
    margin-bottom: 28px;
  }
  .plan-features li {
    padding: 9px 0 9px 30px;
    color: var(--text);
    font-size: 14.5px;
    position: relative;
    line-height: 1.5;
  }
  .plan-features li::before {
    content: "";
    position: absolute;
    left: 0; top: 14px;
    width: 18px; height: 18px;
    background: var(--primary-soft);
    border-radius: 50%;
  }
  .plan-features li::after {
    content: "";
    position: absolute;
    left: 5px; top: 18px;
    width: 8px; height: 4px;
    border-left: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(-45deg);
  }
  .plan.featured .plan-features li { color: rgba(255,255,255,.9); }
  .plan.featured .plan-features li::before {
    background: rgba(91, 158, 255, .2);
  }
  .plan.featured .plan-features li::after {
    border-color: var(--primary-light);
  }
  .plan .btn { width: 100%; justify-content: center; }
  .plan.featured .btn-primary {
    background: var(--primary);
    color: white;
  }
  .plan.featured .btn-primary:hover {
    background: white;
    color: var(--navy);
  }
  .plan.featured .btn-secondary {
    background: rgba(255,255,255,.1);
    color: white;
    border-color: rgba(255,255,255,.25);
  }
  .plan.featured .btn-secondary:hover {
    border-color: white;
    color: white;
  }

  .pricing-foot {
    text-align: center;
    margin-top: 36px;
    color: var(--text-light);
    font-size: 14px;
  }

  /* ===== SOBRE NOSOTROS ===== */
  .about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
  }
  @media (max-width: 920px) {
    .about-grid { grid-template-columns: 1fr; gap: 48px; }
  }
  .about-features {
    list-style: none;
    margin-top: 28px;
  }
  .about-features li {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .about-features li:last-child { border-bottom: none; }
  .about-icon {
    width: 44px; height: 44px;
    background: var(--primary-soft);
    color: var(--primary);
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .about-features strong {
    font-family: 'Plus Jakarta Sans', sans-serif;
    display: block;
    color: var(--navy);
    font-size: 16.5px;
    font-weight: 700;
    margin-bottom: 4px;
  }
  .about-features span {
    color: var(--text-muted);
    font-size: 14.5px;
    line-height: 1.55;
  }
  .stats-card {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary) 100%);
    color: white;
    padding: 44px 40px;
    border-radius: 24px;
    box-shadow: var(--shadow-lg);
    position: relative;
    overflow: hidden;
  }
  .stats-card::before {
    content: "";
    position: absolute;
    top: -80px; right: -80px;
    width: 280px; height: 280px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
  }
  .stats-card::after {
    content: "";
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
  }
  .stats-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
  }
  .stats-card .lead {
    opacity: .85;
    font-size: 15px;
    margin-bottom: 28px;
    line-height: 1.55;
    position: relative;
    z-index: 1;
  }
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    position: relative;
    z-index: 1;
  }
  .stat-num {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 38px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -.02em;
    color: var(--primary-light);
  }
  .stat-label {
    font-size: 13.5px;
    opacity: .85;
    line-height: 1.4;
  }

  /* ===== FAQ ===== */
  .faq-list {
    max-width: 800px;
    margin: 0 auto;
  }
  .faq-item {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 26px;
    background: white;
    margin-bottom: 12px;
    transition: border-color .2s;
  }
  .faq-item:hover { border-color: var(--primary-light); }
  details[open].faq-item { border-color: var(--primary); }
  .faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: var(--navy);
    list-style: none;
    gap: 16px;
  }
  .faq-question::-webkit-details-marker { display: none; }
  .faq-question::after {
    content: "+";
    font-size: 26px;
    color: var(--primary);
    transition: transform .2s;
    font-weight: 400;
    line-height: 1;
  }
  details[open] .faq-question::after { content: "−"; }
  .faq-answer {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
  }

  /* ===== CTA FINAL ===== */
  .cta-final {
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 90px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-final::before {
    content: "";
    position: absolute;
    top: -200px; right: -150px;
    width: 500px; height: 500px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
  }
  .cta-final::after {
    content: "";
    position: absolute;
    bottom: -200px; left: -150px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(91,158,255,.2) 0%, transparent 70%);
    border-radius: 50%;
  }
  .cta-final-inner {
    text-align: center;
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .cta-final .eyebrow {
    color: var(--primary-light);
  }
  .cta-final h2 {
    color: white;
    margin-bottom: 20px;
  }
  .cta-final p {
    color: rgba(255,255,255,.85);
    font-size: 19px;
    margin-bottom: 36px;
    line-height: 1.6;
  }
  .cta-final .hero-ctas { justify-content: center; }
  .cta-final .btn-primary {
    background: var(--primary);
    color: white;
  }
  .cta-final .btn-primary:hover {
    background: white;
    color: var(--navy);
  }
  .cta-final .btn-secondary {
    background: transparent;
    color: white;
    border-color: rgba(255,255,255,.3);
  }
  .cta-final .btn-secondary:hover {
    border-color: white;
    background: rgba(255,255,255,.1);
  }
  .cta-final .alt {
    margin-top: 28px;
    color: rgba(255,255,255,.6);
    font-size: 14px;
  }
  .cta-final .alt a {
    color: var(--primary-light);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* ===== CONTACTO: grid pitch + formulario ===== */
  .contacto-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    text-align: left;
    max-width: 1040px;
    margin: 0 auto;
  }
  .contacto-pitch .eyebrow { color: var(--primary-light); }
  .contacto-pitch h2 { color: white; margin-bottom: 18px; }
  .contacto-pitch p {
    color: rgba(255,255,255,.85);
    font-size: 17px;
    line-height: 1.65;
    margin-bottom: 30px;
  }
  .contacto-pitch .hero-ctas { justify-content: flex-start; margin-bottom: 22px; }
  .btn-wa {
    background: #25D366;
    color: white;
    box-shadow: 0 6px 18px rgba(37, 211, 102, .35);
  }
  .btn-wa:hover {
    background: #1FB855;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 211, 102, .45);
    color: white;
  }
  .btn-wa svg { fill: currentColor; }

  .form-card {
    background: white;
    border-radius: 18px;
    padding: 36px;
    box-shadow: var(--shadow-lg);
  }
  .form-card h3 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 20px;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .form-card > p {
    color: var(--text-muted);
    font-size: 14.5px;
    margin-bottom: 22px;
  }
  .form-group { margin-bottom: 16px; }
  .form-group label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--navy);
    margin-bottom: 6px;
  }
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--bg-soft);
    transition: border-color .2s, background .2s;
  }
  .form-group input:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: var(--primary);
    background: white;
  }
  .form-group textarea { resize: vertical; min-height: 90px; }
  .form-card .btn { width: 100%; justify-content: center; margin-top: 4px; }
  .form-msg {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
  }
  .form-msg.exito { background: #E7F9F1; color: #0D7A4E; }
  .form-msg.error { background: #FDEAEA; color: #B4232C; }
  .form-msg.error a { color: #B4232C; text-decoration: underline; }
  .form-hint {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-light);
    text-align: center;
  }
  @media (max-width: 860px) {
    .contacto-grid { grid-template-columns: 1fr; gap: 40px; }
    .contacto-pitch { text-align: center; }
    .contacto-pitch .hero-ctas { justify-content: center; }
    .form-card { padding: 28px 24px; }
  }

  /* ===== Botón flotante de WhatsApp ===== */
  .wa-float {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 58px;
    height: 58px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 24px rgba(37, 211, 102, .45);
    z-index: 60;
    transition: transform .2s;
  }
  .wa-float:hover { transform: scale(1.08); }
  .wa-float svg { width: 30px; height: 30px; fill: white; }

  /* ===== FOOTER ===== */
  footer {
    background: var(--navy);
    color: rgba(255,255,255,.7);
    padding: 60px 0 30px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
  }
  @media (max-width: 768px) {
    .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  }
  .footer-logo {
    background: white;
    padding: 10px 14px;
    border-radius: 10px;
    display: inline-block;
    margin-bottom: 16px;
  }
  .footer-logo img {
    height: 32px;
    display: block;
  }
  .footer-tag {
    font-size: 15px;
    line-height: 1.6;
    max-width: 360px;
    color: rgba(255,255,255,.65);
  }
  .footer-col h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 18px;
  }
  .footer-col a {
    display: block;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    padding: 6px 0;
    font-size: 14.5px;
    transition: color .2s;
  }
  .footer-col a:hover { color: var(--primary-light); }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,.1);
    padding-top: 24px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13.5px;
    color: rgba(255,255,255,.5);
  }

  .fade-in {
    opacity: 0;
    transform: translateY(16px);
    animation: fadeIn .7s ease-out forwards;
  }
  @keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
  }

.narrow{max-width:900px}
.page-hero{padding:56px 0 40px;background:linear-gradient(180deg,var(--bg-blue),#fff)}
.page-hero h1{font-size:clamp(30px,4.4vw,46px);margin:14px 0 14px}
.crumbs{font-size:14px;color:var(--text-muted);margin-bottom:14px}.crumbs a{color:var(--primary);text-decoration:none}
.answers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.answers>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm)}
.answers span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.answers p{margin-top:6px;font-size:15px}
.case-link{margin-top:18px;font-size:15px}.case-link a,.hero-sub a{color:var(--primary);font-weight:600}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ba-col{border-radius:16px;padding:24px;border:1px solid var(--line)}
.ba-col h3{margin-bottom:12px;font-family:'Plus Jakarta Sans',sans-serif}
.ba-col ul{list-style:none;display:grid;gap:10px}.ba-col li{padding-left:24px;position:relative;font-size:15px}
.ba-before{background:#fff5f5;border-color:#f3d4d4}.ba-before li::before{content:"✕";position:absolute;left:0;color:#c0392b;font-weight:700}
.ba-after{background:#f0fdf7;border-color:#b8ecd4}.ba-after li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.step{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}.step h3{margin:8px 0 6px;font-family:'Plus Jakarta Sans',sans-serif;font-size:17px}.step p{font-size:14.5px;color:var(--text-muted)}
.tools{margin-top:18px;font-size:14px;color:var(--text-muted)}
.price-box{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:20px;padding:30px;box-shadow:var(--shadow-lg)}
.pb-main{text-align:center;min-width:200px}.pb-label{font-size:13px;opacity:.75;text-transform:uppercase;letter-spacing:.05em}
.pb-price{font-family:'Plus Jakarta Sans',sans-serif;font-size:44px;font-weight:800;margin:4px 0}.pb-price span{font-size:18px;font-weight:600;opacity:.8}
.pb-note{font-size:13px;opacity:.7}.pb-plus{font-size:32px;opacity:.6}
.price-foot{margin-top:18px;font-size:14.5px;color:var(--text-muted);line-height:1.65}
.incl{margin:18px 0 0;list-style:none;display:grid;gap:8px}.incl li{padding-left:26px;position:relative;font-size:15px}.incl li::before{content:"✓";position:absolute;left:0;color:var(--success);font-weight:700}
.custom-box{margin-top:26px;background:var(--bg-blue);border:1px solid var(--line-strong);border-radius:16px;padding:22px}.custom-box h3{font-family:'Plus Jakarta Sans',sans-serif;margin-bottom:6px}
.flowgrid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.flowcard{display:block;text-decoration:none;color:inherit}
.flow-ic{font-size:28px;margin-bottom:8px}.flow-more{display:inline-block;margin-top:10px;color:var(--primary);font-weight:600;font-size:14px}
.cases2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.case-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow-sm);transition:.2s}.case-card:hover{box-shadow:var(--shadow-md);border-color:var(--primary-light)}
.case-card h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:24px;margin:8px 0}.case-card p{color:var(--text-muted);font-size:15px}
.case-tag{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--primary)}
.case-block{margin-bottom:34px}.case-block .big{font-size:18px;margin-top:8px}
.case-steps{margin:10px 0 0 20px;display:grid;gap:10px;font-size:17px}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:12px}
.metric{background:var(--bg-blue);border-radius:14px;padding:20px}.m-num{font-family:'Plus Jakarta Sans',sans-serif;font-size:32px;font-weight:800;color:var(--primary)}.m-lbl{font-size:14px;color:var(--text-muted)}
.meta-note{margin-top:12px;font-size:13.5px;color:var(--text-muted);font-style:italic}
@media(max-width:768px){.answers{grid-template-columns:1fr}.ba{grid-template-columns:1fr}.pb-plus{display:none}.nav-links a:not(.nav-cta){display:none}}
.day-card::after{content:"PRECIO PUBLICADO"!important}
/* ===== Refinamiento visual v2 ===== */
:root{--ring:0 0 0 1px rgba(10,31,68,.06);--sh1:0 1px 2px rgba(10,31,68,.05),0 8px 24px -12px rgba(10,31,68,.14)}
section{padding:88px 0}
h2{letter-spacing:-.025em}
.eyebrow{display:inline-flex;align-items:center;gap:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--primary);border-radius:2px}
.section-header.center .eyebrow{justify-content:center}
h2 .gradient,h1 .gradient{background:none;-webkit-text-fill-color:currentColor;color:var(--primary)}
nav{border-bottom:1px solid var(--line);background:rgba(255,255,255,.92)}
.hero-pill::before{display:none}
.hero-pill{background:#fff;border:1px solid var(--line-strong);color:var(--navy-2);font-weight:600;box-shadow:none}
.hero::before,.hero-grid::before{display:none}
.hero{background:linear-gradient(180deg,#F4F8FF 0%,#fff 100%)}
.day-card{box-shadow:var(--sh1);border:1px solid var(--line);border-radius:18px}
.day-card::after{background:var(--navy)!important;box-shadow:none}
.btn{border-radius:10px;letter-spacing:0}
.btn-primary{box-shadow:0 1px 2px rgba(10,31,68,.2)}
.btn-primary:hover{transform:translateY(-1px)}
/* iconos */
.flow-ic{width:46px;height:46px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:16px;border:1px solid #d5e3ff;font-size:0}
.flow-ic svg{width:22px;height:22px}
.flow-ic.lg{width:52px;height:52px;margin:0;background:#fff;border-color:var(--line-strong)}.flow-ic.lg svg{width:26px;height:26px}
.hero-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
/* tarjetas de flujo */
.flowgrid{gap:20px}
.flowcard{padding:28px;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh1);transition:transform .2s,border-color .2s,box-shadow .2s;display:flex;flex-direction:column}
.flowcard:hover{transform:translateY(-3px);border-color:var(--primary-light);box-shadow:0 14px 34px -14px rgba(30,111,255,.35)}
.flowcard:hover .flow-ic{background:var(--primary);color:#fff;border-color:var(--primary)}
.flowcard h3{font-size:19px;margin-bottom:8px;letter-spacing:-.015em}
.flowcard p{font-size:15px;line-height:1.6;flex:1}
.flow-more{margin-top:18px;display:inline-flex;gap:6px;align-items:center;padding-top:14px;border-top:1px solid var(--line);width:100%}
.flow-more i{font-style:normal;transition:transform .2s}.flowcard:hover .flow-more i,.case-card:hover .flow-more i{transform:translateX(4px)}
/* pasos con hilo */
.steps{counter-reset:s;gap:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh1);overflow:hidden}
.step{border:0;border-radius:0;border-right:1px solid var(--line);padding:28px 24px;position:relative}
.step:last-child{border-right:0}
.step .work-num{background:var(--navy);color:#fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:13px;margin-bottom:14px}
.step h3{font-size:17px}
/* antes/después */
.ba{gap:20px}.ba-col{border-radius:16px;padding:28px;box-shadow:var(--sh1)}
.ba-col li{padding-left:30px}
.ba-col li::before{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;top:2px;color:#fff!important}
.ba-before li::before{background:#d9534f}.ba-after li::before{background:var(--success)}
.ba-col h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}
/* respuestas */
.answers>div{border-radius:14px;box-shadow:var(--sh1);border-top:3px solid var(--primary)}
.page-hero{padding:64px 0 52px;background:linear-gradient(180deg,#F4F8FF,#fff)}
/* precio */
.price-box{background:linear-gradient(135deg,#0A1F44 0%,#12306a 100%);border-radius:20px;padding:38px;box-shadow:0 24px 50px -24px rgba(10,31,68,.55);position:relative;overflow:hidden}
.price-box::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(91,158,255,.28),transparent 70%)}
.pb-price{font-size:48px;letter-spacing:-.03em}
.price-foot{padding:16px 18px;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px}
.custom-box{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh1);border-left:4px solid var(--primary)}
/* casos */
.case-card{border-radius:16px;padding:30px;box-shadow:var(--sh1)}
.case-card:hover{transform:translateY(-3px)}
.case-tag{background:var(--primary-soft);padding:4px 10px;border-radius:999px;display:inline-block;letter-spacing:.05em;font-size:11px}
.metric{background:#fff;border:1px solid var(--line);border-top:3px solid var(--primary);box-shadow:var(--sh1)}
.case-steps li::marker{color:var(--primary);font-weight:700}
/* FAQ y form */
.faq-item{border-radius:12px;box-shadow:none}
.form-card{border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.incl li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;top:3px}
.footer-col a{font-size:14.5px}
@media(max-width:768px){section{padding:60px 0}.step{border-right:0;border-bottom:1px solid var(--line)}.step:last-child{border-bottom:0}.price-box{padding:28px 20px}}
/* ===== v3: iconos a prueba de caché, cierre de caso, checks ===== */
.flow-ic{width:44px!important;height:44px!important;min-width:44px;font-size:0!important;overflow:hidden}
.flow-ic svg{width:22px!important;height:22px!important;flex:0 0 auto}
.flow-ic.lg{width:52px!important;height:52px!important;min-width:52px}
.flow-ic.lg svg{width:26px!important;height:26px!important}
.hero-note .check{width:16px;height:16px;border-radius:50%;background:var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat;display:inline-block;vertical-align:-3px;margin-right:6px}
.case-link{display:inline-flex;align-items:center;gap:8px;background:var(--primary-soft);border:1px solid #d5e3ff;border-radius:999px;padding:9px 18px;font-size:14.5px;font-weight:600}
.case-link a{text-decoration:none}.case-link i{font-style:normal;display:inline-block;transition:transform .2s}.case-link:hover i{transform:translateX(3px)}
/* tarjeta de cierre del caso */
.closer{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;background:#fff;border:1px solid var(--line);border-left:4px solid var(--primary);border-radius:18px;padding:30px 32px;box-shadow:var(--sh1);margin-top:8px}
.closer .flow-ic.lg{background:var(--primary-soft);border-color:#d5e3ff;color:var(--primary)}
.closer-txt h3{font-family:'Plus Jakarta Sans',sans-serif;font-size:22px;letter-spacing:-.02em;margin:6px 0 2px}
.closer-txt>p{color:var(--text-muted);font-size:15px}
.closer-facts{display:flex;gap:30px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.closer-facts b{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-size:20px;color:var(--navy);letter-spacing:-.02em}
.closer-facts span{font-size:12.5px;color:var(--text-muted)}
.closer-note{margin-top:14px;font-size:13px;color:var(--text-light)}
.closer-cta{display:grid;gap:10px;min-width:210px}
.closer-cta .btn{width:100%;justify-content:center}
@media(max-width:900px){.closer{grid-template-columns:1fr;gap:18px;padding:26px 22px}.closer-cta{min-width:0}}