/* One photographic scene with native, editable UI. All coordinates refer to
   the unwarped 1525 × 1031 production backplate. No rasterized website text. */
#como-pedir.integrated-process{padding:0;background:#f8f9fd;overflow:hidden;color:#10132b}
#como-pedir .process-canvas{position:relative;container-type:inline-size;width:min(1525px,100%);margin:0 auto;--process-label-width:100%;--process-label-height:100%}
#como-pedir .process-scene{position:relative;width:100%;aspect-ratio:1525/1031;isolation:isolate}
#como-pedir .process-photo-plane{position:relative;width:100%;aspect-ratio:1525/1031}
#como-pedir .process-backplate{display:block;width:100%;height:auto;aspect-ratio:1525/1031;object-fit:contain;mask-image:linear-gradient(to bottom,transparent 0%,#000 18%,#000 94%,transparent 100%)}
#como-pedir .process-heading{position:absolute;z-index:2;top:1.8%;left:20%;width:60%;text-align:center}
#como-pedir .process-heading .eyebrow{font-size:1.22cqw;line-height:1.2;letter-spacing:.08em;color:#2852f6;margin:0 0 .65cqw;font-weight:700}
#como-pedir .process-heading h2{font-size:3.9cqw;line-height:1.01;letter-spacing:-.046em;margin:0;font-weight:700}
#como-pedir .process-heading>p:last-child{font-size:1.58cqw;line-height:1.25;color:#546078;margin:.85cqw 0 0}
#como-pedir .process-steps{position:absolute;z-index:2;top:26%;left:6.5%;right:5.7%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3.7%;list-style:none;margin:0;padding:0}
#como-pedir .process-steps li{position:relative;min-width:0}
#como-pedir .process-step-number{display:grid;place-items:center;width:3.85cqw;height:3.85cqw;border-radius:50%;background:#e5ecff;color:#2852f6;font-weight:700;font-size:1.38cqw;margin-bottom:.7cqw}
#como-pedir .process-steps li:not(:last-child)::after{content:'';position:absolute;left:5.5cqw;right:-1.6cqw;top:1.91cqw;height:1px;background:#5376ff}
#como-pedir .process-steps h3{font-size:1.94cqw;line-height:1.1;letter-spacing:-.045em;margin:0 0 .36cqw}
#como-pedir .process-steps p{font-size:1.2cqw;line-height:1.23;color:#4e5b71;margin:0}
#como-pedir .process-config{position:absolute;z-index:4;top:42.2%;left:7.7%;width:16.15%;background:#fffffff7;border:1px solid #ffffffd9;border-radius:1.2cqw;padding:1.2cqw 1.35cqw .8cqw;box-shadow:0 14px 50px #13295509}
#como-pedir .process-config fieldset{border:0;padding:0;margin:0;min-width:0;display:grid;gap:.8cqw}
#como-pedir .process-field{display:grid;gap:.27cqw;color:#202b45;font-size:max(11px,.8cqw);line-height:1.2;font-weight:400}
#como-pedir .process-select-wrap{display:block;position:relative}
#como-pedir .process-select-wrap>svg{position:absolute;right:.65cqw;top:50%;transform:translateY(-50%);width:12px;height:12px;pointer-events:none;fill:none;stroke:currentColor;stroke-width:2;color:#2852f6}
#como-pedir .process-config select,#como-pedir .process-config input{display:block;background:#fff;border:1px solid #e0e6f4;border-radius:6px;width:100%;min-width:0;min-height:34px;height:2.2cqw;padding:.4cqw 1.8cqw .4cqw .6cqw;font-family:inherit;font-weight:400;font-size:max(11px,.9cqw);line-height:1.2;color:#252d45;box-shadow:inset 0 2px 4px #eef2f94d}
#como-pedir .process-config select{appearance:none;cursor:pointer}
#como-pedir .process-config select:focus-visible,#como-pedir .process-config input:focus-visible,#como-pedir .process-continue a:focus-visible,#como-pedir .process-photo-error button:focus-visible{outline:3px solid #2852f6;outline-offset:3px}
#como-pedir .process-config [aria-invalid=true]{border-color:#ad302f;background:#fff8f7}
#como-pedir .process-config-summary{font-size:max(10px,.72cqw);line-height:1.3;color:#626d81;margin:.8cqw 0 0;padding-top:.6cqw;border-top:1px solid #edf0f7}
#como-pedir .process-custom-size{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#como-pedir .process-custom-size label,#como-pedir .process-custom-quantity{font-size:11px;line-height:1.4;color:#39475d;min-width:0}
#como-pedir .process-config input{font-size:13px;padding:6px}
#como-pedir .process-custom-size[hidden],#como-pedir .process-custom-quantity[hidden],#como-pedir .process-error[hidden],#como-pedir .process-photo-error[hidden]{display:none}
#como-pedir .process-error{font-size:12px;line-height:1.4;color:#982523;background:#fff1ed;border-radius:7px;padding:8px;margin:9px 0 0}
#como-pedir .process-config.has-custom{top:40.5%;left:5.4%;width:20%}
#como-pedir .process-screen{position:absolute;left:27.2%;top:46.7%;width:23.4%;height:23.6%;transform:rotate(-3deg) skewX(1.5deg);display:grid;grid-template-columns:16% 84%;gap:0;padding:1.2%;pointer-events:none;overflow:hidden}
#como-pedir .process-editor-tools{display:flex;flex-direction:column;align-items:center;gap:.55cqw;padding:.2cqw 0}
#como-pedir .process-editor-tools>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25cqw;width:3.1cqw;min-height:4cqw;background:#fdfdfc;border-radius:.45cqw;color:#202531;font-size:.8cqw}
#como-pedir .process-editor-tools>span.active{color:white;background:#2954f6;box-shadow:0 3px 9px #3154ee24}
#como-pedir .process-editor-tools svg{width:1.05cqw;height:1.05cqw;fill:none;stroke:currentColor;stroke-width:1.6}
#como-pedir .process-editor-tools small{font-size:.52cqw;line-height:1.1;text-align:center}
#como-pedir .process-editor-tools b{font-family:Georgia,serif;font-size:1.3cqw;font-weight:700;line-height:1}
#como-pedir .process-editor-paper{align-self:center;justify-self:center;width:92%;aspect-ratio:1;display:flex;align-items:center;justify-content:center}
#como-pedir .process-label-paper{position:relative;display:flex;align-items:center;justify-content:center;flex:none;width:var(--process-label-width);height:var(--process-label-height);background:#f8e8d3;box-shadow:0 2px 5px #44372130;overflow:hidden;border-radius:2px}
#como-pedir .process-label-paper>img{display:block;width:100%;height:100%;object-fit:contain;opacity:.99}
#como-pedir .process-label-paper::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:linear-gradient(112deg,transparent 0 45%,#fff5 48%,#fff1 55%,transparent 65%)}
#como-pedir .process-jar-preview{position:absolute;left:56.2%;top:59.2%;width:14.1%;height:17%;display:flex;justify-content:center;align-items:center;pointer-events:none}
#como-pedir .process-jar-preview .process-label-paper{width:calc(var(--process-label-width) * .82);height:var(--process-label-height);border-radius:42% / 5%;box-shadow:inset 13px 0 15px -13px #3d302b85,inset -13px 0 15px -13px #3d302b85,0 0 1px #664d3970}
#como-pedir .process-jar-preview .process-label-paper>img{filter:contrast(.94) brightness(.96)}
#como-pedir .process-jar-preview .process-label-paper::after{background:linear-gradient(90deg,#65462228,transparent 23% 74%,#5b3d2729),linear-gradient(105deg,transparent 0 72%,#fff6 77%,transparent 84%);mix-blend-mode:normal}
#como-pedir .process-canvas[data-material=mate] .process-label-paper::after,#como-pedir .process-canvas[data-material=bopp-mate] .process-label-paper::after,#como-pedir .process-canvas[data-material=pe-mate] .process-label-paper::after{background:linear-gradient(90deg,#6546221b,transparent 25% 75%,#5b3d271b)}
#como-pedir .process-canvas[data-material=mate] .process-label-paper{background-color:#f6e9d7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23887960' opacity='.1' filter='url(%23n)' d='M0 0h100v100H0z'/%3E%3C/svg%3E")}
#como-pedir .process-canvas[data-material=sintetica] .process-label-paper::after{background:linear-gradient(120deg,transparent,#fff3 40%,transparent 75%)}
#como-pedir .process-canvas[data-material=brillo] .process-label-paper::after{background:linear-gradient(105deg,transparent 20%,#fff7 32%,#fff1 42%,transparent 60%)}
#como-pedir .process-canvas[data-material=bopp-brillo] .process-label-paper::after{background:linear-gradient(105deg,transparent 35%,#fff8 42%,#fff1 48%,transparent 64%)}
#como-pedir .process-canvas[data-material=pe-mate] .process-label-paper{background:#eee2d2;border-radius:4px}
#como-pedir .process-canvas[data-material=bopp-mate] .process-label-paper{background:#f6eee1}
#como-pedir .process-canvas[data-material=transparente] .process-label-paper{background:#ffffff25;box-shadow:inset 0 0 0 1px #ffffff45,0 1px 2px #43382b20}
#como-pedir .process-canvas[data-material=transparente] .process-label-paper>img{filter:none;mix-blend-mode:multiply}
#como-pedir .process-canvas[data-material=holografico] .process-label-paper{background:linear-gradient(125deg,#e7bdec 0%,#cde5ed 19%,#ecd8a9 36%,#b9d9e7 52%,#e5b5db 70%,#d8e8cc 87%,#eacdea 100%)}
#como-pedir .process-canvas[data-material=holografico] .process-label-paper::after{background:linear-gradient(120deg,transparent 15%,#fff6 29%,transparent 40% 55%,#fff5 62%,transparent 75%)}
#como-pedir .process-preview-badge{position:absolute;left:63.1%;top:43.7%;display:flex;align-items:center;gap:.6cqw;background:#fffffff7;padding:.7cqw 1cqw;color:#27314a;font-size:.88cqw;line-height:1.2;border-radius:.9cqw;box-shadow:0 5px 20px #17357306;white-space:nowrap}
#como-pedir .process-preview-badge svg{width:1.6cqw;height:1.6cqw;fill:none;stroke:white;stroke-width:2;background:#2b55fa;border-radius:50%;padding:.3cqw}
#como-pedir .process-preview-rays{position:absolute;left:52.8%;top:46.5%;width:4.1%;height:auto;fill:none;stroke:#3561ff;stroke-width:2.3;stroke-linecap:round}
#como-pedir .process-box-brand{position:absolute;left:79.8%;top:65.8%;width:11.8%;transform:skewY(14deg);transform-origin:top left;pointer-events:none}
#como-pedir .process-box-brand img{display:block;width:100%;height:auto;object-fit:contain;mix-blend-mode:multiply;opacity:.93}
#como-pedir .process-box-brand span{display:block;margin-top:1.5cqw;font-size:.96cqw;line-height:1.3;color:#241c16;letter-spacing:-.02em}
#como-pedir .process-continue{position:absolute;z-index:3;left:23%;right:23%;top:84.3%;display:flex;flex-direction:column;align-items:center;gap:.9cqw;text-align:center}
#como-pedir .process-continue .button{border-radius:99px;min-width:27cqw;min-height:5cqw;padding:1.4cqw 3cqw;font-size:1.6cqw;line-height:1.2;gap:1.1cqw;background:#2954f5;box-shadow:none;white-space:nowrap;color:white}
#como-pedir .process-continue .button svg{width:1.6cqw;height:1.6cqw}
#como-pedir .process-continue .button[aria-disabled=true]{opacity:.65;cursor:not-allowed}
#como-pedir .process-selection{font-size:max(11px,.9cqw);color:#4f5e75;line-height:1.3}
#como-pedir .process-disclaimer{font-size:11px;line-height:1.45;text-align:center;max-width:1000px;margin:-2px auto 0;padding:0 25px 24px;color:#596579;position:relative}
#como-pedir .process-photo-error{position:absolute;left:28%;right:25%;top:61%;border:1px solid #dce5f8;background:#fff;padding:20px;border-radius:16px;font-size:14px;line-height:1.5;z-index:1;color:#3d4c65}
#como-pedir .process-photo-error button{display:block;border:0;background:#edf2ff;color:#2149d9;padding:10px 15px;min-height:44px;border-radius:9px;margin-top:10px;cursor:pointer}
#como-pedir .has-photo-error .process-photo-plane{visibility:hidden}
@media(min-width:901px) and (max-width:1130px){
 #como-pedir .process-heading{top:2.2%}
 #como-pedir .process-config{padding:12px;width:17.7%;left:7%}
 #como-pedir .process-config.has-custom{width:23%;left:2.5%;top:41%}
 #como-pedir .process-config fieldset{gap:7px}
 #como-pedir .process-config select{font-size:11px;min-height:30px}
 #como-pedir .process-steps p{font-size:13px}
}
@media(max-width:900px){
 #como-pedir .process-canvas{padding-top:32px;display:flex;flex-direction:column}
 #como-pedir .process-heading{position:relative;inset:auto;width:calc(100% - 40px);margin:0 auto}
 #como-pedir .process-heading .eyebrow{font-size:12px;margin-bottom:12px}
 #como-pedir .process-heading h2{font-size:42px;line-height:1.04}
 #como-pedir .process-heading>p:last-child{font-size:16px;line-height:1.4;margin:14px auto 0;max-width:530px}
 #como-pedir .process-heading>p:last-child br{display:none}
 #como-pedir .process-steps{position:relative;inset:auto;width:calc(100% - 56px);margin:28px auto 0;grid-template-columns:repeat(4,minmax(0,1fr));gap:19px}
 #como-pedir .process-step-number{width:36px;height:36px;font-size:13px;margin-bottom:9px}
 #como-pedir .process-steps li:not(:last-child)::after{left:47px;right:0;top:18px}
 #como-pedir .process-steps h3{font-size:18px;margin-bottom:7px}
 #como-pedir .process-steps p{font-size:13px;line-height:1.4}
 #como-pedir .process-steps p br{display:none}
 #como-pedir .process-config,#como-pedir .process-config.has-custom{position:relative;inset:auto;width:calc(100% - 56px);padding:18px;margin:24px auto 0;border-radius:15px;box-shadow:0 4px 22px #1735730a}
 #como-pedir .process-config fieldset{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}
 #como-pedir .process-field{font-size:13px;gap:7px}
 #como-pedir .process-config select,#como-pedir .process-config input{min-height:44px;height:auto;font-size:16px;padding:10px 28px 10px 10px}
 #como-pedir .process-select-wrap>svg{right:10px;width:14px;height:14px}
 #como-pedir .process-config-summary{font-size:12px;margin:12px 0 0;padding-top:11px}
 #como-pedir .process-custom-size{grid-row:2;grid-column:1/3}
 #como-pedir .process-custom-quantity{grid-row:2;grid-column:3}
 #como-pedir .process-config input{padding-right:8px}
 #como-pedir .process-custom-size label,#como-pedir .process-custom-quantity{font-size:12px}
 #como-pedir .process-scene{aspect-ratio:1525/680;overflow:hidden;margin-top:16px}
 #como-pedir .process-photo-plane{margin-top:-23%}
 #como-pedir .process-backplate{mask-image:linear-gradient(to bottom,transparent 27%,#000 35% 95%,transparent 100%)}
 #como-pedir .process-preview-badge{font-size:1.25cqw;left:61%;top:43.7%;gap:.7cqw;padding:1cqw;border-radius:1cqw}
 #como-pedir .process-preview-badge svg{width:2cqw;height:2cqw}
 #como-pedir .process-continue{position:relative;inset:auto;gap:11px;margin:-18px 20px 24px}
 #como-pedir .process-continue .button{font-size:17px;min-height:54px;min-width:280px;padding:15px 26px;gap:16px}
 #como-pedir .process-continue .button svg{width:20px;height:20px}
 #como-pedir .process-selection{font-size:12px}
 #como-pedir .process-photo-error{inset:22% 14% auto;font-size:13px}
 #como-pedir .process-disclaimer{max-width:650px;font-size:11px}
}
@media(max-width:600px){
 #como-pedir .process-heading h2{font-size:32px}
 #como-pedir .process-heading .eyebrow{font-size:10px}
 #como-pedir .process-heading>p:last-child{font-size:14px;max-width:355px}
 #como-pedir .process-steps{width:calc(100% - 40px);grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px;margin-top:24px}
 #como-pedir .process-steps li:nth-child(2)::after{display:none}
 #como-pedir .process-steps li:nth-child(3)::after{display:block}
 #como-pedir .process-steps li:not(:last-child)::after{right:0}
 #como-pedir .process-step-number{width:32px;height:32px;font-size:12px}
 #como-pedir .process-steps li:not(:last-child)::after{top:16px;left:44px}
 #como-pedir .process-steps h3{font-size:18px}
 #como-pedir .process-steps p{font-size:13px}
 #como-pedir .process-config,#como-pedir .process-config.has-custom{width:calc(100% - 40px);padding:16px;margin-top:22px}
 #como-pedir .process-config fieldset{grid-template-columns:1fr;gap:12px}
 #como-pedir .process-field{grid-template-columns:65px minmax(0,1fr);gap:12px;align-items:center}
 #como-pedir .process-custom-size,#como-pedir .process-custom-quantity{grid-column:1;grid-row:auto}
 #como-pedir .process-field>span:first-child{font-size:13px}
 #como-pedir .process-config-summary{font-size:11px}
 #como-pedir .process-config select{font-size:16px;padding-left:9px}
 #como-pedir .process-scene{margin-top:8px;aspect-ratio:1525/740}
 #como-pedir .process-photo-plane{margin-top:-20%}
 #como-pedir .process-backplate{mask-image:linear-gradient(to bottom,transparent 24%,#000 34% 96%,transparent 100%)}
 #como-pedir .process-preview-badge{font-size:2.15cqw;left:57.5%;top:42%;padding:1.5cqw 2cqw;border-radius:1.8cqw;gap:1cqw}
 #como-pedir .process-preview-badge svg{width:3cqw;height:3cqw;padding:.5cqw}
 #como-pedir .process-preview-rays{top:45.5%;left:53%}
 #como-pedir .process-continue{margin:-5px 20px 22px}
 #como-pedir .process-continue .button{width:100%;max-width:350px;min-width:0;font-size:16px}
 #como-pedir .process-disclaimer{padding-inline:22px;font-size:10px}
 #como-pedir .process-photo-error{inset:7% 6% auto;font-size:12px;padding:12px}
 #como-pedir .process-photo-error button{min-height:38px;padding:8px 12px;margin-top:7px}
}
@media(prefers-reduced-motion:reduce){#como-pedir *,#como-pedir *::before,#como-pedir *::after{scroll-behavior:auto;transition:none;animation:none}}

/* RUIDO photograph includes the artwork and box branding. */
#como-pedir .process-photo-plane{position:absolute;top:29%;margin:0;aspect-ratio:1923/818}
#como-pedir .process-backplate{aspect-ratio:1923/818;mix-blend-mode:multiply;mask-image:linear-gradient(to bottom,transparent,#000 8% 94%,transparent)}
#como-pedir .process-preview-badge{left:60.5%;top:19%}
@media(max-width:900px){
 #como-pedir .process-scene{aspect-ratio:1923/818;overflow:visible}
 #como-pedir .process-photo-plane{position:relative;top:auto;margin:0;aspect-ratio:1923/818}
 #como-pedir .process-backplate{mask-image:linear-gradient(to bottom,transparent,#000 8% 94%,transparent)}
 #como-pedir .process-preview-badge{left:58%;top:20%}
 #como-pedir .process-continue{margin:0 20px 24px}
}

/* Compact blue selector reveals more of the label rolls. */
#como-pedir .process-config{background:#2041e5;border-color:#2041e5;color:#fff;box-shadow:0 8px 24px #2041e51a}
#como-pedir .process-field,#como-pedir .process-custom-size label,#como-pedir .process-custom-quantity,#como-pedir .process-select-wrap>svg{color:#fff}
#como-pedir .process-config select,#como-pedir .process-config input{background:#ffffff10;border-color:#ffffff65;color:#fff;box-shadow:none}
#como-pedir .process-config option{background:#2041e5;color:#fff}
#como-pedir .process-config-summary{color:#fff;border-color:#ffffff40}
#como-pedir .process-config select:focus-visible,#como-pedir .process-config input:focus-visible{outline-color:#fff;outline-offset:2px}
#como-pedir .process-config [aria-invalid=true]{background:#942d39;color:#fff;border-color:#ffc3cc}
@media(min-width:901px){
 #como-pedir .process-config{left:8.3%;width:14.4%;padding:.75cqw .85cqw .6cqw;border-radius:1cqw}
 #como-pedir .process-config fieldset{gap:.4cqw}
 #como-pedir .process-field{gap:.18cqw;font-size:max(11px,.75cqw)}
 #como-pedir .process-config select,#como-pedir .process-config input{min-height:28px;height:1.9cqw;padding:.3cqw 1.5cqw .3cqw .5cqw;font-size:max(11px,.8cqw)}
 #como-pedir .process-config-summary{margin:.45cqw 0 0;padding-top:.45cqw;font-size:max(10px,.68cqw)}
}

/* Keep the delivery copy clear of the box and strengthen the preview badge. */
#como-pedir .process-preview-badge{background:#2041e5;color:#fff;box-shadow:0 4px 14px #2041e526;transform:translateY(-12px)}
#como-pedir .process-preview-badge svg{background:#fff;stroke:#2041e5}
@media(min-width:901px){
 #como-pedir .process-photo-plane,#como-pedir .process-continue{transform:translateY(4.5cqw)}
 #como-pedir .process-canvas{margin-bottom:min(4.5vw,68.625px)}
}
