/* ══════════════════════════════════════════════════════
   Savey · Catálogo por categoría
   Mismos tokens que el landing, hoja aparte para que las
   subpáginas se sirvan ligeras y cacheadas.
   ══════════════════════════════════════════════════════ */
:root{
  --marfil:#F7F2EA; --blanco:#FFFDFC;
  --espresso:#332B27; --espresso-suave:#6E625B;
  --champagne:#C7A77A; --champagne-os:#BB9A6C; --rosa:#CDA9A5;
  --borde:rgba(51,43,39,.10); --borde-fino:rgba(51,43,39,.06);
  --display:'Instrument Serif',Georgia,serif;
  --texto:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --p--1:.8125rem; --p-0:1.0625rem; --p-1:1.3125rem;
  --p-2:clamp(2rem,4.2vw,2.75rem); --p-3:clamp(2.6rem,6.4vw,4.6rem);
  --aire:clamp(4rem,8vw,7rem);
  --radio:10px; --nav:60px;
  --suave:cubic-bezier(.2,.7,.3,1);
  --resorte:cubic-bezier(.34,1.4,.5,1);
  --acento:#C7A77A; --tinta-cat:#332B27;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav) + 14px)}
body{background:var(--marfil);color:var(--espresso);font-family:var(--texto);
  font-size:var(--p-0);line-height:1.6;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--champagne);color:var(--espresso)}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--champagne);outline-offset:3px;border-radius:4px}
svg{display:block}
img{max-width:100%}
h1,h2,h3{font-family:var(--display);font-weight:400;letter-spacing:-.015em;line-height:1.04}
.caja{max-width:42rem;margin:0 auto;padding:0 1.4rem}
.ancha{max-width:58rem;margin:0 auto;padding:0 1.4rem}
.amplia{max-width:72rem;margin:0 auto;padding:0 1.4rem}

/* ── Hilo de progreso ── */
.hilo{position:fixed;inset:0 0 auto 0;height:2px;z-index:60;background:transparent;pointer-events:none}
.hilo i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--champagne),var(--acento));
  transform-origin:0 50%;transition:width .12s linear}

/* ── Barra ── */
.barra{position:sticky;top:0;z-index:50;height:var(--nav);
  background:color-mix(in srgb,var(--marfil) 82%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .4s,background .4s}
.barra.pegada{border-bottom-color:var(--borde-fino)}
.barra-caja{max-width:72rem;margin:0 auto;padding:0 1.4rem;height:100%;
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-size:1.35rem;line-height:1}
.logo svg{width:13px;height:13px;fill:var(--champagne);transition:transform .6s var(--suave)}
.logo:hover svg{transform:rotate(90deg)}
.barra nav{display:flex;align-items:center;gap:.5rem}
.barra nav .liga{font-size:var(--p--1);color:var(--espresso-suave);padding:.5rem .7rem;border-radius:100px;
  transition:color .3s,background .3s}
.barra nav .liga:hover{color:var(--espresso);background:rgba(51,43,39,.05)}
@media (max-width:44rem){.barra nav .liga{display:none}}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:44px;padding:0 1.15rem;
  border-radius:100px;font-size:var(--p--1);font-weight:500;white-space:nowrap;cursor:pointer;border:0;
  transition:transform .35s var(--resorte),background .3s,box-shadow .35s,color .3s}
