@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url('/fonts/dm-sans.woff2') format('woff2')}
  :root{
    --background: oklch(0.91 0.01 90);
    --foreground: oklch(0.2 0.02 90);
    --card: oklch(1 0 0);
    --card-foreground: oklch(0.2 0.02 90);
    --primary: oklch(0.32 0.08 145);
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.97 0.01 90);
    --muted: oklch(0.97 0.01 90);
    --muted-foreground: oklch(0.45 0.02 90);
    --accent: oklch(0.95 0.02 85);
    --accent-foreground: oklch(0.2 0.02 90);
    --border: oklch(0.88 0.01 90);
    --amber: #fbbf24;
    --radius: 0.625rem;
    --r-sm: calc(var(--radius) - 4px);
    --r-md: calc(var(--radius) - 2px);
    --r-lg: var(--radius);
    --r-xl: calc(var(--radius) + 4px);
    --r-2xl: 1rem;
    --r-3xl: 1.5rem;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color: transparent}
  html{scroll-behavior:smooth;scroll-padding-top:1.25rem}
  html,body{margin:0;padding:0;overflow-x:hidden;overflow-x:clip}
  body{
    font-family:'DM Sans', system-ui, sans-serif;
    background:var(--background);
    color:var(--foreground);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    line-height:1.5;
  }
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .container{max-width:80rem;margin:0 auto;padding:0 1rem}
  @media (min-width:640px){.container{padding:0 1.5rem}}
  @media (min-width:1024px){.container{padding:0 2rem}}
  .text-balance{text-wrap:balance}
  .text-pretty{text-wrap:pretty}

  /* ===== BUTTONS ===== */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
    font-family:inherit;font-weight:500;font-size:.875rem;
    border-radius:9999px;border:1px solid transparent;
    cursor:pointer;white-space:nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  .btn svg{width:1.25rem;height:1.25rem;flex-shrink:0}
  .btn-sm{height:2.25rem;padding:0 1.25rem}
  .btn-sm svg{width:1rem;height:1rem}
  .btn-lg{padding:1.125rem 2rem;font-size:1rem}
  .btn-primary{background:var(--primary);color:var(--primary-foreground)}
  .btn-primary:hover{background:oklch(0.32 0.08 145 / 0.9)}
  .btn-primary.shadow{box-shadow:0 10px 25px oklch(0.32 0.08 145 / 0.25)}
  .btn-ghost{background:transparent;color:var(--foreground)}
  .btn-ghost:hover{background:var(--accent)}
  .btn-outline{background:var(--card);color:var(--foreground);border-color:oklch(0.45 0.02 90 / 0.45)}
  .btn-outline:hover{background:var(--accent);border-color:oklch(0.45 0.02 90 / 0.7)}
  .btn-invert{background:var(--primary-foreground);color:var(--primary)}
  .btn-invert:hover{background:oklch(1 0 0 / 0.9)}
  .btn-outline-invert{background:transparent;color:var(--primary-foreground);border-color:oklch(1 0 0 / 0.3)}
  .btn-outline-invert:hover{background:oklch(1 0 0 / 0.1)}

  /* ===== HEADER ===== */
  header.site{
    position:sticky;top:0;z-index:50;
    background:oklch(1 0 0 / 0.8);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
  }
  .nav-row{display:flex;align-items:center;justify-content:space-between;height:4rem}
  .brand{display:flex;align-items:center;gap:.5rem}
  .brand .mark{width:30px;height:30px;flex-shrink:0;display:block}
  .brand .name{font-weight:600;font-size:1.25rem;color:var(--foreground)}
  .nav-links{display:none;align-items:center;gap:2rem}
  .nav-links a{font-size:.875rem;color:var(--muted-foreground);transition:color .2s}
  .nav-links a:hover{color:var(--foreground)}
  .nav-actions{display:none;align-items:center;gap:.75rem}
  .menu-btn{display:inline-flex;padding:.625rem;margin-right:-.625rem;background:none;border:0;cursor:pointer;color:var(--foreground)}
  .menu-btn svg{width:1.5rem;height:1.5rem}
  .mobile-nav{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .28s ease, opacity .22s ease}
  .mobile-nav.open{grid-template-rows:1fr;opacity:1}
  .mobile-nav nav{display:flex;flex-direction:column;overflow:hidden;min-height:0}
  .mobile-nav nav > a:first-child{border-top:1px solid var(--border)}
  .mobile-nav nav > a{font-size:1.0625rem;font-weight:500;color:var(--foreground);padding:.9375rem .125rem;display:block;border-bottom:1px solid var(--border)}
  .mobile-nav nav > a:active{color:var(--primary)}
  .mobile-nav .acts{display:flex;flex-direction:column;gap:.5rem;padding:1rem 0 1.25rem}
  .mobile-nav .acts .btn{display:flex;align-items:center;justify-content:center;width:100%;height:3rem;font-size:.9375rem}
  .mobile-nav .acts .btn-primary{color:var(--primary-foreground)}
  .nav-scrim{
    position:fixed;inset:0;z-index:40;
    background:oklch(0.2 0.02 90 / 0.4);
    opacity:0;pointer-events:none;transition:opacity .25s ease;
  }
  body.menu-open .nav-scrim{opacity:1;pointer-events:auto}
  body.menu-open{overflow:hidden}
  body.menu-open .mobile-cta{transform:translateY(110%)}
  @media (min-width:768px){
    .nav-links{display:flex}
    .nav-actions{display:flex}
    .menu-btn{display:none}
    .mobile-nav{display:none !important}
  }

  /* ===== HERO ===== */
  .hero{position:relative;overflow:hidden;padding:2.5rem 0 3.5rem}
  @media (min-width:768px){.hero{padding:5rem 0 7rem}}
  .hero-center{text-align:center;max-width:56rem;margin:0 auto}
  h1.hero-title{
    font-size:clamp(2.1rem,8.5vw,4.5rem);
    font-weight:700;line-height:1.05;letter-spacing:-0.02em;
    color:var(--foreground);margin:0 0 1.5rem;
  }
  @media (min-width:1024px){h1.hero-title{font-size:clamp(3.5rem,5.5vw,4.5rem)}}
  h1.hero-title .hl{color:var(--primary)}
  .hero-sub{
    font-size:1.0625rem;color:var(--muted-foreground);
    max-width:42rem;margin:0 auto 2rem;line-height:1.6;
  }
  @media (min-width:768px){.hero-sub{font-size:1.25rem}}
  .hero-note{font-size:.9375rem;color:var(--muted-foreground);opacity:.85;margin:-1rem auto 2rem;max-width:36rem;line-height:1.6}
  .hero-cta{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
  @media (min-width:640px){.hero-cta{flex-direction:row}}

  .hero-media{margin-top:4rem}
  .media-stage{position:relative;display:flex;justify-content:center}
  image-slot{display:block;width:100%;height:auto}

  /* ===== PHONE MOCKUP ===== */
  .phone-wrap{position:relative;width:100%;max-width:340px;aspect-ratio:9/18.5;perspective:1200px}
  .phone{
    width:100%;height:100%;background:var(--foreground);border-radius:38px;padding:10px;position:relative;
    box-shadow:0 1px 0 oklch(0.4 0.02 90) inset,0 24px 60px oklch(0.2 0.02 90 / 0.25),0 4px 12px oklch(0.2 0.02 90 / 0.08);
    transition:transform .35s cubic-bezier(.22,1,.36,1);will-change:transform;
  }
  .phone::before{content:"";position:absolute;top:14px;left:50%;transform:translateX(-50%);width:90px;height:24px;background:var(--foreground);border-radius:14px;z-index:3}
  .phone-screen{width:100%;height:100%;background:linear-gradient(180deg,#fff 0%,oklch(0.97 0.008 90) 100%);border-radius:30px;overflow:hidden;position:relative;display:flex;flex-direction:column;box-shadow:inset 0 1px 0 oklch(1 0 0 / 0.8)}
  .status-bar{height:38px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 6px;font-size:11.5px;font-weight:600;color:var(--foreground);font-family:-apple-system,system-ui,sans-serif}
  .status-bar .right{display:flex;align-items:center;gap:5px}
  .status-bar svg{display:block}
  .chat-head{display:flex;align-items:center;gap:10px;padding:10px 16px 12px;border-bottom:1px solid var(--border);background:oklch(0.99 0.003 90 / 0.7)}
  .chat-head .av{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;position:relative}
  .chat-head .av::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:50%;background:#22c55e;border:2px solid #fff}
  .chat-head .who{flex:1;line-height:1.2}
  .chat-head .who b{display:block;font-size:13.5px;font-weight:600}
  .chat-head .who span{font-size:11px;color:var(--primary);font-weight:500}
  .chat-body{flex:1;padding:12px 12px 16px;display:flex;flex-direction:column;gap:6px;overflow:hidden;position:relative;background:radial-gradient(circle at 100% 0%,oklch(0.95 0.02 85 / 0.5),transparent 60%)}
  .msg{max-width:80%;padding:9px 13px;font-size:12.5px;line-height:1.4;border-radius:16px;opacity:0;transform:translateY(8px) scale(0.96);transition:opacity .35s ease,transform .45s cubic-bezier(.22,1,.36,1);word-wrap:break-word}
  .msg.client{align-self:flex-start;background:#fff;border:1px solid var(--border);border-bottom-left-radius:4px;color:var(--foreground)}
  .msg.bot{align-self:flex-end;background:var(--primary);color:#fff;border-bottom-right-radius:4px}
  .msg.show{opacity:1;transform:none}
  .msg .meta{display:block;font-size:9.5px;color:var(--muted-foreground);margin-top:3px;font-weight:500}
  .msg.bot .meta{color:oklch(0.85 0.04 145)}
  .typing{align-self:flex-end;background:var(--primary);border-radius:16px;border-bottom-right-radius:4px;padding:9px 13px;display:inline-flex;gap:3px;opacity:0;transform:translateY(8px) scale(0.96);transition:opacity .3s,transform .3s}
  .typing.show{opacity:1;transform:none}
  .typing span{width:5px;height:5px;border-radius:50%;background:#fff;animation:typingDot 1.1s ease-in-out infinite}
  .typing span:nth-child(2){animation-delay:.15s}
  .typing span:nth-child(3){animation-delay:.3s}
  @keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-4px);opacity:1}}
  .booking-card{align-self:stretch;margin-top:4px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(12px) scale(0.96);transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1);box-shadow:0 6px 20px oklch(0.2 0.02 90 / 0.08)}
  .booking-card.show{opacity:1;transform:none}
  .booking-card .top{display:flex;align-items:center;gap:8px}
  .booking-card .top .ic{width:30px;height:30px;border-radius:9px;background:oklch(0.32 0.08 145 / 0.1);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
  .booking-card .top b{font-size:12.5px;display:block;line-height:1.2}
  .booking-card .top span{font-size:10.5px;color:var(--muted-foreground);display:block}
  .booking-card .row{display:flex;justify-content:space-between;font-size:11.5px;color:var(--foreground);padding-top:6px;border-top:1px dashed var(--border)}
  .booking-card .row b{font-weight:600}
  .check-burst{position:absolute;left:50%;top:50%;width:74px;height:74px;transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;z-index:2;transition:opacity .25s ease,transform .55s cubic-bezier(.22,1.6,.36,1)}
  .check-burst.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .check-burst .cb-bg{width:100%;height:100%;border-radius:50%;background:var(--primary);display:grid;place-items:center;color:#fff;border:3px solid #fff;box-shadow:0 12px 28px oklch(0.32 0.08 145 / 0.35),0 0 0 8px oklch(0.32 0.08 145 / 0.12)}
  .check-burst .cb-bg svg{width:32px;height:32px}
  .check-burst .cb-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--primary);animation:ringPulse 1.4s ease-out infinite}
  .check-burst .cb-ring.r2{animation-delay:.4s}
  @keyframes ringPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.9);opacity:0}}
  .chat-body.bursting .msg,.chat-body.bursting .booking-card{opacity:.3;transform:scale(.985)}

  /* Floating notifications around phone */
  .notif-cloud{position:absolute;inset:0;pointer-events:none;z-index:2}
  .notif{position:absolute;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:10px 14px 10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 1px 2px oklch(0.2 0.02 90 / 0.04),0 14px 36px oklch(0.2 0.02 90 / 0.12);font-size:11.5px;line-height:1.25;opacity:0;animation:notifPop 9.8s ease-in-out infinite;white-space:nowrap}
  .notif .ic{width:28px;height:28px;border-radius:9px;background:oklch(0.32 0.08 145 / 0.1);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
  .notif .ic.warm{background:oklch(0.93 0.05 85);color:oklch(0.5 0.1 70)}
  .notif .ic.blue{background:oklch(0.92 0.05 220);color:oklch(0.45 0.14 230)}
  .notif b{display:block;color:var(--foreground);font-weight:600;font-size:12px}
  .notif span{color:var(--muted-foreground);font-size:10.5px}
  @keyframes notifPop{0%{opacity:0;transform:translate(var(--from-x,0),var(--from-y,16px)) scale(0.9)}12%,28%{opacity:1;transform:translate(0,0) scale(1)}40%,100%{opacity:0;transform:translate(var(--to-x,0),var(--to-y,-12px)) scale(0.95)}}
  .notif.n1{top:8%;left:-44%;animation-delay:.5s;--from-x:-14px;--to-y:-14px}
  .notif.n2{top:42%;right:-48%;animation-delay:3.2s;--from-x:14px;--to-y:-10px}
  .notif.n3{bottom:14%;left:-38%;animation-delay:5.8s;--from-x:-12px;--to-y:-14px}
  @media (max-width:719px){.notif{display:none}}

  /* ===== HERO MEDIA VARIANTS (Tweaks) ===== */
  .hero-media[data-style="panel"] .media-stage{
    background:var(--accent);border:1px solid var(--border);
    border-radius:var(--r-3xl);padding:3.5rem 1rem;
    box-shadow:0 25px 50px -12px oklch(0.32 0.08 145 / 0.1);
  }
  .hero-media[data-style="recortado"] .media-stage{
    background:var(--accent);border:1px solid var(--border);border-bottom:0;
    border-radius:var(--r-3xl) var(--r-3xl) 0 0;
    padding:3.5rem 1rem 0;overflow:hidden;
  }
  .hero-media[data-style="recortado"] .phone-wrap{max-width:380px;margin-bottom:-180px}
  .hero:has(.hero-media[data-style="recortado"]){padding-bottom:0}
  .hero-media[data-notifs="off"] .notif{display:none}

  /* ===== TRUST ROW (hero) ===== */
  .trust-row{margin-top:3.5rem;text-align:center}
  .trust-label{
    display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
    font-weight:600;color:var(--muted-foreground);margin-bottom:1.25rem;
  }
  .trust-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem 2.25rem}
  .trust-logos .logo{
    display:inline-flex;align-items:center;gap:.5rem;
    font-size:1.05rem;font-weight:600;
    color:oklch(0.45 0.02 90 / 0.55);transition:color .2s;
  }
  .trust-logos .logo:hover{color:var(--muted-foreground)}
  .trust-logos .logo svg{width:1.25rem;height:1.25rem}

  /* ===== SECTION HEADER ===== */
  .sec{padding:4.5rem 0}
  @media (min-width:768px){.sec{padding:7rem 0}}
  /* Anclajes: que el título caiga justo bajo el header. En desktop el padding superior
     es mayor, así que tiramos el destino un poco hacia arriba con scroll-margin negativo. */
  @media (min-width:768px){
    .sec{scroll-margin-top:-2rem}
    .cta{scroll-margin-top:-1.5rem}
  }
  .sec-head{text-align:center;max-width:48rem;margin:0 auto 2.5rem}
  .sec-head h2{font-size:clamp(1.6rem,5.5vw,2.75rem);font-weight:700;color:var(--foreground);margin:0 0 1.5rem;line-height:1.1}
  .sec-head p{font-size:1rem;color:var(--muted-foreground);margin:0}

  /* ===== FEATURES ===== */
  .features{background:var(--card)}
  .feat-grid{display:grid;grid-template-columns:1fr;gap:1.5rem}
  @media (min-width:768px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
  @media (min-width:1024px){.feat-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}
  .feat-grid-3{grid-template-columns:1fr}
  @media (min-width:768px){.feat-grid-3{grid-template-columns:repeat(3,1fr);gap:1.5rem}}
  .feat{
    padding:1.5rem;border-radius:var(--r-2xl);
    background:var(--accent);border:1px solid var(--border);
    transition:border-color .3s, box-shadow .3s, transform .3s;
  }
  .feat:hover{border-color:oklch(0.32 0.08 145 / 0.5);box-shadow:0 10px 25px oklch(0.32 0.08 145 / 0.05);transform:translateY(-3px)}
  .feat .ic{
    width:3rem;height:3rem;border-radius:var(--r-xl);
    background:var(--chip-bg, oklch(0.93 0.045 145));
    display:grid;place-items:center;margin-bottom:1.5rem;transition:background .3s;
  }
  .feat:hover .ic{background:var(--chip-bg-h, oklch(0.9 0.06 145))}
  .feat .ic svg{width:1.5rem;height:1.5rem;color:var(--chip-fg, var(--primary))}
  .feat:nth-child(1){--chip-bg:oklch(0.93 0.045 145);--chip-bg-h:oklch(0.9 0.06 145);--chip-fg:oklch(0.42 0.09 145)}
  .feat:nth-child(2){--chip-bg:oklch(0.95 0.05 70);--chip-bg-h:oklch(0.92 0.07 70);--chip-fg:oklch(0.5 0.1 70)}
  .feat:nth-child(3){--chip-bg:oklch(0.93 0.05 230);--chip-bg-h:oklch(0.9 0.07 230);--chip-fg:oklch(0.45 0.12 230)}
  .feat:nth-child(4){--chip-bg:oklch(0.93 0.045 30);--chip-bg-h:oklch(0.9 0.06 30);--chip-fg:oklch(0.48 0.12 30)}
  .feat:nth-child(5){--chip-bg:oklch(0.93 0.045 310);--chip-bg-h:oklch(0.9 0.06 310);--chip-fg:oklch(0.46 0.11 310)}
  .feat:nth-child(6){--chip-bg:oklch(0.94 0.05 190);--chip-bg-h:oklch(0.9 0.07 190);--chip-fg:oklch(0.45 0.1 190)}
  .feat h3{font-size:1.25rem;font-weight:600;color:var(--foreground);margin:0 0 .75rem}
  .feat p{color:var(--muted-foreground);line-height:1.6;margin:0}

  /* ===== HOW IT WORKS ===== */
  .how{background:var(--background)}
  .how-grid{display:grid;grid-template-columns:1fr;gap:3rem;max-width:72rem;margin:0 auto}
  @media (min-width:768px){.how-grid{grid-template-columns:repeat(3,1fr);gap:2rem}}
  .hstep{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
  .num-row{display:flex;align-items:center;gap:1rem;width:100%}
  .num-row .num{font-size:3.25rem;font-weight:700;line-height:1;letter-spacing:-0.02em;color:oklch(0.32 0.08 145 / 0.25)}
  .num-row::after{content:"";flex:1;border-top:2px dashed oklch(0.45 0.02 90 / 0.3)}
  .hstep .vis{height:205px;display:flex;align-items:center;width:100%;margin:1.25rem 0}
  .hstep .vis > *{transition:transform .35s cubic-bezier(.22,1,.36,1);transform:rotate(var(--rest,0deg))}
  .hstep:nth-child(1){--rest:-2deg;--from:-10deg}
  .hstep:nth-child(2){--rest:1.6deg;--from:9deg}
  .hstep:nth-child(3){--rest:-1.4deg;--from:-8deg}
  .hstep:hover .vis > *{transform:rotate(0deg)}
  .vis-photo{
    width:100%;max-width:270px;aspect-ratio:4/3;position:relative;
    border-radius:16px;overflow:hidden;border:5px solid #fff;
    box-shadow:0 16px 36px oklch(0.2 0.02 90 / 0.16);
  }
  .vis-photo image-slot{position:absolute;inset:0;width:100%;height:100%}
  .hstep h3{font-size:1.25rem;font-weight:700;margin:0 0 .5rem;color:var(--foreground)}
  .hstep p{font-size:.95rem;color:var(--muted-foreground);line-height:1.55;margin:0}
  .mini-card{
    width:100%;max-width:240px;
    background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:.25rem .875rem;
    box-shadow:0 16px 36px oklch(0.2 0.02 90 / 0.12);
  }
  .mini-card .mc-head{
    font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted-foreground);padding:.625rem 0 .5rem;
    border-bottom:1px dashed var(--border);
  }
  .mc-row{
    display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    padding:.55rem 0;border-bottom:1px dashed var(--border);font-size:.85rem;
  }
  .mc-row:last-child{border-bottom:0}
  .mc-row > span{color:var(--muted-foreground)}
  .mc-row b{display:inline-flex;align-items:center;gap:.375rem;font-weight:600;color:var(--foreground)}
  .mc-row b svg{width:.875rem;height:.875rem;color:var(--primary);flex-shrink:0}
  .mc-top{display:flex;align-items:center;gap:.625rem;padding:.625rem 0;border-bottom:1px dashed var(--border)}
  .mc-top .mc-ic{width:2rem;height:2rem;border-radius:9px;background:oklch(0.93 0.045 145);color:var(--primary);display:grid;place-items:center;flex-shrink:0}
  .mc-top .mc-ic svg{width:1rem;height:1rem}
  .mc-top b{display:block;font-size:.85rem;line-height:1.2}
  .mc-top span{display:block;font-size:.72rem;color:var(--muted-foreground);margin-top:.125rem}

  /* ===== PROBLEMA (lockscreen) ===== */
  .pain{
    background:
      radial-gradient(56rem 30rem at 85% -5%, oklch(0.34 0.05 155 / 0.55), transparent 62%),
      radial-gradient(40rem 26rem at 0% 110%, oklch(0.3 0.05 150 / 0.45), transparent 60%),
      oklch(0.25 0.035 152);
    overflow:hidden;
  }
  .pain-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
  @media (min-width:900px){.pain-grid{grid-template-columns:1.15fr 1fr;gap:4.5rem}}
  .pain-kicker{
    display:inline-block;white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:oklch(0.86 0.11 72);background:oklch(0.86 0.11 72 / 0.13);
    padding:.375rem .875rem;border-radius:999px;margin-bottom:1.5rem;
  }
  .pain-copy h2{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
    font-size:clamp(1.875rem,4.5vw,2.875rem);line-height:1.1;
    color:var(--background);margin:0 0 1.25rem;
  }
  .pain-copy h2 em{font-style:normal;color:oklch(0.86 0.11 72)}
  .sec-head h2 em{font-style:normal;color:var(--primary)}
  .pain-copy .lead{color:oklch(0.79 0.02 120);font-size:1.0625rem;line-height:1.65;margin:0;max-width:32rem}
  .pain-quote{
    margin:2.25rem 0 0;padding-left:1.125rem;border-left:3px solid oklch(0.86 0.11 72);
    font-family:'Bricolage Grotesque',sans-serif;font-weight:600;
    font-size:clamp(1.125rem,2.2vw,1.375rem);line-height:1.45;color:var(--background);max-width:28rem;
  }
  .pain-visual{display:flex;justify-content:center}
  .lock{
    width:min(23rem,100%);border-radius:1.75rem;padding:1.75rem 1.125rem 1.375rem;
    background:linear-gradient(165deg,oklch(0.31 0.045 160) 0%,oklch(0.215 0.03 150) 100%);
    border:1px solid oklch(1 0 0 / 0.1);
    box-shadow:0 30px 60px -15px oklch(0 0 0 / 0.45), inset 0 1px 0 oklch(1 0 0 / 0.08);
    display:flex;flex-direction:column;gap:.625rem;
  }
  .lock-clock{text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:2.75rem;font-weight:600;color:oklch(1 0 0 / 0.95);line-height:1}
  .lock-date{text-align:center;font-size:.8rem;color:oklch(1 0 0 / 0.55);margin-bottom:.875rem}
  .lnotif{
    display:flex;gap:.75rem;align-items:flex-start;
    background:oklch(1 0 0 / 0.1);border:1px solid oklch(1 0 0 / 0.07);
    border-radius:1.125rem;padding:.875rem .9375rem;
  }
  .lnotif .ic{width:2.375rem;height:2.375rem;border-radius:.625rem;display:grid;place-items:center;flex-shrink:0;color:#fff;position:relative}
  .lnotif .ic svg{width:1.25rem;height:1.25rem}
  .lnotif .ic.call{background:oklch(0.55 0.19 27)}
  .lnotif .ic.wa{background:oklch(0.6 0.15 150)}
  .lnotif .ic.cal{background:oklch(0.6 0.12 60)}
  .lnotif .ic .bdg{
    position:absolute;top:-7px;right:-7px;min-width:1.125rem;height:1.125rem;border-radius:999px;
    background:oklch(0.55 0.19 27);color:#fff;font-size:.65rem;font-weight:700;
    display:grid;place-items:center;padding:0 .25rem;border:2px solid oklch(0.26 0.035 155);
  }
  .lnotif .lt{flex:1;min-width:0}
  .lnotif .lt .row{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
  .lnotif .lt b{color:oklch(1 0 0 / 0.95);font-size:.875rem;font-weight:600}
  .lnotif .lt .when{font-size:.7rem;color:oklch(1 0 0 / 0.45);flex-shrink:0}
  .lnotif .lt .txt{display:block;color:oklch(1 0 0 / 0.62);font-size:.8125rem;line-height:1.45;margin-top:.125rem}
  .lock-hint{text-align:center;font-size:.8125rem;color:oklch(0.86 0.11 72);font-weight:600;margin-top:.5rem}
  @media (max-width:899px){.pain-quote{margin-bottom:.5rem}}

  /* kicker "La solución" */
  .sol-kicker{
    display:inline-block;white-space:nowrap;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--primary);background:oklch(0.32 0.08 145 / 0.1);
    padding:.375rem .875rem;border-radius:999px;margin-bottom:1.25rem;
  }

  /* ===== FAQ ===== */
  .faq{background:var(--background)}
  .faq .container{max-width:48rem}
  .faq-list{display:flex;flex-direction:column;gap:1rem}
  .qa{border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;background:var(--card)}
  .qa-q{
    width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
    padding:1.5rem;text-align:left;background:none;border:0;cursor:pointer;font-family:inherit;
  }
  .qa-q span{font-size:1.125rem;font-weight:500;color:var(--foreground)}
  .qa-q svg{width:1.25rem;height:1.25rem;color:var(--muted-foreground);flex-shrink:0;transition:transform .2s}
  .qa[data-open="true"] .qa-q svg{transform:rotate(180deg)}
  .qa-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
  .qa[data-open="true"] .qa-a{grid-template-rows:1fr}
  .qa-a-inner{overflow:hidden;min-height:0}
  .qa-a p{margin:0;padding:0 1.5rem 1.5rem;color:var(--muted-foreground);line-height:1.6}

  /* ===== CTA ===== */
  .cta{background:var(--primary);padding:4rem 0}
  @media (min-width:768px){.cta{padding:6rem 0}}
  .cta .container{max-width:56rem;text-align:center}
  .cta h2{font-size:clamp(1.875rem,5vw,3rem);font-weight:700;color:var(--primary-foreground);margin:0 0 1.5rem;line-height:1.1}
  .cta p{font-size:1.125rem;color:oklch(1 0 0 / 0.8);max-width:42rem;margin:0 auto 2.5rem;line-height:1.6}
  .cta-btns{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}
  @media (min-width:640px){.cta-btns{flex-direction:row}}
  .cta .fine{font-size:.875rem;color:oklch(1 0 0 / 0.6);margin-top:1.5rem}

  /* ===== CTA QUIZ ===== */
  .quiz{
    max-width:34rem;margin:0 auto;text-align:left;
    background:oklch(1 0 0 / 0.08);border:1px solid oklch(1 0 0 / 0.18);
    border-radius:var(--r-3xl);padding:1.75rem;
  }
  @media (min-width:640px){.quiz{padding:2.25rem}}
  .quiz-progress{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}
  .qp-step{font-size:.75rem;font-weight:600;color:oklch(1 0 0 / 0.7);white-space:nowrap;letter-spacing:.05em;text-transform:uppercase}
  .qp-bar{flex:1;height:.375rem;border-radius:9999px;background:oklch(1 0 0 / 0.15);overflow:hidden}
  .qp-bar span{display:block;height:100%;border-radius:inherit;background:var(--primary-foreground);width:20%;transition:width .3s ease}
  .quiz-q{font-size:1.375rem;font-weight:700;color:var(--primary-foreground);margin:0 0 1.25rem;line-height:1.2}
  .quiz-opts{display:flex;flex-direction:column;gap:.625rem;margin-bottom:1.5rem}
  .quiz-opt{
    display:flex;align-items:center;gap:.75rem;width:100%;
    padding:.95rem 1.25rem;border-radius:var(--r-xl);
    border:1px solid oklch(1 0 0 / 0.28);background:oklch(1 0 0 / 0.06);
    color:var(--primary-foreground);font-family:inherit;font-size:1rem;font-weight:500;
    cursor:pointer;text-align:left;
    transition:background .15s ease,border-color .15s ease,color .15s ease;
  }
  .quiz-opt:hover{background:oklch(1 0 0 / 0.14)}
  .quiz-opt .dot{
    width:1.125rem;height:1.125rem;border-radius:50%;flex-shrink:0;
    border:2px solid oklch(1 0 0 / 0.5);display:grid;place-items:center;
    transition:border-color .15s ease;
  }
  .quiz-opt .dot::after{content:"";width:.5rem;height:.5rem;border-radius:50%;background:transparent;transition:background .15s ease}
  .quiz-opt[aria-checked="true"]{background:var(--primary-foreground);color:var(--primary);border-color:var(--primary-foreground)}
  .quiz-opt[aria-checked="true"] .dot{border-color:var(--primary)}
  .quiz-opt[aria-checked="true"] .dot::after{background:var(--primary)}
  .quiz-next{width:100%}
  .quiz-next:disabled{opacity:.45;cursor:not-allowed}
  .quiz-step{display:none}
  .quiz-step.active{display:block}
  .quiz-q-block{animation:qfade .28s ease}
  @keyframes qfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){.quiz-q-block{animation:none}}
  .quiz-fields{display:flex;flex-direction:column;gap:.875rem;margin-bottom:1.25rem}
  .quiz-field label{display:block;font-size:.8125rem;font-weight:600;color:oklch(1 0 0 / 0.8);margin-bottom:.375rem}
  .quiz-field input{
    width:100%;height:3rem;padding:0 1rem;border-radius:var(--r-xl);
    border:1px solid oklch(1 0 0 / 0.28);background:oklch(1 0 0 / 0.08);
    color:var(--primary-foreground);font-family:inherit;font-size:1rem;
    transition:border-color .15s ease,background .15s ease;
  }
  .quiz-field input::placeholder{color:oklch(1 0 0 / 0.45)}
  .quiz-field input:focus{outline:none;border-color:oklch(1 0 0 / 0.6);background:oklch(1 0 0 / 0.12)}
  .quiz-consent{display:flex;align-items:flex-start;gap:.625rem;margin-bottom:1.25rem;font-size:.8125rem;color:oklch(1 0 0 / 0.78);line-height:1.45;text-align:left;cursor:pointer}
  .quiz-consent input{margin-top:.15rem;width:1.05rem;height:1.05rem;flex-shrink:0;accent-color:#fff}
  .quiz-consent a{text-decoration:underline}
  .quiz-err{color:#fecaca;font-size:.8125rem;margin:.5rem 0 0;min-height:1.1rem}
  .quiz-submit{width:100%}
  .quiz-back{display:block;margin:.75rem auto 0;background:none;border:0;color:oklch(1 0 0 / 0.6);font-family:inherit;font-size:.8125rem;font-weight:600;cursor:pointer;padding:.4rem .75rem}
  .quiz-back:hover{color:oklch(1 0 0 / 0.92)}
  .quiz-success{text-align:center}
  .quiz-success h3{font-size:1.5rem;font-weight:700;color:var(--primary-foreground);margin:0 0 .75rem}
  .quiz-success p{font-size:1rem;color:oklch(1 0 0 / 0.82);margin:0;line-height:1.55}
  .quiz-success{position:relative;opacity:0;transform:scale(.94)}
  .quiz-success.show{opacity:1;transform:none;transition:opacity .4s ease,transform .55s cubic-bezier(.22,1,.36,1)}
  .quiz-success .check{width:60px;height:60px;margin:0 auto 1rem;display:block}
  .quiz-success .check circle{stroke:var(--amber);stroke-width:3;fill:none;stroke-dasharray:176;stroke-dashoffset:176;animation:qs-c .5s .1s ease forwards}
  .quiz-success .check path{stroke:#fff;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:48;stroke-dashoffset:48;animation:qs-p .35s .5s ease forwards}
  @keyframes qs-c{to{stroke-dashoffset:0}}
  @keyframes qs-p{to{stroke-dashoffset:0}}
  .qs-confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
  .qs-confetti span{position:absolute;top:-14px;width:8px;height:13px;opacity:0;will-change:transform}
  @keyframes qs-fall{0%{opacity:1;transform:translateY(-14px) rotate(0)}100%{opacity:0;transform:translateY(380px) rotate(560deg)}}
  @media (prefers-reduced-motion:reduce){.quiz-success,.quiz-success.show{opacity:1;transform:none;transition:none}.quiz-success .check circle,.quiz-success .check path{animation:none;stroke-dashoffset:0}.qs-confetti{display:none}}

  /* ===== FOOTER ===== */
  .cmp-sec .sec-head{margin-bottom:0}
  .cmp{max-width:52rem;margin:2.5rem auto 0;border:1px solid var(--border);border-radius:1rem;overflow:hidden;background:var(--card);box-shadow:0 10px 30px oklch(0.2 0.02 90 / 0.05)}
  .cmp table{width:100%;border-collapse:collapse;font-size:.92rem}
  .cmp th,.cmp td{padding:.9rem .8rem;text-align:center;border-bottom:1px solid var(--border)}
  .cmp tr:last-child td{border-bottom:0}
  .cmp thead th{font-weight:700;font-size:.8125rem;color:var(--muted-foreground)}
  .cmp tbody th{text-align:left;font-weight:500;color:var(--foreground)}
  .cmp .col-h{background:oklch(0.32 0.08 145 / 0.06)}
  .cmp thead .col-h{color:var(--primary);font-size:.95rem}
  .cmp .yes{color:var(--primary);font-weight:700;font-size:1.05rem}
  .cmp .no{color:var(--muted-foreground)}
  .cmp .small{display:block;font-size:.68rem;color:var(--muted-foreground);font-weight:400;margin-top:.1rem}
  @media (max-width:560px){.cmp th,.cmp td{padding:.7rem .45rem;font-size:.8rem}.cmp tbody th{font-size:.76rem}.cmp thead th{font-size:.72rem}}
  /* Calculadora */
  .calc-block{max-width:40rem;margin:0 auto;text-align:center}
  .calc-h{font-size:clamp(1.4rem,5vw,1.9rem);font-weight:800;color:var(--foreground);margin:0;letter-spacing:-.01em}
  .calc-sub{color:var(--muted-foreground);margin:.6rem 0 0;font-size:1rem}
  .calc-card{margin:1.9rem auto 0;text-align:left;background:oklch(0.97 0.014 145);border:1px solid oklch(0.32 0.08 145 / 0.14);border-radius:1.5rem;padding:2.25rem 1.9rem;box-shadow:0 20px 50px oklch(0.32 0.08 145 / 0.09)}
  @media (min-width:768px){.calc-card{padding:2.5rem 2.5rem}}
  .calc-field{margin-bottom:2rem}
  .calc-field .lab{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:.85rem;font-size:.95rem;font-weight:600;color:var(--foreground)}
  .calc-field .val{color:var(--primary);font-weight:800;font-size:1.05rem;white-space:nowrap}
  .calc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:9999px;background:oklch(0.32 0.08 145 / 0.12);outline:none;cursor:pointer;margin:0}
  .calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:28px;height:28px;border-radius:50%;background:var(--primary);border:4px solid #fff;box-shadow:0 3px 8px oklch(0.2 0.02 90 / 0.25);cursor:grab}
  .calc-range::-webkit-slider-thumb:active{cursor:grabbing}
  .calc-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--primary);border:4px solid #fff;box-shadow:0 3px 8px oklch(0.2 0.02 90 / 0.25);cursor:grab}
  .calc-range:focus-visible{box-shadow:0 0 0 3px oklch(0.32 0.08 145 / 0.25)}
  .calc-result{text-align:center;border-top:1px solid oklch(0.32 0.08 145 / 0.13);padding-top:1.9rem;margin-top:.5rem}
  .calc-result .big{font-size:clamp(2.6rem,11vw,3.6rem);font-weight:800;color:var(--primary);line-height:1;letter-spacing:-.025em}
  .calc-pre{font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-foreground);font-weight:700;margin:0 0 .35rem}
  .calc-result .cap{font-size:.95rem;color:var(--muted-foreground);margin:.55rem 0 0}
  .calc-result .yr{font-size:.82rem;color:var(--muted-foreground);opacity:.85;margin:.35rem 0 0}
  .calc-actions{text-align:center;margin-top:1.9rem}
  .calc-note{font-size:.72rem;color:var(--muted-foreground);opacity:.7;text-align:center;margin:1.1rem 0 0}
  /* Ritmo de secciones: bandas alternadas beige / blanco */
  .sec-alt{background:var(--card)}
  .sec-alt .feat,.sec-alt .qa,.sec-alt .cmp{background:var(--background)}
  footer.site{background:var(--foreground);color:var(--background);padding:3.5rem 0 2rem;border-top:3px solid oklch(0.62 0.15 145)}
  .foot-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.25rem 1.5rem;margin-bottom:2.5rem}
  @media (min-width:768px){.foot-grid{grid-template-columns:1.9fr 1fr 1fr 1fr;gap:2rem}}
  .foot-brand{grid-column:span 2}
  @media (min-width:768px){.foot-brand{grid-column:auto;max-width:24rem}}
  .foot-brand .brand{margin-bottom:1rem}
  .foot-brand .brand .name{color:var(--background)}
  .foot-brand p{color:oklch(0.91 0.01 90 / 0.78);font-size:.875rem;margin:0 0 1.25rem;max-width:22rem}
  .foot-cta{display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;font-weight:600;color:var(--background);border:1px solid oklch(0.91 0.01 90 / 0.28);padding:.6rem 1.15rem;border-radius:9999px;transition:background .2s,border-color .2s,gap .2s}
  .foot-cta:hover{background:oklch(0.91 0.01 90 / 0.1);border-color:oklch(0.91 0.01 90 / 0.55);gap:.6rem}
  .foot-social{display:flex;gap:1rem}
  .foot-social a{color:oklch(0.91 0.01 90 / 0.6);transition:color .2s}
  .foot-social a:hover{color:var(--background)}
  .foot-social svg{width:1.25rem;height:1.25rem}
  .foot-col h4{font-weight:700;margin:0 0 1.1rem;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;color:oklch(0.78 0.05 145)}
  .foot-col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}
  .foot-col a{font-size:.875rem;color:oklch(0.91 0.01 90 / 0.85);transition:color .2s,transform .2s;display:inline-block}
  .foot-col a:hover{color:var(--background);transform:translateX(3px)}
  .foot-bot{
    padding-top:2rem;border-top:1px solid oklch(0.91 0.01 90 / 0.1);
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:1rem;
  }
  @media (min-width:768px){.foot-bot{flex-direction:row}}
  .foot-bot p{font-size:.875rem;color:oklch(0.91 0.01 90 / 0.72);margin:0}

  /* ===== MICRO-ANIMACIONES ===== */
  @media (prefers-reduced-motion: no-preference){
    /* Hero: entrada con desenfoque que se asienta */
    html.js-anim .hero-center > *, html.js-anim .hero-media{
      opacity:0;transform:translateY(22px);filter:blur(6px);
    }
    html.js-anim.loaded .hero-center > *, html.js-anim.loaded .hero-media{
      opacity:1;transform:none;filter:blur(0);
      transition:opacity .7s ease var(--d,0s), transform .85s cubic-bezier(.22,1,.36,1) var(--d,0s), filter .7s ease var(--d,0s);
    }
    html.js-anim.loaded .hero-sub{--d:.12s}
    html.js-anim.loaded .hero-note{--d:.2s}
    html.js-anim.loaded .hero-cta{--d:.3s}
    html.js-anim.loaded .hero-media{--d:.32s}
    /* Subrayado que se dibuja bajo "cuida tus clientes" */
    .hero-title .hl{
      background-image:linear-gradient(oklch(0.32 0.08 145 / 0.28),oklch(0.32 0.08 145 / 0.28));
      background-repeat:no-repeat;background-position:0 94%;background-size:0% .12em;
    }
    html.js-anim.loaded .hero-title .hl{
      background-size:100% .12em;
      transition:background-size .8s cubic-bezier(.22,1,.36,1) 1s;
    }
    /* Logos de confianza: cascada de desenfoque */
    html.js-anim .trust-logos .logo{opacity:0;filter:blur(6px);transform:translateY(8px)}
    html.js-anim .trust-row.in .trust-logos .logo{
      opacity:1;filter:blur(0);transform:none;
      transition:opacity .5s ease var(--d,0s), filter .5s ease var(--d,0s), transform .5s ease var(--d,0s);
    }
    /* Cabeceras de sección: asentado con micro-skew */
    html.js-anim .sec-head > *{opacity:0;transform:translateY(16px) skewY(1.2deg)}
    html.js-anim .sec-head.in > *{
      opacity:1;transform:none;
      transition:opacity .55s ease var(--d,0s), transform .65s cubic-bezier(.22,1,.36,1) var(--d,0s);
    }
    html.js-anim .sec-head.in p{--d:.12s}
    /* Funciones: tarjetas con pop + chip que rebota */
    html.js-anim .feat{opacity:0;transform:translateY(26px) scale(.97)}
    html.js-anim .feat.in{
      opacity:1;transform:none;
      transition:opacity .5s ease var(--d,0s), transform .65s cubic-bezier(.34,1.56,.64,1) var(--d,0s);
    }
    html.js-anim .feat .ic{transform:scale(0) rotate(-12deg)}
    html.js-anim .feat.in .ic{animation:chipPop .7s cubic-bezier(.34,1.8,.5,1) calc(var(--d,0s) + .18s) both}
    /* Cómo funciona: el visual "cae" sobre la mesa y se asienta */
    html.js-anim .hstep .num-row .num{opacity:0;transform:scale(.55) translateY(8px)}
    html.js-anim .hstep.in .num-row .num{
      opacity:1;transform:none;
      transition:opacity .4s ease var(--d,0s), transform .6s cubic-bezier(.34,1.7,.5,1) var(--d,0s);
    }
    html.js-anim .hstep .num-row::after{transform:scaleX(0);transform-origin:left}
    html.js-anim .hstep.in .num-row::after{
      transform:scaleX(1);
      transition:transform .9s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .15s);
    }
    html.js-anim .hstep .vis > *{opacity:0;transform:translateY(46px) rotate(var(--from,0deg)) scale(.94)}
    html.js-anim .hstep.in .vis > *{
      opacity:1;transform:rotate(var(--rest,0deg));
      transition:opacity .45s ease calc(var(--d,0s) + .1s), transform .85s cubic-bezier(.3,1.4,.4,1) calc(var(--d,0s) + .1s);
    }
    html.js-anim .hstep.in:hover .vis > *{transform:rotate(0deg)}
    html.js-anim .hstep h3, html.js-anim .hstep > p{opacity:0;transform:translateY(14px)}
    html.js-anim .hstep.in h3, html.js-anim .hstep.in > p{
      opacity:1;transform:none;
      transition:opacity .5s ease calc(var(--d,0s) + .3s), transform .6s cubic-bezier(.22,1,.36,1) calc(var(--d,0s) + .3s);
    }
    /* Opiniones + FAQ + Quiz */
    html.js-anim .pain-copy > *{opacity:0;transform:translateY(16px)}
    html.js-anim .pain.in .pain-copy > *{
      opacity:1;transform:none;
      transition:opacity .55s ease var(--d,0s), transform .65s cubic-bezier(.22,1,.36,1) var(--d,0s);
    }
    html.js-anim .pain.in .pain-copy h2{--d:.08s}
    html.js-anim .pain.in .pain-copy .lead{--d:.16s}
    html.js-anim .pain.in .pain-copy .pain-quote{--d:.4s}
    html.js-anim .lock{opacity:0;transform:translateY(26px) scale(.97)}
    html.js-anim .pain.in .lock{opacity:1;transform:none;transition:opacity .6s ease .15s, transform .75s cubic-bezier(.22,1,.36,1) .15s}
    html.js-anim .lnotif{opacity:0;transform:translateY(-12px) scale(.96)}
    html.js-anim .pain.in .lnotif{
      opacity:1;transform:none;
      transition:opacity .45s ease var(--d,0s), transform .55s cubic-bezier(.22,1.3,.36,1) var(--d,0s);
    }
    html.js-anim .pain.in .lnotif:nth-of-type(1){--d:.5s}
    html.js-anim .pain.in .lnotif:nth-of-type(2){--d:.68s}
    html.js-anim .pain.in .lnotif:nth-of-type(3){--d:.86s}
    html.js-anim .qa{opacity:0;transform:translateX(-16px)}
    html.js-anim .qa.in{opacity:1;transform:none;transition:opacity .45s ease var(--d,0s), transform .5s cubic-bezier(.22,1,.36,1) var(--d,0s)}
    html.js-anim .quiz .quiz-opt{opacity:0;transform:translateX(-14px)}
    html.js-anim .quiz.in .quiz-opt{opacity:1;transform:none;transition:opacity .4s ease var(--d,0s), transform .5s cubic-bezier(.22,1,.36,1) var(--d,0s), background .15s ease, border-color .15s ease, color .15s ease}
  }
  @keyframes chipPop{
    0%{transform:scale(0) rotate(-12deg)}
    60%{transform:scale(1.14) rotate(4deg)}
    100%{transform:scale(1) rotate(0deg)}
  }

  /* ===== MOBILE-FIRST EXTRAS ===== */
  @media (max-width:639px){
    .hero-cta .btn{width:100%}
    .phone-wrap{max-width:290px}
    .hero-media{margin-top:2.5rem}
    .trust-row{margin-top:2.5rem}
    .trust-logos{gap:.875rem 1.5rem}
    .trust-logos .logo{font-size:.95rem}
    .trust-logos .logo svg{width:1.125rem;height:1.125rem}
    .hstep .vis{height:auto;min-height:0;margin:1rem 0 1.25rem}
    .qa-q{padding:1.125rem 1.25rem}
    .qa-q span{font-size:1rem}
    .qa-a p{padding:0 1.25rem 1.25rem}
    .sec-head h2{margin-bottom:1rem}
    .feat .ic{margin-bottom:1rem}
    .feat h3{font-size:1.125rem}
    .testi-card{padding:1.5rem}
    .testi-quote-ic{width:2.5rem;height:2.5rem;top:1.25rem;right:1.25rem}
    footer.site{padding-bottom:7rem}
    .check-burst{width:64px;height:64px}
    .check-burst .cb-bg svg{width:28px;height:28px}
    .cta{padding:3.5rem 0}
    .cta p{font-size:1rem}
    .quiz{padding:1.375rem}
    .quiz-q{font-size:1.25rem}
    .hero{padding:2rem 0 3rem}
  }

  /* Sticky bottom CTA (solo móvil) */
  .mobile-cta{
    position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
    padding:.625rem .875rem calc(.625rem + env(safe-area-inset-bottom));
    background:oklch(1 0 0 / 0.92);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--border);
    box-shadow:0 -10px 30px oklch(0.2 0.02 90 / 0.1);
    transform:translateY(110%);transition:transform .3s ease;
  }
  .mobile-cta .btn{width:100%;height:3.25rem;padding:0 1.5rem;font-size:.9375rem;box-shadow:none}
  .mobile-cta.show{transform:translateY(0)}
  @media (max-width:639px){.mobile-cta{display:block}}

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }

  /* ===================================================================
     COMPONENTES — PÁGINAS DE OFICIO (compartido: /fontaneros, etc.)
     =================================================================== */
  .eyebrow{display:inline-flex;align-items:center;gap:.45rem;font-size:.8125rem;font-weight:600;color:var(--primary);background:oklch(0.93 0.045 145);border:1px solid oklch(0.32 0.08 145 / 0.18);padding:.4rem .85rem;border-radius:9999px;margin-bottom:1.5rem}
  .eyebrow svg{width:1rem;height:1rem}

  /* Escena disparadora bajo el hero */
  .scene{max-width:34rem;margin:2.75rem auto 0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.1rem 1.25rem;display:flex;align-items:center;gap:.95rem;text-align:left;box-shadow:0 14px 34px oklch(0.2 0.02 90 / 0.07)}
  .scene .clock{flex-shrink:0;width:3rem;height:3rem;border-radius:.8rem;background:var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--primary);font-weight:700;font-size:.78rem;line-height:1}
  .scene .clock svg{width:1.25rem;height:1.25rem;margin-bottom:.12rem}
  .scene p{margin:0;font-size:.95rem;line-height:1.45;color:var(--foreground)}
  .scene p b{font-weight:700}
  .scene p span{display:block;color:var(--muted-foreground);font-size:.85rem;margin-top:.2rem}

  /* ===== SPLIT: el mismo aviso, dos finales ===== */
  .split .container{max-width:64rem}
  .split-toggle{display:flex;gap:.3rem;background:var(--card);border:1px solid var(--border);border-radius:9999px;padding:.3rem;max-width:22rem;margin:0 auto 1.75rem}
  .split-toggle button{flex:1;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:.875rem;color:var(--muted-foreground);padding:.6rem .5rem;border-radius:9999px;cursor:pointer;transition:background .2s,color .2s}
  .split-toggle button[aria-pressed="true"]{background:var(--primary);color:var(--primary-foreground)}
  .split-toggle button.is-bad[aria-pressed="true"]{background:var(--foreground);color:var(--background)}
  .split-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
  @media (min-width:768px){.split-grid{grid-template-columns:1fr 1fr;gap:1.5rem}.split-toggle{display:none}}
  .split-col{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.6rem 1.4rem;position:relative}
  .split-col.good{border-color:oklch(0.32 0.08 145 / 0.35);box-shadow:0 16px 36px oklch(0.32 0.08 145 / 0.1)}
  .sec-alt .split-col{background:var(--background)}
  .split-col h3{margin:0 0 1.35rem;font-size:1.0625rem;font-weight:700;display:flex;align-items:center;gap:.5rem}
  .split-col.bad h3{color:var(--muted-foreground)}
  .split-col.good h3{color:var(--primary)}
  .split-col h3 .tag{margin-left:auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:.22rem .55rem;border-radius:9999px}
  .split-col.bad h3 .tag{background:var(--accent);color:var(--muted-foreground)}
  .split-col.good h3 .tag{background:oklch(0.93 0.045 145);color:var(--primary)}
  .tl{list-style:none;margin:0;padding:0;position:relative}
  .tl::before{content:"";position:absolute;left:.5rem;top:.45rem;bottom:3.2rem;width:2px;background:var(--border)}
  .split-col.good .tl::before{background:oklch(0.32 0.08 145 / 0.28)}
  .tl-step{position:relative;padding:0 0 1.15rem 1.9rem}
  .tl-dot{position:absolute;left:0;top:.1rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--card);border:2px solid var(--border)}
  .sec-alt .split-col .tl-dot{background:var(--background)}
  .split-col.good .tl-dot{border-color:var(--primary);background:var(--primary)}
  .tl-text{font-size:.9375rem;line-height:1.5;color:var(--foreground)}
  .tl-text b{font-weight:700}
  .tl-end{margin-top:.5rem;display:flex;align-items:center;gap:.55rem;font-weight:700;font-size:.95rem;padding:.75rem .95rem;border-radius:var(--r-lg)}
  .split-col.bad .tl-end{background:var(--accent);color:var(--foreground)}
  .split-col.good .tl-end{background:var(--primary);color:var(--primary-foreground)}
  .tl-end svg{width:1.2rem;height:1.2rem;flex-shrink:0}
  @media (max-width:767px){.split-grid[data-show="good"] .split-col.bad{display:none}.split-grid[data-show="bad"] .split-col.good{display:none}}

  /* ===== FICHA DE AVISO ===== */
  .ficha{max-width:34rem;margin:0 auto}
  .ficha-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 18px 42px oklch(0.2 0.02 90 / 0.08)}
  .ficha-head{display:flex;align-items:center;gap:.6rem;padding:1rem 1.25rem;background:var(--primary);color:var(--primary-foreground)}
  .ficha-head .av{width:2.1rem;height:2.1rem;border-radius:.55rem;background:oklch(1 0 0 / 0.18);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
  .ficha-head b{font-size:.95rem;font-weight:700}
  .ficha-head .live{margin-left:auto;font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:.4rem;opacity:.92;white-space:nowrap}
  .ficha-head .live i{width:.5rem;height:.5rem;border-radius:50%;background:#fff;display:inline-block;animation:fpulse 1.6s ease-in-out infinite}
  @keyframes fpulse{0%,100%{opacity:.3}50%{opacity:1}}
  .ficha-row{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1.25rem;border-top:1px solid var(--border)}
  .ficha-row .lbl{font-size:.78rem;font-weight:600;color:var(--muted-foreground);width:7rem;flex-shrink:0;padding-top:.12rem}
  .ficha-row .val{font-size:.9375rem;color:var(--foreground);font-weight:500;flex:1}
  .ficha-row .val .chip{display:inline-block;font-size:.78rem;font-weight:600;padding:.16rem .55rem;border-radius:9999px;background:oklch(0.93 0.045 145);color:var(--primary)}
  .ficha-row .val .chip.urg{background:oklch(0.92 0.06 40);color:oklch(0.46 0.16 35)}
  .ficha-check{color:var(--primary);flex-shrink:0;width:1.15rem;height:1.15rem;margin-top:.12rem}
  .ficha-foot{padding:.9rem 1.25rem;background:var(--accent);font-size:.82rem;color:var(--muted-foreground);text-align:center;line-height:1.4}

  /* ===== AVISOS GRID ===== */
  .aviso-grid{display:grid;grid-template-columns:1fr;gap:1rem}
  @media (min-width:640px){.aviso-grid{grid-template-columns:1fr 1fr}}
  @media (min-width:1024px){.aviso-grid{grid-template-columns:repeat(4,1fr);gap:1.25rem}}
  .aviso{background:var(--card);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.6rem 1.4rem}
  .sec-alt .aviso{background:var(--background)}
  .aviso .ic{width:2.85rem;height:2.85rem;border-radius:.8rem;background:oklch(0.93 0.045 145);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem}
  .aviso .ic svg{width:1.5rem;height:1.5rem}
  .aviso h3{margin:0 0 .5rem;font-size:1.0625rem;font-weight:700;color:var(--foreground)}
  .aviso p{margin:0;font-size:.9rem;line-height:1.55;color:var(--muted-foreground)}

  /* ===== Reveal de los componentes de oficio ===== */
  @media (prefers-reduced-motion: no-preference){
    html.js-anim .scene{opacity:0;transform:translateY(16px)}
    html.js-anim.loaded .scene{opacity:1;transform:none;transition:opacity .6s ease .42s,transform .7s cubic-bezier(.22,1,.36,1) .42s}
    html.js-anim .split-col{opacity:0;transform:translateY(26px) scale(.985)}
    html.js-anim .split.in .split-col{opacity:1;transform:none;transition:opacity .55s ease var(--d,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--d,0s)}
    html.js-anim .ficha-card{opacity:0;transform:translateY(26px) scale(.98)}
    html.js-anim .ficha-sec.in .ficha-card{opacity:1;transform:none;transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
    html.js-anim .aviso{opacity:0;transform:translateY(22px) scale(.97)}
    html.js-anim .avisos-sec.in .aviso{opacity:1;transform:none;transition:opacity .5s ease var(--d,0s),transform .65s cubic-bezier(.34,1.56,.64,1) var(--d,0s)}
  }