/* ═══════════════════════════════════════════════════════════════════════════
   Tiendas Zimple · núcleo visual común (26-oct-2026)
   Cada tienda redefine los tokens en /t/tema.css (colores, fuentes, radios) y suma
   su portada. Aquí: componentes, movimiento, carrito, pago, calendario y pie.
   Movimiento: todo respeta prefers-reduced-motion.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#05070C; --bg-2:#0A0F1A; --bg-3:#111827;
  --panel:rgba(255,255,255,.045); --panel-2:rgba(255,255,255,.08); --panel-solido:#0D1320;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.2);
  --text:#F3F5F8; --text-2:rgba(243,245,248,.70); --text-3:rgba(243,245,248,.46);
  --acc:#B4C544; --acc-2:#DCE87E; --acc-ink:#0A1404; --glow:rgba(180,197,68,.38);
  --ok:#3DDC97; --mal:#FF6B6B; --aviso:#FFC857;
  --r-xs:8px; --r-sm:12px; --r:20px; --r-lg:30px;
  --f-display:system-ui,sans-serif; --f-body:system-ui,sans-serif; --f-mono:ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1); --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.65,0,.35,1);
  --max:1320px; --gutter:clamp(18px,4vw,48px); --barra:76px;
  color-scheme:dark;
}
@view-transition{ navigation:auto }
::view-transition-old(root),::view-transition-new(root){ animation-duration:.42s; animation-timing-function:var(--ease-out) }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0 }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--barra) + 16px) }
body{ background:var(--bg); color:var(--text); font:400 16px/1.6 var(--f-body); -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh }
img,svg,canvas,video{ display:block; max-width:100% }
a{ color:inherit; text-decoration:none }
button,input,select,textarea{ font:inherit; color:inherit }
button{ cursor:pointer; background:none; border:0 }
::selection{ background:var(--acc); color:var(--acc-ink) }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:6px }
.sr{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
.contenedor{ width:100%; max-width:var(--max); margin:0 auto; padding:0 var(--gutter) }

/* ═══ Capas de ambiente: grano y luz que sigue al puntero ═══ */
.grano{ position:fixed; inset:-50%; z-index:200; pointer-events:none; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grano 1.2s steps(6) infinite }
@keyframes grano{ 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }
.luz{ position:fixed; z-index:1; width:620px; height:620px; left:0; top:0; margin:-310px 0 0 -310px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, var(--glow) 0%, transparent 62%); opacity:0; transition:opacity .6s; mix-blend-mode:screen; will-change:transform }
body.con-puntero .luz{ opacity:.55 }

