/* Shared by every landing page: /cartas-qr/, /paginas-web/, /reservas/,
   /chatbots-ia/, /catalogos-whatsapp/. Extracted from cartas-qr, which had it
   inline, once there were five pages that wanted the same buttons and cards.
   Served from /css/ -- a reserved slug, so no tenant can shadow it. */
  :root{
    --ink:#14231C;
    --paper:#FBFAF6;
    --verde:#0E5B43;
    --verde-osc:#0A4433;
    --amarillo:#F2B33D;
    --wa:#25D366;
    --wa-osc:#1DA851;
    --gris:#5C6660;
    --linea:#E3E0D6;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    background:var(--paper);color:var(--ink);line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  .mono{font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;}
  .wrap{max-width:1040px;margin:0 auto;padding:0 20px;}
  a{color:inherit;}

  header{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.93);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--linea);}
  .nav{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;}
  .logo{font-weight:900;font-size:1.05rem;letter-spacing:-.01em;text-decoration:none;color:var(--ink);}
  .logo span{color:var(--verde);}
  .nav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#fff;
    text-decoration:none;font-weight:700;font-size:.88rem;padding:9px 18px;border-radius:999px;}
  .nav-cta:hover{background:var(--verde-osc);}
  a:focus-visible,button:focus-visible{outline:3px solid var(--amarillo);outline-offset:2px;}

  .hero{padding:56px 0 56px;}
  .hero-grid{display:grid;grid-template-columns:1fr;gap:40px;align-items:center;}
  @media(min-width:860px){.hero-grid{grid-template-columns:1.1fr .9fr;gap:52px;}}
  .eyebrow{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.08em;
    text-transform:uppercase;color:var(--verde);margin-bottom:16px;display:block;}
  h1{font-size:clamp(2.1rem,6vw,3.4rem);line-height:1.06;letter-spacing:-.02em;
    font-weight:900;font-variation-settings:"wdth" 112;margin-bottom:18px;}
  h1 em{font-style:normal;color:var(--verde);
    background:linear-gradient(transparent 62%,rgba(242,179,61,.45) 62%);}
  .lede{font-size:1.1rem;color:var(--gris);max-width:54ch;margin-bottom:26px;}
  .cta-row{display:flex;flex-wrap:wrap;gap:16px;align-items:center;}
  .btn-pri{display:inline-flex;align-items:center;gap:9px;background:var(--verde);color:#fff;
    text-decoration:none;font-weight:800;font-size:1.02rem;padding:15px 30px;border-radius:999px;
    transition:transform .15s ease,background .15s ease;}
  .btn-pri:hover,.btn-pri:focus-visible{background:var(--verde-osc);transform:translateY(-1px);}
  .btn-sec{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;
    border-bottom:2px solid var(--linea);padding-bottom:2px;}
  .btn-sec:hover{border-bottom-color:var(--amarillo);}
  .nota{font-size:.86rem;color:var(--gris);margin-top:14px;}

  /* Phone mock: the product is a menu on a phone, so show a menu on a phone. */
  .fono{background:#fff;border:1px solid var(--linea);border-radius:26px;padding:14px;
    max-width:320px;margin:0 auto;box-shadow:0 18px 50px rgba(20,35,28,.10);}
  .fono-top{text-align:center;padding:10px 0 14px;border-bottom:1px solid var(--linea);}
  .fono-top b{display:block;font-size:1.05rem;font-weight:800;}
  .fono-top span{font-size:.8rem;color:var(--gris);}
  .fono-cat{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.09em;
    text-transform:uppercase;color:#A79E8C;margin:16px 0 8px;}
  .fono-it{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px solid #F2EFE7;}
  .fono-it:last-child{border-bottom:0;}
  .fono-it .t{flex:1;min-width:0;}
  .fono-it .t b{display:block;font-size:.88rem;font-weight:700;}
  .fono-it .t span{font-size:.76rem;color:var(--gris);}
  .fono-it .p{font-weight:800;font-size:.86rem;white-space:nowrap;}
  .fono-it.ago .t b,.fono-it.ago .t span,.fono-it.ago .p{opacity:.4;text-decoration:line-through;}
  .fono-wa{margin-top:14px;background:var(--wa);color:#fff;text-align:center;
    border-radius:999px;padding:11px;font-weight:700;font-size:.88rem;}

  section{padding:60px 0;border-top:1px solid var(--linea);}
  h2{font-size:clamp(1.6rem,3.6vw,2.2rem);line-height:1.15;letter-spacing:-.015em;
    font-weight:800;font-variation-settings:"wdth" 108;margin-bottom:12px;}
  .sub{color:var(--gris);margin-bottom:34px;max-width:60ch;}

  .pasos{display:grid;grid-template-columns:1fr;gap:22px;counter-reset:p;}
  @media(min-width:760px){.pasos{grid-template-columns:repeat(3,1fr);gap:26px;}}
  .paso{position:relative;padding-left:52px;}
  .paso::before{counter-increment:p;content:counter(p);position:absolute;left:0;top:-2px;
    width:36px;height:36px;border-radius:50%;background:var(--verde);color:#fff;
    display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1rem;}
  .paso b{display:block;font-size:1.02rem;margin-bottom:4px;}
  .paso p{color:var(--gris);font-size:.93rem;}

  .bene{display:grid;grid-template-columns:1fr;gap:16px;}
  @media(min-width:720px){.bene{grid-template-columns:1fr 1fr;gap:18px;}}
  .b{display:flex;gap:13px;align-items:flex-start;}
  .b .chk{flex:0 0 24px;width:24px;height:24px;border-radius:50%;background:var(--verde);
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;
    font-weight:900;margin-top:2px;}
  .b b{display:block;margin-bottom:2px;}
  .b p{color:var(--gris);font-size:.92rem;}

  .planes{display:grid;grid-template-columns:1fr;gap:18px;}
  @media(min-width:720px){.planes{grid-template-columns:1fr 1fr;}}
  .plan{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:26px;}
  .plan.destacado{border-color:var(--verde);border-width:2px;position:relative;}
  .plan.destacado::after{content:"Más completo";position:absolute;top:-11px;right:20px;
    background:var(--verde);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;padding:4px 11px;border-radius:999px;}
  .plan h3{font-size:1.15rem;font-weight:800;margin-bottom:4px;}
  .plan .precio{font-size:1.9rem;font-weight:900;font-variation-settings:"wdth" 110;line-height:1.1;}
  .plan .por{font-size:.85rem;color:var(--gris);}
  .plan .mes{font-size:.85rem;color:var(--gris);margin-top:2px;}
  .plan .ahorro{
    display:inline-block;margin:10px 0 16px;
    background:#E7F3EE;color:var(--verde-osc);border:1px solid #BFDDD1;
    border-radius:999px;padding:4px 12px;font-size:.78rem;font-weight:700;
  }
  .plan ul{list-style:none;}
  .plan li{padding:6px 0 6px 24px;position:relative;font-size:.93rem;}
  .plan li::before{content:"✓";position:absolute;left:0;color:var(--verde);font-weight:900;}

  .cierre{background:var(--verde);color:#fff;text-align:center;}
  .cierre h2{color:#fff;}
  .cierre p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 26px;}
  .btn-am{display:inline-flex;align-items:center;gap:9px;background:var(--amarillo);
    color:var(--verde-osc);text-decoration:none;font-weight:800;font-size:1.02rem;
    padding:15px 32px;border-radius:999px;}
  .btn-am:hover{filter:brightness(1.06);}

  footer{border-top:1px solid var(--linea);padding:26px 0;display:flex;flex-wrap:wrap;
    gap:12px;justify-content:space-between;font-size:.85rem;color:var(--gris);}
  footer a{color:var(--verde);}

  .wa-flot{position:fixed;right:18px;bottom:18px;z-index:60;width:56px;height:56px;
    border-radius:50%;background:var(--wa);display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 24px rgba(37,211,102,.4);}
  /* ── Components used by the service landing pages ─────────────────────── */

  /* A generic "screenshot" card, standing in for the phone mock on /cartas-qr/.
     Drawn in CSS rather than shipped as an image: it stays sharp on any screen,
     costs no request, and cannot be the thing that makes the page slow. */
  .mock{background:#fff;border:1px solid var(--linea);border-radius:18px;
    padding:0;overflow:hidden;max-width:400px;margin:0 auto;
    box-shadow:0 18px 50px rgba(20,35,28,.10);}
  .mock-bar{display:flex;align-items:center;gap:6px;padding:11px 14px;
    border-bottom:1px solid var(--linea);background:#F7F5EF;}
  .mock-bar i{width:9px;height:9px;border-radius:50%;background:#D9D4C6;display:block;}
  .mock-bar span{margin-left:8px;font-family:'IBM Plex Mono',monospace;
    font-size:.68rem;color:#A79E8C;}
  .mock-body{padding:16px 16px 18px;}
  .mock-row{display:flex;justify-content:space-between;align-items:center;gap:10px;
    padding:10px 0;border-bottom:1px solid #F2EFE7;}
  .mock-row:last-child{border-bottom:0;}
  .mock-row b{font-size:.9rem;font-weight:700;}
  .mock-row small{display:block;color:var(--gris);font-size:.76rem;font-weight:400;}
  .mock-tag{background:#E7F3EE;color:var(--verde-osc);border-radius:999px;
    padding:3px 10px;font-size:.72rem;font-weight:700;white-space:nowrap;}
  .mock-cta{margin-top:14px;background:var(--wa);color:#fff;text-align:center;
    border-radius:999px;padding:11px;font-weight:700;font-size:.88rem;}

  /* Chat bubbles, for the chatbot page. */
  .burb{max-width:82%;padding:9px 13px;border-radius:14px;font-size:.86rem;
    margin-bottom:9px;line-height:1.45;}
  .burb.ellos{background:#F2EFE7;border-bottom-left-radius:4px;}
  .burb.nos{background:var(--verde);color:#fff;margin-left:auto;
    border-bottom-right-radius:4px;}

  /* Footer row linking the sibling services. Footer only, never the hero --
     a landing page with a service menu at the top is a page with five exits. */
  .otros{border-top:1px solid var(--linea);padding:22px 0 4px;
    display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.85rem;}
  .otros b{color:var(--ink);margin-right:4px;}
  .otros a{color:var(--verde);text-decoration:none;}
  .otros a:hover{text-decoration:underline;}