:root{
      --bg:#ffffff;
      --ink:#000000;
      --muted:rgba(0,0,0,.68);
      --soft:rgba(0,0,0,.08);
      --soft2:rgba(0,0,0,.12);
      --card:rgba(0,0,0,.03);
      --shadow: 0 14px 40px rgba(0,0,0,.10);
      --shadow2: 0 10px 30px rgba(0,0,0,.08);
      --radius: 18px;
      --radius2: 26px;
      --accent:#ff6a00;
      --accent2:#ff8a3d;
      --max: 1180px;

      /* Footer theme (oscuro tipo captura) */
      --footBg1:#071a2a;
      --footBg2:#041423;
      --footInk:rgba(255,255,255,.92);
      --footMuted:rgba(255,255,255,.72);
      --footSoft:rgba(255,255,255,.10);
      --footSoft2:rgba(255,255,255,.16);
      --wa:#57d26b;
      --wa2:#33c95a;
    }

    *{ box-sizing:border-box; }
    html{ scroll-behavior:smooth; }
    body{
      margin:0;
      font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      color: var(--ink);
      background: var(--bg);
      text-rendering: optimizeLegibility;
    }

    /* Preferencia del usuario: texto justificado y negro puro */
    p, li{ color: var(--ink); text-align: justify; }

    a{ color: inherit; text-decoration: none; }
    .wrap{ width:min(var(--max), calc(100% - 40px)); margin:0 auto; }

    /* Header */
    .top{
      position: sticky; top:0; z-index: 50;
      background: rgba(255,255,255,.86);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--soft);
    }
    .nav{
      display:flex; align-items:center; justify-content:space-between;
      padding: 14px 0;
      gap: 14px;
    }
    .brand{
      display:flex; align-items:center; gap:12px;
      min-width: 210px;
    }

    /* LOGO REAL (logo.webp) */
    .siteLogo{
      width: 76px;
      height: 76px;
      border-radius: 12px;
      display:block;
      object-fit: contain;
      background: #fff;
      border: 1px solid rgba(0,0,0,.10);
      box-shadow: 0 10px 25px rgba(0,0,0,.08);
      flex: 0 0 auto;
    }

    .brandText{ display:block; }
    .brand h1{
      margin:0;
      font-size: 16px;
      letter-spacing: .2px;
      font-weight: 700;
      text-transform: none;
    }
    .brand small{
      display:block;
      color: var(--muted);
      font-weight: 500;
      font-size: 12px;
      margin-top: 2px;
      text-align:left;
    }

    /* Desktop menu minimal (pocos links) */
    .menu{
      display:flex; flex-wrap:wrap;
      align-items:center; justify-content:center;
      gap: 8px 10px;
    }
    .menu a{
      font-size: 13px;
      color: rgba(0,0,0,.80);
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .menu a:hover{
      border-color: var(--soft2);
      background: rgba(0,0,0,.02);
    }

    .actions{
      display:flex; align-items:center; gap:10px;
      justify-content:flex-end;
    }
    .btn{
      display:inline-flex; align-items:center; justify-content:center;
      gap:10px;
      padding: 10px 14px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background: #fff;
      font-weight: 600;
      font-size: 13px;
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
      transition: transform .15s ease, box-shadow .15s ease;
      cursor: pointer;
    }
    .btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow2); }
    .btn.primary{
      border-color: rgba(255,106,0,.35);
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      color: #000;
    }

    /* Trigger (solo mobile) */
    .navTrigger{
      display:none;
      width:44px; height:44px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background: #fff;
      box-shadow: 0 8px 20px rgba(0,0,0,.06);
      align-items:center;
      justify-content:center;
      cursor:pointer;
      flex: 0 0 auto;
    }
    .navIcon{
      width:18px; height:12px;
      position:relative;
      display:block;
    }
    .navIcon:before, .navIcon:after{
      content:"";
      position:absolute; left:0; right:0;
      height:2px;
      background: rgba(0,0,0,.85);
      border-radius: 999px;
    }
    .navIcon:before{
      top:0;
      box-shadow: 0 5px 0 rgba(0,0,0,.85);
    }
    .navIcon:after{ bottom:0; }

    /* Drawer mobile */
    .navOverlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,.35);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
      z-index: 70;
    }
    .mobileDrawer{
      position: fixed;
      top: 0; right: 0;
      height: 100dvh;
      width: min(86vw, 360px);
      background: #fff;
      border-left: 1px solid var(--soft2);
      box-shadow: 0 20px 70px rgba(0,0,0,.18);
      transform: translateX(105%);
      transition: transform .18s ease;
      z-index: 80;
      padding: 14px;
      display: grid;
      grid-template-rows: auto 1fr auto auto;
      gap: 12px;
    }
    .drawerHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--soft);
    }
    .drawerBrand{
      display:flex;
      align-items:center;
      gap: 10px;
    }
    .drawerClose{
      width:40px; height:40px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background:#fff;
      cursor:pointer;
      font-weight: 800;
    }
    .drawerLinks{
      display:grid;
      gap: 8px;
      padding-top: 6px;
    }
    .drawerLinks a{
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid transparent;
      background: rgba(0,0,0,.02);
      font-weight: 600;
      font-size: 13.5px;
    }
    .drawerLinks a:hover{
      border-color: var(--soft2);
      background: rgba(0,0,0,.03);
    }
    .drawerCtas{
      display:grid;
      gap: 10px;
    }
    .drawerCtas .btn{ width:100%; }
    .drawerNote{
      margin: 0;
      font-size: 12.5px;
      line-height: 1.6;
      color: rgba(0,0,0,.78);
      text-align: left;
    }

    body.navOpen{ overflow:hidden; }
    body.navOpen .navOverlay{
      opacity: 1;
      pointer-events: auto;
    }
    body.navOpen .mobileDrawer{
      transform: translateX(0);
    }

    /* Hero */
    .hero{
      padding: 54px 0 18px;
      position: relative;
      overflow: hidden;
    }
    .hero:before{
      content:"";
      position:absolute; inset:-220px -240px auto -240px;
      height: 520px;
      background:
        radial-gradient(closest-side at 20% 30%, rgba(255,106,0,.18), transparent 70%),
        radial-gradient(closest-side at 60% 10%, rgba(0,0,0,.10), transparent 70%),
        radial-gradient(closest-side at 85% 45%, rgba(255,138,61,.14), transparent 70%);
      filter: blur(2px);
      pointer-events:none;
    }
    .heroGrid{
      position: relative;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 26px;
      align-items: stretch;
    }
    .kicker{
      display:inline-flex; align-items:center; gap:10px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background: rgba(255,255,255,.75);
      font-weight: 600;
      font-size: 13px;
      color: rgba(0,0,0,.85);
      width: fit-content;
    }
    .kicker .pill{
      padding: 6px 10px;
      border-radius: 999px;
      background: rgba(255,106,0,.18);
      border: 1px solid rgba(255,106,0,.25);
      font-size: 12px;
      font-weight: 700;
    }
    .hero h2{
      margin: 14px 0 12px;
      font-size: clamp(28px, 4.1vw, 44px);
      line-height: 1.08;
      letter-spacing: -0.6px;
    }
    .hero h2 span{
      background: linear-gradient(135deg, rgba(0,0,0,.95), rgba(0,0,0,.78));
      -webkit-background-clip: text;
      background-clip:text;
      color: transparent;
    }
    .hero p.lead{
      margin: 0 0 18px;
      color: rgba(0,0,0,.82);
      font-size: 15px;
      line-height: 1.65;
      max-width: 62ch;
    }
    .heroCtas{ display:flex; flex-wrap:wrap; gap:10px; margin-top: 6px; }
    .heroMeta{
      display:flex; gap: 14px; flex-wrap:wrap;
      margin-top: 16px;
      color: rgba(0,0,0,.70);
      font-size: 12.5px;
      align-items:center;
    }
    .chip{
      display:inline-flex; align-items:center; gap:8px;
      padding: 8px 10px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background: rgba(255,255,255,.8);
    }
    .chip b{ font-weight:700; }

    /* Chips clicables (mismo look) */
    a.chip{
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }
    a.chip:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0,0,0,.08);
      background: rgba(255,106,0,.06);
      border-color: rgba(255,106,0,.22);
    }

    .heroCard{
      background: rgba(255,255,255,.86);
      border: 1px solid var(--soft2);
      border-radius: var(--radius2);
      box-shadow: var(--shadow);
      padding: 18px;
      position: relative;
      overflow: hidden;
      min-height: 320px;
    }
    .heroCard:before{
      content:"";
      position:absolute; inset:-60px -60px auto auto;
      width: 220px; height: 220px;
      background: radial-gradient(circle at 30% 30%, rgba(255,106,0,.28), transparent 60%);
      filter: blur(1px);
      pointer-events:none;
    }
    .preview{
      border-radius: 16px;
      border: 1px solid var(--soft2);
      background:
        linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.01)),
        radial-gradient(closest-side at 30% 40%, rgba(255,106,0,.22), transparent 70%);
      height: 200px;
      display:flex;
      align-items:flex-end;
      padding: 14px;
      position: relative;
      overflow:hidden;
    }
    .preview .tag{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid var(--soft2);
      font-weight: 700;
      font-size: 12.5px;
    }
    .preview .tag i{
      width: 10px; height: 10px; border-radius: 999px;
      background: var(--accent);
      box-shadow: 0 0 0 6px rgba(255,106,0,.16);
      display:inline-block;
    }
    .heroCard h3{
      margin: 14px 0 6px;
      font-size: 16px;
      letter-spacing: -.2px;
    }
    .heroCard p{
      margin: 0;
      font-size: 13.5px;
      color: rgba(0,0,0,.82);
      line-height: 1.6;
    }

    /* Sections */
    section{
      padding: 56px 0;
      border-top: 1px solid var(--soft);
    }
    .sectionHead{
      display:flex; align-items:flex-end; justify-content:space-between;
      gap: 18px;
      margin-bottom: 18px;
    }
    .sectionHead h2{
      margin:0;
      font-size: 26px;
      letter-spacing: -.4px;
    }
    .sectionHead p{
      margin: 0;
      color: rgba(0,0,0,.74);
      max-width: 70ch;
      font-size: 14px;
      line-height: 1.7;
    }

    .grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
    .grid2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }

    .card{
      border-radius: var(--radius);
      border: 1px solid var(--soft2);
      background: #fff;
      box-shadow: 0 10px 28px rgba(0,0,0,.06);
      padding: 18px;
    }
    .card .icon{
      width: 42px; height: 42px;
      border-radius: 14px;
      border: 1px solid rgba(255,106,0,.30);
      background: rgba(255,106,0,.14);
      display:flex; align-items:center; justify-content:center;
      font-weight: 800;
      letter-spacing: -.4px;
    }
    .card h3{
      margin: 12px 0 8px;
      font-size: 16px;
      letter-spacing: -.2px;
    }
    .card p{
      margin:0;
      color: rgba(0,0,0,.80);
      font-size: 13.5px;
      line-height: 1.65;
    }

    .steps{
      display:grid;
      grid-template-columns: repeat(4,1fr);
      gap: 14px;
    }
    .step{
      border-radius: var(--radius);
      border: 1px solid var(--soft2);
      background: linear-gradient(180deg, #fff, rgba(0,0,0,.01));
      padding: 16px;
      position: relative;
      overflow:hidden;
    }
    .step b{
      display:inline-flex;
      width: 28px; height: 28px;
      align-items:center; justify-content:center;
      border-radius: 10px;
      border: 1px solid rgba(0,0,0,.10);
      background: rgba(0,0,0,.04);
      font-size: 12px;
    }
    .step h4{ margin: 10px 0 6px; font-size: 14px; letter-spacing: -.2px; }
    .step p{ margin:0; font-size: 13px; color: rgba(0,0,0,.80); line-height: 1.6; }

    /* Pricing */
    .price{
      border-radius: var(--radius2);
      border: 1px solid var(--soft2);
      background: #fff;
      box-shadow: var(--shadow2);
      padding: 18px;
      position: relative;
      overflow:hidden;
    }
    .price.featured{
      border-color: rgba(255,106,0,.40);
      box-shadow: 0 20px 60px rgba(255,106,0,.14);
    }
    .badge{
      display:inline-flex; align-items:center; gap:8px;
      padding: 7px 10px;
      border-radius: 999px;
      background: rgba(255,106,0,.16);
      border: 1px solid rgba(255,106,0,.28);
      font-size: 12px;
      font-weight: 700;
      width: fit-content;
    }
    .price h3{ margin: 10px 0 6px; font-size: 18px; letter-spacing: -.2px; }
    .price .note{ margin: 0 0 10px; font-size: 13px; color: rgba(0,0,0,.75); }
    .price .big{
      font-size: 28px;
      font-weight: 800;
      margin: 10px 0 8px;
      letter-spacing: -.6px;
    }
    .price ul{
      margin: 0 0 14px;
      padding-left: 18px;
      color: rgba(0,0,0,.85);
      font-size: 13.5px;
      line-height: 1.7;
    }
    .price .btn{ width: 100%; }

    /* Pills list */
    .pills{
      display:flex; flex-wrap:wrap; gap:10px;
      margin-top: 12px;
    }
    .pill2{
      display:inline-flex; align-items:center; gap:10px;
      padding: 10px 12px;
      border-radius: 999px;
      border: 1px solid var(--soft2);
      background: rgba(0,0,0,.02);
      font-size: 13px;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
    }
    .pill2:hover{
      transform: translateY(-1px);
      box-shadow: 0 12px 26px rgba(0,0,0,.08);
      background: rgba(255,106,0,.08);
      border-color: rgba(255,106,0,.22);
    }
    .pill2 i{
      width:10px; height:10px; border-radius:999px;
      background: rgba(0,0,0,.85);
      box-shadow: 0 0 0 6px rgba(255,106,0,.16);
      display:inline-block;
    }

    /* FAQ */
    details{
      border: 1px solid var(--soft2);
      border-radius: 16px;
      padding: 14px 16px;
      background: #fff;
      box-shadow: 0 10px 24px rgba(0,0,0,.05);
    }
    details + details{ margin-top: 12px; }
    summary{
      cursor:pointer;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: -.2px;
      list-style:none;
      outline:none;
    }
    summary::-webkit-details-marker{ display:none; }
    details p{ margin: 10px 0 0; font-size: 13.5px; color: rgba(0,0,0,.80); line-height: 1.7; }

    /* Contact */
    .contact{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap: 14px;
      align-items: start;
    }
    form{ display:grid; gap: 10px; }
    input, textarea{
      width: 100%;
      border-radius: 14px;
      border: 1px solid var(--soft2);
      padding: 12px 12px;
      font: inherit;
      font-size: 13.5px;
      color: var(--ink);
      background: #fff;
      outline: none;
    }
    textarea{ min-height: 120px; resize: vertical; }
    label{
      font-size: 12.5px;
      color: rgba(0,0,0,.70);
      font-weight: 600;
      text-align:left;
    }
    .legal{
      font-size: 12px;
      color: rgba(0,0,0,.72);
      line-height: 1.6;
    }
    .legal a{
      text-decoration: underline;
      text-decoration-color: rgba(0,0,0,.35);
      text-underline-offset: 3px;
    }

    /* ========= FOOTER (SUPER SEO, estilo captura) ========= */
    .siteFooter{
      background: radial-gradient(1200px 520px at 15% 0%, rgba(255,106,0,.12), transparent 55%),
                  radial-gradient(900px 420px at 85% 10%, rgba(255,138,61,.10), transparent 55%),
                  linear-gradient(180deg, var(--footBg1), var(--footBg2));
      color: var(--footInk);
      border-top: 1px solid rgba(255,255,255,.06);
      padding: 34px 0 0;
    }
    .siteFooter a{ color: inherit; }
    .footGrid{
      display:grid;
      grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr;
      gap: 18px;
      align-items:start;
      padding-bottom: 22px;
    }
    .footBrand{
      display:grid;
      gap: 10px;
      padding-right: 8px;
    }
    .footBrand .brandLine{
      display:flex;
      align-items:center;
      gap: 12px;
    }
    .footBrand .brandTitle{
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .2px;
      margin: 0;
    }
    .footBrand .brandDesc{
      margin: 0;
      color: var(--footMuted);
      font-size: 12.5px;
      line-height: 1.6;
      text-align: left;
    }
    .footBrand .brandStrong{
      margin: 0;
      font-size: 12.5px;
      color: rgba(255,255,255,.90);
      text-align:left;
    }

    .footCtaCard{
      border: 1px solid var(--footSoft2);
      border-radius: 18px;
      background: rgba(255,255,255,.05);
      padding: 14px;
      box-shadow: 0 18px 60px rgba(0,0,0,.30);
      display:grid;
      gap: 10px;
      max-width: 360px;
    }
    .footCtaCard .ctaTitle{
      margin: 0;
      font-weight: 800;
      font-size: 13.5px;
      color: rgba(255,255,255,.92);
      text-align:left;
    }
    .waBtn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(87,210,107,.40);
      background: linear-gradient(135deg, var(--wa) 0%, var(--wa2) 100%);
      color: #041423;
      font-weight: 900;
      box-shadow: 0 18px 50px rgba(0,0,0,.25);
      cursor:pointer;
      text-align:center;
    }
    .waBtn:hover{ filter: brightness(1.02); transform: translateY(-1px); }
    .waBtn small{
      display:block;
      font-weight: 800;
      opacity: .92;
    }

    .footCol h4{
      margin: 6px 0 10px;
      font-size: 12.5px;
      font-weight: 900;
      letter-spacing: .8px;
      text-transform: uppercase;
      color: rgba(255,255,255,.92);
    }
    .footLinks{
      display:grid;
      gap: 8px;
    }
    .footLinks a{
      font-size: 12.8px;
      color: var(--footMuted);
      padding: 6px 8px;
      border-radius: 10px;
      border: 1px solid transparent;
      background: transparent;
    }
    .footLinks a:hover{
      color: rgba(255,255,255,.92);
      background: rgba(255,255,255,.05);
      border-color: rgba(255,255,255,.08);
    }

    .footBottom{
      border-top: 1px solid rgba(255,255,255,.10);
      padding: 16px 0;
      margin-top: 10px;
    }
    .footBottomRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 12px;
      flex-wrap:wrap;
    }
    .footBottom small{
      color: rgba(255,255,255,.72);
      font-size: 12px;
      text-align:left;
    }
    .footBottom a{
      color: rgba(255,255,255,.78);
      text-decoration: none;
      font-weight: 700;
    }
    .footBottom a:hover{ color: rgba(255,255,255,.94); text-decoration: underline; text-underline-offset: 3px; }

    .social{
      display:flex;
      gap: 10px;
      align-items:center;
    }
    .social a{
      width: 38px;
      height: 38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.06);
      color: rgba(255,255,255,.92);
    }
    .social a:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.22);
      transform: translateY(-1px);
    }
    .iconSvg{ width: 18px; height: 18px; display:block; }

    /* Responsive */
    @media (max-width: 980px){
      .heroGrid{ grid-template-columns: 1fr; }

      /* Header: mobile = solo logo + trigger */
      .menu{ display:none !important; }
      .actions{ display:none !important; }
      .navTrigger{ display:inline-flex; }
      .brand{ min-width:auto; }
      .brandText{ display:none; } /* <- SOLO logo en mobile */

      .grid3{ grid-template-columns: 1fr; }
      .grid2{ grid-template-columns: 1fr; }
      .steps{ grid-template-columns: 1fr; }
      .contact{ grid-template-columns: 1fr; }

      /* Footer responsive */
      .footGrid{
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 14px;
      }
      .footCtaCard{ max-width: 100%; }
      .footCol h4{ margin-top: 10px; }
    }

    /* Anchor offset */
    .anchor{ scroll-margin-top: 90px; }