/* ═══ Tipografía ═══ */
.ojo{ display:inline-flex; align-items:center; gap:10px; font:500 12px/1 var(--f-mono); letter-spacing:.22em; text-transform:uppercase; color:var(--acc) }
.ojo::before{ content:''; width:22px; height:1px; background:currentColor; opacity:.7 }
.t-xl{ font:700 clamp(44px,8.2vw,124px)/.94 var(--f-display); letter-spacing:-.045em }
.t-l{ font:700 clamp(36px,5.4vw,78px)/.98 var(--f-display); letter-spacing:-.035em }
.t-m{ font:700 clamp(28px,3.4vw,48px)/1.04 var(--f-display); letter-spacing:-.025em }
.t-s{ font:700 clamp(21px,2vw,27px)/1.18 var(--f-display); letter-spacing:-.015em }
.entrada{ font-size:clamp(17px,1.4vw,20px); line-height:1.6; color:var(--text-2); max-width:58ch }
.acento{ color:var(--acc) }
.brilla{ background:linear-gradient(100deg, var(--acc) 0%, var(--acc-2) 30%, #fff 45%, var(--acc-2) 60%, var(--acc) 100%); background-size:240% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent; animation:brilla 6s var(--ease-in-out) infinite }
@keyframes brilla{ 0%,100%{background-position:100% 0} 50%{background-position:0 0} }
.mono{ font-family:var(--f-mono) }

/* palabras que entran una a una ([data-partir]) */
.palabra{ display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.08em; margin-bottom:-.08em }
.palabra > span{ display:inline-block; transform:translateY(105%); transition:transform 1s var(--ease-out); transition-delay:calc(var(--i) * 55ms) }
.visto .palabra > span, .palabra.visto > span{ transform:none }

/* aparición al hacer scroll */
[data-r]{ opacity:0; transform:translateY(28px); filter:blur(8px); transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out); transition-delay:calc(var(--d, 0) * 1ms) }
[data-r].visto{ opacity:1; transform:none; filter:none }

/* ═══ Barra superior ═══ */
.barra{ position:fixed; z-index:90; top:0; left:0; right:0; height:var(--barra); display:flex; align-items:center; transition:background .4s, border-color .4s, transform .5s var(--ease-out), backdrop-filter .4s }
.barra .contenedor{ display:flex; align-items:center; gap:28px }
.barra.solida{ background:color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter:blur(18px) saturate(1.5); -webkit-backdrop-filter:blur(18px) saturate(1.5); border-bottom:1px solid var(--line) }
.barra.oculta{ transform:translateY(-100%) }
.marca-link{ display:flex; align-items:center; gap:12px; flex:none }
.marca-link svg{ height:34px; width:auto }
.nav{ display:flex; gap:4px; margin-left:auto }
.nav a{ position:relative; padding:10px 14px; font-size:14.5px; font-weight:500; color:var(--text-2); border-radius:999px; transition:color .25s, background .25s }
.nav a:hover,.nav a[aria-current]{ color:var(--text); background:var(--panel) }
.acciones{ display:flex; align-items:center; gap:8px }
.icono-btn{ position:relative; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); background:var(--panel); transition:background .25s, border-color .25s, transform .25s var(--ease-out) }
.icono-btn:hover{ background:var(--panel-2); border-color:var(--line-2) }
.icono-btn svg{ width:19px; height:19px }
.contador{ position:absolute; top:-3px; right:-3px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:var(--acc); color:var(--acc-ink); font:700 11px/20px var(--f-mono); text-align:center; transform:scale(0); transition:transform .4s var(--ease-out) }
.contador.con{ transform:scale(1) }
.contador.late{ animation:late .6s var(--ease-out) }
@keyframes late{ 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
.menu-btn{ display:none }

/* ═══ Botones ═══ */
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px; border-radius:999px; font-weight:600; font-size:15.5px; letter-spacing:-.005em;
  overflow:hidden; isolation:isolate; transition:transform .35s var(--ease-out), box-shadow .35s, background .3s, border-color .3s; white-space:nowrap }
.btn svg{ width:18px; height:18px; transition:transform .35s var(--ease-out) }
.btn:hover svg.flecha{ transform:translateX(4px) }
.btn--prim{ background:var(--acc); color:var(--acc-ink); box-shadow:0 0 0 0 var(--glow), 0 10px 40px -10px var(--glow) }
.btn--prim:hover{ box-shadow:0 0 0 6px color-mix(in srgb, var(--acc) 18%, transparent), 0 16px 50px -8px var(--glow) }
.btn--prim::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(115deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform:translateX(-120%); transition:transform .9s var(--ease-out) }
.btn--prim:hover::after{ transform:translateX(120%) }
.btn--vidrio{ background:var(--panel); border:1px solid var(--line-2); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px) }
.btn--vidrio:hover{ background:var(--panel-2) }
.btn--linea{ border:1px solid var(--line-2) }
.btn--linea:hover{ border-color:var(--acc); color:var(--acc) }
.btn--chico{ height:42px; padding:0 18px; font-size:14px }
.btn--ancho{ width:100% }
.btn[disabled]{ opacity:.5; pointer-events:none }
.btn .girando{ width:18px; height:18px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:gira .7s linear infinite }
@keyframes gira{ to{ transform:rotate(360deg) } }

.chip{ display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 15px; border-radius:999px; border:1px solid var(--line); background:var(--panel); font-size:13.5px; color:var(--text-2); transition:all .25s; white-space:nowrap }
.chip:hover{ color:var(--text); border-color:var(--line-2) }
.chip[aria-pressed="true"]{ background:var(--text); color:var(--bg); border-color:var(--text) }
.chip b{ font:500 11px var(--f-mono); opacity:.6 }
.etiqueta{ display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px; border-radius:999px; font:500 10.5px/1 var(--f-mono); letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line-2); color:var(--text-2); background:color-mix(in srgb, var(--bg) 50%, transparent); backdrop-filter:blur(8px) }
.etiqueta i{ width:6px; height:6px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px var(--acc) }

/* ═══ Secciones ═══ */
.seccion{ position:relative; padding:clamp(80px,11vw,160px) 0; z-index:2 }
.seccion--ajustada{ padding:clamp(56px,7vw,96px) 0 }
.cab-seccion{ display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:clamp(36px,5vw,64px); flex-wrap:wrap }
.cab-seccion .t-l, .cab-seccion .t-m{ margin-top:16px; max-width:16ch }
.cab-seccion p{ max-width:44ch; color:var(--text-2) }

