.lavado{gap:1.25rem;display:grid}@media (width>=64rem){.lavado{grid-template-columns:minmax(20rem,23.5rem) minmax(0,1fr);align-items:stretch;gap:0}.lavado .ficha-lavado{margin-right:-2.5rem;z-index:2;order:-1;margin-block:2.5rem}}.escenario{isolation:isolate;border-radius:var(--radius-l);background:#eef9f6;height:clamp(20rem,54vh,28rem);position:relative;overflow:hidden}@media (width>=64rem){.escenario{height:clamp(32rem,100vh - 9rem,44rem)}}.escenario-fondo{z-index:-1;background:radial-gradient(60% 55% at 55% 62%,#fff 0%,#fff9 45%,#0000 75%),radial-gradient(circle at 30% 30%,#102a430f 0 1.2px,#0000 1.6px) 0 0/23px 29px,radial-gradient(circle at 70% 60%,#55d6c240 0 2px,#0000 2.6px) 0 0/41px 37px,linear-gradient(#e5f6f2,#f4fbf9 60%,#e8f5f2);position:absolute;inset:0}.escenario canvas{display:block}.cargador{z-index:5;text-align:center;background:#eef9f6;place-content:center;justify-items:center;gap:.35rem;display:grid;position:absolute;inset:0}.cargador-gota{width:3.2rem;height:4.2rem;margin-bottom:.75rem;position:relative}.cargador-gota:before{content:"";background:var(--color-agua-claro);clip-path:path("M25.6 0C25.6 0 0 30 0 46.4A25.6 25.6 0 0 0 51.2 46.4C51.2 30 25.6 0 25.6 0Z");position:absolute;inset:0}.cargador-gota span{background:var(--color-agua);clip-path:path("M25.6 0C25.6 0 0 30 0 46.4A25.6 25.6 0 0 0 51.2 46.4C51.2 30 25.6 0 25.6 0Z");animation:llenar 1.6s var(--ease-agua) infinite;position:absolute;inset:0}@keyframes llenar{0%{clip-path:path("M25.6 0C25.6 0 0 30 0 46.4A25.6 25.6 0 0 0 51.2 46.4C51.2 30 25.6 0 25.6 0Z");transform-origin:bottom;transform:scaleY(.05)}70%,to{transform-origin:bottom;transform:scaleY(1)}}.rotulo-paso{z-index:3;pointer-events:none;position:absolute;bottom:1.5rem;left:clamp(.9rem,2.5vw,1.75rem);right:1rem}@media (width>=64rem){.rotulo-paso{bottom:2rem;left:4.5rem}}.rotulo-paso>div{align-items:center;gap:.9rem;display:flex}.rotulo-num{border-radius:var(--radius-m);background:var(--color-marino);color:#fff;width:3rem;height:3rem;font:700 1.15rem/1 var(--font-display);font-variant-numeric:tabular-nums;flex:none;place-items:center;display:grid}.rotulo-titulo{font-family:var(--font-display);letter-spacing:-.02em;font-variation-settings:"wdth" 84;color:var(--color-marino);font-size:clamp(1.25rem,2.6vw,1.85rem);font-weight:700;line-height:1;display:block}.rotulo-texto{color:var(--color-marino-2);max-width:34ch;margin-top:.25rem;font-size:.9rem;display:block}.progreso{z-index:3;background:#102a4314;height:6px;position:absolute;bottom:0;left:0;right:0}.progreso-relleno{background:var(--color-agua);transform-origin:0;transition:transform .12s linear;position:absolute;inset:0}.progreso-marca{background:#fff;width:2px;margin-left:-1px;position:absolute;top:0;bottom:0}.vista-controles{z-index:4;gap:.4rem;display:flex;position:absolute;top:.9rem;right:.9rem}.ctrl{border-radius:var(--radius-m);min-width:2.6rem;height:2.6rem;color:var(--color-marino);box-shadow:var(--sombra-1);background:#ffffffeb;place-items:center;transition:background .2s,transform .2s;display:inline-grid}.ctrl:hover{transform:translateY(-1px)}.ctrl[aria-pressed=true]{background:var(--color-agua)}.ctrl:disabled{opacity:.45;pointer-events:none}.ctrl-texto{gap:.4rem;padding-inline:.8rem;font-size:.85rem;font-weight:650;display:inline-flex}.pista-arrastre{z-index:3;color:var(--color-marino-2);pointer-events:none;background:#ffffffbf;border-radius:99px;align-items:center;gap:.4rem;padding:.3rem .65rem;font-size:.8rem;font-weight:600;display:inline-flex;position:absolute;top:1.1rem;left:50%;transform:translate(-50%)}@media (width>=64rem){.pista-arrastre{left:4.5rem;transform:none}}.ficha-lavado{border-radius:var(--radius-m);background:#fff;align-self:start;padding:1.5rem 1.4rem 1.4rem;position:relative;box-shadow:0 0 0 1px #102a430f,0 30px 60px -30px #102a4373;-webkit-mask:radial-gradient(5px at 50% 0,#0000 98%,#000) top/18px 100% repeat-x;mask:radial-gradient(5px at 50% 0,#0000 98%,#000) top/18px 100% repeat-x}.ficha-cabeza{border-bottom:1.5px dashed var(--color-gris-2);letter-spacing:.16em;text-transform:uppercase;color:var(--color-agua-tinta);justify-content:space-between;padding-bottom:.7rem;font-size:.72rem;font-weight:800;display:flex}.selector-planes{grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;display:grid}.opcion-plan{border-radius:var(--radius-m);cursor:pointer;text-align:center;min-height:3rem;color:var(--color-marino);transition:background .2s, border-color .2s, color .2s, transform .25s var(--ease-goma);border:1.5px solid #c5d2d8;place-items:center;padding:.5rem .3rem;font-size:.92rem;font-weight:700;display:grid;position:relative}.opcion-plan:hover{border-color:var(--color-marino-3)}.opcion-plan input{opacity:0;cursor:pointer;margin:0;position:absolute;inset:0}.opcion-plan:has(input:checked){border-color:var(--color-marino);transform:translateY(-2px);box-shadow:0 8px 16px -10px #102a4380}.opcion-plan[data-indice="0"]:has(input:checked){background:var(--color-agua-niebla)}.opcion-plan[data-indice="1"]:has(input:checked){background:var(--color-agua);border-color:var(--color-agua)}.opcion-plan[data-indice="2"]:has(input:checked){background:var(--color-marino);color:#fff}.opcion-plan:has(input:focus-visible){outline:3px solid var(--color-agua);outline-offset:2px}.nivel{gap:3px;display:inline-flex}.nivel span{background:var(--color-gris-2);width:.55rem;height:.7rem;clip-path:path("M4.4 0C4.4 0 0 5 0 7.5A4.4 4.4 0 0 0 8.8 7.5C8.8 5 4.4 0 4.4 0Z")}.nivel span.lleno{background:#8a6d4d}.pasos-lista{counter-reset:paso;gap:.2rem;display:grid}.pasos-lista li{color:#7d8c95;align-items:center;gap:.6rem;padding:.28rem 0;font-size:.92rem;transition:color .3s;display:flex}.paso-icono{font-variant-numeric:tabular-nums;border:1.5px solid;border-radius:6px;flex:none;place-items:center;width:1.55rem;height:1.55rem;font-size:.68rem;font-weight:800;display:grid}.pasos-lista li[data-estado=ahora]{color:var(--color-marino);font-weight:700}.pasos-lista li[data-estado=ahora] .paso-icono{background:var(--color-agua);border-color:var(--color-agua);animation:1.2s ease-in-out infinite latido}.pasos-lista li[data-estado=hecho]{color:var(--color-marino-2)}.pasos-lista li[data-estado=hecho] .paso-icono{background:var(--color-marino);border-color:var(--color-marino);color:#fff}@keyframes latido{50%{box-shadow:0 0 0 5px #55d6c240}}.colores{gap:.5rem;display:flex}.color-opcion{cursor:pointer;position:relative}.color-opcion input{opacity:0;cursor:pointer;position:absolute;inset:0}.color-muestra{width:2.1rem;height:2.1rem;transition:transform .25s var(--ease-goma);border-radius:50%;display:block;box-shadow:inset 0 -6px 10px #00000040,inset 0 4px 6px #ffffff59,0 0 0 1px #102a4326}.color-opcion:hover .color-muestra{transform:scale(1.08)}.color-opcion:has(input:checked) .color-muestra{box-shadow:inset 0 -6px 10px #00000040, inset 0 4px 6px #ffffff59, 0 0 0 3px #fff, 0 0 0 5px var(--color-marino)}.color-opcion:has(input:focus-visible) .color-muestra{outline:3px solid var(--color-agua);outline-offset:4px}.escenario{border:2.5px solid var(--color-marino);box-shadow:var(--sombra-dura)}.ficha-lavado{border:2.5px solid var(--color-marino);border-radius:var(--radius-l);box-shadow:var(--sombra-dura)}.rotulo-num{background:var(--color-agua);color:var(--color-marino);box-shadow:0 0 0 2.5px var(--color-marino), 0 3px 0 2.5px var(--color-marino);border-radius:50%}.ctrl{border-radius:999px}.opcion-plan{border-width:2.5px;border-color:var(--color-marino);transition:transform .25s var(--ease-rebote), background-color .2s;border-radius:999px;font-weight:750}.opcion-plan:has(input:checked){box-shadow:0 4px 0 var(--color-marino);transform:translateY(-2px)rotate(-2deg)}.paso-icono{border-radius:50%}.ficha-lavado{-webkit-mask:none;mask:none}.opcion-plan[data-indice]:has(input:checked){border-color:var(--color-marino)}
