/* ============ Tokens ============ */
    :root{
      --ink:#20202b; --muted:#5b5765; --cream:#fbfaf7; --sand:#f0eee9; --lav:#ebe7ff;
      --violet:#5a3fd4; --violet-d:#4630b0; --lime:#d6f36e; --line:#e3dfd8; --wa:#137a3f;
    }

    /* ============ Base ============ */
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
    body{margin:0;background:var(--cream);color:var(--ink);font-family:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
    a{color:inherit;text-decoration:none}
    h1,h2,h3{margin:0;font-weight:800}
    h2{font-size:clamp(26px,2.9vw,38px);line-height:1.12;letter-spacing:-.03em}
    :focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
    .on-dark :focus-visible{outline-color:var(--lime)}
    .wrap{max-width:1200px;margin:0 auto;padding:0 40px}
    .topbar{padding:11px 0;background:var(--ink);color:#cfccd9;text-align:center;font-size:13px;font-weight:600}
    .topbar b{color:var(--lime);font-weight:800}
    .topbar .sep{margin:0 10px;color:#54506354}
    .skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px}
    .skip:focus{top:12px}
    .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

    /* ============ Botones ============ */
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border:1.5px solid transparent;border-radius:12px;font:inherit;font-size:15px;font-weight:800;line-height:1.2;cursor:pointer;transition:background .2s,transform .15s}
    .btn:hover{transform:translateY(-1px)}
    .btn-wa{background:var(--wa);color:#fff}
    .btn-wa:hover{background:#0f6634}
    .btn-violet{background:var(--violet);color:#fff}
    .btn-violet:hover{background:var(--violet-d)}
    .btn-dark{background:var(--ink);color:#fff}
    .btn-light{background:#fff;border-color:#d3cec7}
    .btn-lime{background:var(--lime);color:var(--ink)}

    /* ============ Header ============ */
    .head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:84px}
    .logo{display:flex;align-items:center;gap:7px;font-size:26px;font-weight:800;letter-spacing:-.055em}
    .logo .ast{width:26px;height:26px;color:var(--violet);stroke-width:3.4;transition:transform .5s ease}
    .logo:hover .ast{transform:rotate(45deg)}
    .logo em{font-style:normal;color:var(--violet)}
    .ast{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:butt}
    .nav{display:flex;gap:30px;font-size:15px;font-weight:600}
    .nav a:hover{color:var(--violet)}
    .nav .nav-wa{display:none}
    .head-actions{display:flex;align-items:center;gap:10px}
    .menu-btn{display:none;width:44px;height:44px;place-items:center;border:1.5px solid #d3cec7;border-radius:12px;background:#fff;color:var(--ink);cursor:pointer}
    .menu-btn .i-close{display:none}
    .menu-btn[aria-expanded="true"] .i-close{display:block}
    .menu-btn[aria-expanded="true"] .i-menu{display:none}

    /* ============ Hero ============ */
    .hero{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;padding:28px 0 56px}
    .hero{overflow-x:clip}
    .eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:20px;padding:9px 16px;border-radius:30px;background:#efecfb;font-size:13px;font-weight:800;letter-spacing:.01em;color:#4f38c4}
    .eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--violet)}
    .hero h1{font-size:clamp(40px,4.9vw,64px);line-height:1.04;letter-spacing:-.045em;margin-bottom:22px}
    .hero h1 .h-b{display:block;color:var(--violet)}
    .lead{max-width:34em;margin:0 0 30px;font-size:19px;line-height:1.55;color:#45404c}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px}
    .fineprint{margin:18px 0 0;font-size:13px;color:var(--muted);max-width:40em}

    .chips{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none}
    .chips li{display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:30px;background:#f0eef8;font-size:14px;font-weight:700;color:#413950}
    .chips .ico{width:15px;height:15px;stroke-width:3;color:var(--violet)}

    .hero-art{position:relative;isolation:isolate;min-height:600px}
    .slide{position:absolute;inset:0 0 48px;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
    .slide.active{opacity:1;visibility:visible}
    .hero-ctrl{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:6px}
    .hero-dots{display:flex;align-items:center}
    .hero-dots button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer}
    .hero-dots button::before{content:"";width:10px;height:10px;border-radius:999px;background:#cfc8e8;transition:width .25s,background .25s}
    .hero-dots button[aria-current="true"]::before{width:26px;background:var(--violet)}
    .hero-toggle{display:grid;place-items:center;width:32px;height:32px;margin-left:8px;padding:0;border:1.5px solid #d3cec7;border-radius:50%;background:#fff;color:var(--ink);cursor:pointer}
    .hero-toggle .ico{width:14px;height:14px}
    .hero-toggle .i-play{display:none}
    .hero-toggle[aria-pressed="true"] .i-play{display:block}
    .hero-toggle[aria-pressed="true"] .i-pause{display:none}

    /* Escena 1: tienda + panel (gráfico original) */
    .stage{position:absolute;left:50%;top:50%;width:560px;height:560px;margin:-280px 0 0 -280px;transform:scale(var(--s,1))}
    .blob{position:absolute;inset:34px 4px 4px 30px;border-radius:47% 53% 45% 55%/41% 49% 51% 59%;background:#eae5fd;transform:rotate(-8deg)}
    .blob::after{content:"";position:absolute;right:-8px;top:14px;width:120px;height:120px;border-radius:50%;background:#d9f17b}
    .spark{position:absolute;z-index:1;fill:none;stroke:currentColor;stroke-width:3;color:var(--violet)}
    .spark.fill{fill:currentColor;stroke:none}
    .s1{top:42px;left:50px;width:30px;height:30px}
    .s2{left:34px;bottom:46px;width:30px;height:30px}
    .shop-window{position:absolute;top:34px;left:64px;z-index:2;width:420px;height:506px;overflow:hidden;border:1px solid #e2dff0;border-radius:21px;background:#fff;box-shadow:0 29px 65px #5140ae32;transform:rotate(-3deg)}
    .browserbar{display:flex;align-items:center;gap:4px;height:28px;padding:0 12px;border-bottom:1px solid #eee;background:#f8f7fc}
    .dot{width:5px;height:5px;border-radius:50%;background:#dfdbe8}
    .address{width:45%;height:14px;margin:auto;border:1px solid #efedf3;border-radius:4px;background:#fff;font-size:8px;line-height:12px;text-align:center;color:#8f8a9b}
    .shop-head{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #f0eee8}
    .shop-brand{font-size:25px;font-weight:800;letter-spacing:-.07em;color:#4b4441}
    .shop-links{display:flex;align-items:center;gap:12px;font-size:11px;color:#706763}
    .shop-hero{position:relative;display:flex;align-items:center;justify-content:space-between;height:190px;padding:25px 33px;overflow:hidden;background:#e8bca5}
    .shop-hero::before{content:"";position:absolute;left:-55px;top:-49px;width:230px;height:230px;border:1px solid #ffffff66;border-radius:50%}
    .shop-caption{position:relative;z-index:1}
    .shop-caption small{font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#6e4f46}
    .cap-title{margin:11px 0;font-size:25px;font-weight:700;line-height:1.1;letter-spacing:-.055em;color:#403a38}
    .shop-caption>span{display:inline-block;padding:8px 12px;border-radius:3px;background:#403a38;color:#fff;font-size:9px}
    .vase{position:relative;width:110px;height:117px;margin:58px 5px 0 0;border-radius:30% 30% 42% 42%/18% 18% 50% 50%;background:linear-gradient(95deg,#9b6653,#c08b70 38%,#a16954 80%);box-shadow:17px 22px 16px #915a4d55}
    .vase::before{content:"";position:absolute;top:-16px;left:29px;width:52px;height:23px;border-radius:8px 8px 1px 1px;background:#a56e5a}
    .vase::after{content:"";position:absolute;left:56px;top:-95px;width:5px;height:95px;background:#565b42;transform:rotate(-12deg);box-shadow:24px -15px 0 -1px #50543c,-17px -6px 0 -1px #5c614c}
    .leaf{position:absolute;top:-85px;left:27px;width:34px;height:16px;border-radius:100% 0 100% 0;background:#7d815b;transform:rotate(18deg);box-shadow:42px 7px 0 #858a61,30px -37px 0 #767b55}
    .shop-products{padding:17px 22px}
    .shop-products>b{font-size:17px;font-weight:700}
    .mini-products{display:flex;gap:9px;margin-top:12px}
    .mini-product{position:relative;width:33%;height:105px;overflow:hidden;border-radius:6px}
    .mini-product.one{background:#e6ddcf}
    .mini-product.two{background:#d6d9c7}
    .mini-product.three{background:#ead8c7}
    .mini-product i{position:absolute;left:50%;bottom:11px;display:block;width:39px;height:61px;border-radius:14px 14px 19px 19px;background:linear-gradient(90deg,#985d46,#bd8869 52%,#995e47);box-shadow:5px 6px 5px #0002;transform:translateX(-50%)}
    .mini-product.two i{width:27px;height:65px;border-radius:4px;background:linear-gradient(90deg,#e2dbbc,#fff7d9,#c7bd9e)}
    .mini-product.two i::before{content:"";position:absolute;top:-9px;left:6px;width:15px;height:9px;background:#cabf9d}
    .mini-product.three i{width:52px;height:43px;border-radius:50% 50% 23% 23%;background:linear-gradient(90deg,#9a6d50,#c19166,#9a6d50)}
    .product-names{display:flex;gap:9px;margin-top:7px;font-size:11px;color:#5d5653}
    .product-names span{width:33%}
    .product-names strong{display:block;margin-top:3px;color:#3d3735}
    .edit-card{position:absolute;right:-6px;bottom:44px;z-index:3;width:260px;padding:15px;border:1px solid #efedf7;border-radius:16px;background:#fff;box-shadow:0 18px 48px #45406936;transform:rotate(4deg)}
    .edit-title{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:800}
    .edit-title i{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:#eee9ff;color:var(--violet)}
    .edit-title .ico{width:13px;height:13px}
    .edit-row{display:flex;align-items:center;gap:11px;margin-top:13px}
    .edit-img{position:relative;flex:none;width:51px;height:51px;border-radius:7px;background:#e6ddcf}
    .edit-img::after{content:"";position:absolute;bottom:7px;left:18px;width:17px;height:31px;border-radius:6px 6px 9px 9px;background:#ac7256}
    .edit-text{font-size:12px;line-height:1.5;color:#504a53}
    .edit-text b{display:block;color:#222}
    .publish{display:flex;justify-content:space-between;margin-top:12px;padding:7px 10px;border-radius:8px;background:#eaf8d4;font-size:11px;font-weight:800;color:#3a7a30}
    .publish .ico{width:11px;height:11px;stroke-width:3.2;vertical-align:-1px}
    .float-note{position:absolute;left:24px;bottom:104px;z-index:3;padding:13px 16px;border-radius:12px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;box-shadow:0 12px 25px #20202b33;transform:rotate(-6deg)}
    .float-note span{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--lime)}

    /* Escena 2: pedido por WhatsApp */
    .wa-scene{position:absolute;inset:0;isolation:isolate;display:grid;place-items:center}
    .wa-scene::before{content:"";position:absolute;inset:24px 0 0 36px;z-index:-2;border-radius:40px;background:var(--lav)}
    .wa-scene::after{content:"";position:absolute;top:4px;right:8px;z-index:-1;width:110px;height:110px;border-radius:50%;background:var(--lime)}
    .phone{width:300px;overflow:hidden;border:8px solid var(--ink);border-radius:36px;background:#fff;box-shadow:0 30px 60px rgba(50,35,120,.22);transform:rotate(-2deg)}
    .wa-top{display:flex;align-items:center;gap:10px;padding:14px 16px;background:#0f5f37;color:#fff}
    .wa-av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#e8bca5;color:#4a3630;font-weight:800}
    .wa-top b{display:block;font-size:14px;line-height:1.2}
    .wa-top small{font-size:12px;opacity:.9}
    .wa-body{display:flex;flex-direction:column;gap:8px;min-height:370px;padding:16px 12px 20px;background:#ece5dd}
    .bubble{max-width:90%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.45;box-shadow:0 1px 1px rgba(0,0,0,.08)}
    .bubble b{display:block;margin-bottom:3px}
    .bubble time{display:block;margin-top:3px;text-align:right;font-size:11px;color:#666}
    .bubble.in{align-self:flex-start;background:#fff;border-top-left-radius:3px}
    .bubble.out{align-self:flex-end;background:#d9fdd3;border-top-right-radius:3px}
    .slide.active .bubble{animation:pop .45s both}
    .slide.active .bubble:nth-child(1){animation-delay:.5s}
    .slide.active .bubble:nth-child(2){animation-delay:1.2s}
    .slide.active .bubble:nth-child(3){animation-delay:2.1s}
    @keyframes pop{from{opacity:0;transform:translateY(10px)}}
    .hero-chip{position:absolute;left:-4px;bottom:44px;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:#fff;box-shadow:0 14px 34px rgba(50,35,120,.18);font-size:14px;font-weight:800;line-height:1.3}
    .hero-chip small{display:block;font-size:13px;font-weight:600;color:var(--muted)}
    .hero-chip .tick{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--lime)}

    /* ============ Franja de ventajas ============ */
    .benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:26px 0;list-style:none;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .benefits li{display:flex;align-items:flex-start;gap:14px}
    .benefits .ico{width:26px;height:26px;margin-top:2px;color:var(--violet)}
    .benefits b{display:block;font-size:16px;line-height:1.3}
    .benefits span{font-size:14px;line-height:1.4;color:var(--muted)}

    /* ============ Secciones ============ */
    .sec{padding:64px 0}
    .sec-head{max-width:760px;margin:0 auto 30px;text-align:center}
    .sec-head h2{margin-bottom:14px}
    .sec-head p{margin:0 auto;font-size:16px;color:var(--muted)}
    .sec-head .kicker{display:block;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4f38c4}
    .split-head{display:grid;grid-template-columns:1.35fr 1fr;gap:40px;align-items:end;margin-bottom:34px;text-align:left}
    .split-head .kicker{display:block;margin-bottom:12px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4f38c4}
    .split-head h2{margin:0}
    .split-head h2 .h-b{display:block;color:var(--violet)}
    .split-head p{margin:0;padding-bottom:4px;font-size:16px;line-height:1.55;color:var(--muted)}
    @media (max-width:960px){.split-head{grid-template-columns:1fr;gap:14px;align-items:start}}

    /* ============ Showcase (mockups de tienda) ============ */
    .showcase{background:var(--sand)}
    .showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
    .legend{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:32px 0 0;padding:20px 0 0;list-style:none;border-top:1px solid var(--line)}
    .paybar{padding:26px 0;background:var(--lav)}
    .paybar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 16px}
    .paybar span:first-child{font-size:14px;font-weight:800;color:#413950;margin-right:4px}
    .pay-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:30px;background:#fff;font-size:13px;font-weight:700;color:#413950;box-shadow:0 1px 0 #ffffffcc inset}
    .pay-chip .ico{width:15px;height:15px;color:var(--violet)}
    .legend li{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;color:#514c58}
    .legend .ico{width:17px;height:17px;color:var(--violet)}
    .mock{overflow:hidden;border:1px solid #e4dfd8;border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(52,39,28,.08)}
    .mock-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #eee;background:#f7f6f4;font-size:12px;color:#6b6560}
    .mock-bar i{width:9px;height:9px;border-radius:50%;background:#dcd6d0}
    .mock-bar span{margin-left:10px;padding:3px 10px;border:1px solid #ece8e3;border-radius:6px;background:#fff}
    .mock-nav{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid #f1eee9;font-size:13px;color:#5a5250}
    .mock-nav b{font-size:24px;letter-spacing:-.05em;color:#4b4441}
    .mock-title{padding:26px 24px;background:#e4c4b3}
    .mock-title small{font-size:12px;font-weight:600;color:#6b554b}
    .mock-title div{margin:8px 0;font-size:32px;font-weight:800;line-height:1.08;letter-spacing:-.045em;color:#443633}
    .mock-title p{margin:0;font-size:13px;color:#6b554b}
    .mock-tabs{display:flex;gap:18px;padding:16px 24px 4px;font-size:13px;font-weight:800}
    .mock-tabs span{font-weight:500;color:#6d6562}
    .mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:14px 24px 24px}
    .mock-item b{display:block;margin-top:8px;font-size:14px}
    .mock-item small{font-size:13px;color:#5a5250}
    .mock-img{position:relative;height:150px;overflow:hidden;border-radius:6px}
    .crumb{padding:16px 24px;font-size:12px;color:#6d6664}
    .prod{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;padding:0 24px 24px}
    .prod-img{position:relative;height:300px;overflow:hidden;border-radius:6px}
    .prod-img .jar-art{bottom:40px;transform:translateX(-50%) scale(1.8);transform-origin:bottom center}
    .thumbs{display:flex;gap:8px;margin-top:9px}
    .thumbs>div{position:relative;width:56px;height:48px;overflow:hidden;border-radius:4px}
    .thumbs .jar-art,.thumbs .candle-art,.thumbs .bowl-art{bottom:3px;transform:translateX(-50%) scale(.34);transform-origin:bottom center}
    .prod-info small{font-size:12px;font-weight:600;color:#6b5a54}
    .prod-name{margin:6px 0;font-size:32px;font-weight:800;line-height:1.05;letter-spacing:-.045em;color:#443633}
    .prod-price{font-size:19px;font-weight:800}
    .prod-info p{margin:12px 0;font-size:13px;line-height:1.6;color:#5a5250}
    .opt{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid #eee7e2;font-size:13px;color:#6d6562}
    .opt b{color:#48413e}
    .wa-order{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:8px;padding:12px 10px;border-radius:8px;background:var(--wa);color:#fff;font-size:13px;font-weight:800}
    .wa-order .ico{width:16px;height:16px}
    .related{padding:18px 24px 24px;border-top:1px solid #f1eee9}
    .related b{font-size:15px}
    .rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
    .rel-grid .mock-img{height:110px}
    .rel-grid .candle-art{transform:translateX(-50%) scale(.8);transform-origin:bottom center}
    .rel-grid .bowl-art{transform:translateX(-50%) scale(.8);transform-origin:bottom center}
    .rel-grid .jar-art{transform:translateX(-50%) scale(.85);transform-origin:bottom center}
    .prod-info .note{display:block;margin-top:9px;font-weight:400;line-height:1.4}

    /* Ilustraciones de producto en CSS */
    .clay{background:radial-gradient(circle at 55% 110%,#c29f86 0,#dcc4ae 48%,#e8ddd0 100%)}
    .sage{background:radial-gradient(circle at 50% 110%,#adb39b,#d6dac7 55%,#e8e9dc)}
    .sand{background:radial-gradient(circle at 50% 110%,#c9b190,#e8d7c0 60%,#f1e8dc)}
    .rose{background:radial-gradient(circle at 50% 110%,#caa8a3,#e9d4c8 60%,#f3e6db)}
    .jar-art{position:absolute;left:50%;bottom:13px;display:block;width:68px;height:90px;transform:translateX(-50%);border-radius:24% 24% 44% 44%/15% 15% 36% 36%;background:linear-gradient(90deg,#8c5b47,#c18d70 39%,#b17a5d 66%,#885542);box-shadow:12px 10px 12px #76594738,inset -6px 0 8px #69483733}
    .jar-art::before{content:"";position:absolute;top:-15px;left:19px;width:30px;height:18px;border-radius:4px 4px 0 0;background:#ac765b}
    .jar-art::after{content:"";position:absolute;left:32px;top:-70px;width:3px;height:73px;background:#59644a;transform:rotate(13deg);box-shadow:-11px -8px 0 -1px #566344,13px -8px 0 -1px #6e774e}
    .rose-jar{background:linear-gradient(90deg,#ad776c,#ddab91,#b38278)}
    .candle-art{position:absolute;left:50%;bottom:14px;display:block;width:49px;height:83px;transform:translateX(-50%);border-radius:5px 5px 10px 10px;background:linear-gradient(90deg,#d2caad,#fff8dc 47%,#c6bd9e);box-shadow:8px 7px 11px #695a4535}
    .candle-art::before{content:"";position:absolute;top:-9px;left:7px;width:35px;height:10px;border-radius:3px;background:#b6a98b}
    .bowl-art{position:absolute;left:50%;bottom:21px;display:block;width:99px;height:51px;transform:translateX(-50%);border-radius:6% 6% 44% 44%/6% 6% 90% 90%;background:linear-gradient(90deg,#956d51,#c4946f 45%,#9f7355);box-shadow:8px 10px 11px #63503a44}
    .bowl-art::before{content:"";position:absolute;top:-7px;width:99px;height:15px;border-radius:50%;background:#b58562;box-shadow:inset 0 3px 4px #6c4d3790}
    .cake-art{position:relative;display:block;width:115px;height:70px;border-radius:9px 9px 17px 17px;background:linear-gradient(#f8f1e4 0 28%,#cc9e80 28% 55%,#f5dfce 55%);box-shadow:10px 15px 15px #6e574526}
    .cake-art::before{content:"";position:absolute;left:-5px;top:-13px;width:125px;height:18px;border-radius:60% 60% 25% 25%;background:#f4e6da;box-shadow:0 -8px 0 -3px #b66f79}
    .cake-art::after{content:"";position:absolute;left:53px;top:-32px;width:9px;height:21px;border-radius:50% 50% 3px 3px;background:#9e986d}
    .ring-art{position:relative;display:block;width:105px;height:105px;border:19px solid #c79f67;border-radius:50%;transform:rotate(-24deg);box-shadow:inset 5px 2px 8px #81623e77,8px 14px 15px #51415a33}
    .ring-art::before{content:"";position:absolute;left:6px;top:-55px;width:56px;height:44px;border:6px solid #c79f67;background:linear-gradient(135deg,#fff,#ddd3eb 45%,#fff);transform:rotate(24deg);clip-path:polygon(50% 0,100% 38%,85% 100%,15% 100%,0 38%)}

    /* ============ Cómo funciona ============ */
    .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none;counter-reset:step}
    .steps li{counter-increment:step;padding:28px;border:1px solid var(--line);border-radius:20px;background:#fff}
    .steps li::before{content:counter(step);display:grid;place-items:center;width:40px;height:40px;margin-bottom:20px;border-radius:50%;background:var(--violet);color:#fff;font-size:18px;font-weight:800}
    .steps h3{margin-bottom:8px;font-size:21px;line-height:1.2;letter-spacing:-.03em}
    .steps p{margin:0;font-size:16px;color:var(--muted)}

    /* ============ Panel de administración ============ */
    .feature{background:#211f2b;color:#fff}
    .feature-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center}
    .feature h2{margin-bottom:16px}
    .feature-copy p{margin:0;font-size:18px;color:#d5d1e0}
    .kicker-lime{display:block;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--lime)}
    .ticks{display:grid;gap:14px;margin:26px 0 30px;padding:0;list-style:none}
    .ticks li{display:flex;align-items:center;gap:12px;font-size:16px}
    .ticks .ico{color:var(--lime)}
    .dash{display:grid;grid-template-columns:150px 1fr;min-height:380px;overflow:hidden;border:6px solid #44414e;border-radius:18px;background:#f7f6fb;color:#2b2934;box-shadow:0 30px 70px rgba(0,0,0,.35)}
    .dash-side{padding:18px 10px;border-right:1px solid #e7e4ec;background:#fff}
    .dash-brand{margin:0 8px 22px;font-size:15px;font-weight:800;letter-spacing:-.03em;color:var(--violet)}
    .dash-side div{padding:10px;border-radius:8px;font-size:13px;color:#77727f}
    .dash-side .sel{background:#efecff;font-weight:800;color:var(--violet)}
    .dash-main{padding:22px}
    .dash-top{display:flex;align-items:center;justify-content:space-between;font-size:17px;font-weight:800}
    .dash-new{padding:8px 12px;border-radius:8px;background:var(--violet);color:#fff;font-size:12px;font-weight:700}
    .dash-sub{margin:6px 0 18px;font-size:13px;color:#77727f}
    .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .stat{padding:12px;border:1px solid #eae8ee;border-radius:10px;background:#fff;font-size:12px;color:#77727f}
    .stat b{display:block;margin-top:4px;font-size:20px;color:#2b2934}
    .stat .ok{color:#2c8a57}
    .tbl{margin-top:12px;padding:4px 14px;border:1px solid #eae8ee;border-radius:10px;background:#fff}
    .tbl-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid #f0eef3;font-size:13px}
    .tbl-row:first-child{border-top:0}
    .tbl-row .th{width:30px;height:30px;border-radius:6px;background:#dbc4ad}
    .tbl-row:nth-child(2) .th{background:#c5cdb7}
    .tbl-row:nth-child(3) .th{background:#e3c2b5}
    .tbl-row{white-space:nowrap}
    .tbl-row .price{margin-left:auto;color:#5f5a67}
    .badge{padding:3px 8px;border-radius:6px;background:#e3f6e8;font-size:12px;font-weight:700;color:#237a48}

    /* ============ Ejemplos ============ */
    .ex-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
    .ex{display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff}
    .ex-art{position:relative;overflow:hidden;aspect-ratio:1681/936;background:#f2eee9}
    .ex-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s ease}
    .ex:hover .ex-art img{transform:scale(1.035)}
    .ex:nth-child(1) .ex-art{background:#eeddd0}
    .ex:nth-child(2) .ex-art{background:#dfe6ca}
    .ex:nth-child(3) .ex-art{background:#ddd6e9}
    .ex-art .jar-art{bottom:30px;transform:translateX(-50%) scale(1.15)}
    .ex-body{display:flex;flex:1;flex-direction:column;padding:22px}
    .ex-body h3{margin-bottom:4px;font-size:20px;letter-spacing:-.03em}
    .ex-body p{margin:0 0 18px;font-size:15px;color:var(--muted)}
    .ex-body .btn{margin-top:auto}

    /* ============ Precios ============ */
    .pricing{background:#eae6fa}
    .plans{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .plan{display:flex;flex-direction:column;gap:18px;padding:30px;border:1.5px solid #d3cce6;border-radius:20px;background:#fff}
    .plan.feat{border-color:var(--violet);box-shadow:0 18px 35px rgba(78,60,156,.14)}
    .plan-tag{min-height:22px;font-size:14px;font-weight:800;color:var(--violet)}
    .plan h3{margin-top:-8px;font-size:30px;letter-spacing:-.04em}
    .plan-desc{margin:-8px 0 0;font-size:15px;color:var(--muted)}
    .plan-price{padding:16px 18px;border-radius:12px;background:#f7f5fd}
    .plan-price small,.plan-price span{display:block;font-size:13px;font-weight:600;color:var(--muted)}
    .plan-price strong{display:block;font-size:32px;line-height:1.15;letter-spacing:-.04em}
    .plan ul{display:grid;gap:12px;margin:0;padding:0;list-style:none;font-size:15px}
    .plan li{display:flex;gap:10px;line-height:1.4}
    .plan li .ico{width:18px;height:18px;margin-top:1px;color:#2c7a3f}
    .plan .incl{margin:0;font-size:15px;font-weight:800}
    .plan .btn{margin-top:auto}
    .pricing-note{max-width:760px;margin:22px 0 0;font-size:14px;color:#4d4759}

    /* ============ FAQ ============ */
    .faq{max-width:820px}
    .faq details{border-top:1px solid var(--line)}
    .faq details:last-child{border-bottom:1px solid var(--line)}
    .faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;list-style:none;cursor:pointer;font-size:18px;font-weight:800}
    .faq summary::-webkit-details-marker{display:none}
    .faq summary .ico{transition:transform .2s}
    .faq details[open] summary .ico{transform:rotate(180deg)}
    .faq details p{max-width:64ch;margin:0 0 22px;color:var(--muted)}

    /* ============ Cierre y pie ============ */
    .kicker{display:block;margin-bottom:14px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4f38c4}
    .closing{position:relative;overflow:hidden;margin-bottom:64px;padding:68px 32px;border-radius:28px;background:var(--lav);text-align:center}
    .closing>:not(.ast){position:relative;z-index:1}
    .closing h2{max-width:680px;margin:0 auto 14px}
    .closing p{max-width:560px;margin:0 auto 28px;color:#4f4a5c}
    .closing-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
    .closing-note{margin:20px 0 0;font-size:13px;color:#5d5570}
    .closing .ast{position:absolute;color:#b9aaf3}
    .ast-l{left:5%;top:24px;width:112px;height:112px;stroke-width:2.6}
    .ast-r{right:6%;top:100px;width:66px;height:66px;stroke-width:3}

    /* Asteriscos decorativos en otras secciones */
    .feature{position:relative;overflow:hidden}
    .feature .ast-bg{position:absolute;right:-50px;top:-40px;width:230px;height:230px;color:var(--lime);opacity:.12;stroke-width:2.4}
    .feature .feature-grid{position:relative;z-index:1}
    .pricing{position:relative;overflow:hidden}
    .pricing .wrap{position:relative;z-index:1}
    .pricing .ast-p1{position:absolute;right:7%;top:56px;width:96px;height:96px;color:#cbbff5;stroke-width:2.6}
    .pricing .ast-p2{position:absolute;right:16%;top:150px;width:44px;height:44px;color:#cbbff5}
    .foot-brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--ink)}
    .foot-brand .ast{width:16px;height:16px;color:var(--violet);stroke-width:3.6}
    footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px 32px;padding:24px 0 48px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
    footer nav{display:flex;flex-wrap:wrap;gap:8px 24px}
    footer a:hover{color:var(--violet)}
    .wa-float{display:none}

    /* ============ Responsive ============ */
    @media (max-width:960px){
      .wrap{padding:0 28px}
      .hero{grid-template-columns:1fr;padding-top:24px}
      .hero-art{max-width:520px;width:100%;margin:0 auto}
      .benefits{grid-template-columns:1fr 1fr}
      .showcase-grid,.feature-grid,.ex-grid,.plans,.steps{grid-template-columns:1fr}
      .showcase-grid .mock,.dash,.ex{max-width:640px;width:100%}
      .plans{max-width:560px}
      .sec{padding:48px 0}
      .head .nav{display:none}
      .menu-btn{display:grid}
      .head .nav.open{position:absolute;top:80px;left:0;right:0;z-index:30;display:flex;flex-direction:column;gap:2px;padding:10px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 18px 40px rgba(32,32,43,.14)}
      .nav.open a{padding:14px 12px;border-radius:10px}
      .nav.open .nav-wa{display:flex;margin-top:6px;justify-content:center;color:#fff}
      .head-actions .btn{display:none}
    }
    @media (max-width:640px){
      body{padding-bottom:76px;font-size:16px}
      .wrap{padding:0 20px}
      .head{height:72px}
      .hero h1{font-size:40px}
      .lead{font-size:17px}
      .hero-actions .btn{width:100%}
      .hero-art{min-height:540px}
      .hero-ctrl{justify-content:flex-start}
      .phone{width:270px}
      .hero-chip{left:0;bottom:24px}
      .benefits{gap:18px}
      .benefits li{flex-direction:column;gap:8px}
      .prod{grid-template-columns:1fr}
      .prod-img{height:250px}
      .mock-title div{font-size:28px}
      .dash{grid-template-columns:1fr}
      .dash-side{display:none}
      .dash-main{padding:16px}
      .tbl-row .th{display:none}
      .tbl-row{gap:8px;font-size:12px}
      .badge{padding:3px 6px;font-size:11px}
      .plan{padding:24px}
      .closing{padding:48px 20px;margin-bottom:40px}
      .wa-float{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:50;display:inline-flex;align-items:center;gap:8px;padding:14px 20px;border-radius:999px;background:var(--wa);color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 26px rgba(19,122,63,.4)}
    }
    @media (prefers-reduced-motion:reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{animation:none!important;transition:none!important}
    }

    /* v7: lectura, decisión y control de la interacción */
    .hero{padding-bottom:32px}
    .hero-ctrl{bottom:2px}
    .hero-dots{gap:7px;padding:5px;border:1px solid #ddd6e8;border-radius:999px;background:#fff;box-shadow:0 7px 22px rgba(59,48,90,.09)}
    .hero-dots button{display:inline-flex;width:auto;height:auto;min-height:36px;justify-content:center;padding:7px 12px;border-radius:999px;color:#51495e;font-size:12px;font-weight:800;white-space:nowrap}
    .hero-dots button::before{display:none}
    .hero-dots button[aria-current="true"]{background:var(--violet);color:#fff}
    .hero-dots button:hover:not([aria-current="true"]){background:#f0edfb}
    .benefits{padding:22px 0}
    .quick-price{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 auto;padding-top:16px;padding-bottom:16px;border-bottom:1px solid var(--line)}
    .quick-price p{margin:0;font-size:15px;line-height:1.45;color:#494452}
    .quick-price b,.quick-price strong{color:var(--ink)}
    .quick-price a{flex:none;font-size:14px;font-weight:800;color:var(--violet);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
    .showcase{margin-top:0}
    .sec{padding:54px 0}
    .sec-head,.split-head{margin-bottom:26px}
    .pricing-note{max-width:960px;line-height:1.5}
    .plan-price span{color:#443c52}
    .plan .btn{min-height:48px}
    .faq{margin:0 auto}
    .wa-float{min-width:48px;min-height:48px;justify-content:center}
    @media(max-width:960px){.quick-price{flex-wrap:wrap}.hero{padding-bottom:20px}}
    @media(max-width:640px){.hero{padding-bottom:24px}.hero-art{min-height:530px}.hero-ctrl{bottom:0}.hero-dots button{font-size:11px;padding:8px 9px}.quick-price{padding-top:18px;padding-bottom:18px}.quick-price p{font-size:14px}.quick-price a{font-size:14px}.benefits b{font-size:15px}.benefits span{font-size:13px}.sec{padding:43px 0}.wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}}

    /* Recorrido interactivo de la tienda */
    .journey-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
    .journey-tabs button{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:11px 18px;border:1px solid #d9d2e0;border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:16px;font-weight:800;cursor:pointer}
    .journey-tabs button[aria-selected="true"]{background:var(--violet);border-color:var(--violet);color:#fff}
    .journey-tabs button span{font-size:13px;opacity:.8}
    .journey-panel[hidden]{display:none!important}
    .journey-panel{min-height:420px}
    .journey-home{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(52,39,28,.08)}
    .journey-home img{display:block;width:100%;height:auto;max-height:690px;object-fit:cover;object-position:top}
    .journey-caption{margin:15px 0 0;font-size:16px;color:#494452}
    .journey-panel .mock{width:100%;max-width:800px;margin:auto}
    .journey-device{display:flex;align-items:center;gap:10px;margin:0 0 20px;color:#4c4657;font-size:15px;font-weight:700}
    .journey-device label{font-weight:800}
    .journey-device select{min-height:42px;padding:7px 12px;border:1px solid #d9d2e0;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-weight:700}
    .journey-mobile .journey-home,.journey-mobile .journey-panel .mock{max-width:390px;margin:0 auto}
    .journey-mobile .journey-home img{max-height:690px;object-fit:cover;object-position:top}
    .journey-mobile .mock-bar{overflow:hidden;white-space:nowrap}
    .journey-mobile .mock-nav{padding:12px}
    .journey-mobile .mock-title{padding:18px}
    .journey-mobile .mock-title div{font-size:25px}
    .journey-mobile .mock-tabs{overflow:hidden;white-space:nowrap;padding:13px}
    .journey-mobile .mock-grid{gap:10px;padding:12px}
    .journey-mobile .mock-img{height:118px}
    .journey-mobile .prod{grid-template-columns:1fr}
    .journey-mobile .prod-img{height:220px}
    .journey-mobile .related{display:none}
    @media(max-width:640px){.journey-tabs button{flex:1;justify-content:center;padding:10px 8px;font-size:14px}.journey-tabs button span{display:none}.journey-panel{min-height:320px}.journey-device{flex-wrap:wrap}}
    .wa-float{position:fixed;right:24px;bottom:24px;z-index:50;display:inline-flex;align-items:center;gap:9px;min-height:54px;padding:13px 20px;border-radius:999px;background:var(--wa);color:#fff;font-size:15px;font-weight:800;box-shadow:0 10px 26px rgba(19,122,63,.36)}
    .wa-float:hover{background:#0c6634;transform:translateY(-2px)}
    @media(max-width:640px){.wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom));max-width:calc(100vw - 32px);padding:12px 17px}}

    .journey-panel{min-height:0}
    .journey-view{position:relative;display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 12px 32px rgba(52,39,28,.08);cursor:zoom-in}
    .journey-view img{display:block;width:100%;height:auto}
    .journey-view span{position:absolute;right:15px;bottom:15px;padding:7px 12px;border-radius:8px;background:#20202b;color:#fff;font:800 13px Manrope,sans-serif}
    /* Responsive storefront previews */
    .preview-controls{display:flex;width:max-content;max-width:100%;gap:5px;margin:-4px auto 25px;padding:5px;border:1px solid #dcd6e5;border-radius:999px;background:#fff}
    .preview-controls button{min-height:43px;padding:9px 22px;border:0;border-radius:999px;background:transparent;color:#4c4657;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
    .preview-controls button[aria-pressed="true"]{background:var(--violet);color:#fff}
    .preview-controls button:hover:not([aria-pressed="true"]){background:#f0edfb}
    .preview-view{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
    .preview-view img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .35s ease}
    .ex:hover .preview-view img{transform:scale(1.025)}
    .zoom-hint{position:absolute;right:12px;bottom:12px;padding:6px 11px;border-radius:8px;background:#fff;color:var(--ink);font-size:12px;font-weight:800;box-shadow:0 3px 15px #0002}
    .ex-grid.mobile-mode .ex-art{height:390px;aspect-ratio:auto;display:grid;place-items:center;background:linear-gradient(135deg,#eee9f8,#f8f6f2)}
    .ex-grid.mobile-mode .preview-view{width:auto;height:365px;aspect-ratio:9/16;border:5px solid #242330;border-radius:18px;overflow:hidden;box-shadow:0 15px 32px #2b254b31}
    .ex-grid.mobile-mode .preview-view img{object-fit:contain}
    .ex-grid.mobile-mode .zoom-hint{right:7px;bottom:7px;font-size:10px}
    .preview-dialog{max-width:min(96vw,1400px);max-height:96vh;padding:52px 16px 16px;border:0;border-radius:18px;background:#fff;box-shadow:0 25px 90px #15142180}
    .preview-dialog::backdrop{background:#181522c9}
    .preview-dialog img{display:block;max-width:100%;max-height:calc(96vh - 80px);width:auto;height:auto;margin:auto;object-fit:contain}
    .preview-close{position:absolute;right:16px;top:10px;padding:8px 10px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
    @media(max-width:640px){.preview-controls{margin-bottom:18px}.preview-controls button{padding:9px 17px}.ex-grid.mobile-mode .ex-art{height:425px}.ex-grid.mobile-mode .preview-view{height:400px}}