/* ═══ Tarjeta de producto ═══ */
.rejilla{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); gap:20px }
.tarjeta-p{ position:relative; border-radius:var(--r); background:var(--panel); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; isolation:isolate;
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .5s var(--ease-out), border-color .4s, box-shadow .4s; will-change:transform }
.tarjeta-p::before{ content:''; position:absolute; inset:0; z-index:3; pointer-events:none; border-radius:inherit; opacity:0; transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--acc) 22%, transparent), transparent 45%) }
.tarjeta-p:hover{ border-color:color-mix(in srgb, var(--acc) 45%, transparent); box-shadow:0 30px 80px -30px var(--glow) }
.tarjeta-p:hover::before{ opacity:1 }
.tarjeta-p__media{ position:relative; aspect-ratio:1/1; display:grid; place-items:center; overflow:hidden;
  background:radial-gradient(70% 60% at 50% 55%, color-mix(in srgb, var(--acc) 16%, transparent), transparent 70%), linear-gradient(180deg, var(--panel), transparent) }
.tarjeta-p__media img{ width:74%; height:74%; object-fit:contain; transition:transform .9s var(--ease-out); filter:drop-shadow(0 30px 40px rgba(0,0,0,.45)) }
.tarjeta-p__media img.foto{ width:100%; height:100%; object-fit:cover; filter:none }
.tarjeta-p:hover .tarjeta-p__media img{ transform:scale(1.07) translateY(-6px) }
.tarjeta-p__media .etiqueta{ position:absolute; top:14px; left:14px; z-index:2 }
.tarjeta-p__cuerpo{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:6px; flex:1 }
.tarjeta-p__cat{ font:500 11px var(--f-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--text-3) }
.tarjeta-p__nom{ font:700 19px/1.2 var(--f-display); letter-spacing:-.01em }
.tarjeta-p__res{ font-size:14px; color:var(--text-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.tarjeta-p__pie{ margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; gap:12px }
.precio{ font:700 20px var(--f-display); letter-spacing:-.01em }
.precio small{ display:block; font:500 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.precio--cot{ font:600 14px var(--f-body); color:var(--acc) }
.mas-btn{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--acc); color:var(--acc-ink); flex:none; transition:transform .4s var(--ease-out), box-shadow .4s }
.mas-btn:hover{ transform:rotate(90deg) scale(1.06); box-shadow:0 0 0 6px color-mix(in srgb, var(--acc) 20%, transparent) }
.mas-btn svg{ width:20px; height:20px }
.tarjeta-p a.cubre{ position:absolute; inset:0; z-index:1 }
.tarjeta-p .mas-btn{ position:relative; z-index:4 }

/* ═══ Cinta infinita ═══ */
.cinta{ position:relative; z-index:2; overflow:hidden; border-block:1px solid var(--line); padding:26px 0; mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent) }
.cinta__pista{ display:flex; gap:56px; width:max-content; animation:cinta 38s linear infinite }
.cinta:hover .cinta__pista{ animation-play-state:paused }
.cinta__item{ display:flex; align-items:center; gap:56px; font:700 clamp(30px,4.4vw,62px)/1 var(--f-display); letter-spacing:-.03em; white-space:nowrap }
.cinta__item .hueco{ color:transparent; -webkit-text-stroke:1.2px var(--line-2) }
.cinta__item svg{ width:28px; height:28px; color:var(--acc) }
@keyframes cinta{ to{ transform:translateX(-50%) } }

/* ═══ Bento ═══ */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:18px }
.celda{ position:relative; overflow:hidden; border-radius:var(--r-lg); background:var(--panel); border:1px solid var(--line); padding:clamp(22px,2.6vw,34px); isolation:isolate; min-height:280px; display:flex; flex-direction:column; transition:border-color .4s, transform .6s var(--ease-out) }
.celda::after{ content:''; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .5s; background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%), color-mix(in srgb, var(--acc) 18%, transparent), transparent 50%) }
.celda:hover{ border-color:color-mix(in srgb, var(--acc) 40%, transparent) }
.celda:hover::after{ opacity:1 }

/* ═══ Cajón del carrito ═══ */
.velo{ position:fixed; inset:0; z-index:150; background:rgba(2,4,8,.55); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .45s }
.velo.abierto{ opacity:1; pointer-events:auto }
.cajon{ position:fixed; z-index:160; top:10px; right:10px; bottom:10px; width:min(460px, calc(100vw - 20px)); border-radius:var(--r-lg); background:color-mix(in srgb, var(--panel-solido) 92%, transparent);
  backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--line-2); box-shadow:0 40px 120px -20px rgba(0,0,0,.7);
  display:flex; flex-direction:column; transform:translateX(calc(100% + 30px)); transition:transform .6s var(--ease-out) }
