/* Plantilla «Pared de productos con cámara».
   Todo vive bajo .pared: nada de reglas sobre html/body, y nada `fixed` salvo la cortina de entrada
   (que debe cubrir también el navbar). La paleta llega como variables CSS desde la config del negocio.
   El navbar y el carrito son los de Impulso: acá no hay cabecera propia. */

.pared {
  --pared: #a08a7a;
  --crema: #f6ece2;
  --crema-suave: rgb(246 236 226 / 0.78);
  --tinta: #2a1613;
  --calida: #ffd49a;            /* color de la luz */
  --resalte: #76647b;           /* «una señal.» en la frase */
  --fuente: "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif;
  --cab: 96px;                  /* alto del navbar de Impulso (h-24) */
  --tenue: 0.3;                 /* luz en reposo; al pasar el mouse por un tipo sube a 1 */

  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 520px;
  overflow: hidden;
  overflow: clip;   /* clip: ni el foco de un producto fuera de cuadro puede desplazar el contenedor */
  background: var(--pared);
  color: var(--crema);
  font-family: var(--fuente);
  -webkit-font-smoothing: antialiased;
}
.pared [hidden] { display: none !important; }
.pared :focus-visible { outline: 2px solid var(--crema); outline-offset: 3px; }
.pared button { cursor: pointer; }

/* ───────── La pared y su cámara ───────── */
/* En la colección el dedo puede desplazar la página en vertical (para llegar al pie); en el
   acercamiento todo gesto es de la pared. */
