/* ============================================================
   BRAVA · tienda/inicio.css
   Portada (tablero interactivo + vitrina) y sección "Ponla a prueba".
   Depende de tokens.css (colores, radios, tipografías).
   ============================================================ */

/* ===================== portada ===================== */
.portada{
  --p-deep:oklch(.196 .046 15);
  position:relative;isolation:isolate;overflow:hidden;color:var(--bg-100);
  background:
    radial-gradient(80% 70% at 78% 30%, oklch(.330 .100 15) 0%, transparent 62%),
    linear-gradient(160deg, oklch(.277 .067 15.4) 0%, var(--p-deep) 70%);
  min-height:clamp(600px, calc(100svh - 110px), 820px);
  display:flex;align-items:center;
}
.tablero{position:absolute;inset:0;width:100%;height:100%;z-index:-2;display:block;touch-action:pan-y}
.portada__velo{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(90deg, var(--p-deep) 0%, color-mix(in oklab,var(--p-deep) 82%,transparent) 30%, transparent 62%),
    linear-gradient(0deg, var(--p-deep) 0%, transparent 26%);
}
.portada__in{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
  padding-block:clamp(3rem,6vw,5rem);
  pointer-events:none;           /* el tablero recibe el cursor en los huecos */
}
.portada__in > *{pointer-events:auto}
.portada__txt{max-width:38rem}
.portada__sello{
  display:inline-flex;align-items:center;gap:.6rem;margin:0 0 1.2rem;
  font-size:.86rem;letter-spacing:.02em;color:oklch(.92 .012 70 / .78);
}
.portada__sello svg{width:1.1rem;height:1.1rem;color:var(--gold);fill:currentColor;flex:none}

/* titular: cada línea sube desde una máscara y luego pasa un brillo de oro */
.portada__titulo{
  font-weight:400;color:var(--bg-100);margin:0 0 1.6rem;
  font-size:clamp(3rem,1.5rem + 4.3vw,5.4rem);line-height:.98;letter-spacing:-.02em;
}
.portada__titulo .linea{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.portada__titulo .linea > span{
  display:inline-block;
  background:linear-gradient(100deg, var(--bg-100) 0 42%, #e9cf98 48%, #fff6e2 50%, #e9cf98 52%, var(--bg-100) 58% 100%);
  background-size:260% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.portada__titulo .linea:nth-child(2) > span{font-style:italic;font-weight:300}
.portada__lede{color:oklch(.92 .012 70 / .84);max-width:42ch;margin-bottom:1.7rem;font-size:1.06rem;line-height:1.6}
.portada__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:2rem}
.portada__cta .btn--line{color:var(--bg-100);border-color:color-mix(in oklab,var(--gold) 60%,transparent)}
.portada__cta .btn--line:hover{border-color:var(--gold)}
.iman{will-change:transform;transition:transform .35s cubic-bezier(.2,.7,.3,1),background-color .28s ease,border-color .28s ease}

/* casillas de categoría: eco de las casillas del tablero */
.casillas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.casilla{
  display:flex;align-items:center;gap:.6rem;text-align:left;
  padding:.5rem .6rem;border-radius:var(--r-sm);
  border:1px solid color-mix(in oklab,var(--gold) 28%,transparent);
  background:oklch(1 0 0 / .035);color:var(--bg-100);
  transition:border-color .25s ease,background-color .25s ease,transform .25s ease;
}
.casilla:hover,.casilla:focus-visible{border-color:var(--gold);background:color-mix(in oklab,var(--gold) 14%,transparent);transform:translateY(-2px)}
.casilla__foto{
  width:2.3rem;height:2.3rem;border-radius:999px;overflow:hidden;flex:none;
  background:color-mix(in oklab,var(--gold) 22%,transparent);
  border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);
}
.casilla__foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.casilla:hover .casilla__foto img{transform:scale(1.15)}
.casilla__nombre{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.12rem;line-height:1.05}
.casilla__cuenta{font-size:.74rem;color:oklch(.92 .012 70 / .62);line-height:1}
.portada__guia{font-size:.8rem;color:oklch(.92 .012 70 / .6);margin:0 0 .7rem}

/* pista de interacción del tablero */
.portada__pista{
  position:absolute;left:var(--pad);bottom:1.1rem;margin:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:.55rem;font-size:.76rem;color:oklch(.92 .012 70 / .55);
  transition:opacity .6s ease;
}
.portada__pista::before{
  content:"";width:.55rem;height:.55rem;border-radius:2px;background:var(--gold);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--gold) 70%,transparent);animation:pulso 2.2s ease-out infinite;
}
.portada__pista.oculta{opacity:0}
@keyframes pulso{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--gold) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent}}