.btn:active{transform:scale(.97)}
.btn-champ{background:var(--espresso);color:var(--marfil);box-shadow:0 8px 22px -12px rgba(51,43,39,.7)}
.btn-champ:hover{background:#231D1A;box-shadow:0 14px 30px -12px rgba(51,43,39,.8);transform:translateY(-2px)}
.btn-wa{background:#1FA855;color:#fff;box-shadow:0 8px 22px -10px rgba(31,168,85,.75)}
.btn-wa:hover{background:#178A44;box-shadow:0 12px 28px -10px rgba(31,168,85,.85);transform:translateY(-2px)}
.btn-wa svg{width:17px;height:17px;fill:currentColor}
.btn-linea{background:transparent;color:var(--espresso);border:1px solid var(--borde);height:44px}
.btn-linea:hover{border-color:var(--champagne);background:rgba(199,167,122,.08)}
.btn .flechita{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
  transition:transform .4s var(--suave)}
.btn:hover .flechita{transform:translateX(3px)}
.barra .btn{height:38px;padding:0 .95rem}
.barra .btn-wa{padding:0 .8rem}

/* ── Encabezado de categoría ── */
.encabezado{position:relative;padding:clamp(2.6rem,7vw,4.6rem) 0 clamp(2rem,5vw,3rem);overflow:hidden}
.encabezado::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:180%;z-index:0;pointer-events:none;
  background:radial-gradient(48% 42% at 78% 22%,color-mix(in srgb,var(--acento) 30%,transparent),transparent 72%),
             radial-gradient(40% 40% at 8% 6%,color-mix(in srgb,var(--tinta-cat) 13%,transparent),transparent 70%);
  opacity:.9}
.encabezado>*{position:relative;z-index:1}
.miga{display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;font-size:var(--p--1);color:var(--espresso-suave)}
.miga a{text-underline-offset:3px;transition:color .3s}
.miga a:hover{color:var(--espresso);text-decoration:underline;text-decoration-color:var(--champagne)}
.miga i{font-style:normal;opacity:.45}
.miga b{font-weight:500;color:var(--espresso)}
.titulo{font-size:var(--p-3);margin:1rem 0 0}
.entrada{font-size:var(--p-1);color:var(--espresso-suave);max-width:36ch;margin-top:.9rem;line-height:1.45}
.nota{position:relative;max-width:42ch;margin-top:1.5rem;
  font-size:var(--p--1);line-height:1.6;color:var(--espresso-suave);
  background:var(--blanco);border:1px solid var(--borde-fino);border-radius:16px;
  padding:.95rem 1.1rem .95rem 1.35rem}
.nota::before{content:"";position:absolute;left:0;top:1.05rem;bottom:1.05rem;width:2px;
  border-radius:2px;background:var(--acento);opacity:.75}
.acciones{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}

/* Abanico del encabezado (solo pantallas anchas) */
.encabezado .amplia{position:relative}
.abanico{display:none}
@media (min-width:64rem){
  /* la columna de texto nunca invade el espacio del abanico */
  .encabezado .miga,.encabezado .titulo,.encabezado .entrada,
  .encabezado .nota,.encabezado .acciones{max-width:min(40rem,calc(100% - 28rem))}
  .abanico{display:block;position:absolute;right:1.4rem;top:50%;width:26rem;height:20rem;
    transform:translateY(-50%);pointer-events:none}
  .abanico .hoja{position:absolute;top:50%;left:50%;width:9.4rem;border-radius:14px;overflow:hidden;
    box-shadow:0 2px 6px rgba(51,43,39,.1),0 26px 48px -22px rgba(51,43,39,.55);
    animation:flotar 9s ease-in-out infinite}
  .abanico .hoja:nth-child(1){transform:translate(-138%,-48%) rotate(-8deg);z-index:1;animation-delay:-1.2s}
  .abanico .hoja:nth-child(2){transform:translate(-50%,-52%);z-index:3}
  .abanico .hoja:nth-child(3){transform:translate(38%,-48%) rotate(8deg);z-index:2;animation-delay:-2.4s}
  .abanico .pantalla{box-shadow:none;transition:none}
}
@keyframes flotar{0%,100%{margin-top:0}50%{margin-top:-9px}}
@media (prefers-reduced-motion:reduce){.abanico .hoja{animation:none}}

/* ── Rejilla de diseños ── */
.rejilla-sec{padding:clamp(1rem,3vw,2rem) 0 var(--aire)}
.rejilla{display:grid;gap:clamp(1rem,2.6vw,1.9rem) clamp(.9rem,2vw,1.4rem);
  grid-template-columns:repeat(2,1fr)}
@media (min-width:44rem){.rejilla{grid-template-columns:repeat(3,1fr);max-width:56rem;margin-inline:auto}}

.muestra{display:block;perspective:900px;-webkit-user-drag:none}
.muestra img{-webkit-user-drag:none;user-select:none}
.pantalla{aspect-ratio:9/15;border-radius:16px;overflow:hidden;position:relative;display:block;
  background:var(--m-fondo,#332B27);color:var(--m-tinta,#F7F2EA);
  container-type:inline-size;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transition:transform .5s var(--suave),box-shadow .5s,background .6s,color .6s;
  box-shadow:0 1px 2px rgba(51,43,39,.06),0 12px 26px -12px rgba(51,43,39,.3)}
.muestra:hover .pantalla,.muestra:focus-visible .pantalla{--ty:-6px;
  box-shadow:0 1px 2px rgba(51,43,39,.06),0 28px 44px -18px rgba(51,43,39,.45)}
.pantalla .marco{position:absolute;inset:7px;border-radius:11px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--m-acento,#C7A77A) 34%,transparent);transition:border-color .6s}
.pantalla .capa{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4em;padding:1em .7em;text-align:center;overflow:hidden}
.m-rotulo{font-size:clamp(.42rem,6.5cqw,.6rem);letter-spacing:.18em;
  color:var(--m-acento,#C7A77A);text-transform:uppercase}
.m-nombre{font-family:var(--display);font-weight:400;font-size:clamp(.9rem,16cqw,1.6rem);line-height:1.05;letter-spacing:-.01em}
.m-orn{width:clamp(8px,6.5cqw,12px);height:clamp(8px,6.5cqw,12px);fill:var(--m-acento,#C7A77A);opacity:.85}
.m-fecha{font-size:clamp(.42rem,6cqw,.6rem);letter-spacing:.15em;opacity:.7}
.m-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.con-foto .capa{justify-content:flex-end;gap:.26em;padding-bottom:1.1em;
  background:linear-gradient(to top,var(--m-fondo) 5%,
    color-mix(in srgb,var(--m-fondo) 48%,transparent) 40%,transparent 74%)}
.pantalla::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,30%),rgba(255,255,255,.38),transparent 55%);
  mix-blend-mode:soft-light;transition:opacity .4s}
.muestra:hover .pantalla::after{opacity:1}
.muestra .ver{position:absolute;z-index:4;top:12px;right:12px;font-size:.7rem;font-weight:500;
  background:rgba(255,253,252,.92);color:var(--espresso);padding:.3rem .65rem;border-radius:100px;
  opacity:0;transform:translateY(-4px);transition:opacity .3s,transform .3s var(--suave)}
.muestra:hover .ver,.muestra:focus-visible .ver{opacity:1;transform:none}
.muestra b{display:block;font-weight:500;margin-top:.8rem;line-height:1.25}
.muestra em{font-style:normal;font-size:var(--p--1);color:var(--espresso-suave)}

/* ── Aviso de propiedad intelectual (cumpleaños) ── */
.aviso-pi{padding:0 0 clamp(2rem,5vw,3.2rem)}
.pi{position:relative;max-width:56rem;margin-inline:auto;
  background:var(--blanco);border:1px solid var(--borde-fino);border-radius:18px;
  padding:clamp(1.15rem,2.6vw,1.6rem) clamp(1.15rem,2.6vw,1.6rem) clamp(1.15rem,2.6vw,1.6rem) clamp(1.5rem,3vw,2rem);
  overflow:hidden;transition:border-color .35s}
.pi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acento);opacity:.8}
.pi:hover{border-color:var(--borde)}
.pi b{display:block;font-weight:500;margin-bottom:.3rem}
.pi p{font-size:var(--p--1);color:var(--espresso-suave);line-height:1.6;max-width:68ch}

/* ── Otras categorías ── */
.otras{padding:var(--aire) 0}
.otras h2{font-size:var(--p-2)}
.otras p.pie{color:var(--espresso-suave);margin-top:.6rem;font-size:var(--p--1)}
.fichas{display:grid;gap:.75rem;margin-top:1.8rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:46rem){.fichas{grid-template-columns:repeat(4,1fr)}}
.ficha{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:.15rem;
  min-height:8.5rem;padding:1rem;border-radius:16px;overflow:hidden;background:var(--blanco);
  border:1px solid var(--borde-fino);transition:border-color .35s,transform .5s var(--suave)}
.ficha::before{content:"";position:absolute;inset:0;z-index:0;opacity:.9;
  background:radial-gradient(70% 90% at 80% 10%,color-mix(in srgb,var(--fa) 46%,transparent),transparent 72%),
             linear-gradient(160deg,color-mix(in srgb,var(--fb) 16%,transparent),transparent 62%)}
.ficha>*{position:relative;z-index:1}
.ficha:hover{transform:translateY(-4px);border-color:var(--borde)}
.ficha strong{font-family:var(--display);font-weight:400;font-size:1.32rem;line-height:1.1}
.ficha span{font-size:var(--p--1);color:var(--espresso-suave)}
.ficha .fl{position:absolute;z-index:1;top:.9rem;right:.9rem;width:26px;height:26px;border-radius:50%;
  background:var(--blanco);display:grid;place-items:center;opacity:0;transform:translateY(-4px);
  transition:opacity .35s,transform .35s var(--suave)}
.ficha:hover .fl{opacity:1;transform:none}
.ficha .fl svg{width:13px;height:13px;stroke:var(--espresso);fill:none;stroke-width:1.7}

/* ── Cierre ── */
.cierre{padding:0 0 var(--aire)}
.cierre .panel{background:var(--espresso);color:var(--marfil);border-radius:24px;padding:clamp(2rem,5vw,3.4rem);
  position:relative;overflow:hidden;text-align:center}
.cierre .panel::before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(60% 60% at 80% 0%,color-mix(in srgb,var(--acento) 40%,transparent),transparent 70%)}
.cierre .panel>*{position:relative;z-index:1}
.cierre h2{font-size:var(--p-2)}
.cierre p{color:rgba(247,242,234,.76);margin:.7rem auto 0;max-width:40ch}
.cierre .acciones{justify-content:center;margin-top:1.8rem}
.cierre .btn-linea{color:var(--marfil);border-color:rgba(247,242,234,.35)}
.cierre .btn-linea:hover{border-color:var(--champagne);background:rgba(199,167,122,.16)}
.cierre .tel{margin-top:1.4rem;font-size:var(--p--1);color:rgba(247,242,234,.66)}
.cierre .tel a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--champagne)}

