:root{
    --blue:      #1B6EF3;
    --blue-d:    #0B5BD3;
    --blue-l:    #2E9BFF;
    --navy:      #0B2447;
    --ink:       #060D1F;
    --ink-2:     #0A1428;
    --metal:     #A9B1BA;
    --white:     #F3F6FA;
    --line:      rgba(255,255,255,.10);
    --line-2:    rgba(255,255,255,.18);
    --green:     #25D366;
    --r:         12px;
    --wrap:      1160px;
    --ease:      cubic-bezier(.22,.61,.36,1);
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0; background:var(--ink); color:var(--white);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{ max-width:100%; display:block; }
  a{ color:inherit; }

  .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }

  h1,h2,h3,h4{ font-family:'Poppins',sans-serif; margin:0; line-height:1.18; letter-spacing:-0.02em; font-weight:600; }
  h1{ font-size:clamp(2.1rem, 5vw, 3.6rem); font-weight:700; }
  h2{ font-size:clamp(1.7rem, 3.4vw, 2.5rem); }
  h3{ font-size:1.18rem; }
  p{ margin:0; }

  .eyebrow{
    display:inline-flex; align-items:center; gap:10px;
    font-size:.74rem; font-weight:700; letter-spacing:.16em;
    text-transform:uppercase; color:var(--blue-l);
  }
  .eyebrow::before{ content:''; width:26px; height:2px; background:currentColor; border-radius:2px; }
  .sec-head.center .eyebrow::before{ display:none; }

  .muted{ color:var(--metal); }

  /* ---------- fondo con brillos azules ---------- */
  .glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; pointer-events:none; z-index:0; }

  /* ---------- gráfico de crecimiento del hero ---------- */
  .chart{
    position:absolute; inset:0; width:100%; height:100%;
    z-index:1; pointer-events:none; opacity:.55;
  }
  .chart .grid path{ stroke:rgba(255,255,255,.05); stroke-width:1; fill:none; }
  .chart .area{ fill:url(#garea); opacity:0; animation:areaIn 1.4s var(--ease) 1.1s forwards; }
  .chart .line{
    fill:none; stroke:url(#gline); stroke-width:3.5;
    stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 0 10px rgba(46,155,255,.55));
    stroke-dasharray:2400; stroke-dashoffset:2400;
    animation:draw 2.2s var(--ease) .25s forwards;
  }
  .chart .dots circle{
    fill:#7FC4FF; opacity:0;
    filter:drop-shadow(0 0 7px rgba(127,196,255,.9));
    animation:dotIn .5s var(--ease) forwards, pulse 2.6s ease-in-out infinite;
  }
  .chart .dots circle:nth-child(1){ animation-delay:.75s, 2.4s; }
  .chart .dots circle:nth-child(2){ animation-delay:1.15s, 2.7s; }
  .chart .dots circle:nth-child(3){ animation-delay:1.55s, 3.0s; }
  .chart .dots circle:nth-child(4){ animation-delay:1.95s, 3.3s; }
  .chart .arrow path{
    fill:none; stroke:#7FC4FF; stroke-width:4;
    stroke-linecap:round; stroke-linejoin:round;
    filter:drop-shadow(0 0 9px rgba(127,196,255,.8));
    opacity:0; animation:arrowIn .6s var(--ease) 2.2s forwards;
  }
  @keyframes draw   { to { stroke-dashoffset:0; } }
  @keyframes areaIn { to { opacity:1; } }
  @keyframes dotIn  { to { opacity:1; } }
  @keyframes arrowIn{ from { opacity:0; transform:translate(-14px,14px); }
                      to   { opacity:1; transform:none; } }
  @keyframes pulse  { 0%,100%{ r:6; } 50%{ r:9; } }

  /* ---------- botones ---------- */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:15px 26px; border-radius:var(--r);
    font-size:.97rem; font-weight:600; text-decoration:none;
    border:1px solid transparent; cursor:pointer; font-family:'Inter',sans-serif;
    transition:transform .2s var(--ease), box-shadow .2s var(--ease),
               background .2s var(--ease), border-color .2s var(--ease);
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn svg{ width:18px; height:18px; flex:none; }
  .btn-primary{
    background:linear-gradient(135deg, var(--blue-l), var(--blue-d));
    color:#fff; box-shadow:0 8px 26px rgba(27,110,243,.35);
  }
  .btn-primary:hover{ box-shadow:0 12px 34px rgba(27,110,243,.5); }
  .btn-wa{ background:var(--green); color:#04231a; }
  .btn-wa:hover{ box-shadow:0 12px 30px rgba(37,211,102,.35); }
  .btn-ghost{ border-color:var(--line-2); color:var(--white); background:rgba(255,255,255,.04); }
  .btn-ghost:hover{ border-color:var(--blue-l); background:rgba(46,155,255,.10); }
  .btn-sm{ padding:10px 18px; font-size:.87rem; }

  /* ---------- header ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease);
  }
  header.solid{
    background:rgba(6,13,31,.88); backdrop-filter:saturate(160%) blur(14px);
    border-bottom-color:var(--line);
  }
  .nav{ display:flex; align-items:center; gap:22px; height:78px; }
  .brand{ display:flex; align-items:center; gap:11px; text-decoration:none; margin-right:auto; }
  .brand img{
    height:40px; width:auto; flex:none;
    /* separa el trazo navy del logo del fondo oscuro sin alterar el logo */
    filter:drop-shadow(0 0 1px rgba(255,255,255,.5));
  }
  .brand-txt{ font-family:'Poppins',sans-serif; line-height:1.1; }
  .brand-txt b{ display:block; font-size:1.02rem; font-weight:700; letter-spacing:.01em; }
  .brand-txt span{ font-size:.63rem; letter-spacing:.3em; color:var(--metal); text-transform:uppercase; }
  .nav-links{ display:flex; gap:24px; font-size:.92rem; font-weight:500; }
  .nav-links a{ text-decoration:none; color:var(--metal); white-space:nowrap; transition:color .2s var(--ease); }
  .nav-links a:hover{ color:var(--white); }

  .lang{ display:flex; gap:3px; padding:3px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.05); }
  .lang button{
    display:flex; align-items:center; gap:6px; cursor:pointer;
    padding:6px 9px; border:0; border-radius:6px; background:transparent;
    font:inherit; font-size:.76rem; font-weight:600; color:var(--metal);
    opacity:.7; transition:opacity .18s var(--ease), background .18s var(--ease), color .18s var(--ease);
  }
  .lang button:hover{ opacity:1; }
  .lang button[aria-current="true"]{ opacity:1; background:rgba(46,155,255,.18); color:var(--white); }
  .lang svg{ width:20px; height:14px; border-radius:2px; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.25); }

  /* ---------- hero ---------- */
  .hero{ position:relative; padding:150px 0 90px; overflow:hidden; }
  .hero .glow.a{ width:620px; height:620px; background:#1B6EF3; top:-220px; right:-160px; opacity:.32; }
  .hero .glow.b{ width:520px; height:520px; background:#0B5BD3; bottom:-260px; left:-180px; opacity:.28; }
  .hero .wrap{ position:relative; z-index:2; }
  .hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center; }
  .hero-photo{
    margin:0; border-radius:22px; overflow:hidden; border:1px solid var(--line-2);
    box-shadow:0 30px 70px rgba(0,0,0,.55); position:relative;
  }
  .hero-photo img{ width:100%; height:auto; display:block; }
  .hero-photo::after{
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(6,13,31,0) 55%, rgba(6,13,31,.55) 100%);
  }

  /* ---------- video del hero ---------- */
  /* Ocupa la columna igual que la foto a la que sustituye */
  .hero-video{
    margin:0; position:relative; border-radius:22px; overflow:hidden;
    border:1px solid var(--line-2); box-shadow:0 30px 70px rgba(0,0,0,.55);
    background:#04091A; line-height:0;
  }
  .hero-video video{ width:100%; height:auto; display:block; cursor:pointer; }

  /* Botón discreto: no debe competir con el contenido del video */
  .sound-btn{
    /* arriba: el video es alto y abajo quedaría fuera de pantalla */
    position:absolute; right:10px; top:10px; z-index:3;
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 11px; border-radius:999px; cursor:pointer; line-height:1;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(6,13,31,.55); backdrop-filter:blur(6px);
    color:#fff; font:inherit; font-size:.72rem; font-weight:600;
    transition:background .2s var(--ease), border-color .2s var(--ease);
  }
  .sound-btn:hover{ background:rgba(27,110,243,.7); border-color:var(--blue-l); }
  .sound-btn svg{ width:13px; height:13px; flex:none; fill:none; stroke:currentColor;
                  stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
  .sound-btn .ico-on{ display:none; }
  .sound-btn[aria-pressed="true"] .ico-on{ display:block; }
  .sound-btn[aria-pressed="true"] .ico-off{ display:none; }
  .badge{
    display:inline-flex; align-items:center; gap:9px; padding:8px 16px;
    border:1px solid var(--line-2); border-radius:999px;
    font-size:.82rem; color:var(--metal); background:rgba(255,255,255,.04);
  }
  .badge svg{ width:15px; height:15px; stroke:var(--blue-l); fill:none; stroke-width:1.8; }
  .hero h1{ margin-top:24px; max-width:16ch; }
  .hero h1 em{ font-style:normal; background:linear-gradient(120deg, var(--blue-l), #7FC4FF);
               -webkit-background-clip:text; background-clip:text; color:transparent; }
  .hero .lead{ margin-top:22px; max-width:56ch; font-size:1.09rem; color:var(--metal); }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
  .hero-note{ margin-top:18px; font-size:.88rem; color:var(--metal); }

  /* ---------- sections ---------- */
  section{ position:relative; padding:100px 0; }
  .sec-head{ max-width:58ch; margin-bottom:52px; }
  .sec-head h2{ margin-top:16px; }
  .sec-head p{ margin-top:16px; color:var(--metal); }
  .sec-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

  .card{
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border:1px solid var(--line); border-radius:16px; padding:30px 28px;
    transition:border-color .25s var(--ease), transform .25s var(--ease);
  }
  .card:hover{ border-color:var(--line-2); transform:translateY(-3px); }
  .card h3{ margin-bottom:10px; }
  .card p{ color:var(--metal); font-size:.95rem; }
  .ico{
    width:46px; height:46px; border-radius:12px; display:grid; place-items:center;
    background:rgba(46,155,255,.14); border:1px solid rgba(46,155,255,.25); margin-bottom:18px;
  }
  .ico svg{ width:22px; height:22px; stroke:var(--blue-l); fill:none; stroke-width:1.7;
            stroke-linecap:round; stroke-linejoin:round; }

  /* ---------- servicios digitales: tiras del hero ---------- */
  .feats{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;
    padding-top:34px; border-top:1px solid var(--line);
  }
  .feat{ display:flex; gap:12px; align-items:flex-start; }
  .feat svg{ width:22px; height:22px; flex:none; margin-top:3px; stroke:var(--blue-l); fill:none;
             stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
  .feat b{ display:block; font-size:.95rem; font-weight:600; }
  .feat span{ font-size:.84rem; color:var(--metal); }

  /* ---------- tarjetas de servicio ---------- */
  .svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .svc{
    position:relative; display:flex; flex-direction:column;
    background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
    border:1px solid var(--line); border-radius:18px; padding:32px 30px;
    transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  }
  .svc:hover{ border-color:rgba(46,155,255,.45); transform:translateY(-4px);
              box-shadow:0 18px 44px rgba(0,0,0,.35); }
  .svc.featured{
    border-color:rgba(46,155,255,.45);
    background:linear-gradient(160deg, rgba(27,110,243,.16), rgba(255,255,255,.02));
  }
  .svc .tag{
    position:absolute; top:-11px; right:24px; font-size:.72rem; font-weight:700;
    letter-spacing:.08em; text-transform:uppercase; padding:5px 14px; border-radius:999px;
    background:linear-gradient(135deg, var(--blue-l), var(--blue-d)); color:#fff;
    box-shadow:0 6px 18px rgba(27,110,243,.45);
  }
  .svc .kicker{
    font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
    color:var(--blue-l);
  }
  .svc h3{ margin:8px 0 12px; font-size:1.35rem; }
  .svc > p{ color:var(--metal); font-size:.95rem; }
  .svc ul{ margin:20px 0 26px; padding:0; list-style:none; display:grid; gap:10px; }
  .svc li{ font-size:.92rem; color:#D8DEE8; display:flex; gap:10px; align-items:flex-start; }
  .svc li::before{ content:'✓'; color:var(--blue-l); font-weight:700; flex:none; }
  .svc .btn{ align-self:flex-start; margin-top:auto; }

  /* ---------- listas con palomita ---------- */
  .ticks{ margin:26px 0 0; padding:0; list-style:none; display:grid; gap:13px; }
  .ticks li{ display:flex; gap:12px; align-items:flex-start; font-size:.97rem; }
  .ticks li::before{
    content:'✓'; flex:none; width:24px; height:24px; border-radius:50%;
    display:grid; place-items:center; font-size:.78rem; font-weight:700; color:#fff;
    background:linear-gradient(135deg, var(--blue-l), var(--blue-d));
  }

  /* ---------- cifras ---------- */
  .stats{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .stat{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid var(--line); border-radius:16px; padding:28px 22px; text-align:center;
    transition:border-color .25s var(--ease), transform .25s var(--ease);
  }
  .stat:hover{ border-color:rgba(46,155,255,.4); transform:translateY(-3px); }
  .stat b{
    display:block; font-family:'Poppins',sans-serif; font-weight:700;
    font-size:clamp(1.7rem,3.6vw,2.4rem);
    background:linear-gradient(120deg,#fff,#7FC4FF);
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  .stat span{ font-size:.86rem; color:var(--metal); }

  .steps-4{ grid-template-columns:repeat(4,1fr); }
  .nav-switch{ color:var(--blue-l) !important; font-weight:600; }

  /* ---------- problema ---------- */
  .problem{ background:var(--ink-2); border-block:1px solid var(--line); }
  .loss{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line);
         border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-top:36px; }
  .loss div{ background:var(--ink-2); padding:30px 26px; text-align:center; }
  .loss .k{ font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--metal); }
  .loss .v{ font-family:'Poppins',sans-serif; font-size:clamp(1.6rem,3.4vw,2.3rem); font-weight:700; margin-top:10px; }
  .loss .red .v{ color:#FF6B6B; }

  /* ---------- solución ---------- */
  .duo{ display:grid; grid-template-columns:repeat(2,1fr); gap:20px; }
  .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
  .chip{ font-size:.8rem; padding:6px 13px; border-radius:999px;
         background:rgba(46,155,255,.12); border:1px solid rgba(46,155,255,.25); color:#BBDCFF; }

  /* ---------- pasos ---------- */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .step{ position:relative; padding-top:8px; }
  .step .n{
    width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
    font-family:'Poppins',sans-serif; font-weight:700; font-size:1.05rem; color:#fff;
    background:linear-gradient(135deg, var(--blue-l), var(--blue-d));
    box-shadow:0 8px 22px rgba(27,110,243,.35); margin-bottom:20px;
  }
  .step p{ color:var(--metal); font-size:.95rem; margin-top:9px; }

  /* ---------- calculadora ---------- */
  .calc-sec{ background:var(--ink-2); border-block:1px solid var(--line); }
  .calc{
    max-width:880px; margin:0 auto;
    background:linear-gradient(160deg, rgba(27,110,243,.16), rgba(11,36,71,.5));
    border:1px solid rgba(46,155,255,.3); border-radius:22px; padding:40px;
    box-shadow:0 26px 70px rgba(0,0,0,.4);
  }
  .calc label{ display:block; font-size:.86rem; color:var(--metal); margin-bottom:14px; font-weight:500; }
  .calc .amount{
    font-family:'Poppins',sans-serif; font-size:clamp(2.2rem,6vw,3.2rem); font-weight:700;
    background:linear-gradient(120deg,#fff,#9FD0FF); -webkit-background-clip:text; background-clip:text; color:transparent;
  }
  input[type=range]{
    -webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:99px;
    background:rgba(255,255,255,.14); outline:none; margin:22px 0 8px; cursor:pointer;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none; width:26px; height:26px; border-radius:50%;
    background:linear-gradient(135deg,#fff,#CBE4FF); border:3px solid var(--blue);
    box-shadow:0 4px 16px rgba(27,110,243,.6); cursor:pointer;
  }
  input[type=range]::-moz-range-thumb{
    width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--blue);
    box-shadow:0 4px 16px rgba(27,110,243,.6); cursor:pointer;
  }
  .range-ends{ display:flex; justify-content:space-between; font-size:.8rem; color:var(--metal); }
  .results{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
  .result{
    background:rgba(255,255,255,.06); border:1px solid var(--line-2);
    border-radius:16px; padding:24px; text-align:center;
  }
  .result .k{ font-size:.8rem; color:var(--metal); }
  .result .v{ font-family:'Poppins',sans-serif; font-weight:700; margin-top:8px;
              font-size:clamp(1.7rem,4vw,2.4rem); color:#6FE39B; }
  .calc-note{ text-align:center; margin-top:24px; color:var(--metal); font-size:.92rem; }
  .calc .btn{ width:100%; margin-top:22px; }

  /* ---------- equipos ---------- */
  .pos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .pos{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px; padding:26px;
        transition:border-color .25s var(--ease), transform .25s var(--ease); }
  .pos:hover{ border-color:rgba(46,155,255,.4); transform:translateY(-3px); }
  .pos h3{ font-size:1.1rem; margin-bottom:14px; }
  .pos ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
  .pos li{ font-size:.9rem; color:var(--metal); display:flex; gap:9px; align-items:flex-start; }
  .pos li::before{ content:'✓'; color:var(--blue-l); font-weight:700; flex:none; }

  /* ---------- industrias ---------- */
  .inds{ display:flex; flex-wrap:wrap; gap:12px; }
  .ind{
    display:flex; align-items:center; gap:11px; padding:14px 20px;
    border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.04);
    font-size:.94rem; transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .ind:hover{ border-color:rgba(46,155,255,.45); background:rgba(46,155,255,.08); }
  .ind svg{ width:19px; height:19px; stroke:var(--blue-l); fill:none; stroke-width:1.7;
            stroke-linecap:round; stroke-linejoin:round; flex:none; }

  /* ---------- testimonios ---------- */
  .quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
  .quote{ background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
          border:1px solid var(--line); border-radius:16px; padding:28px; display:flex; flex-direction:column; }
  .quote .mark{ font-family:'Poppins',sans-serif; font-size:2.4rem; line-height:1; color:var(--blue-l); opacity:.5; }
  .quote p{ margin-top:12px; font-size:.95rem; color:#D8DEE8; flex:1; }
  .quote footer{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
  .quote .who{ font-weight:600; font-size:.95rem; }
  .quote .where{ font-size:.84rem; color:var(--metal); margin-top:2px; }
  .quote .save{
    display:inline-block; margin-top:12px; font-size:.82rem; font-weight:600;
    color:#6FE39B; background:rgba(111,227,155,.12); border:1px solid rgba(111,227,155,.25);
    padding:5px 12px; border-radius:999px;
  }

  /* ---------- nosotros ---------- */
  .about{ background:var(--ink-2); border-block:1px solid var(--line); }
  .about-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start; }
  .about p + p{ margin-top:16px; }
  .about p{ color:var(--metal); }
  .mv{ display:grid; gap:18px; }
  .mv .card{ padding:26px; }
  .about-photo{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--line-2);
                box-shadow:0 20px 50px rgba(0,0,0,.45); }
  .about-photo img{ width:100%; height:auto; display:block; }
  .team{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:32px; }
  .person{ background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:16px;
           padding:24px; text-align:center; }
  .person .av{
    width:96px; height:96px; border-radius:50%; margin:0 auto 16px; overflow:hidden;
    border:2px solid rgba(46,155,255,.45); box-shadow:0 8px 24px rgba(0,0,0,.35);
  }
  .person .av img{ width:100%; height:100%; object-fit:cover; }
  .person .nm{ font-weight:600; }
  .person .rl{ font-size:.85rem; color:var(--metal); margin-bottom:16px; }

  /* ---------- faq ---------- */
  details{
    border:1px solid var(--line); border-radius:14px; background:rgba(255,255,255,.035);
    margin-bottom:12px; overflow:hidden; transition:border-color .2s var(--ease);
  }
  details[open]{ border-color:rgba(46,155,255,.35); }
  summary{
    cursor:pointer; list-style:none; padding:20px 24px; font-weight:600; font-size:1rem;
    display:flex; align-items:center; justify-content:space-between; gap:16px;
  }
  summary::-webkit-details-marker{ display:none; }
  summary::after{
    content:''; width:11px; height:11px; flex:none;
    border-right:2px solid var(--blue-l); border-bottom:2px solid var(--blue-l);
    transform:rotate(45deg); transition:transform .25s var(--ease); margin-top:-4px;
  }
  details[open] summary::after{ transform:rotate(-135deg); margin-top:4px; }
  details .ans{ padding:0 24px 22px; color:var(--metal); font-size:.95rem; }

  /* ---------- cta final ---------- */
  .cta{ position:relative; overflow:hidden; text-align:center; padding:110px 0; }
  .cta-bg{ position:absolute; inset:0; z-index:0; }
  .cta-bg img{ width:100%; height:100%; object-fit:cover; opacity:.30; }
  .cta-bg::after{
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at center, rgba(6,13,31,.72) 0%, rgba(6,13,31,.95) 70%);
  }
  .cta .glow.c{ width:700px; height:700px; background:#1B6EF3; top:50%; left:50%;
                transform:translate(-50%,-50%); opacity:.22; }
  .cta .wrap{ position:relative; z-index:2; }
  .cta h2{ max-width:20ch; margin:16px auto 0; }
  .cta p{ margin:18px auto 0; max-width:48ch; color:var(--metal); }
  .cta-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:34px; }

  /* ---------- footer ---------- */
  footer{ background:#04091A; border-top:1px solid var(--line); padding:64px 0 28px; font-size:.92rem; }
  .foot-grid{ display:grid; grid-template-columns:1.5fr 1fr 1.2fr; gap:48px; padding-bottom:40px; }
  footer h4{ font-family:'Poppins',sans-serif; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase;
             color:var(--white); margin:0 0 16px; font-weight:600; }
  footer ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; }
  footer a{ text-decoration:none; color:var(--metal); transition:color .2s var(--ease); }
  footer a:hover{ color:var(--white); }
  footer p{ color:var(--metal); }
  .foot-brand{ display:flex; align-items:center; gap:11px; margin-bottom:16px; }
  .foot-brand img{ height:38px; filter:drop-shadow(0 0 1px rgba(255,255,255,.5)); }
  .social{ display:flex; gap:10px; margin-top:18px; }
  .social a{
    width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
    border:1px solid var(--line); background:rgba(255,255,255,.04);
    transition:border-color .2s var(--ease), background .2s var(--ease);
  }
  .social a:hover{ border-color:var(--blue-l); background:rgba(46,155,255,.12); }
  .social svg{ width:17px; height:17px; fill:currentColor; }
  .foot-bottom{ border-top:1px solid var(--line); padding-top:26px; font-size:.84rem; color:var(--metal); }
  .disclaimer{ margin-top:14px; font-size:.79rem; line-height:1.6; color:#6C7686; max-width:80ch; }
  .legal-links{ margin-top:14px; display:flex; flex-wrap:wrap; gap:8px 18px; font-size:.82rem; }

  /* ---------- botón flotante WhatsApp ---------- */
  .wa-float{
    position:fixed; right:20px; bottom:20px; z-index:120;
    width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
    background:var(--green); box-shadow:0 10px 30px rgba(37,211,102,.45);
    transition:transform .2s var(--ease);
  }
  .wa-float:hover{ transform:scale(1.08); }
  .wa-float svg{ width:30px; height:30px; fill:#04231a; }

  /* ---------- reveal ---------- */
  .rv{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
  .rv.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    .rv{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
    .btn:hover, .card:hover, .pos:hover{ transform:none; }
    /* el gráfico se muestra ya dibujado, sin animación */
    .chart .line{ stroke-dashoffset:0; animation:none; }
    .chart .area, .chart .dots circle, .chart .arrow path{ opacity:1; animation:none; }
  }

  /* ---------- responsive ---------- */
  @media (max-width:980px){
    .nav-links{ display:none; }
    /* en móvil la foto decorativa se quita, pero el video sí se ve:
       lleva el mensaje hablado. Va centrado y acotado, debajo de los botones. */
    .hero-grid{ grid-template-columns:1fr; }
    .hero-photo{ display:none; }
    /* en móvil se reduce bastante: a lo ancho ocuparía toda la pantalla */
    .hero-video{ max-width:250px; margin:34px auto 0; }
    /* solo el icono: con texto tapa media anchura del video */
    .sound-btn span{ display:none; }
    .sound-btn{ padding:8px; gap:0; }
    .sound-btn svg{ width:15px; height:15px; }
    .duo, .steps, .pos-grid, .quotes{ grid-template-columns:repeat(2,1fr); }
    .steps{ grid-template-columns:1fr; gap:30px; }
    .steps-4{ grid-template-columns:repeat(2,1fr); }
    .svc-grid{ grid-template-columns:1fr; }
    .feats{ grid-template-columns:repeat(2,1fr); gap:20px; }
    .about-grid{ grid-template-columns:1fr; gap:44px; }
    .foot-grid{ grid-template-columns:1fr 1fr; gap:36px; }
  }
  @media (max-width:640px){
    body{ font-size:16px; }
    section{ padding:70px 0; }
    .hero{ padding:120px 0 70px; }
    .duo, .pos-grid, .quotes, .results, .team{ grid-template-columns:1fr; }
    .feats, .steps-4, .stats{ grid-template-columns:1fr; }
    .svc{ padding:26px 22px; }
    .loss{ grid-template-columns:1fr; }
    .loss div{ padding:18px 20px; display:flex; align-items:center;
               justify-content:space-between; gap:16px; text-align:left; }
    .loss .v{ margin-top:0; font-size:1.45rem; }
    .calc{ padding:26px 20px; }
    .foot-grid{ grid-template-columns:1fr; gap:32px; }
    .brand-txt span{ display:none; }
    .lang button span{ display:none; }
    .lang button{ padding:7px 9px; }
    /* el botón flotante de WhatsApp ya cubre esta acción */
    .nav .btn-wa{ display:none; }
    .nav{ height:66px; gap:14px; }
    .brand img{ height:34px; }
    .brand-txt b{ font-size:.95rem; }
    .wa-float{ width:54px; height:54px; right:16px; bottom:16px; }
    .hero-cta .btn{ width:100%; }
  }