/* ===================== vitrina (mazo de fotos reales) ===================== */
.vitrina{position:relative;display:flex;flex-direction:column;align-items:center;gap:1.3rem;perspective:1200px}
.vitrina[hidden]{display:none}
.vitrina__mazo{
  position:relative;width:min(100%,22rem);aspect-ratio:3/4;
  transform-style:preserve-3d;outline:none;touch-action:pan-y;
}
.vitrina__mazo:focus-visible{outline:2px solid var(--gold);outline-offset:10px;border-radius:var(--r-lg)}
.foto{
  position:absolute;inset:0;margin:0;border-radius:var(--r-lg);overflow:hidden;
  background:oklch(.30 .06 15);
  border:1px solid color-mix(in oklab,var(--gold) 40%,transparent);
  box-shadow:0 30px 60px -28px oklch(.10 .03 15 / .9);
  transition:transform .75s cubic-bezier(.2,.75,.25,1),opacity .6s ease,filter .6s ease;
  will-change:transform;user-select:none;-webkit-user-select:none;
}
.foto img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.foto::after{   /* reflejo que sigue al cursor */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(60% 45% at var(--rx,50%) var(--ry,30%), oklch(1 0 0 / .32), transparent 70%);
  mix-blend-mode:soft-light;
}
.foto:not(.es-frente){pointer-events:none}
.foto.es-frente{cursor:grab}
.foto.es-frente::after{opacity:1}
.foto.arrastrando{cursor:grabbing;transition:none}
.foto__sello{
  position:absolute;top:.8rem;left:.8rem;padding:.28rem .65rem;border-radius:999px;font-size:.7rem;
  background:color-mix(in oklab,var(--bg-50) 90%,transparent);color:var(--pri-900);
}
.vitrina__info{width:min(100%,22rem);display:grid;grid-template-columns:1fr auto;gap:.15rem 1rem;align-items:end;min-height:4.4rem}
.vitrina__nombre{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;line-height:1.1;color:var(--bg-100);margin:0}
.vitrina__meta{font-size:.8rem;color:oklch(.92 .012 70 / .66);margin:0;grid-column:1}
.vitrina__precio{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.7rem;color:var(--gold);grid-row:1;grid-column:2;line-height:1}
.vitrina__agregar{
  grid-column:2;display:inline-flex;align-items:center;gap:.35rem;justify-self:end;
  padding:.45rem .85rem;border-radius:999px;font-size:.8rem;
  background:var(--gold);color:var(--pri-950);font-weight:500;transition:filter .2s ease,transform .2s ease;
}
.vitrina__agregar:hover{filter:brightness(1.1);transform:translateY(-1px)}
.vitrina__agregar .icon{width:.95rem;height:.95rem}
.vitrina__ctrl{display:flex;align-items:center;gap:.9rem;color:oklch(.92 .012 70 / .7);font-size:.8rem}
.vitrina__btn{
  width:2.4rem;height:2.4rem;border-radius:999px;display:grid;place-items:center;color:var(--bg-100);
  border:1px solid color-mix(in oklab,var(--gold) 45%,transparent);transition:border-color .2s ease,background-color .2s ease;
}
.vitrina__btn:hover{border-color:var(--gold);background:oklch(1 0 0 / .06)}
.vitrina__btn svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vitrina__barra{width:5.5rem;height:2px;background:oklch(1 0 0 / .14);border-radius:2px;overflow:hidden}
.vitrina__barra i{display:block;height:100%;width:0;background:var(--gold)}
.vitrina__barra i.corre{animation:barra var(--dur,5s) linear forwards}
.vitrina:hover .vitrina__barra i.corre,.vitrina:focus-within .vitrina__barra i.corre{animation-play-state:paused}
@keyframes barra{to{width:100%}}

