/* ============================================================
     KARTA.CLICK — DESIGN TOKENS
     ============================================================ */
  :root{
    /* Color — crema cálido / terracota / verde petróleo / texto espresso */
    --cream:      #FAF4EA;   /* fondo base cálido */
    --cream-2:    #F3EADB;   /* franjas suaves */
    --card:       #FFFDF8;   /* tarjetas */
    --line:       #E7DCC8;   /* bordes suaves */
    --line-strong:#D8C9AE;

    --terra:      #BB5335;   /* acción */
    --terra-dark: #9C4127;   /* hover acción */
    --terra-soft: #F3E0D6;   /* fondo suave terracota */

    --petrol:     #123C38;   /* bloques destacados */
    --petrol-2:   #1B4E49;
    --petrol-line:#2C625C;
    --sage:       #9DC0B3;   /* verde claro sobre oscuro */

    --amber:      #DDA23A;   /* acento cálido / etiquetas roadmap */

    --ink:        #2A211C;   /* texto oscuro cálido (espresso) */
    --ink-2:      #6B5C50;   /* texto secundario */
    --ink-on-dark:#F3ECDD;
    --muted-on-dark:#B9C9C3;

    --radius:   16px;
    --radius-sm:10px;
    --shadow:   0 1px 2px rgba(42,33,28,.04), 0 8px 30px -12px rgba(42,33,28,.16);
    --shadow-lg:0 24px 60px -22px rgba(18,60,56,.35);

    --maxw: 1180px;
    --gap: clamp(16px, 3vw, 28px);

    --sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Fraunces", Georgia, "Times New Roman", serif;
    --mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  }

  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth}
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    *{animation-duration:.001ms !important; transition-duration:.001ms !important}
  }
  body{
    margin:0; background:var(--cream); color:var(--ink);
    font-family:var(--sans); font-size:17px; line-height:1.6;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  }
  img{max-width:100%; display:block}
  a{color:inherit; text-decoration:none}
  h1,h2,h3,h4{font-family:var(--serif); font-weight:500; line-height:1.08; margin:0; letter-spacing:-.01em}
  h2{font-size:clamp(1.9rem, 3.6vw, 2.9rem)}
  h3{font-size:clamp(1.25rem,2vw,1.5rem)}
  p{margin:0}
  ::selection{background:var(--terra); color:#fff}

  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,4vw,32px)}
  .eyebrow{
    font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
    color:var(--terra); font-weight:500; display:inline-flex; align-items:center; gap:.5rem;
  }
  .eyebrow::before{content:""; width:22px; height:1px; background:var(--terra); display:inline-block}
  .on-dark .eyebrow{color:var(--amber)}
  .on-dark .eyebrow::before{background:var(--amber)}

  .lead{font-size:clamp(1.05rem,1.6vw,1.22rem); color:var(--ink-2); max-width:56ch}

  /* Focus visibility (accesibilidad) */
  a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
    outline:3px solid var(--terra); outline-offset:3px; border-radius:6px;
  }
  .on-dark a:focus-visible, .on-dark button:focus-visible{outline-color:var(--amber)}

  .skip{
    position:absolute; left:14px; top:-60px; background:var(--petrol); color:#fff;
    padding:10px 16px; border-radius:8px; z-index:200; transition:top .18s;
  }
  .skip:focus{top:14px}

  /* ---------- Botones ---------- */
  .btn{
    display:inline-flex; align-items:center; gap:.55rem; justify-content:center;
    font-family:var(--sans); font-weight:700; font-size:.98rem; line-height:1;
    padding:.85rem 1.35rem; border-radius:999px; cursor:pointer; border:1.5px solid transparent;
    transition:transform .12s ease, background .18s, border-color .18s, color .18s, box-shadow .18s;
  }
  .btn:active{transform:translateY(1px)}
  .btn-primary{background:var(--terra); color:#fff}
  .btn-primary:hover{background:var(--terra-dark)}
  .btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--ink); background:#fff}
  .btn-dark{background:var(--petrol); color:var(--ink-on-dark)}
  .btn-dark:hover{background:var(--petrol-2)}
  .on-dark .btn-ghost{color:var(--ink-on-dark); border-color:var(--petrol-line)}
  .on-dark .btn-ghost:hover{border-color:var(--sage); background:rgba(255,255,255,.06)}
  .btn svg{width:16px; height:16px}

  section{padding:clamp(56px, 8vw, 104px) 0}

  /* ============================================================
     HEADER
     ============================================================ */
  header.site{
    position:sticky; top:0; z-index:100; background:rgba(250,244,234,.82);
    backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid transparent;
    transition:border-color .2s, box-shadow .2s, background .2s;
  }
  header.site.scrolled{border-color:var(--line); box-shadow:0 6px 24px -18px rgba(42,33,28,.5)}
  .nav{display:flex; align-items:center; gap:1.5rem; height:72px}
  .brand{display:flex; align-items:center; gap:.6rem; font-family:var(--serif); font-weight:600; font-size:1.32rem; letter-spacing:-.02em}
  .brand .dot{color:var(--terra)}
  .logo-mark{
    width:34px; height:34px; border-radius:9px; background:var(--petrol);
    display:grid; place-items:center; color:var(--cream); font-family:var(--mono); font-weight:600; font-size:1rem;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
  }
  .nav-links{display:flex; align-items:center; gap:.35rem; margin-left:1rem}
  .nav-links a, .nav-links button.navitem{
    font-weight:600; font-size:.96rem; color:var(--ink); padding:.5rem .7rem; border-radius:8px;
    background:none; border:none; cursor:pointer; font-family:var(--sans); display:inline-flex; align-items:center; gap:.3rem;
  }
  .nav-links a:hover, .nav-links button.navitem:hover{background:var(--cream-2)}
  .nav-right{margin-left:auto; display:flex; align-items:center; gap:.7rem}

  /* Dropdown Soluciones */
  .has-drop{position:relative}
  .drop{
    position:absolute; top:calc(100% + 10px); left:0; width:320px; background:var(--card);
    border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow); padding:.5rem;
    opacity:0; visibility:hidden; transform:translateY(-6px); transition:.16s;
  }
  .has-drop:hover .drop, .has-drop:focus-within .drop, .drop.open{opacity:1; visibility:visible; transform:none}
  .drop a{display:flex; gap:.75rem; padding:.7rem; border-radius:10px; align-items:flex-start}
  .drop a:hover{background:var(--cream-2)}
  .drop .ico{width:34px; height:34px; border-radius:9px; background:var(--terra-soft); color:var(--terra); display:grid; place-items:center; flex:none; font-size:1.1rem}
  .drop .t{font-weight:700; font-size:.95rem; display:block; margin-bottom:1px}
  .drop .s{font-size:.82rem; color:var(--ink-2); font-family:var(--sans); font-weight:400}

  .burger{display:none; background:none; border:1.5px solid var(--line-strong); border-radius:9px; width:44px; height:42px; cursor:pointer}
  .burger span{display:block; width:20px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; transition:.2s}
  .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

  /* Menú móvil */
  .mobile-menu{
    display:none; position:fixed; inset:72px 0 0 0; background:var(--cream); z-index:99;
    padding:1.4rem clamp(20px,4vw,32px); overflow-y:auto; flex-direction:column; gap:.25rem;
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a, .mobile-menu details summary{
    font-weight:700; font-size:1.15rem; padding:.85rem .4rem; border-bottom:1px solid var(--line); font-family:var(--serif);
  }
  .mobile-menu details summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center}
  .mobile-menu details[open] summary{color:var(--terra)}
  .mobile-menu details .sub a{font-family:var(--sans); font-size:1rem; font-weight:600; padding-left:1rem; color:var(--ink-2); border-bottom:1px dashed var(--line)}
  .mobile-menu .btn{margin-top:1.2rem; width:100%}

  /* ============================================================
     HERO
     ============================================================ */
  .hero{position:relative; overflow:hidden; padding-top:clamp(40px,6vw,72px)}
  .hero-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,64px); align-items:center}
  .hero h1{font-size:clamp(2.5rem, 5.2vw, 4rem); font-weight:500; letter-spacing:-.025em}
  .hero h1 em{font-style:italic; color:var(--terra); font-weight:500}
  .hero .lead{margin:1.4rem 0 2rem; font-size:clamp(1.1rem,1.7vw,1.28rem); max-width:52ch}
  .hero-cta{display:flex; flex-wrap:wrap; gap:.7rem}
  .hero-note{margin-top:1.1rem; font-size:.85rem; color:var(--ink-2); font-family:var(--mono)}

  /* Product mock: dashboard + comanda */
  .hero-visual{position:relative}
  .device{
    background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-lg);
    overflow:hidden;
  }
  .device-bar{display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--cream)}
  .device-bar i{width:10px; height:10px; border-radius:50%; background:var(--line-strong); display:block}
  .device-bar i:nth-child(1){background:#E0A73C}
  .device-bar i:nth-child(2){background:#C89B6A}
  .device-bar .u{margin-left:auto; font-family:var(--mono); font-size:.7rem; color:var(--ink-2)}
  .dash{padding:1.1rem}
  .dash-head{display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem}
  .dash-head .h{font-family:var(--serif); font-size:1.15rem}
  .dash-head .d{font-family:var(--mono); font-size:.7rem; color:var(--ink-2)}
  .kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-bottom:.9rem}
  .kpi{background:var(--cream); border:1px solid var(--line); border-radius:12px; padding:.7rem}
  .kpi .l{font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-2); font-weight:700}
  .kpi .v{font-family:var(--serif); font-size:1.35rem; margin-top:.15rem}
  .kpi .c{font-family:var(--mono); font-size:.68rem; color:#3E7A5E}
  .kpi.warn .c{color:var(--terra)}
  .bars{display:flex; align-items:flex-end; gap:6px; height:78px; padding:.4rem .2rem 0}
  .bars span{flex:1; background:var(--petrol); border-radius:4px 4px 0 0; opacity:.85}
  .bars span:nth-child(odd){background:var(--terra)}
  .bar-cap{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.6rem; color:var(--ink-2); margin-top:.3rem}

  /* Comanda flotante (elemento firma: ticket de cocina) */
  .comanda{
    position:absolute; right:-14px; bottom:-26px; width:210px; background:#fff;
    border:1px solid var(--line); border-radius:6px; box-shadow:var(--shadow-lg); padding:.85rem .9rem;
    font-family:var(--mono); font-size:.72rem; color:var(--ink); transform:rotate(-3deg);
  }
  .comanda::before{content:""; position:absolute; inset:0 0 auto 0; height:6px; background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px); top:-6px}
  .comanda .top{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line-strong); padding-bottom:.4rem; margin-bottom:.4rem; font-weight:600}
  .comanda .row{display:flex; justify-content:space-between; padding:.12rem 0}
  .comanda .row .q{color:var(--terra); font-weight:600}
  .comanda .st{margin-top:.5rem; padding-top:.4rem; border-top:1px dashed var(--line-strong); color:#3E7A5E; font-weight:600; display:flex; align-items:center; gap:.3rem}

  /* ---------- Franja de confianza ---------- */
  .trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--cream-2)}
  .trust .wrap{display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; padding-top:1.1rem; padding-bottom:1.1rem; align-items:center; justify-content:space-between}
  .trust .item{display:flex; align-items:center; gap:.55rem; font-size:.9rem; font-weight:600; color:var(--ink-2)}
  .trust .item svg{width:18px; height:18px; color:var(--terra); flex:none}

  /* ============================================================
     PROBLEMAS
     ============================================================ */
  .sec-head{max-width:60ch; margin-bottom:clamp(28px,4vw,48px)}
  .sec-head h2{margin-top:.7rem}
  .sec-head p{margin-top:.9rem}
  .prob-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap)}
  .prob{
    display:flex; gap:1rem; padding:1.3rem 1.4rem; background:var(--card); border:1px solid var(--line);
    border-radius:var(--radius); align-items:flex-start;
  }
  .prob .x{width:40px; height:40px; border-radius:11px; background:var(--terra-soft); color:var(--terra); flex:none; display:grid; place-items:center; font-family:var(--serif); font-size:1.2rem; font-weight:600}
  .prob h3{font-size:1.12rem; margin-bottom:.25rem}
  .prob p{font-size:.94rem; color:var(--ink-2)}

  /* ============================================================
     BENEFICIOS (bloque petróleo)
     ============================================================ */
  .ben{background:var(--petrol); color:var(--ink-on-dark)}
  .ben h2{color:var(--ink-on-dark)}
  .ben .lead{color:var(--muted-on-dark)}
  .ben-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(28px,4vw,48px)}
  .ben-card{border:1px solid var(--petrol-line); border-radius:var(--radius); padding:1.6rem 1.5rem; background:rgba(255,255,255,.03)}
  .ben-card .n{font-family:var(--mono); font-size:.78rem; color:var(--sage); letter-spacing:.1em}
  .ben-card h3{color:#fff; margin:.7rem 0 .5rem; font-size:1.5rem}
  .ben-card p{color:var(--muted-on-dark); font-size:.96rem}
  .ben-card ul{margin:.9rem 0 0; padding:0; list-style:none; font-size:.88rem}
  .ben-card li{display:flex; gap:.5rem; padding:.28rem 0; color:var(--muted-on-dark)}
  .ben-card li::before{content:"→"; color:var(--amber)}

  /* ============================================================
     MÓDULOS
     ============================================================ */
  .mods{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(28px,4vw,44px)}
  .mod{
    background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.1rem;
    transition:transform .14s, border-color .14s, box-shadow .14s; position:relative;
  }
  .mod:hover{transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow)}
  .mod .ic{width:38px; height:38px; border-radius:10px; background:var(--cream-2); display:grid; place-items:center; margin-bottom:.7rem; color:var(--petrol)}
  .mod .ic svg{width:20px; height:20px}
  .mod h3{font-size:1.02rem; font-family:var(--sans); font-weight:800; letter-spacing:-.01em}
  .mod p{font-size:.85rem; color:var(--ink-2); margin-top:.25rem}
  .mod .tag{position:absolute; top:.8rem; right:.8rem; font-family:var(--mono); font-size:.58rem; text-transform:uppercase; letter-spacing:.08em; background:var(--amber); color:#3a2a05; padding:.15rem .4rem; border-radius:5px; font-weight:600}

  /* ============================================================
     FLUJO (elemento firma — comanda que viaja por estaciones)
     ============================================================ */
  .flow{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .flow-track{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:clamp(28px,4vw,44px); position:relative}
  .stn{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:1.2rem 1.15rem; position:relative}
  .stn .n{font-family:var(--mono); font-size:.72rem; color:var(--terra); font-weight:600}
  .stn h3{font-size:1.1rem; margin:.5rem 0 .35rem}
  .stn p{font-size:.86rem; color:var(--ink-2)}
  .stn .arrow{position:absolute; right:-19px; top:50%; transform:translateY(-50%); color:var(--line-strong); z-index:2}
  .stn:last-child .arrow{display:none}
  .stn .arrow svg{width:20px; height:20px}

  /* ============================================================
     CRECE POR ETAPAS
     ============================================================ */
  .stages{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(28px,4vw,44px)}
  .stage{border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--card)}
  .stage .cap{padding:1.1rem 1.3rem; border-bottom:1px solid var(--line); background:var(--cream); display:flex; align-items:center; gap:.7rem}
  .stage .step-badge{font-family:var(--mono); font-weight:600; font-size:.8rem; width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--petrol); color:var(--cream)}
  .stage .cap b{font-family:var(--serif); font-weight:600; font-size:1.15rem}
  .stage .body{padding:1.2rem 1.3rem}
  .stage .body p{color:var(--ink-2); font-size:.92rem; margin-bottom:.8rem}
  .stage ul{list-style:none; padding:0; margin:0; font-size:.9rem}
  .stage li{display:flex; gap:.5rem; padding:.28rem 0}
  .stage li svg{width:16px; height:16px; color:var(--terra); flex:none; margin-top:3px}
  .stage.future .step-badge{background:var(--amber); color:#3a2a05}

  /* ============================================================
     TESTIMONIOS
     ============================================================ */
  .placeholder-note{
    display:inline-flex; align-items:center; gap:.4rem; font-family:var(--mono); font-size:.7rem;
    background:var(--amber); color:#3a2a05; padding:.2rem .55rem; border-radius:6px; font-weight:600; margin-bottom:1rem;
  }
  .quotes{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap)}
  .quote{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem}
  .quote p{font-family:var(--serif); font-size:1.08rem; line-height:1.4; margin-bottom:1.1rem}
  .quote .who{display:flex; align-items:center; gap:.7rem}
  .quote .av{width:40px; height:40px; border-radius:50%; background:var(--terra-soft); color:var(--terra); display:grid; place-items:center; font-weight:800; font-size:.95rem}
  .quote .who b{display:block; font-size:.9rem}
  .quote .who span{font-size:.78rem; color:var(--ink-2)}

  /* ============================================================
     FAQ
     ============================================================ */
  .faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(28px,5vw,60px); align-items:start}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-item summary{
    list-style:none; cursor:pointer; padding:1.15rem 0; display:flex; justify-content:space-between; gap:1rem;
    font-family:var(--serif); font-size:1.15rem; font-weight:500; align-items:center;
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary .pm{flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; transition:.2s; position:relative}
  .faq-item summary .pm::before,.faq-item summary .pm::after{content:""; position:absolute; background:var(--terra); border-radius:2px}
  .faq-item summary .pm::before{width:11px; height:2px}
  .faq-item summary .pm::after{width:2px; height:11px; transition:.2s}
  .faq-item[open] summary .pm::after{transform:scaleY(0)}
  .faq-item[open] summary .pm{border-color:var(--terra)}
  .faq-item .a{padding:0 0 1.2rem; color:var(--ink-2); font-size:.96rem; max-width:60ch}

  /* ============================================================
     CTA FINAL + FORM
     ============================================================ */
  .cta-final{background:var(--petrol)}
  .cta-card{
    background:var(--petrol-2); border:1px solid var(--petrol-line); border-radius:22px;
    padding:clamp(28px,4vw,52px); display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,52px); align-items:center;
  }
  .cta-card h2{color:#fff}
  .cta-card .lead{color:var(--muted-on-dark); margin-top:1rem}
  .cta-list{list-style:none; padding:0; margin:1.4rem 0 0; font-size:.94rem}
  .cta-list li{display:flex; gap:.6rem; padding:.35rem 0; color:var(--ink-on-dark)}
  .cta-list li svg{width:18px; height:18px; color:var(--sage); flex:none; margin-top:3px}

  form.demo{background:var(--card); border-radius:16px; padding:1.6rem}
  form.demo h3{font-size:1.25rem; margin-bottom:.3rem}
  form.demo .sub{color:var(--ink-2); font-size:.9rem; margin-bottom:1.2rem}
  .field{margin-bottom:.9rem}
  .field label{display:block; font-size:.82rem; font-weight:700; margin-bottom:.35rem}
  .field label .req{color:var(--terra)}
  .field input, .field select, .field textarea{
    width:100%; padding:.75rem .85rem; border:1.5px solid var(--line); border-radius:10px; background:var(--cream);
    font-family:var(--sans); font-size:.95rem; color:var(--ink); transition:border-color .15s, box-shadow .15s;
  }
  .field input:focus, .field select:focus, .field textarea:focus{border-color:var(--terra); box-shadow:0 0 0 3px var(--terra-soft); outline:none}
  .field.error input, .field.error select{border-color:#C0392B; background:#FCEEEC}
  .field .msg{font-size:.76rem; color:#C0392B; margin-top:.3rem; display:none; font-weight:600}
  .field.error .msg{display:block}
  form.demo .btn{width:100%; margin-top:.4rem}
  .form-legal{font-size:.72rem; color:var(--ink-2); margin-top:.8rem; text-align:center}
  .form-success{display:none; text-align:center; padding:1.5rem .5rem}
  .form-success.show{display:block}
  .form-success .ck{width:56px; height:56px; border-radius:50%; background:#E4F1E8; color:#2E7D53; display:grid; place-items:center; margin:0 auto 1rem}
  .form-success h3{margin-bottom:.4rem}
  .form-success p{color:var(--ink-2); font-size:.92rem}

  /* ============================================================
     FOOTER
     ============================================================ */
  footer.site{background:var(--ink); color:#E9E0D3; padding:clamp(48px,6vw,72px) 0 2rem}
  .foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(24px,4vw,48px); padding-bottom:2.5rem; border-bottom:1px solid #43382F}
  .foot-brand .brand{color:#fff; margin-bottom:.9rem}
  .foot-brand p{font-size:.9rem; color:#B7AA9C; max-width:34ch}
  .foot-brand .socials{display:flex; gap:.6rem; margin-top:1.2rem}
  .foot-brand .socials a{width:38px; height:38px; border-radius:10px; border:1px solid #43382F; display:grid; place-items:center; transition:.15s}
  .foot-brand .socials a:hover{background:#43382F; color:#fff}
  .foot-brand .socials svg{width:18px; height:18px}
  .foot-col h4{font-family:var(--sans); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:#8B7E70; font-weight:800; margin-bottom:1rem}
  .foot-col a{display:block; font-size:.9rem; padding:.32rem 0; color:#D6CBBC}
  .foot-col a:hover{color:var(--terra); }
  .foot-bottom{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; padding-top:1.6rem; font-size:.82rem; color:#8B7E70}
  .foot-bottom .links{display:flex; gap:1.2rem}
  .foot-bottom a:hover{color:#fff}

  /* WhatsApp flotante */
  .wa{position:fixed; right:20px; bottom:20px; z-index:80; width:56px; height:56px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:var(--shadow-lg); transition:transform .15s}
  .wa:hover{transform:scale(1.06)}
  .wa svg{width:28px; height:28px; color:#fff}

  /* ============================================================
     RESPONSIVE
     ============================================================ */
  @media (max-width: 1024px){
    .mods{grid-template-columns:repeat(3,1fr)}
    .ben-grid{grid-template-columns:1fr; }
    .flow-track{grid-template-columns:repeat(2,1fr)}
    .stn .arrow{display:none}
    .quotes{grid-template-columns:1fr; }
    .stages{grid-template-columns:1fr}
  }
  @media (max-width: 900px){
    .nav-links, .nav-right .btn-desktop{display:none}
    .burger{display:block}
    .hero-grid{grid-template-columns:1fr; gap:48px}
    .hero-visual{max-width:460px; margin:0 auto}
    .comanda{right:0}
    .prob-grid{grid-template-columns:1fr}
    .cta-card{grid-template-columns:1fr}
    .faq-grid{grid-template-columns:1fr; gap:2rem}
    .foot-top{grid-template-columns:1fr 1fr}
  }
  @media (max-width: 560px){
    .mods{grid-template-columns:repeat(2,1fr)}
    .flow-track{grid-template-columns:1fr}
    .kpis{grid-template-columns:repeat(3,1fr)}
    .foot-top{grid-template-columns:1fr}
    .trust .wrap{gap:.7rem 1.2rem}
    body{font-size:16px}
  }

  /* --- Landing extras --- */
  .nav-links a.active{background:var(--cream-2); color:var(--terra)}
  .mod.rec{border-color:var(--terra); box-shadow:0 0 0 1px var(--terra) inset}
  .mod .rectag{position:absolute; top:.8rem; right:.8rem; font-family:var(--mono); font-size:.56rem; text-transform:uppercase; letter-spacing:.08em; background:var(--terra); color:#fff; padding:.15rem .4rem; border-radius:5px; font-weight:600}
  /* Captura del producto */
  .capture{background:var(--cream-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .capture-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,60px); align-items:center}
  .capture .placeholder-note{margin-bottom:1rem}
  /* Mock genérico de producto */
  .mock{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden}
  .mock .mbar{display:flex; align-items:center; gap:.4rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--cream); font-family:var(--mono); font-size:.7rem; color:var(--ink-2)}
  .mock .mbar b{color:var(--ink); font-family:var(--sans); font-weight:800; font-size:.82rem}
  .mock .mbody{padding:1.1rem}
  /* Mesas */
  .tables{display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem}
  .tbl{aspect-ratio:1; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; text-align:center; font-family:var(--mono); font-size:.7rem; font-weight:600; background:var(--cream)}
  .tbl.busy{background:var(--terra-soft); border-color:var(--terra); color:var(--terra-dark)}
  .tbl.pay{background:#E4F1E8; border-color:#8BC5A2; color:#2E7D53}
  .tbl small{display:block; font-size:.58rem; font-weight:500; opacity:.8; margin-top:2px}
  /* Carta con tamaños/extras */
  .prod-row{display:flex; justify-content:space-between; align-items:center; padding:.6rem 0; border-bottom:1px dashed var(--line)}
  .prod-row .nm{font-weight:700; font-size:.92rem}
  .prod-row .pr{font-family:var(--mono); font-size:.82rem; color:var(--terra); font-weight:600}
  .chips{display:flex; gap:.4rem; flex-wrap:wrap; margin:.7rem 0}
  .chip{font-size:.72rem; font-weight:700; padding:.3rem .6rem; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--cream)}
  .chip.on{background:var(--terra); color:#fff; border-color:var(--terra)}
  /* Cuenta dividida */
  .split{display:grid; grid-template-columns:1fr 1fr; gap:.7rem}
  .person{border:1px solid var(--line); border-radius:12px; padding:.8rem; background:var(--cream)}
  .person h4{font-family:var(--sans); font-size:.82rem; font-weight:800; margin-bottom:.5rem; display:flex; justify-content:space-between}
  .person .li{display:flex; justify-content:space-between; font-family:var(--mono); font-size:.72rem; padding:.15rem 0; color:var(--ink-2)}
  .person .tot{border-top:1px dashed var(--line-strong); margin-top:.4rem; padding-top:.4rem; font-weight:700; color:var(--ink); display:flex; justify-content:space-between; font-family:var(--mono); font-size:.8rem}
  /* POS rápido */
  .pos{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.9rem}
  .pos button{border:1px solid var(--line); background:var(--cream); border-radius:10px; padding:.7rem .3rem; font-family:var(--sans); font-weight:700; font-size:.78rem; cursor:default; color:var(--ink)}
  .pos button.hot{background:var(--terra-soft); border-color:var(--terra); color:var(--terra-dark)}
  .stockbar{display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.72rem; color:var(--ink-2); padding-top:.6rem; border-top:1px dashed var(--line)}
  .stockbar .track{flex:1; height:7px; border-radius:4px; background:var(--line); overflow:hidden}
  .stockbar .fill{height:100%; background:var(--terra)}
  /* Consentimiento */
  .consent{display:flex; gap:.6rem; align-items:flex-start; font-size:.82rem; color:var(--ink-2); margin:.4rem 0 .2rem}
  .consent input{width:18px; height:18px; margin-top:2px; accent-color:var(--terra); flex:none}
  .field.error .consent{color:#C0392B}
  /* Spinner de carga */
  .spin{width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:sp .7s linear infinite; display:inline-block}
  @keyframes sp{to{transform:rotate(360deg)}}

  /* --- Blog --- */
  .blog-hero{padding-bottom:0}
  .search-wrap{position:relative; max-width:560px; margin-top:1.6rem}
  .search-wrap svg{position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--ink-2)}
  #searchInput{width:100%; padding:.95rem 1rem .95rem 3rem; border:1.5px solid var(--line); border-radius:999px; background:var(--card); font-family:var(--sans); font-size:1rem; color:var(--ink)}
  #searchInput:focus{border-color:var(--terra); box-shadow:0 0 0 3px var(--terra-soft); outline:none}
  .cats{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.2rem}
  .cat-chip{font-family:var(--sans); font-size:.85rem; font-weight:700; padding:.45rem .9rem; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--card); color:var(--ink-2); cursor:pointer; transition:.14s}
  .cat-chip:hover{border-color:var(--ink); color:var(--ink)}
  .cat-chip.on{background:var(--petrol); border-color:var(--petrol); color:var(--ink-on-dark)}
  /* Thumb con placeholder identificado */
  .thumb{aspect-ratio:16/9; border-radius:12px; position:relative; overflow:hidden; display:grid; place-items:center; border:1px solid var(--line)}
  .thumb .emo{font-size:2.4rem; filter:saturate(.9)}
  .thumb .ph{position:absolute; top:.5rem; left:.5rem; font-family:var(--mono); font-size:.56rem; text-transform:uppercase; letter-spacing:.06em; background:rgba(42,33,28,.55); color:#fff; padding:.15rem .4rem; border-radius:5px}
  .th-mermas{background:linear-gradient(135deg,#F3E0D6,#E9C9B6)}
  .th-menu{background:linear-gradient(135deg,#Ebe3D0,#D9C7A2)}
  .th-inv{background:linear-gradient(135deg,#DCEAE4,#B7D2C6)}
  .th-digital{background:linear-gradient(135deg,#E7DFF0,#CFC0E0)}
  .th-ops{background:linear-gradient(135deg,#F0E4D0,#E3CBA0)}
  .th-suc{background:linear-gradient(135deg,#DDE6EC,#B9CEDC)}
  /* Featured */
  .featured{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(24px,4vw,44px); align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(18px,2.5vw,28px); box-shadow:var(--shadow)}
  .featured .thumb{aspect-ratio:4/3}
  .featured .fmeta{display:flex; align-items:center; gap:.6rem; margin-bottom:.8rem}
  .cat-badge{font-family:var(--mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; color:var(--terra); font-weight:600}
  .featured h2{font-size:clamp(1.6rem,3vw,2.3rem); margin:.2rem 0 .7rem}
  .featured p{color:var(--ink-2); font-size:1rem; margin-bottom:1.2rem}
  .post-meta{display:flex; align-items:center; gap:.5rem; font-size:.8rem; color:var(--ink-2); font-family:var(--sans)}
  .post-meta .dotsep{width:3px; height:3px; border-radius:50%; background:var(--line-strong)}
  /* Grid */
  .post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); margin-top:clamp(28px,4vw,44px)}
  .post-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; transition:transform .14s, box-shadow .14s, border-color .14s}
  .post-card:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--line-strong)}
  .post-card .pc-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1}
  .post-card .thumb{border-radius:0; border:none; border-bottom:1px solid var(--line)}
  .post-card h3{font-size:1.2rem; margin:.55rem 0 .5rem; line-height:1.15}
  .post-card p{font-size:.9rem; color:var(--ink-2); flex:1}
  .tags{display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.9rem}
  .tag-pill{font-family:var(--mono); font-size:.66rem; color:var(--ink-2); background:var(--cream-2); border:1px solid var(--line); padding:.15rem .5rem; border-radius:6px}
  .no-results{display:none; text-align:center; padding:3rem 1rem; color:var(--ink-2)}
  .no-results.show{display:block}
  /* Suscripción */
  .subscribe{background:var(--petrol); border-radius:22px; padding:clamp(28px,4vw,48px); text-align:center; color:var(--ink-on-dark)}
  .subscribe h2{color:#fff}
  .subscribe p{color:var(--muted-on-dark); max-width:48ch; margin:1rem auto 1.6rem}
  .sub-form{display:flex; gap:.6rem; max-width:440px; margin:0 auto; flex-wrap:wrap; justify-content:center}
  .sub-form input{flex:1; min-width:220px; padding:.85rem 1rem; border-radius:999px; border:1.5px solid var(--petrol-line); background:rgba(255,255,255,.06); color:#fff; font-family:var(--sans); font-size:.95rem}
  .sub-form input::placeholder{color:var(--muted-on-dark)}
  .sub-form input:focus{outline:none; border-color:var(--sage)}
  .sub-msg{margin-top:1rem; font-size:.9rem; color:var(--sage); display:none}
  .sub-msg.show{display:block}
  /* ---- Artículo ---- */
  .article-wrap{max-width:740px; margin:0 auto}
  .breadcrumb{font-size:.82rem; color:var(--ink-2); margin-bottom:1.4rem}
  .breadcrumb a:hover{color:var(--terra)}
  .article-head h1{font-size:clamp(2rem,4vw,3rem); margin:.6rem 0 1rem; letter-spacing:-.02em}
  .article-head .post-meta{font-size:.88rem}
  .share{display:flex; align-items:center; gap:.5rem; margin:1.4rem 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
  .share span{font-size:.82rem; color:var(--ink-2); font-weight:700; margin-right:.3rem}
  .share a, .share button{width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); transition:.14s}
  .share a:hover, .share button:hover{border-color:var(--terra); color:var(--terra)}
  .share svg{width:18px; height:18px}
  .article-thumb{aspect-ratio:16/8; border-radius:16px; margin:1.6rem 0 2rem}
  .prose{font-size:1.08rem; line-height:1.7; color:var(--ink)}
  .prose h2{font-size:1.7rem; margin:2.2rem 0 .8rem}
  .prose h3{font-size:1.3rem; margin:1.8rem 0 .6rem}
  .prose p{margin:0 0 1.1rem}
  .prose ul{margin:0 0 1.2rem; padding-left:0; list-style:none}
  .prose li{position:relative; padding-left:1.6rem; margin-bottom:.5rem; color:var(--ink)}
  .prose li::before{content:"→"; position:absolute; left:0; color:var(--terra); font-weight:700}
  .prose blockquote{margin:1.6rem 0; padding:1rem 1.4rem; border-left:3px solid var(--terra); background:var(--cream-2); border-radius:0 12px 12px 0; font-family:var(--serif); font-size:1.2rem; font-style:italic; color:var(--ink)}
  .prose strong{font-weight:700}
  .inline-cta{background:var(--terra-soft); border:1px solid #E4C4B4; border-radius:16px; padding:1.5rem 1.6rem; margin:2.2rem 0; display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap}
  .inline-cta .t{flex:1; min-width:220px}
  .inline-cta h3{font-size:1.2rem; margin-bottom:.3rem}
  .inline-cta p{font-size:.9rem; color:var(--ink-2)}
  .related{border-top:1px solid var(--line); margin-top:3rem; padding-top:2.5rem}
  @media (max-width:900px){
    .featured{grid-template-columns:1fr} .featured .thumb{aspect-ratio:16/9}
    .post-grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:560px){ .post-grid{grid-template-columns:1fr} }

.frow{display:grid; grid-template-columns:1fr 1fr; gap:.9rem}
@media (max-width:560px){ .frow{grid-template-columns:1fr} }
@media (max-width:900px){ .nos-grid{grid-template-columns:1fr !important} }