:root{
    --board:#2E8B99; --board-deep:#1F6773;
    --paper:#FFFDF8; --paper-2:#F6EFE6;
    --ink:#22303A; --ink-soft:#5F7079;
    --line:#E4D9CB; --accent:#E8628A; --accent-dark:#C24C71;
    --radius:18px; --shadow:0 2px 0 rgba(34,48,58,.06), 0 10px 30px -18px rgba(34,48,58,.45);
  }
  *{box-sizing:border-box}
  body{margin:0; background:radial-gradient(1200px 600px at 85% -10%, #FDF3E7 0%, transparent 60%), var(--paper-2);
       color:var(--ink); font-family:'Nunito',ui-sans-serif,system-ui,sans-serif; font-size:16px; line-height:1.5}
  h1,h2{font-family:'Baloo 2',ui-rounded,sans-serif; font-weight:800; line-height:1.15; margin:0}
  .wrap{max-width:1160px; margin:0 auto; padding:0 18px 60px; position:relative}
  .langbar{position:absolute; top:18px; right:18px; display:flex; gap:3px; padding:3px;
    background:var(--paper); border:1px solid var(--line); border-radius:999px; z-index:30}
  .lang{all:unset; cursor:pointer; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:800;
    color:var(--ink-soft); letter-spacing:.05em; transition:.15s ease}
  .lang:hover{color:var(--ink)}
  .lang:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .lang[aria-pressed="true"]{background:var(--ink); color:var(--paper)}
  @media (max-width:520px){ .langbar{top:12px; right:12px} header.top{padding-top:52px} }
  header.top{padding:26px 0 22px; text-align:center}
  /* El logo toma el color del texto: cámbialo aquí si lo quieres en otro tono. */
  .brand{width:clamp(140px,21vw,208px); margin:0 auto 4px; color:var(--ink)}
  .brand svg{display:block; width:100%; height:auto}
  .eyebrow{font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; color:var(--accent-dark)}
  header.top h1{font-size:clamp(30px,6vw,50px); margin:6px 0}
  header.top p{margin:0 auto; max-width:46ch; color:var(--ink-soft); font-size:15px}
  .layout{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:26px; align-items:start}
  @media (max-width:900px){ .layout{grid-template-columns:minmax(0,1fr); gap:14px} }

  /* ---------- stage ---------- */
  .stage-col{position:sticky; top:14px; z-index:20}
  @media (max-width:900px){ .stage-col{top:0; margin:0 -18px; padding:0 18px 10px; background:linear-gradient(var(--paper-2) 72%, transparent)} }
  .stage{position:relative; overflow:hidden; border-radius:22px; padding:16px 16px 12px; text-align:center;
    background:radial-gradient(120% 90% at 30% 6%, #46A7B4 0%, var(--board) 45%, var(--board-deep) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), 0 18px 40px -26px rgba(20,60,66,.9)}
  .stage::after{content:""; position:absolute; inset:-40%; pointer-events:none; opacity:0; transition:opacity .7s ease;
    background:radial-gradient(closest-side, rgba(255,255,255,.5), transparent 70%)}
  .stage.done::after{opacity:.35}
  .stage-label{font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:800; color:rgba(255,255,255,.72)}
  #kc{display:block; margin:2px auto 0; height:min(50vh,440px); width:100%; cursor:grab; user-select:none; touch-action:pan-y}
  #kc.grabbing{cursor:grabbing}
  #kc.panning{cursor:move}
  @media (max-width:900px){ #kc{height:34vh} }
  .zoomers{position:absolute; top:14px; right:14px; display:flex; flex-direction:column; gap:6px; z-index:3}
  .zoomers button{all:unset; cursor:pointer; width:32px; height:32px; border-radius:11px; display:grid; place-items:center;
    background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); color:#fff;
    font-family:'Baloo 2',sans-serif; font-weight:800; font-size:17px; line-height:1; transition:.15s ease}
  .zoomers button:hover{background:rgba(255,255,255,.32)}
  .zoomers button:focus-visible{outline:2px solid #fff; outline-offset:2px}
  .zoomers button[disabled]{opacity:.35; cursor:default}
  .stage-foot{margin-top:8px; display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:24px}
  .chip{background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.22); padding:3px 9px; border-radius:999px;
        font-weight:700; font-size:11.5px; color:#fff; display:inline-flex; align-items:center; gap:6px}
  .chip i{width:9px; height:9px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.15)}
  .chip.price-chip{background:#fff; color:var(--ink); border-color:#fff; font-family:'Baloo 2',sans-serif; font-size:13px}
  .swing-hint{margin-top:6px; font-size:11.5px; color:rgba(255,255,255,.6); transition:opacity .4s}
  .swing-hint.gone{opacity:0}

  .lt{transition:transform .38s cubic-bezier(.34,1.3,.5,1)}
  .lt.nomove{transition:none}
  .lt .pop{transform-box:fill-box; transform-origin:center; animation:thread .5s cubic-bezier(.2,1.5,.45,1) both}
  .lt image{transition:opacity .35s ease}
  .lt.out .pop{animation:unthread .22s ease forwards}
  @keyframes thread{0%{transform:scale(.15) rotate(-20deg); opacity:0} 62%{transform:scale(1.16) rotate(5deg); opacity:1} 100%{transform:scale(1) rotate(0); opacity:1}}
  @keyframes unthread{to{transform:scale(.2) rotate(16deg); opacity:0}}
  .charm-in{transform-box:fill-box; transform-origin:center; animation:thread .5s cubic-bezier(.2,1.5,.45,1) both}
  @media (prefers-reduced-motion:reduce){ .lt .pop,.charm-in{animation:none} .lt{transition:none} }

  /* ---------- steps ---------- */
  .step{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 18px 20px;
        margin-bottom:16px; box-shadow:var(--shadow); scroll-margin-top:90px}
  .step-head{display:flex; align-items:center; gap:11px}
  .step-num{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:13px; background:var(--ink); color:var(--paper);
    border-radius:999px; min-width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; flex:none; transition:background .3s ease}
  .step.filled .step-num{background:var(--accent)}
  .step h2{font-size:21px}
  .opt{font-family:'Nunito',sans-serif; font-size:12px; font-weight:800; color:var(--ink-soft); letter-spacing:.04em}
  .step-hint{margin:4px 0 14px 37px; color:var(--ink-soft); font-size:13.5px}
  @media (max-width:520px){ .step-hint{margin-left:0} }
  .grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:10px}
  .sw{all:unset; cursor:pointer; text-align:center; border-radius:14px; padding:7px 4px 8px; display:flex;
      flex-direction:column; align-items:center; gap:6px; transition:background .15s ease}
  .sw:hover{background:var(--paper-2)}
  .sw:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .dot{width:48px; height:48px; border-radius:50%; position:relative; transition:transform .18s cubic-bezier(.34,1.5,.5,1), box-shadow .18s ease;
       box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), inset 0 4px 8px rgba(255,255,255,.28), 0 0 0 1px rgba(34,48,58,.14)}
  .dot.cord{background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.2) 0 2px, rgba(0,0,0,.1) 2px 5px)}
  .sw:hover .dot{transform:scale(1.08)}
  .sw .nm{font-size:11.5px; font-weight:700; color:var(--ink-soft); line-height:1.25}
  .sw .idx{font-size:10.5px; font-weight:800; color:#A99C8C}
  .sw[aria-pressed="true"] .dot{transform:scale(1.06); box-shadow:inset 0 -6px 12px rgba(0,0,0,.18), 0 0 0 3px var(--paper), 0 0 0 6px var(--ink)}
  .sw[aria-pressed="true"] .nm{color:var(--ink)}
  .sw[aria-pressed="true"] .dot::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center;
    font-size:20px; font-weight:900; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55)}
  .sw.light[aria-pressed="true"] .dot::after{color:#22303A; text-shadow:none}
  .name-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
  input[type="text"]{font-family:'Baloo 2',sans-serif; font-weight:700; font-size:24px; letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink); background:var(--paper-2); border:2px dashed var(--line); border-radius:14px; padding:12px 16px;
    /* width:0 kills the input's intrinsic 20-character width (~405px at this font size), which
       would otherwise set the min-content floor of the whole column. flex-basis gives the real size. */
    flex:1 1 240px; min-width:0; width:0}
  input[type="text"]:focus{outline:none; border-color:var(--accent); border-style:solid; background:#fff}
  .counter{font-size:13px; font-weight:800; color:var(--ink-soft); white-space:nowrap}
  .counter.warn{color:var(--accent-dark)}
  .name-note{margin:8px 0 0; font-size:13px; font-weight:700; color:var(--accent-dark); min-height:19px}
  .toggle{display:flex; gap:11px; align-items:flex-start; margin-top:16px; padding:12px 14px; border-radius:14px;
    background:#FBF3F6; border:1px solid #F0DCE3; cursor:pointer}
  .toggle input{margin:3px 0 0; width:18px; height:18px; accent-color:var(--accent); flex:none}
  .toggle span{font-size:13.5px; color:var(--ink-soft)}
  .toggle b{color:var(--ink); font-weight:800; display:block; font-size:14.5px}
  .sub-grid{margin-top:14px; padding-top:14px; border-top:1px dashed var(--line)}
  [hidden]{display:none !important}
  .stepper-row{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:16px;
    padding:12px 14px; border-radius:14px; background:var(--paper-2); border:1px solid var(--line); flex-wrap:wrap}
  .stepper-row b{display:block; font-size:14.5px}
  .stepper-row small{color:var(--ink-soft); font-size:12.5px}
  .stepper{display:flex; align-items:center; gap:6px}
  .stepper button{all:unset; cursor:pointer; width:36px; height:36px; border-radius:11px; display:grid; place-items:center;
    background:var(--ink); color:#fff; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:19px; transition:.15s ease}
  .stepper button:hover{background:var(--accent)}
  .stepper button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .stepper button[disabled]{background:#C9BFB2; cursor:default}
  .stepper output{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:20px; min-width:34px; text-align:center}
  .charm-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:10px}
  .charm{all:unset; cursor:pointer; border-radius:14px; padding:10px 6px; text-align:center; display:flex; flex-direction:column;
    align-items:center; gap:6px; background:var(--paper-2); border:2px solid transparent; transition:.15s ease}
  .charm:hover{background:#fff; border-color:var(--line)}
  .charm:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .charm[aria-pressed="true"]{background:#fff; border-color:var(--ink)}
  .charm .nm{font-size:11.5px; font-weight:700; color:var(--ink-soft)}
  .charm[aria-pressed="true"] .nm{color:var(--ink)}
  .strip-help{margin:18px 0 0; font-size:13.5px; color:var(--ink-soft)}
  #strip{display:flex; flex-direction:column; gap:8px; margin-top:10px}
  .strip-row{display:flex; flex-wrap:wrap; align-items:center; gap:1px; padding:9px 8px; border-radius:14px;
    background:var(--paper-2); border:1px solid var(--line)}
  .strip-tag{font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#A99C8C;
    margin-right:6px; padding-left:2px}
  .ins{all:unset; cursor:pointer; width:26px; height:34px; border-radius:9px; display:grid; place-items:center;
    color:#C0B3A2; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px; transition:.14s ease}
  .ins:hover{background:var(--accent); color:#fff; transform:scale(1.08)}
  .ins:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .chip-letter{height:36px; width:auto; display:block; pointer-events:none}
  .chip-letter-txt{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:20px; padding:0 3px}
  .chip-charm{position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:11px;
    background:#fff; border:1px solid var(--line)}
  .chip-charm .del{all:unset; cursor:pointer; position:absolute; top:-6px; right:-6px; width:19px; height:19px;
    border-radius:50%; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:12px; font-weight:800}
  .chip-charm .del:hover{background:var(--accent)}
  .chip-charm .del:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
  .linkbtn{all:unset; cursor:pointer; margin-top:12px; font-size:13px; font-weight:800; color:var(--accent-dark);
    text-decoration:underline; text-underline-offset:3px}
  .linkbtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
  .none-mark{width:44px; height:44px; border-radius:50%; border:2px dashed #C3B8A8; display:grid; place-items:center;
    color:#A99C8C; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:18px}
  .summary{background:var(--ink); color:#F7F2EA; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)}
  .summary h2{color:#fff; font-size:21px}
  .summary .step-hint{color:rgba(247,242,234,.62); margin-left:0}
  .lines{list-style:none; margin:14px 0 0; padding:0; font-size:14.5px}
  .lines li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px dashed rgba(255,255,255,.16)}
  .lines .k{color:rgba(247,242,234,.6); font-weight:600}
  .lines .v{font-weight:800; text-align:right}
  .lines .v.pending{color:#F0A8BD; font-weight:700}
  .lines .price{font-size:13.5px; border-bottom-style:dotted}
  .lines .price .k{color:rgba(247,242,234,.5)}
  .lines .price .v{font-weight:700; color:rgba(247,242,234,.82)}
  .lines .price:first-of-type{margin-top:6px; border-top:1px solid rgba(255,255,255,.22); padding-top:13px}
  .lines .total{border-bottom:none; padding-top:12px; align-items:baseline}
  .lines .total .k{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:17px; color:#fff}
  .lines .total .v{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:24px; color:#fff}
  .lines .v i{width:11px; height:11px; border-radius:50%; display:inline-block; margin-right:6px; box-shadow:0 0 0 1px rgba(255,255,255,.35)}
  .sub-head{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:13px; letter-spacing:.1em;
    text-transform:uppercase; color:rgba(247,242,234,.55); margin:22px 0 0}
  .cart-block{margin-top:4px}
  .cart-list{list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px}
  .cart-empty{font-size:13.5px; color:rgba(247,242,234,.45); padding:10px 0}
  .cart-item{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:10px 12px}
  .ci-thumb{display:flex; align-items:center; gap:2px; flex:none}
  .ci-thumb .cord-dot{width:14px; height:14px; border-radius:50%; margin-right:5px; box-shadow:0 0 0 1px rgba(255,255,255,.35)}
  .ci-thumb img{height:24px; width:auto; display:block}
  .ci-thumb svg{margin-left:3px}
  .ci-info{flex:1 1 150px; min-width:0}
  .ci-info b{display:block; font-size:14.5px; letter-spacing:.03em}
  .ci-info span{font-size:11.5px; color:rgba(247,242,234,.5); display:block; line-height:1.35}
  .ci-qty{display:flex; align-items:center; gap:4px; flex:none}
  .ci-qty button{all:unset; cursor:pointer; width:26px; height:26px; border-radius:8px; display:grid; place-items:center;
    background:rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:15px; font-family:'Baloo 2',sans-serif}
  .ci-qty button:hover{background:var(--accent)}
  .ci-qty button:focus-visible,.ci-act:focus-visible{outline:2px solid #fff; outline-offset:1px}
  .ci-qty output{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px; min-width:20px; text-align:center}
  .ci-price{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:15px; flex:none; min-width:74px; text-align:right}
  .ci-acts{display:flex; gap:4px; flex:none}
  .ci-act{all:unset; cursor:pointer; width:28px; height:28px; border-radius:9px; display:grid; place-items:center;
    color:rgba(247,242,234,.6); font-size:14px; transition:.15s ease}
  .ci-act:hover{background:rgba(255,255,255,.16); color:#fff}
  .lines.grand{margin-top:6px}
  .pending-note{margin:10px 0 0; font-size:12.5px; font-weight:700; color:#F0A8BD}
  .btn-row{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
  button.cta{all:unset; cursor:pointer; text-align:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px;
    padding:14px 20px; border-radius:999px; flex:1 1 180px; background:var(--accent); color:#fff; transition:.15s ease}
  button.cta:hover{background:#F27499; transform:translateY(-1px)}
  button.cta:focus-visible{outline:3px solid #fff; outline-offset:2px}
  button.cta[disabled]{background:#4A5A64; color:rgba(255,255,255,.5); cursor:not-allowed; transform:none}
  button.ghost{all:unset; cursor:pointer; text-align:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:16px;
    padding:14px 20px; border-radius:999px; flex:0 1 150px; border:2px solid rgba(255,255,255,.28); color:#fff; transition:.15s ease}
  button.ghost:hover{border-color:#fff}
  button.ghost:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
  .note{margin-top:12px; font-size:12.5px; color:rgba(247,242,234,.55)}
  .toast{position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:12px 20px;
    border-radius:999px; font-weight:700; font-size:14px; opacity:0; pointer-events:none; transition:.25s ease; z-index:60;
    box-shadow:0 12px 30px -12px rgba(0,0,0,.5)}
  .toast.show{opacity:1; transform:translate(-50%,0)}
  footer{text-align:center; color:var(--ink-soft); font-size:12.5px; padding:26px 0 0}

  .gallery{margin-top:44px; padding-top:34px; border-top:1px solid var(--line)}
  .gallery h2{font-size:clamp(24px,4vw,32px); text-align:center}
  .gallery .sub{text-align:center; color:var(--ink-soft); font-size:14.5px; margin:6px auto 22px; max-width:52ch}
  .gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
  .gal-item{display:flex; flex-direction:column; background:var(--paper); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; box-shadow:var(--shadow)}
  .gal-photo{all:unset; cursor:zoom-in; position:relative; display:block; aspect-ratio:3/4; overflow:hidden}
  .gal-photo:focus-visible{outline:3px solid var(--accent); outline-offset:-3px}
  .gal-photo img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s ease}
  .gal-photo:hover img{transform:scale(1.06)}
  .gal-cap{position:absolute; inset:auto 0 0 0; padding:20px 10px 9px; font-size:12px; font-weight:700;
    color:#fff; background:linear-gradient(transparent, rgba(18,28,34,.8)); text-align:left; line-height:1.3}
  .gal-try{all:unset; cursor:pointer; text-align:center; padding:9px 6px; font-size:12.5px; font-weight:800;
    color:var(--accent-dark); border-top:1px solid var(--line); transition:.15s ease}
  .gal-try:hover{background:var(--accent); color:#fff}
  .gal-try:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}

  .lightbox{position:fixed; inset:0; z-index:70; background:rgba(20,30,36,.93);
    display:flex; align-items:center; justify-content:center; gap:8px; padding:20px}
  .lb-fig{margin:0; max-width:min(92vw,760px); max-height:88vh; display:flex; flex-direction:column; gap:10px}
  .lb-fig img{max-width:100%; max-height:78vh; object-fit:contain; border-radius:14px; display:block; margin:0 auto}
  .lb-cap{color:rgba(255,255,255,.85); font-size:13.5px; text-align:center; min-height:18px}
  .lb-close{all:unset; cursor:pointer; position:absolute; top:14px; right:16px; width:40px; height:40px;
    border-radius:50%; display:grid; place-items:center; color:#fff; font-size:26px; background:rgba(255,255,255,.14)}
  .lb-nav{all:unset; cursor:pointer; width:44px; height:64px; border-radius:14px; display:grid; place-items:center;
    color:#fff; font-size:34px; background:rgba(255,255,255,.12); flex:none; transition:.15s ease}
  .lb-nav:hover,.lb-close:hover{background:rgba(255,255,255,.26)}
  .lb-nav:focus-visible,.lb-close:focus-visible{outline:2px solid #fff; outline-offset:2px}
  @media (max-width:560px){ .lb-nav{width:38px; height:54px; font-size:28px} }