.pared .vista { position: absolute; inset: 0; overflow: hidden; overflow: clip; background: var(--pared); touch-action: pan-y; cursor: default; }
.pared[data-vista="detalle"] .vista { touch-action: none; }
.pared .escena { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.pared .muro { position: absolute; left: 0; top: 0; display: block; user-select: none; -webkit-user-drag: none; pointer-events: none; max-width: none; }

/* ───────── Luces: parte de la animación, no de la foto ─────────
   Cada luz vive bajo una repisa (tira) o en el borde de un arco y SOLO cubre el tramo de los productos.
   En reposo están tenues; al pasar por un tipo se encienden. */
.pared .luz { position: absolute; pointer-events: none; opacity: var(--tenue); transition: opacity 0.5s ease; }
.pared .luz.lit { opacity: 1; }
.pared .luz.recorte { overflow: hidden; }
.pared .luz .glow { position: absolute; inset: 0;
  background: radial-gradient(ellipse 54% 100% at 50% 0%, rgb(255 206 142 / 0.7), rgb(255 190 120 / 0.3) 45%, rgb(255 190 120 / 0.12) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pared .luz.recorte .glow { background: radial-gradient(ellipse 52% 118% at 50% 0%, rgb(255 206 142 / 0.7), rgb(255 190 120 / 0.22) 56%, transparent 100%); }
.pared .luz .tira { position: absolute; left: 8px; right: 8px; top: 0; height: 4px; border-radius: 3px;
  background: linear-gradient(180deg, #fff8ec, #ffd9a0);
  box-shadow: 0 0 9px 3px rgb(255 204 134 / 0.85), 0 0 34px 10px rgb(255 172 92 / 0.5); }
.pared .luz.arco { overflow: visible; }
.pared .luz .arco-svg { position: absolute; left: 0; top: 0; overflow: visible; }
/* resplandor de la luz sobre la madera (donde «cae» la luz, justo encima de la repisa) */
.pared .halo { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; display: block;
  background: radial-gradient(ellipse 50% 100% at 50% 100%, rgb(255 208 146 / 0.5), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pared .luz.arco .halo { bottom: auto; }

/* sombra de contacto de cada producto sobre la madera */
.pared .sombra-suela { position: absolute; height: 16px; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(30 14 8 / 0.62), transparent 72%); }
.pared .zapato { position: absolute; display: block; cursor: pointer; border-radius: 4px; padding: 0; background: none; border: 0; }
.pared .zapato img { display: block; width: 100%; height: 100%; max-width: none; user-select: none; -webkit-user-drag: none; pointer-events: none;
  filter: drop-shadow(7px 3px 6px rgb(45 25 15 / 0.32)); transform-origin: 50% 100%; }   /* crece desde la madera: la base no se despega */
.pared .zapato.lit img { filter: drop-shadow(8px 5px 8px rgb(45 25 15 / 0.3)) brightness(1.07); }
.pared .zapato.sobre img { transform: translateY(-2px) scale(1.08); }                    /* SOLO el producto bajo el mouse crece */
.pared[data-vista="detalle"] .zapato.lit img, .pared[data-vista="detalle"] .zapato.sobre img { transform: none; }
.pared .zapato.agotado img { opacity: 0.55; filter: grayscale(0.6) drop-shadow(7px 3px 6px rgb(45 25 15 / 0.3)); }
.pared .sombra-suela.lit { opacity: 0.5; }
.pared .sombra-suela.sobre { transform: scale(1.06); }
.pared .zapato:focus-visible { outline-offset: 10px; }
/* En la ficha el foco se queda en el producto que se acaba de dejar (con las flechas del teclado o del mouse) y dibujaba un marco
   rectangular alrededor de su foto. En ese modo se navega con las flechas y los botones, que llevan su propio anillo de foco. */
.pared[data-vista="detalle"] .zapato:focus-visible { outline: none; }

/* rótulo del tipo, en el alto (cara frontal) de la madera */
.pared .tipo { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none; font-weight: 600; letter-spacing: 0.26em; text-indent: 0.26em; text-transform: uppercase; line-height: 1;
  color: #fff; opacity: 0.88; text-shadow: 0 1px 0 rgb(40 16 12 / 0.55); }
.pared .tipo.lit { opacity: 1; transform: translate(-50%, -50%) scale(1.06); text-shadow: 0 0 6px #fff4dd, 0 0 14px #ffc47a, 0 0 30px #ff9a3c; }

/* transiciones (la profundidad de campo del acercamiento incluida) */
.pared .zapato img, .pared .sombra-suela { transition: filter 0.9s ease, opacity 0.9s ease, transform 0.45s cubic-bezier(.2,.7,.2,1); }
.pared .tipo { transition: opacity 0.4s ease, text-shadow 0.4s ease, transform 0.4s ease; }
.pared[data-vista="detalle"] .zapato:not(.actual) img { filter: blur(3px) brightness(0.8) drop-shadow(7px 3px 6px rgb(45 25 15 / 0.3)); }
.pared[data-vista="detalle"] .sombra-suela:not(.actual) { opacity: 0.2; }
.pared[data-vista="detalle"] .tipo:not(.lit) { opacity: 0.45; }
.pared .ficha::before { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s ease 0.4s; pointer-events: none;
  background:
    radial-gradient(ellipse 56% 44% at 0% 0%, rgb(36 20 14 / 0.5), transparent 72%),
    linear-gradient(270deg, rgb(36 20 14 / 0.4), transparent 32%),
    linear-gradient(180deg, rgb(36 20 14 / 0.3), transparent 22%); }
.pared[data-vista="detalle"] .ficha::before { opacity: 1; }

/* ───────── Atmósfera: viñeta, desenfoque de movimiento, grano ───────── */
.pared .atmosfera { position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(ellipse 125% 95% at 50% 45%, transparent 60%, rgb(40 22 14 / 0.28) 100%),
    linear-gradient(180deg, rgb(40 22 14 / 0.4), transparent 14%); }
.pared .desenfoque { position: absolute; inset: 0; z-index: 3; pointer-events: none; backdrop-filter: blur(var(--b, 0px)); -webkit-backdrop-filter: blur(var(--b, 0px)); display: none; }
.pared .grano { position: absolute; inset: -50px; z-index: 4; pointer-events: none; background: url(/pared/grano.png) 0 0 / 190px; mix-blend-mode: overlay; opacity: 0.26; animation: pared-grano 0.9s steps(1) infinite; }
@keyframes pared-grano { 0% { transform: translate(0, 0) } 17% { transform: translate(-31px, 18px) } 33% { transform: translate(22px, -27px) } 50% { transform: translate(-14px, -9px) } 67% { transform: translate(35px, 25px) } 83% { transform: translate(-26px, 31px) } }

/* ───────── Frase de la marca ───────── */
.pared .lema { position: absolute; z-index: 6; left: calc(50% + 30px); top: calc(var(--cab) + 20px); font-size: clamp(15px, 1.5vw, 21px); font-weight: 300; letter-spacing: 0.02em; color: var(--crema); text-shadow: 0 1px 14px rgb(40 18 10 / 0.55); pointer-events: none; transition: opacity 0.5s ease 0.4s; }
.pared .lema em { font-style: italic; color: var(--crema-suave); }
.pared[data-vista="detalle"] .lema { opacity: 0; transition-delay: 0s; transition-duration: 0.25s; }
/* en pantallas anchas va en la pared, sobre la planta; en angostas se queda bajo el navbar */
.pared .lema-escena { position: absolute; margin: 0; display: none; white-space: nowrap; pointer-events: none; line-height: 1.18; font-weight: 300; letter-spacing: 0.02em; color: var(--crema); text-shadow: 0 0 14px rgb(246 236 226 / 0.3); transition: opacity 0.9s ease; }
.pared .lema-escena em { font-style: italic; color: var(--resalte); text-shadow: 0 0 12px rgb(246 236 226 / 0.35); }
.pared.lema-en-escena .lema-escena { display: block; }
.pared.lema-en-escena .lema { display: none; }

/* ───────── Ficha (vista de acercamiento) ───────── */
.pared .ficha { position: absolute; inset: 0; z-index: 12; pointer-events: none; }
.pared .ficha > * { opacity: 0; transform: translateY(14px); transition: opacity 0.35s ease, transform 0.35s ease; }
.pared[data-vista="detalle"] .ficha > * { opacity: 1; transform: none; pointer-events: auto; transition: opacity 0.7s ease 0.55s, transform 0.7s cubic-bezier(.2,.7,.2,1) 0.55s; }
.pared[data-vista="detalle"] .ficha > .ficha-compra { transition-delay: 0.7s; }
.pared[data-vista="detalle"] .ficha > .ficha-nav { transition-delay: 0.85s; }
.pared .ficha.cambia > .ficha-titulo, .pared .ficha.cambia > .ficha-compra { opacity: 0 !important; transform: translateY(10px) !important; transition-duration: 0.2s !important; transition-delay: 0s !important; }

.pared .ficha-titulo { position: absolute; left: clamp(16px, 2.4vw, 36px); top: calc(var(--cab) + 26px); max-width: min(46vw, 640px); }
.pared .ficha-piso { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--crema-suave); }
.pared .ficha-titulo h2 { margin-top: 10px; font-size: clamp(34px, 5vw, 82px); font-weight: 600; line-height: 0.95; letter-spacing: -0.035em; text-transform: uppercase; text-shadow: 0 2px 30px rgb(40 12 8 / 0.35); overflow-wrap: anywhere; }
.pared .ficha-desc { margin-top: 16px; max-width: 32ch; list-style: none; padding: 0; font-size: 14px; line-height: 1.45; color: var(--crema-suave); }
.pared .ficha-desc li { position: relative; padding: 0 0 8px 18px; }
.pared .ficha-desc li::before { content: ""; position: absolute; left: 0; top: 0.72em; width: 9px; height: 1px; background: var(--crema-suave); }
.pared .detalles { display: none; }

.pared .ficha-compra { position: absolute; right: clamp(16px, 2.4vw, 36px); top: calc(var(--cab) + 26px); width: min(320px, 28vw); min-width: 270px; }
.pared .fila { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid rgb(246 236 226 / 0.34); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.pared .fila > span:first-child { color: var(--crema-suave); }
.pared .fila em { font-style: normal; display: inline-flex; align-items: center; gap: 8px; text-align: right; letter-spacing: 0.08em; text-transform: none; font-size: 13px; }
.pared .muestra { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgb(246 236 226 / 0.6); flex: none; }
.pared .fila-precio strong { font-size: 30px; font-weight: 500; letter-spacing: -0.01em; text-transform: none; }
.pared .fila-talla { display: block; padding-bottom: 12px; }
.pared .fila-talla > span { display: block; margin-bottom: 10px; }
.pared .selector { position: relative; }
.pared .selector-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 13px 16px; border-radius: 999px; background: rgb(246 236 226 / 0.12); border: 1px solid rgb(246 236 226 / 0.4); font-size: 13px; letter-spacing: 0.06em; text-transform: none; backdrop-filter: blur(6px); transition: background 0.2s, border-color 0.2s; }
.pared .selector-btn:hover, .pared .selector-btn[aria-expanded="true"] { background: rgb(246 236 226 / 0.2); border-color: rgb(246 236 226 / 0.65); }
.pared .selector-btn svg { transition: transform 0.25s; }
.pared .selector-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.pared .selector-lista { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px; border-radius: 18px; background: rgb(44 24 18 / 0.94); border: 1px solid rgb(246 236 226 / 0.2); box-shadow: 0 24px 50px rgb(20 8 6 / 0.5); backdrop-filter: blur(12px); max-height: 40vh; overflow: auto; }
.pared .selector-lista button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 12px; font-size: 13px; letter-spacing: 0.06em; text-transform: none; text-align: left; }
.pared .selector-lista button:hover, .pared .selector-lista button[aria-selected="true"] { background: rgb(246 236 226 / 0.14); }
.pared .agregar { width: 100%; margin-top: 12px; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 15px 20px; border-radius: 999px; background: var(--crema); color: var(--tinta); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; transition: transform 0.2s, opacity 0.2s, background 0.2s; }
.pared .agregar > span { display: inline-flex; align-items: center; gap: 8px; }
.pared .agregar:not(:disabled):hover { transform: translateY(-2px); background: #fff; }
.pared .agregar:disabled { opacity: 0.5; cursor: not-allowed; }
.pared .agregar.secundario { background: transparent; color: var(--crema); border: 1px solid rgb(246 236 226 / 0.5); margin-top: 8px; padding: 13px 20px; }
.pared .agregar.secundario:not(:disabled):hover { background: rgb(246 236 226 / 0.16); }
.pared .nota { margin-top: 12px; font-size: 11px; letter-spacing: 0.1em; color: var(--crema-suave); text-align: center; min-height: 1.4em; }
.pared .ver-ficha { display: block; margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crema-suave); text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.pared .ver-ficha:hover { color: var(--crema); }

.pared .ficha-nav { position: absolute; left: clamp(16px, 2.4vw, 36px); right: clamp(16px, 2.4vw, 36px); bottom: 26px; display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; text-shadow: 0 1px 12px rgb(40 18 10 / 0.6); }
.pared .volver { display: inline-flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid transparent; margin-right: auto; }
.pared .volver:hover { border-color: var(--crema); }
.pared .cuenta { color: var(--crema-suave); letter-spacing: 0.24em; margin-right: 6px; }
.pared .flecha { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(246 236 226 / 0.5); background: rgb(246 236 226 / 0.1); transition: background 0.2s, border-color 0.2s; }
.pared .flecha:hover { background: rgb(246 236 226 / 0.22); border-color: var(--crema); }

.pared .aviso { position: absolute; z-index: 30; left: 50%; bottom: 84px; transform: translate(-50%, 16px); padding: 10px 14px 10px 22px; border-radius: 999px; background: rgb(246 236 226 / 0.96); color: var(--tinta); font-size: 12px; letter-spacing: 0.1em; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; box-shadow: 0 16px 40px rgb(30 10 8 / 0.4); white-space: nowrap; display: flex; align-items: center; gap: 14px; max-width: calc(100% - 32px); }
.pared .aviso.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.pared .aviso button { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* ───────── Arranque: la pared aparece y las luces se encienden una a una (parpadeo) ───────── */
.pared .escena .muro, .pared .escena .zapato, .pared .escena .sombra-suela, .pared .escena .tipo { transition: opacity 0.9s ease; }
.pared:not(.listo) .escena .muro, .pared:not(.listo) .escena .zapato, .pared:not(.listo) .escena .sombra-suela, .pared:not(.listo) .escena .tipo { opacity: 0; }
.pared:not(.listo) .luz { opacity: 0; }
.pared:not(.listo) .lema, .pared:not(.listo) .lema-escena { opacity: 0; }
.pared .lema { transition: opacity 0.8s ease 0.6s; }
.pared.listo .zapato { animation: pared-entra 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(0.25s + var(--i) * 0.1s); }
@keyframes pared-entra { from { opacity: 0; margin-top: 26px; } to { opacity: 1; margin-top: 0; } }
.pared.arranque .luz:not(.lit) { animation: pared-enciende 1.8s ease both; animation-delay: calc(0.6s + var(--n) * 0.35s); }
@keyframes pared-enciende { 0% { opacity: 0 } 28% { opacity: 0.85 } 38% { opacity: 0.2 } 55% { opacity: 0.95 } 100% { opacity: var(--tenue) } }

/* ───────── Pantallas angostas / verticales ───────── */
@media (max-aspect-ratio: 9/10), (max-width: 760px) {
  .pared .ficha-titulo { max-width: 90vw; top: calc(var(--cab) + 6px); }
  .pared .ficha-titulo h2 { font-size: clamp(30px, 11vw, 52px); }
  .pared .ficha-desc { display: none; }
  .pared .detalles { display: block; width: 100%; margin-top: 6px; padding: 8px 0 2px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--crema-suave); text-align: center; }
  .pared.ver-detalles .ficha-desc { display: block; position: absolute; z-index: 13; left: 16px; right: 16px; bottom: calc(74px + var(--hoja, 300px) + 10px); max-width: none; margin: 0; padding: 14px 16px 6px; border-radius: 18px; background: rgb(52 30 22 / 0.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 13px; pointer-events: auto; }
  .pared .ficha-compra { left: 16px; right: 16px; width: auto; min-width: 0; top: auto; bottom: 74px; padding: 14px 16px 16px; border-radius: 22px; background: rgb(52 30 22 / 0.8); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
  .pared .fila { padding: 9px 0; }
  .pared .fila-precio strong { font-size: 24px; }
  .pared .nota { display: none; }
  .pared .agregar { margin-top: 8px; padding: 13px 18px; }
  .pared .ficha-nav { bottom: 18px; gap: 8px; }
  .pared .volver { font-size: 0; gap: 0; } .pared .volver svg { width: 20px; height: 20px; }
  .pared .selector-lista { top: auto; bottom: calc(100% + 8px); }
  .pared .lema { display: none; }
}
/* teléfonos de pantalla corta: la hoja de compra pierde la fila de color para dejar ver el producto */
@media (max-aspect-ratio: 9/10) and (max-height: 760px), (max-width: 760px) and (max-height: 760px) { .pared .ficha-compra .fila-color { display: none; } .pared .ficha-compra { padding: 10px 14px 12px; } .pared .selector-btn { padding: 11px 16px; } }
@media (prefers-reduced-motion: reduce) {
  .pared .grano { animation: none; }
  .pared.listo .zapato, .pared.arranque .luz { animation: none; }
  .pared * { transition-duration: 0.01ms !important; }
}

/* ───────── Cortina de entrada (cubre toda la pantalla, navbar incluido) ───────── */
.pared-cortina-bloqueo { overflow: hidden !important; }
.pared .vista { transition: transform 2.8s cubic-bezier(.2, .7, .2, 1); }
.pared.con-cortina:not(.abriendo) .vista { transform: scale(1.09); }
.pared.con-cortina.abierta .vista { transition: none; }
.pared.con-cortina:not(.abriendo) .lema, .pared.con-cortina:not(.abriendo) .lema-escena { opacity: 0; transition: none; }

.cortina { position: fixed; inset: 0; z-index: 100; overflow: hidden; --fuente: "Helvetica Neue", Helvetica, "Segoe UI", Arial, system-ui, sans-serif; }
.cortina .mitad { position: absolute; top: 0; bottom: 0; width: calc(50% + 0.5px); overflow: hidden; background: #e8dccb;
  transition: transform 2.1s cubic-bezier(.77, 0, .16, 1); will-change: transform; }
.cortina .izq { left: 0; }
.cortina .der { right: 0; }
.cortina .mitad img { position: absolute; top: 0; height: 100%; width: 100vw; max-width: none; object-fit: cover; object-position: 50% 50%; display: block; user-select: none; -webkit-user-drag: none; }
.cortina .izq img { left: 0; }
.cortina .der img { right: 0; }   /* la mitad derecha muestra la parte derecha de LA MISMA imagen: el corte cae justo en el centro */
.cortina .mitad::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
.cortina .izq::after { right: 0; background: linear-gradient(90deg, transparent, rgb(70 42 24 / 0.38)); }
.cortina .der::after { left: 0; background: linear-gradient(270deg, transparent, rgb(70 42 24 / 0.38)); }
.cortina.abre .mitad::after { opacity: 1; }
.cortina.abre .izq { transform: translateX(-101%); }
.cortina.abre .der { transform: translateX(101%); }
.cortina.abre { pointer-events: none; }
.cortina.abre .cortina-logo, .cortina.abre .cortina-pista { opacity: 0; transition: opacity 0.35s ease; }

@property --i { syntax: '<number>'; inherits: true; initial-value: 1; }
.cortina-logo { --i: 1; position: absolute; z-index: 2; display: block; border: 0; background: transparent; border-radius: 22px; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; transition: --i 1.8s ease; }
.cortina-logo.calma { --i: 0.58; }
.cortina-logo:focus-visible { outline: 1px solid rgb(138 82 51 / 0.55); outline-offset: 8px; }
.cortina-logo i { position: absolute; pointer-events: none; opacity: 0; }
.halo-logo { inset: -4%; border-radius: 50%; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgb(255 240 214 / 0.8), rgb(255 236 205 / 0.26) 56%, transparent 76%); transition: opacity 0.9s ease; }
.anillo { left: 50%; top: 50%; width: 58%; aspect-ratio: 1; margin: -29% 0 0 -29%; border-radius: 50%; border: 1.5px solid rgb(139 84 52 / 0.75); box-shadow: 0 0 16px rgb(255 238 205 / 0.85), inset 0 0 14px rgb(255 238 205 / 0.45); }
.anillo.a2 { animation-delay: 1.4s !important; }
.cortina-logo:hover .halo-logo, .cortina-logo:focus-visible .halo-logo { opacity: calc(0.85 * var(--i)); }
.cortina-logo:hover .anillo, .cortina-logo:focus-visible .anillo { animation: pared-anillo 2.9s ease-out infinite; }
@keyframes pared-anillo { 0% { transform: scale(0.5); opacity: calc(0.8 * var(--i)); } 100% { transform: scale(1.12); opacity: 0; } }
.cortina-pista { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(26px, env(safe-area-inset-bottom)); margin: 0; text-align: center; font: 500 11px/1.4 var(--fuente); letter-spacing: 0.26em; text-transform: uppercase; color: #7b4a32; opacity: 0.8; text-shadow: 0 1px 10px rgb(255 244 226 / 0.9); pointer-events: none; transition: opacity 0.4s; }
.cortina-pista.off { opacity: 0; }
.cortina-pista .pista-tactil { display: none; }
@media (hover: none) { .cortina-pista .pista-mouse { display: none; } .cortina-pista .pista-tactil { display: inline; } }
@media (hover: none) {
  .cortina-logo { --i: 0.85; }
  .cortina-logo .anillo { animation: pared-anillo 3.2s ease-out infinite; }
  .cortina-logo .halo-logo { animation: pared-respira 3.2s ease-in-out infinite; }
}
@keyframes pared-respira { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.55; } }

/* La manito: fina y pequeña; reemplaza al cursor mientras la cortina está cerrada (solo con mouse) */
.pared-mano { position: fixed; left: 0; top: 0; z-index: 110; width: 28px; height: 32px; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; will-change: transform; filter: drop-shadow(0 2px 3px rgb(60 36 20 / 0.35)); }
.pared-mano.visible { opacity: 1; }
.pared-mano svg { display: block; overflow: visible; transform-origin: 9px 2px; }
.pared-mano::after { content: ""; position: absolute; left: 9px; top: 2px; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 1px solid rgb(139 84 52 / 0.7); opacity: 0; transform: scale(0.2); }
.pared-mano.toca svg { animation: pared-toca 1.3s ease-in-out infinite; }
.pared-mano.toca::after { animation: pared-aro 1.3s ease-out infinite; }
@keyframes pared-toca { 0%, 100% { transform: translateY(0) rotate(0); } 32% { transform: translateY(2px) rotate(-3deg) scale(0.94); } 52% { transform: translateY(0) rotate(0); } }
@keyframes pared-aro { 0%, 28% { opacity: 0; transform: scale(0.2); } 34% { opacity: 0.9; transform: scale(0.4); } 100% { opacity: 0; transform: scale(1.5); } }
@media (pointer: fine) { .cortina, .cortina * { cursor: none !important; } }
@media (pointer: coarse) { .pared-mano { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .pared.con-cortina:not(.abriendo) .vista { transform: none; }
  .pared-mano.toca svg, .pared-mano.toca::after, .cortina-logo .anillo, .cortina-logo .halo-logo { animation: none; }
}

/* ───────── Más productos (los que no tienen espacio en la pared) ───────── */
.pared-resto { background: #000; padding: 64px 24px; }
.pared-resto h2 { font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; opacity: 0.7; margin-bottom: 32px; text-align: center; }
.pared-resto-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px; }

/* El catálogo visual es una escena a pantalla completa: el pie de la tienda debajo de ella le rompe la composición, así que en esta página no se muestra.
   El pie está FUERA de .pared (lo pinta el layout público), por eso se oculta desde el body; fuera de la pared no se aplica. */
body:has(.pared) footer { display: none; }