/* entrada orquestada (un solo momento al cargar) */
.portada.lista .portada__titulo .linea > span{animation:subeLinea 1s cubic-bezier(.2,.75,.25,1) both, brillo 1.8s ease-in-out 1.15s both}
.portada.lista .portada__titulo .linea:nth-child(2) > span{animation-delay:.12s,1.3s}
.portada.lista .portada__sello,
.portada.lista .portada__lede,
.portada.lista .portada__cta,
.portada.lista .portada__guia,
.portada.lista .casillas{animation:aparece .9s cubic-bezier(.2,.75,.25,1) both}
.portada.lista .portada__sello{animation-delay:0s}
.portada.lista .portada__lede{animation-delay:.3s}
.portada.lista .portada__cta{animation-delay:.42s}
.portada.lista .portada__guia,.portada.lista .casillas{animation-delay:.55s}
.portada.lista .vitrina{animation:aparece 1s cubic-bezier(.2,.75,.25,1) .25s both}
@keyframes subeLinea{from{transform:translateY(105%)}to{transform:none}}
@keyframes brillo{from{background-position:100% 0}to{background-position:0 0}}
@keyframes aparece{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ===================== ponla a prueba ===================== */
.prueba{background:var(--canvas)}
.prueba__cab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,26rem);gap:1rem 3rem;align-items:end;margin-bottom:2.6rem}
.prueba__cab h2{max-width:16ch}
.prueba__cab p{margin:0;color:var(--ink-soft)}
.prueba__panel{
  display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr) minmax(0,1fr);gap:1.2rem;
  padding:1.2rem;border-radius:calc(var(--r-lg) + .4rem);
  background:var(--surface);border:1px solid var(--line-soft);
}
.prueba__ctrl{padding:1rem .6rem 1rem .8rem;display:flex;flex-direction:column;gap:1.8rem}
.prueba__ctrl fieldset{border:0;margin:0;padding:0}
.prueba__ctrl legend,.prueba__tiempo label{font-size:.92rem;font-weight:500;color:var(--ink);margin-bottom:.8rem;padding:0}
.rutina{display:flex;flex-wrap:wrap;gap:.45rem}
.rutina button{
  display:inline-flex;align-items:center;gap:.4rem;padding:.48rem .85rem;border-radius:999px;
  border:1px solid var(--line);color:var(--ink-soft);font-size:.86rem;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease;
}
.rutina button:hover{border-color:var(--accent);color:var(--ink)}
.rutina button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.rutina button svg{width:.85rem;height:.85rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0;margin-left:-.4rem;width:0;transition:all .2s ease}
.rutina button[aria-pressed="true"] svg{opacity:1;margin-left:0;width:.85rem}
.prueba__tiempo label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.prueba__tiempo output{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;font-weight:500;color:var(--accent)}
.rango{
  -webkit-appearance:none;appearance:none;width:100%;height:2.2rem;background:transparent;margin:0;cursor:pointer;
  --pct:12.5%;
}
.rango::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--pct),var(--line) var(--pct))}
.rango::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,var(--accent) var(--pct),var(--line) var(--pct))}
.rango::-webkit-slider-thumb{
  -webkit-appearance:none;width:1.5rem;height:1.5rem;margin-top:calc(-.75rem + 2px);border-radius:var(--r-sm);
  background:var(--primary);border:2px solid var(--accent);transform:rotate(45deg);
}
.rango::-moz-range-thumb{width:1.3rem;height:1.3rem;border-radius:var(--r-sm);background:var(--primary);border:2px solid var(--accent);transform:rotate(45deg)}
.rango:focus-visible{outline:none}
.rango:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ring)}
.prueba__marcas{position:relative;height:1.2rem;margin:.2rem .75rem 0;font-size:.74rem;color:var(--ink-mute)}
.prueba__marcas span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.prueba__marcas span:first-child{transform:none;margin-left:-.75rem}
.prueba__marcas span:last-child{transform:translateX(-100%);margin-left:.75rem}

