/* =========================================================
   ARISTAS — PDP Sofá Bilbao · capa de micro-interacciones
   "Modo juego" (Gran Turismo): que se sienta configurador vivo.
   + estilos del puente al modo Sims (ambiente / m²).
   Solo CSS específico del PDP; los tokens/componentes viven en aristas.css.
   ========================================================= */

/* +15% legibilidad global (fixes) */
body.pdp{zoom:1.15}

/* ---------------------------------------------------------
   1 · STAGE — swap con vida (shimmer "armando" + settle)
   --------------------------------------------------------- */
.stage__frame{overflow:hidden}
/* Disolvencia limpia: SOLO cross-fade de opacidad — sin zoom ni destello.
   Las fotos ya están alineadas, así que la tela se funde en el mismo sitio. */
.stage__img{transition:opacity .40s var(--ease)}
/* chip de tela: pequeño "bump" cuando cambia la tela */
.stage__chip--bump{animation:chipBump .42s var(--ease)}
@keyframes chipBump{0%{transform:translateY(4px) scale(.96);opacity:.4}100%{transform:none;opacity:1}}

/* ---------------------------------------------------------
   2 · PRECIO — count-up + señal de dirección
   --------------------------------------------------------- */
.price__amount.tick{animation:priceTick .42s var(--ease)}
@keyframes priceTick{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
.price__dir{font-size:14px;font-weight:600;opacity:0;transform:translateY(4px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.price__dir.show{opacity:1;transform:none}
.price__dir.up{color:var(--clay)}
.price__dir.down{color:#6f7d4a}

/* ---------------------------------------------------------
   3 · SELECCIÓN — feedback físico (pop) en dots y pills
   --------------------------------------------------------- */
.dot.pop{animation:dotPop .34s var(--ease)}
@keyframes dotPop{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
.pill.pop{animation:pillPop .34s var(--ease)}
@keyframes pillPop{0%{transform:scale(1)}40%{transform:scale(1.05)}100%{transform:scale(1)}}

/* ---------------------------------------------------------
   4 · RESUMEN NAVEGABLE — eco en el grupo destino
   --------------------------------------------------------- */
.group.is-target{animation:groupHi 1.6s var(--ease)}
@keyframes groupHi{
  0%,12%{box-shadow:inset 3px 0 0 var(--accent);background:rgba(140,115,87,.07)}
  100%{box-shadow:inset 3px 0 0 transparent;background:transparent}
}

/* ---------------------------------------------------------
   5 · VISUALIZADOR DE TELAS — stagger + zoom de detalle
   --------------------------------------------------------- */
.sheet__grid .fabric-card{animation:cardIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * .03s)}
@keyframes cardIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.sheet__detail:not([hidden]) .detail__img{animation:detailZoom .5s var(--ease)}
@keyframes detailZoom{from{transform:scale(1.05);opacity:.5}to{transform:none;opacity:1}}

/* ---------------------------------------------------------
   6 · FIT / m² — regla que "mide" + veredicto que aparece
   --------------------------------------------------------- */
.fit__verdict{transition:color .3s var(--ease),background-color .3s var(--ease)}
.fit__verdict.pop{animation:verdictPop .4s var(--ease)}
@keyframes verdictPop{0%{transform:translateY(-3px);opacity:.3}100%{transform:none;opacity:1}}
/* CTA "ver mi sala completa" (puente al Sims desde m²) */
.fit__cta{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.06em;font-weight:600;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;transition:.25s var(--ease)}
.fit__cta[hidden]{display:none}
.fit__cta:hover{color:var(--accent-ink)}

/* Disparador "¿Cabe en tu espacio?" en la PDP (abre el medidor en modal) */
.fit-trigger{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  margin-top:20px;padding:13px 15px;background:var(--cream);border:1px solid var(--border);border-radius:8px;
  transition:border-color .25s var(--ease),background .25s var(--ease)}
.fit-trigger:hover{border-color:var(--taupe);background:#f3ede3}
.fit-trigger:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.fit-trigger__ico{flex:none;width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--border);color:var(--accent);font-size:17px;font-weight:600}
.fit-trigger__main{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.fit-trigger__main strong{font-size:14px;font-weight:600;color:var(--espresso)}
.fit-trigger__main small{font-size:12px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fit-trigger__arrow{flex:none;color:var(--text-3);transition:transform .25s var(--ease),color .25s var(--ease)}
.fit-trigger:hover .fit-trigger__arrow{transform:translateX(3px);color:var(--accent)}

/* Modal del medidor: más ancho y alineado a la izquierda; el .fit va sin su marco cream */
.modal__card--fit{max-width:540px;text-align:left;padding:30px 32px}
#fitModal .fit{margin:0;background:transparent;padding:0}
.fit__lead{font-size:13px;color:var(--text-2);margin:0 0 16px}
/* PRD-04 · medida libre del ancho de pared */
.fit__custom{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.fit__or{font-size:12px;color:var(--text-3);letter-spacing:.02em}
.fit__inputrow{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);border-radius:10px;padding:7px 12px;background:#fff;transition:border-color .2s var(--ease)}
.fit__inputrow:focus-within{border-color:var(--accent)}
.fit__inputrow input{border:none;outline:none;width:76px;font:inherit;font-size:15px;color:var(--ink);background:none}
.fit__unit{font-size:13px;color:var(--text-3)}
/* PRD-02 · botón de descarga del QR */
.modal__dl{display:inline-block;margin-top:16px}

/* ---------------------------------------------------------
   7 · MODALES — entrada + tick + QR + cross stagger
   --------------------------------------------------------- */
.modal:not([hidden]) .modal__backdrop{animation:fadeIn .3s var(--ease)}
.modal:not([hidden]) .modal__card,
.modal:not([hidden]) .cartcard{animation:modalIn .42s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal:not([hidden]) .cartcard__tick{animation:tickPop .5s var(--ease) .12s both}
@keyframes tickPop{0%{transform:scale(0);opacity:0}60%{transform:scale(1.18)}100%{transform:scale(1);opacity:1}}
.modal:not([hidden]) .modal__qr{animation:qrIn .5s var(--ease) .1s both}
@keyframes qrIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.cartcard__crossgrid .cartcross{animation:cardIn .42s var(--ease) both;animation-delay:calc(var(--i,0) * .06s)}

/* ---------------------------------------------------------
   8 · REVEAL al hacer scroll (secciones bajas)
   --------------------------------------------------------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ---------------------------------------------------------
   PUENTE AL MODO SIMS — barra de acciones sobre el ambiente
   --------------------------------------------------------- */
.ambient__actions{position:absolute;left:12px;bottom:44px;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100% - 24px);z-index:2}
.ambient__act{background:rgba(255,255,255,.9);border:1px solid var(--border);border-radius:99px;
  padding:8px 15px;font-size:11px;letter-spacing:.04em;font-weight:600;color:var(--espresso);
  backdrop-filter:blur(6px);transition:.25s var(--ease)}
.ambient__act:hover{background:#fff;border-color:var(--taupe);transform:translateY(-1px)}
.ambient__act--go{background:var(--espresso);color:#fff;border-color:var(--espresso)}
.ambient__act--go:hover{background:var(--accent-ink);border-color:var(--accent-ink)}
/* la card de cross-sell ahora arma sala → indicar que es clickable */
.cross-card{cursor:pointer}

/* ---------------------------------------------------------
   FOCO visible (accesibilidad) — conservar en todo interactivo
   --------------------------------------------------------- */
.dot:focus-visible,.pill:focus-visible,.fit__preset:focus-visible,.fabric-card:focus-visible,
.sumitem:focus-visible,.ambient__act:focus-visible,.cross-card:focus-visible,.fit__cta:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px}

/* ---------------------------------------------------------
   REDUCED MOTION — todo cae a instantáneo, sin saltos
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .stage__img,.stage__chip--bump,
  .price__amount.tick,.dot.pop,.pill.pop,.group.is-target,.sheet__grid .fabric-card,
  .sheet__detail:not([hidden]) .detail__img,.fit__verdict.pop,
  .modal:not([hidden]) .modal__backdrop,.modal:not([hidden]) .modal__card,
  .modal:not([hidden]) .cartcard,.modal:not([hidden]) .cartcard__tick,
  .modal:not([hidden]) .modal__qr,.cartcard__crossgrid .cartcross{
    animation:none!important;transition:none!important}
  .price__dir{transition:none}
  .reveal{opacity:1;transform:none;transition:none}
}