/* ── Pie ── */
footer{border-top:1px solid var(--borde-fino);padding:2.6rem 0 3.2rem;text-align:center}
footer .chispa{width:14px;height:14px;fill:var(--champagne);margin:0 auto 1rem}
footer p{font-size:var(--p--1);color:var(--espresso-suave)}
footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.3rem;margin-top:1rem;font-size:var(--p--1)}
footer nav a{color:var(--espresso-suave);transition:color .3s}
footer nav a:hover{color:var(--espresso);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--champagne)}
footer .legal{margin-top:1rem;font-size:.75rem;color:var(--espresso-suave);opacity:.75}
.redes{display:flex;gap:.6rem;justify-content:center;margin:1.2rem 0 .2rem}
.redes a{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--borde);background:var(--blanco);color:var(--espresso-suave);
  transition:color .4s var(--suave),border-color .4s var(--suave),
  transform .5s var(--resorte),box-shadow .5s var(--suave)}
.redes a:hover{color:var(--espresso);border-color:var(--champagne);transform:translateY(-3px);
  box-shadow:0 12px 24px -14px rgba(51,43,39,.6)}
.redes svg{stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--resorte)}
.redes a:hover svg{transform:scale(1.08)}
.redes a[data-r="fb"] svg{fill:currentColor;stroke:none}