.muestra{
  margin:0;position:relative;border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;
  background:var(--surface-alt);border:1px solid var(--line-soft);
}
.muestra--brava{border-color:color-mix(in oklab,var(--gold) 45%,transparent)}
.muestra__lienzo{position:relative;aspect-ratio:1;display:grid;place-items:center}
.muestra__lienzo svg{width:100%;height:100%}
.muestra--brava .muestra__lienzo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,oklch(1 0 0 / .55) 50%,transparent 65%);
  background-size:250% 100%;background-position:150% 0;mix-blend-mode:soft-light;
}
.muestra--brava.destella .muestra__lienzo::after{animation:destello .9s ease-out}
@keyframes destello{from{background-position:150% 0}to{background-position:-50% 0}}
.muestra figcaption{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.muestra__titulo{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.35rem;line-height:1.1;color:var(--ink)}
.muestra__estado{font-size:.9rem;color:var(--ink-soft);min-height:1.6em;transition:color .3s ease}
.muestra--comun .muestra__estado.mal{color:oklch(.55 .14 30)}
:root[data-theme="dark"] .muestra--comun .muestra__estado.mal{color:oklch(.75 .12 40)}
.medidor{display:grid;grid-template-columns:4.6rem 1fr;align-items:center;gap:.7rem;font-size:.76rem;color:var(--ink-mute)}
.medidor i{display:block;height:5px;border-radius:5px;background:var(--line-soft);overflow:hidden;position:relative}
.medidor i::after{content:"";position:absolute;inset:0;width:var(--v,100%);border-radius:inherit;background:var(--accent);transition:width .5s cubic-bezier(.2,.75,.25,1),background-color .5s ease}
.muestra--comun .medidor i::after{background:color-mix(in oklab,var(--accent) calc(100% - var(--d,0) * 100%),oklch(.55 .07 130))}
.prueba__nota{margin:1.2rem 0 0;font-size:.82rem;color:var(--ink-mute);max-width:70ch}

/* ===================== responsive ===================== */
@media (max-width:1100px){
  .prueba__panel{grid-template-columns:1fr 1fr}
  .prueba__ctrl{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:1.6rem;padding:.6rem}
}
@media (max-width:960px){
  .portada{min-height:0}
  .portada__in{grid-template-columns:1fr;padding-top:2.6rem;padding-bottom:3.6rem}
  .portada__velo{background:linear-gradient(180deg,color-mix(in oklab,var(--p-deep) 70%,transparent) 0%,color-mix(in oklab,var(--p-deep) 55%,transparent) 60%,var(--p-deep) 100%)}
  .vitrina__mazo{width:min(78%,19rem)}
  .prueba__cab{grid-template-columns:1fr}
}
@media (max-width:640px){
  .casillas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .portada__cta .btn{flex:1 1 100%}
  .prueba__panel{grid-template-columns:1fr 1fr;padding:.7rem;gap:.7rem}
  .prueba__ctrl{grid-template-columns:1fr}
  .muestra figcaption{padding:.8rem}
  .muestra__titulo{font-size:1.1rem}
  .medidor{grid-template-columns:1fr;gap:.3rem}
  .portada__pista{display:none}
}
@media (prefers-reduced-motion: reduce){
  .portada.lista *{animation:none!important}
  .portada__titulo .linea > span{background-position:0 0}
  .foto{transition:opacity .2s ease}
}