.cajon.abierto{ transform:none }
.cajon__cab{ display:flex; align-items:center; justify-content:space-between; padding:22px 24px 16px; border-bottom:1px solid var(--line) }
.cajon__cab h2{ font:700 22px var(--f-display); letter-spacing:-.02em }
.cajon__lista{ flex:1; overflow:auto; padding:8px 16px; overscroll-behavior:contain }
.cajon__vacio{ display:grid; place-items:center; text-align:center; gap:14px; padding:60px 20px; color:var(--text-2) }
.cajon__vacio svg{ width:64px; height:64px; color:var(--text-3) }
.linea-c{ display:grid; grid-template-columns:76px 1fr auto; gap:14px; align-items:center; padding:14px 8px; border-bottom:1px solid var(--line); animation:entra .5s var(--ease-out) both }
@keyframes entra{ from{ opacity:0; transform:translateX(20px) } }
.linea-c__img{ width:76px; height:76px; border-radius:var(--r-sm); background:var(--panel); display:grid; place-items:center; overflow:hidden }
.linea-c__img img{ width:80%; height:80%; object-fit:contain }
.linea-c__img img.foto{ width:100%; height:100%; object-fit:cover }
.linea-c__nom{ font-weight:600; font-size:15px; line-height:1.25 }
.linea-c__sub{ font-size:13px; color:var(--text-3); margin-top:2px }
.linea-c__der{ display:flex; flex-direction:column; align-items:flex-end; gap:8px }
.quitar{ font-size:12px; color:var(--text-3); text-decoration:underline; text-underline-offset:3px }
.quitar:hover{ color:var(--mal) }
.cajon__pie{ padding:18px 24px 22px; border-top:1px solid var(--line); display:grid; gap:12px }
.fila-total{ display:flex; justify-content:space-between; align-items:baseline; font-size:15px; color:var(--text-2) }
.fila-total b{ font:700 24px var(--f-display); color:var(--text); letter-spacing:-.02em }
.nota-c{ font-size:12.5px; color:var(--text-3); line-height:1.5 }

/* stepper de cantidad */
.cant{ display:inline-flex; align-items:center; height:36px; border:1px solid var(--line-2); border-radius:999px; overflow:hidden }
.cant button{ width:34px; height:100%; display:grid; place-items:center; color:var(--text-2); transition:background .2s, color .2s }
.cant button:hover{ background:var(--panel-2); color:var(--text) }
.cant span{ min-width:28px; text-align:center; font:600 14px var(--f-mono) }
.cant--grande{ height:54px }
.cant--grande button{ width:50px; font-size:20px }
.cant--grande span{ min-width:40px; font-size:16px }

/* ═══ Formularios ═══ */
.campo{ position:relative; display:block }
.campo input,.campo textarea,.campo select{ width:100%; height:58px; padding:22px 18px 8px; border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); outline:none; font-size:15.5px; transition:border-color .25s, background .25s, box-shadow .25s; appearance:none }
.campo textarea{ height:110px; resize:vertical; padding-top:26px }
.campo label{ position:absolute; left:18px; top:18px; font-size:15px; color:var(--text-3); pointer-events:none; transition:all .25s var(--ease-out); transform-origin:left top }
.campo input:focus,.campo textarea:focus,.campo select:focus{ border-color:var(--acc); background:var(--panel-2); box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 14%, transparent) }
.campo input:focus + label,.campo input:not(:placeholder-shown) + label,.campo textarea:focus + label,.campo textarea:not(:placeholder-shown) + label,.campo select + label{ top:9px; transform:scale(.78); color:var(--acc) }
.campo.error input,.campo.error textarea{ border-color:var(--mal) }
.campos{ display:grid; grid-template-columns:1fr 1fr; gap:12px }
.campos .ancho{ grid-column:1 / -1 }
.opciones{ display:grid; gap:10px }
.opcion{ position:relative; display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); cursor:pointer; transition:border-color .25s, background .25s }
.opcion:hover{ border-color:var(--line-2) }
.opcion input{ position:absolute; opacity:0 }
.opcion .marca-r{ width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex:none; margin-top:2px; display:grid; place-items:center; transition:border-color .25s }
.opcion .marca-r::after{ content:''; width:10px; height:10px; border-radius:50%; background:var(--acc); transform:scale(0); transition:transform .3s var(--ease-out) }
.opcion:has(input:checked){ border-color:var(--acc); background:color-mix(in srgb, var(--acc) 8%, var(--panel)) }
.opcion:has(input:checked) .marca-r{ border-color:var(--acc) }
.opcion:has(input:checked) .marca-r::after{ transform:scale(1) }
.opcion b{ display:block; font-weight:600 }
.opcion span{ display:block; font-size:13.5px; color:var(--text-2) }
.opcion:has(input:disabled){ opacity:.45; cursor:not-allowed }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