/* ── Índice del catálogo ── */
.indice-cab{padding:clamp(2.6rem,7vw,4.6rem) 0 clamp(1.4rem,4vw,2.4rem)}
.indice{display:grid;gap:clamp(.9rem,2vw,1.3rem);grid-template-columns:1fr;padding-bottom:var(--aire)}
@media (min-width:38rem){.indice{grid-template-columns:1fr 1fr}}
@media (min-width:62rem){.indice{grid-template-columns:repeat(3,1fr)}}
.carta{position:relative;display:block;border-radius:20px;overflow:hidden;background:var(--blanco);
  border:1px solid var(--borde-fino);padding:1.3rem;
  transition:border-color .35s,transform .55s var(--suave),box-shadow .55s}
.carta::before{content:"";position:absolute;inset:0;z-index:0;opacity:.85;
  background:radial-gradient(64% 70% at 88% 6%,color-mix(in srgb,var(--fa) 42%,transparent),transparent 72%),
             linear-gradient(165deg,color-mix(in srgb,var(--fb) 14%,transparent),transparent 58%)}
.carta>*{position:relative;z-index:1}
.carta:hover{transform:translateY(-5px);border-color:var(--borde);box-shadow:0 22px 44px -26px rgba(51,43,39,.5)}
.carta .cab{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
.carta h2{font-size:1.75rem;line-height:1.06}
.carta .n{font-size:var(--p--1);color:var(--espresso-suave);white-space:nowrap}
.carta p{font-size:var(--p--1);color:var(--espresso-suave);margin-top:.5rem;line-height:1.5;min-height:3rem}
.tira{display:flex;gap:.5rem;margin-top:1.1rem}
.tira span{flex:1;aspect-ratio:9/15;border-radius:9px;overflow:hidden;background:var(--m-fondo,#332B27);
  box-shadow:0 1px 2px rgba(51,43,39,.08),0 8px 18px -10px rgba(51,43,39,.35);
  transition:transform .55s var(--suave)}
.tira img{width:100%;height:100%;object-fit:cover}
.carta:hover .tira span:nth-child(1){transform:translateY(-3px) rotate(-1.6deg)}
.carta:hover .tira span:nth-child(2){transform:translateY(-6px)}
.carta:hover .tira span:nth-child(3){transform:translateY(-3px) rotate(1.6deg)}
.carta .mas{display:inline-flex;align-items:center;gap:.4rem;margin-top:1.1rem;font-size:var(--p--1);font-weight:500}
.carta .mas svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;transition:transform .4s var(--suave)}
.carta:hover .mas svg{transform:translateX(4px)}

/* ── Revelado ── */
.js .revelar{opacity:0;transform:translateY(18px)}
.revelar.visto,html:not(.js) .revelar{opacity:1;transform:none}
.js .revelar.visto{transition:opacity .8s var(--suave),transform .8s var(--suave)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .revelar{opacity:1!important;transform:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}