/* =====================================================================
   TŌTEM Tech · Formulario de pedido (diálogo a pantalla completa)
   Usa los tokens de ui.css (--u-*). Todo recto, un solo acento rojo.
   ===================================================================== */
.pd{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#000;color:var(--u-ink,#efedea);overflow-y:auto;overscroll-behavior:contain;font-family:var(--u-body,"Onest",system-ui,sans-serif)}
.pd:not([open]){display:none}
.pd::backdrop{background:#000}
.pd *{box-sizing:border-box}
.pd-form{min-height:100%;display:grid;grid-template-rows:auto 1fr auto}

/* ---- cabecera ---- */
.pd-h{position:sticky;top:0;z-index:5;background:#000;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);padding:max(12px,env(safe-area-inset-top)) clamp(20px,4vw,56px) 12px}
.pd-brand{font:500 .8125rem/1 var(--u-body);letter-spacing:.14em;text-transform:uppercase;color:var(--u-grey,#a8a39a)}
.pd-steps{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none;justify-self:center;width:min(100%,360px)}
.pd-steps li{flex:1;height:4px;background:var(--u-line,#2a2927);transition:background-color .4s var(--u-ease-out,cubic-bezier(.23,1,.32,1))}
.pd-steps li.on{background:var(--u-ink,#efedea)}
.pd-steps li.cur{background:var(--u-red,#d21f2b)}
.pd-x{width:44px;height:44px;display:inline-grid;place-items:center;border:0;border-radius:2px;background:#1c1b1a;color:inherit;font:400 1.4rem/1 var(--u-body);cursor:pointer;transition:background-color .18s var(--u-ease-out,ease-out),transform .16s var(--u-ease-out,ease-out)}
.pd-x:active{transform:scale(.96)}
.pd-x:focus-visible,.pd-link:focus-visible,.pd-sumtoggle:focus-visible,.pd-edit:focus-visible{outline:2px solid var(--u-ink,#efedea);outline-offset:3px}
@media (hover:hover) and (pointer:fine){.pd-x:hover{background:rgba(255,255,255,.14)}}

/* ---- cuerpo: formulario + resumen ---- */
.pd-body{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:0;padding:0 clamp(20px,4vw,56px)}
@media (min-width:980px){.pd-body{grid-template-columns:minmax(0,1fr) minmax(320px,400px);gap:clamp(40px,6vw,96px);align-items:start}}
.pd-main{padding:clamp(28px,5vw,64px) 0 48px;max-width:680px;width:100%}
.pd-sum{order:-1;margin:0 calc(-1*clamp(20px,4vw,56px));background:#111}
@media (min-width:980px){.pd-sum{order:0;margin:0;position:sticky;top:96px;margin-top:clamp(28px,5vw,64px);padding:28px;border-radius:2px;background:#111}}
.pd-sumtoggle{width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:0 clamp(20px,4vw,56px);border:0;background:transparent;color:inherit;font:500 .95rem/1.2 var(--u-body);cursor:pointer;text-align:left}
.pd-sumtoggle b{font-weight:500}
.pd-sumtoggle .chev{width:12px;height:12px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--u-ease-out,ease-out)}
.pd-sumtoggle[aria-expanded=true] .chev{transform:rotate(-135deg) translateY(-2px)}
.pd-sbody{padding:4px clamp(20px,4vw,56px) 22px}
.pd-sbody[hidden]{display:none}
@media (min-width:980px){.pd-sumtoggle{display:none}.pd-sbody{display:block!important;padding:0}.pd-sbody[hidden]{display:block}}
.pd-sum h2{margin:0 0 18px;font:500 .8125rem/1 var(--u-body);letter-spacing:.14em;text-transform:uppercase;color:var(--u-grey,#a8a39a)}
@media (max-width:979px){.pd-sum h2{display:none}}
.pd-li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 16px;margin-bottom:6px;background:#1a1918;border-radius:2px}
.pd-li b{font-weight:500}
.pd-li span{color:var(--u-grey,#a8a39a);font-size:.875rem}
.pd-li .pr{grid-row:1/3;grid-column:2;align-self:center;font-weight:500;white-space:nowrap}
.pd-tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:22px;padding:0 4px}
.pd-tot span{color:var(--u-grey,#a8a39a)}
.pd-tot b{font:500 clamp(1.4rem,3vw,1.75rem)/1 var(--u-body);letter-spacing:-.02em}
.pd-pay{margin:14px 0 0;color:var(--u-grey,#a8a39a);font-size:.875rem;line-height:1.5}
.pd-pay strong{color:var(--u-ink,#efedea);font-weight:500}

/* ---- pasos ---- */
.pd-step[hidden],.pd-ok[hidden],.pd-fail[hidden],[data-when][hidden]{display:none}
.pd-step,.pd-ok,.pd-fail{animation:pdIn .42s var(--u-ease-out,cubic-bezier(.23,1,.32,1)) both}
@keyframes pdIn{from{opacity:0;transform:translateY(10px)}}
.pd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* taste-skill-ignore: solo para lectores de pantalla */
.pd-t{margin:0 0 12px;font:500 clamp(1.9rem,4.4vw,3.1rem)/1.04 var(--u-body);letter-spacing:-.035em;text-wrap:balance;outline:0}
.pd-lead{margin:0 0 clamp(24px,4vw,40px);color:var(--u-grey,#a8a39a);font-size:1.0625rem;line-height:1.5;max-width:52ch;text-wrap:pretty}
.pd-grid{display:grid;gap:22px 18px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.pd-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.pd-grid .full{grid-column:1/-1}}
.pd .u-field{align-content:start}
.pd-fs{margin:0 0 clamp(28px,4vw,44px);padding:0;border:0;min-width:0}
.pd-fs>legend{padding:0;margin:0 0 6px;font:500 1.25rem/1.2 var(--u-body);letter-spacing:-.02em}
.pd-fs>.pd-lead{margin-bottom:18px;font-size:.95rem}
.pd-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.pd .u-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23efedea' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center;padding-right:2.6rem}
.pd .u-select option{background:#111;color:#efedea}
.pd .u-input[aria-invalid=true],.pd .u-select[aria-invalid=true],.pd .u-textarea[aria-invalid=true]{border-color:var(--u-err,#ff8a91)}
.pd .u-hint.is-err{display:block}
.pd .opt{color:var(--u-grey,#a8a39a);font-weight:400}
.pd-hp{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden} /* taste-skill-ignore: campo trampa para bots, fuera de pantalla */
.pd-sub{margin:26px 0 14px;font:500 .8125rem/1 var(--u-body);letter-spacing:.14em;text-transform:uppercase;color:var(--u-grey,#a8a39a)}

/* ---- revisión ---- */
.pd-rev{display:grid;gap:8px;margin:0 0 28px}
.pd-rg{display:grid;grid-template-columns:1fr auto;gap:6px 16px;padding:18px 20px;background:#111;border-radius:2px}
.pd-rg h3{margin:0;font:500 .8125rem/1.2 var(--u-body);letter-spacing:.14em;text-transform:uppercase;color:var(--u-grey,#a8a39a)}
.pd-rg dl{grid-column:1/-1;margin:6px 0 0;display:grid;gap:4px}
.pd-rg dl div{display:grid;grid-template-columns:minmax(96px,32%) 1fr;gap:12px}
.pd-rg dt{color:var(--u-grey,#a8a39a);font-size:.9rem}
.pd-rg dd{margin:0;overflow-wrap:anywhere;font-size:.95rem}
.pd-edit{border:0;background:none;padding:6px 0;color:var(--u-ink,#efedea);font:500 .875rem/1 var(--u-body);text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px;cursor:pointer;min-height:32px}
.pd-agree{display:grid;grid-template-columns:24px 1fr;gap:14px;align-items:start;margin:22px 0 6px;cursor:pointer}
.pd-agree input{width:24px;height:24px;margin:2px 0 0;accent-color:var(--u-ink,#efedea);cursor:pointer}
.pd-agree span{font-size:.95rem;line-height:1.45}
.pd-priv{margin:10px 0 0;color:var(--u-grey,#a8a39a);font-size:.875rem;line-height:1.55}
.pd-priv summary{cursor:pointer;min-height:32px;display:flex;align-items:center;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.pd-priv ul{margin:6px 0 0;padding-left:1.1em}
.pd-priv li{margin:3px 0}
.pd-link{color:inherit;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}

/* ---- éxito / plan B ---- */
.pd-folio{display:inline-block;margin:6px 0 26px;padding:14px 20px;background:var(--u-ink,#efedea);color:#000;font:500 clamp(1.6rem,4vw,2.4rem)/1 var(--u-body);letter-spacing:.02em;border-radius:2px}
.pd-next{margin:0 0 28px;padding:0;list-style:none;display:block;counter-reset:n}
.pd-next li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;padding:16px;margin-bottom:6px;background:#111;border-radius:2px;line-height:1.45}
.pd-next li::before{content:counter(n);display:grid;place-items:center;width:28px;height:28px;background:var(--u-ink,#efedea);color:#000;font:500 .85rem/1 var(--u-body);border-radius:2px}
.pd-actions{display:flex;flex-wrap:wrap;gap:12px}
.pd-fail p.pd-lead strong{color:var(--u-ink,#efedea);font-weight:500}

/* ---- pie fijo ---- */
.pd-f{position:sticky;bottom:0;z-index:5;background:#000;padding:12px clamp(20px,4vw,56px) max(12px,env(safe-area-inset-bottom))}
.pd-f-in{display:flex;gap:12px;justify-content:space-between;max-width:680px}
.pd-f .btn{min-height:52px;flex:0 1 auto}
.pd-f .btn[hidden]{display:none}
.pd-f .next{margin-left:auto}
.pd-f[hidden]{display:none}
.pd-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* taste-skill-ignore: región viva para lectores de pantalla */
.pd .btn[aria-busy=true]{opacity:.7;pointer-events:none}

@media (prefers-reduced-motion:reduce){.pd-step,.pd-ok,.pd-fail{animation:none}.pd-steps li,.pd-sumtoggle .chev{transition:none}}

/* ---- pie del carrito (tech.html): botón principal + alternativas ---- */
.dr-f .alt{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dr-f .alt .btn{min-height:44px;padding:0 12px}
.dr-f .btn[aria-disabled=true]{opacity:.4;pointer-events:none}

.pd-fact{border:0;margin:22px 0 0;padding:0;min-width:0}
.pd-fact .pd-agree{margin-top:0}
.pd-iva{display:block;color:var(--u-grey,#a8a39a);font-size:.8125rem}
.pd-factg{margin-top:18px;padding:18px 16px;background:#1a1918;border-radius:2px}
.pd-up .u-input{text-transform:uppercase}
.pd-tax{display:flex;justify-content:space-between;gap:16px;padding:6px 16px 0;font-size:.875rem;color:var(--u-grey,#a8a39a)}