/* ═══ Avisos flotantes ═══ */
.avisos{ position:fixed; z-index:300; bottom:22px; left:50%; transform:translateX(-50%); display:grid; gap:10px; pointer-events:none }
.aviso{ display:flex; align-items:center; gap:12px; padding:12px 18px 12px 12px; border-radius:999px; background:color-mix(in srgb, var(--panel-solido) 92%, transparent); backdrop-filter:blur(16px); border:1px solid var(--line-2); box-shadow:0 20px 60px -20px rgba(0,0,0,.7); font-size:14.5px; animation:aviso .55s var(--ease-out) both; pointer-events:auto }
.aviso img{ width:38px; height:38px; border-radius:50%; background:var(--panel); object-fit:contain; padding:4px }
.aviso.sale{ animation:avisoSale .4s var(--ease-in-out) forwards }
@keyframes aviso{ from{ opacity:0; transform:translateY(20px) scale(.95) } }
@keyframes avisoSale{ to{ opacity:0; transform:translateY(12px) scale(.96) } }

/* ═══ Página de producto ═══ */
.pp{ padding-top:calc(var(--barra) + 28px) }
.migas{ display:flex; gap:10px; font:500 12px var(--f-mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:26px; flex-wrap:wrap }
.migas a:hover{ color:var(--acc) }
.pp__grid{ display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(28px,4vw,64px); align-items:start }
.escenario{ position:sticky; top:calc(var(--barra) + 20px); aspect-ratio:1/1; border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); isolation:isolate;
  background:radial-gradient(60% 55% at 50% 52%, color-mix(in srgb, var(--acc) 22%, transparent), transparent 70%), var(--panel) }
.escenario__img{ position:absolute; inset:9%; display:grid; place-items:center }
.escenario__img img{ max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 40px 60px rgba(0,0,0,.5)); animation:flota 7s var(--ease-in-out) infinite }
.escenario__img img.foto{ position:absolute; inset:-11%; width:122%; height:122%; max-width:none; max-height:none; object-fit:cover; filter:none; animation:none }
@keyframes flota{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-12px) } }
.escenario__rejilla{ position:absolute; inset:0; z-index:-1; opacity:.5; background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:44px 44px;
  mask-image:radial-gradient(70% 60% at 50% 55%, #000 20%, transparent 75%) }
.escenario__esquinas::before,.escenario__esquinas::after{ content:''; position:absolute; width:26px; height:26px; border:1.5px solid var(--acc); opacity:.7 }
.escenario__esquinas::before{ top:18px; left:18px; border-right:0; border-bottom:0 }
.escenario__esquinas::after{ bottom:18px; right:18px; border-left:0; border-top:0 }
.escenario__escaneo{ position:absolute; left:0; right:0; height:120px; top:-120px; z-index:1; pointer-events:none; background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 16%, transparent), transparent); animation:escaneo 5.5s var(--ease-in-out) infinite }
@keyframes escaneo{ 0%{ top:-120px } 60%,100%{ top:100% } }
.escenario .etiqueta{ position:absolute; z-index:2; bottom:18px; left:18px }
.miniaturas{ display:flex; gap:10px; margin-top:12px }
.miniaturas button{ width:72px; height:72px; border-radius:var(--r-sm); overflow:hidden; border:1px solid var(--line); opacity:.6; transition:opacity .25s, border-color .25s }
.miniaturas button[aria-pressed="true"]{ opacity:1; border-color:var(--acc) }
.miniaturas img{ width:100%; height:100%; object-fit:cover }
.pp__info h1{ font:700 clamp(36px,4.6vw,64px)/1 var(--f-display); letter-spacing:-.04em; margin:14px 0 14px }
.pp__lema{ font-size:20px; line-height:1.4; color:var(--acc); font-weight:500; margin-bottom:12px }
.pp__res{ color:var(--text-2); font-size:17px; margin-bottom:26px }
.caja-compra{ border-radius:var(--r); border:1px solid var(--line); background:var(--panel); padding:22px; display:grid; gap:16px }
.caja-compra .precio{ font-size:34px }
.caja-compra .fila{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }
.caja-compra .fila .btn{ flex:1 }
.garantias{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:4px }
.garantias div{ display:flex; gap:9px; align-items:flex-start; font-size:12.5px; color:var(--text-2); line-height:1.35 }
.garantias svg{ width:18px; height:18px; flex:none; color:var(--acc) }
.specs{ margin-top:34px; display:grid; gap:30px }
.specs h3{ font:500 12px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--acc); margin-bottom:12px }
.specs dl{ display:grid; gap:0; border-top:1px solid var(--line) }
.specs dl div{ display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:18px; padding:14px 0; border-bottom:1px solid var(--line) }
.specs dt{ font-weight:600; font-size:14.5px }
.specs dd{ color:var(--text-2); font-size:14.5px }
.specs ul{ list-style:none; display:grid; gap:10px }
.specs li{ display:flex; gap:12px; align-items:flex-start; color:var(--text-2); font-size:15px }
.specs li::before{ content:''; width:20px; height:20px; flex:none; margin-top:2px; border-radius:50%; background:color-mix(in srgb, var(--acc) 18%, transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat }

/* ═══ Calendario de alquiler ═══ */
.cal{ border-radius:var(--r-sm); border:1px solid var(--line); background:var(--panel); padding:14px; user-select:none }
.cal__cab{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.cal__cab b{ font:600 15px var(--f-display); text-transform:capitalize }
.cal__cab button{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line) }
.cal__cab button:hover{ border-color:var(--acc) }
.cal__dias{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center }
.cal__dias .sem{ font:500 10.5px var(--f-mono); color:var(--text-3); padding:4px 0 6px; letter-spacing:.08em }
.cal__dias button{ position:relative; height:38px; border-radius:9px; font:500 13.5px var(--f-mono); color:var(--text); transition:background .15s }
.cal__dias button:hover:not([disabled]){ background:var(--panel-2) }
.cal__dias button[disabled]{ color:var(--text-3); opacity:.35; cursor:not-allowed; text-decoration:line-through }
.cal__dias button.lleno{ color:var(--mal); opacity:.7; text-decoration:line-through }
.cal__dias button.en-rango{ background:color-mix(in srgb, var(--acc) 18%, transparent); border-radius:0 }
.cal__dias button.extremo{ background:var(--acc); color:var(--acc-ink); border-radius:9px; font-weight:700 }
.cal__dias button.hoy::after{ content:''; position:absolute; bottom:5px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--acc) }
.cal__dias button.extremo.hoy::after{ background:var(--acc-ink) }
.cal__ley{ display:flex; gap:16px; margin-top:10px; font-size:12px; color:var(--text-3); flex-wrap:wrap }
.cal__ley span{ display:flex; align-items:center; gap:6px }
.cal__ley i{ width:10px; height:10px; border-radius:3px; background:var(--acc) }
.cal__ley i.r{ background:var(--mal); opacity:.7 }
.resumen-alq{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.resumen-alq div{ border-radius:var(--r-sm); background:var(--panel); border:1px solid var(--line); padding:12px 14px }
.resumen-alq small{ display:block; font:500 10.5px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3) }
.resumen-alq b{ font:700 17px var(--f-display) }

/* ═══ Pagar ═══ */
.pagar{ padding-top:calc(var(--barra) + 40px) }
.pagar__grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:clamp(24px,4vw,56px); align-items:start }
.paso{ border-radius:var(--r); border:1px solid var(--line); background:var(--panel); padding:clamp(20px,2.4vw,30px); margin-bottom:16px }
.paso__cab{ display:flex; align-items:center; gap:14px; margin-bottom:18px }
.paso__num{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--acc); color:var(--acc-ink); font:700 14px var(--f-mono) }
.paso__cab h2{ font:700 21px var(--f-display); letter-spacing:-.02em }
.resumen{ position:sticky; top:calc(var(--barra) + 20px); border-radius:var(--r); border:1px solid var(--line-2); background:var(--panel); padding:22px; display:grid; gap:14px }
.resumen h2{ font:700 21px var(--f-display) }
.resumen .linea-c{ grid-template-columns:58px 1fr auto; padding:10px 0 }
.resumen .linea-c__img{ width:58px; height:58px }
.error-form{ display:none; padding:14px 16px; border-radius:var(--r-sm); background:color-mix(in srgb, var(--mal) 12%, transparent); border:1px solid color-mix(in srgb, var(--mal) 50%, transparent); color:#FFD2D2; font-size:14.5px }
.error-form.si{ display:block; animation:sacude .5s }
@keyframes sacude{ 20%,60%{ transform:translateX(-6px) } 40%,80%{ transform:translateX(6px) } }

/* ═══ Pedido / seguimiento ═══ */
.confirmacion{ text-align:center; padding:calc(var(--barra) + 60px) 0 30px }
.confirmacion .ok-circulo{ width:96px; height:96px; margin:0 auto 26px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--acc) 16%, transparent); box-shadow:0 0 0 12px color-mix(in srgb, var(--acc) 7%, transparent), 0 0 80px var(--glow) }
.confirmacion .ok-circulo svg{ width:46px; height:46px; color:var(--acc) }
.confirmacion .ok-circulo path{ stroke-dasharray:40; stroke-dashoffset:40; animation:traza .9s .3s var(--ease-out) forwards }
@keyframes traza{ to{ stroke-dashoffset:0 } }
.codigo{ display:inline-flex; align-items:center; gap:12px; margin-top:18px; padding:10px 12px 10px 20px; border-radius:999px; border:1px dashed var(--line-2); font:600 18px var(--f-mono); letter-spacing:.08em }
.codigo button{ height:34px; padding:0 14px; border-radius:999px; background:var(--panel-2); font:500 12.5px var(--f-body); letter-spacing:0 }
.pasos-estado{ display:grid; grid-template-columns:repeat(var(--n,5),1fr); gap:0; margin:44px 0 10px; position:relative }
.pasos-estado div{ position:relative; text-align:center; padding-top:34px; font-size:13px; color:var(--text-3) }
.pasos-estado div::before{ content:''; position:absolute; top:10px; left:50%; width:16px; height:16px; margin-left:-8px; border-radius:50%; background:var(--bg); border:2px solid var(--line-2); z-index:2 }
.pasos-estado div::after{ content:''; position:absolute; top:17px; left:-50%; right:50%; height:2px; background:var(--line) }
.pasos-estado div:first-child::after{ display:none }
.pasos-estado div.hecho{ color:var(--text) }
.pasos-estado div.hecho::before{ background:var(--acc); border-color:var(--acc); box-shadow:0 0 18px var(--glow) }
.pasos-estado div.hecho::after{ background:var(--acc) }
.pasos-estado div.actual::before{ animation:pulso 1.8s infinite }
@keyframes pulso{ 0%{ box-shadow:0 0 0 0 var(--glow) } 70%{ box-shadow:0 0 0 14px transparent } 100%{ box-shadow:0 0 0 0 transparent } }
.tabla-p{ width:100%; border-collapse:collapse; font-size:15px }
.tabla-p th{ text-align:left; font:500 11px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--text-3); padding:10px 0; border-bottom:1px solid var(--line) }
.tabla-p td{ padding:14px 0; border-bottom:1px solid var(--line) }
.tabla-p .n{ text-align:right; font-family:var(--f-mono) }

/* ═══ Pie ═══ */
.pie{ position:relative; z-index:2; border-top:1px solid var(--line); padding:72px 0 36px; overflow:hidden }
.pie__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px }
.pie h4{ font:500 11.5px var(--f-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--text-3); margin-bottom:16px }
.pie ul{ list-style:none; display:grid; gap:10px; font-size:15px; color:var(--text-2) }
.pie a:hover{ color:var(--acc) }
.pie__gigante{ margin-top:64px; font:700 clamp(60px,15vw,230px)/.8 var(--f-display); letter-spacing:-.06em; color:transparent; -webkit-text-stroke:1px var(--line-2); white-space:nowrap; user-select:none }
.pie__base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--text-3) }

/* botón flotante de WhatsApp */
.wa-flota{ position:fixed; z-index:80; right:22px; bottom:22px; width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff; box-shadow:0 14px 40px -8px rgba(37,211,102,.6); transition:transform .4s var(--ease-out) }
.wa-flota:hover{ transform:scale(1.08) rotate(-6deg) }
.wa-flota svg{ width:30px; height:30px }
.wa-flota::before{ content:''; position:absolute; inset:0; border-radius:50%; border:2px solid #25D366; animation:ondaWa 2.4s infinite }
@keyframes ondaWa{ from{ transform:scale(1); opacity:.8 } to{ transform:scale(1.7); opacity:0 } }

/* ═══ Celular y tableta ═══ */
@media (max-width:1000px){
  .pp__grid,.pagar__grid{ grid-template-columns:1fr }
  .escenario{ position:relative; top:0 }
  .resumen{ position:relative; top:0 }
  .pie__grid{ grid-template-columns:1fr 1fr }
  .bento{ grid-template-columns:repeat(2,1fr) }
  .bento > *{ grid-column:auto!important; grid-row:auto!important }
}
@media (max-width:820px){
  :root{ --barra:66px }
  .nav{ position:fixed; inset:var(--barra) 10px auto 10px; flex-direction:column; padding:10px; border-radius:var(--r); background:color-mix(in srgb, var(--panel-solido) 96%, transparent); border:1px solid var(--line-2); backdrop-filter:blur(20px);
    transform:translateY(-12px); opacity:0; pointer-events:none; transition:all .35s var(--ease-out) }
  .nav.abierto{ transform:none; opacity:1; pointer-events:auto }
  .nav a{ padding:14px 16px; font-size:16px }
  .menu-btn{ display:grid }
  .acciones{ margin-left:auto }
  .marca-link svg{ height:28px }
}
@media (max-width:640px){
  .campos{ grid-template-columns:1fr }
  .bento{ grid-template-columns:1fr }
  .pie__grid{ grid-template-columns:1fr }
  .garantias{ grid-template-columns:1fr }
  .resumen-alq{ grid-template-columns:1fr 1fr }
  .pasos-estado div{ font-size:11px }
  .wa-flota{ width:54px; height:54px; right:16px; bottom:16px }
  .btn{ height:52px }
  .cab-seccion{ align-items:flex-start }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important }
  [data-r]{ opacity:1; transform:none; filter:none }
  .palabra > span{ transform:none }
}

/* ═══ Fotos HD (27-oct): la foto real ocupa el escenario completo, sin los efectos de la vista técnica ═══ */
.escenario--foto{ aspect-ratio:4/5; background:var(--bg-2) }
.escenario--foto .escenario__rejilla,.escenario--foto .escenario__escaneo{ display:none }
.escenario--foto .escenario__img{ inset:0 }
.escenario--foto .escenario__img img.foto{ inset:0; width:100%; height:100%; object-fit:cover }
.escenario--foto .escenario__esquinas::before,.escenario--foto .escenario__esquinas::after{ z-index:2; border-color:#fff; opacity:.8 }
.escenario--foto .etiqueta{ z-index:3 }
.tarjeta-p__media img.foto{ transform:scale(1.001) }
.tarjeta-p:hover .tarjeta-p__media img.foto{ transform:scale(1.06) }
/* botón de pantalla completa y visor */
.escenario__img img.foto{ cursor:zoom-in }
.escenario__zoom{ position:absolute; z-index:3; right:16px; top:16px; width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--bg) 55%, transparent); border:1px solid var(--line-2); backdrop-filter:blur(10px); color:#fff; transition:transform .35s var(--ease-out), background .3s }
.escenario__zoom:hover{ transform:scale(1.08); background:var(--acc); color:var(--acc-ink) }
.escenario__zoom svg{ width:20px; height:20px }
.visor-hd{ position:fixed; inset:0; z-index:500; background:rgba(2,4,8,.94); backdrop-filter:blur(10px); display:grid; place-items:center; opacity:0; pointer-events:none; transition:opacity .35s }
.visor-hd.abierto{ opacity:1; pointer-events:auto }
.visor-hd__marco{ width:100vw; height:100svh; display:grid; place-items:center; overflow:hidden; padding:64px 72px }
.visor-hd__marco img{ max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; transition:transform .45s var(--ease-out); box-shadow:0 40px 120px rgba(0,0,0,.6); border-radius:6px; user-select:none }
.visor-hd__marco img.cerca{ transform:scale(2.4); cursor:zoom-out }
.visor-hd__cerrar,.visor-hd__ant,.visor-hd__sig{ position:absolute; z-index:2; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:26px; line-height:1;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); transition:background .25s }
.visor-hd__cerrar:hover,.visor-hd__ant:hover,.visor-hd__sig:hover{ background:rgba(255,255,255,.18) }
.visor-hd__cerrar{ top:18px; right:18px; font-size:20px }
.visor-hd__ant{ left:18px; top:50%; margin-top:-26px } .visor-hd__sig{ right:18px; top:50%; margin-top:-26px }
.visor-hd__pie{ position:absolute; bottom:18px; left:0; right:0; display:flex; justify-content:center; gap:18px; font:500 12px var(--f-mono); letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.6) }
@media (max-width:640px){ .visor-hd__marco{ padding:56px 8px } .visor-hd__ant,.visor-hd__sig{ top:auto; bottom:58px; margin:0 } }