/* Propuesta 02 — Marfil Studio
   Minimalismo cálido de catálogo editorial. Fondo marfil, tipografía
   serif fina + sans geométrica, grilla densa y uniforme. */

:root{
  --negro: #111111;
  --gris-carbon: #2b2b2b;
  --champagne: #c8b79a;
  --beige: #e8ddcf;
  --marfil: #f7f4ef;

  --bg: var(--marfil);
  --bg-lightbox: #141210;
  --ink: var(--negro);
  --ink-soft: color-mix(in oklab, var(--negro) 55%, var(--marfil));
  --accent: color-mix(in oklab, var(--champagne) 68%, var(--negro) 32%);
  --accent-hover: var(--negro);
  --frame-bg: var(--beige);

  --display: "Libre Caslon Display", Georgia, serif;
  --body: "Archivo", -apple-system, sans-serif;

  --page-pad-x: clamp(1.25rem, 4vw, 3.5rem);
  --section-pad-y: clamp(2.5rem, 5vw, 4.5rem);
  --cols: 4;
  --gap: .6rem;
}

body{
  font-family: var(--body); font-size: 15.5px;
  position: relative;
}
a{ color: var(--accent); }
a:hover{ color: var(--accent-hover); }

/* grano fotográfico sutil — textura de estudio, no decoración gratuita */
body::before{
  content:"";
  position: fixed; inset:0; z-index: 2000; pointer-events:none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.luxe-card--cover{ column-span: none; margin-bottom: var(--gap); }

/* luz de estudio al pasar el cursor por una foto */
.luxe-card__frame{ transition: box-shadow .4s ease; }
.luxe-card__frame:hover{
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 50%, transparent),
              0 18px 36px -18px color-mix(in oklab, var(--accent) 65%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .ms-hero__glow, .ms-hero__scan{ animation: none !important; }
}

/* ---- contador persistente y aviso de límite ---- */
.luxe-counter{ border-color: color-mix(in oklab, var(--negro) 14%, transparent); }
.luxe-counter__price{ font-family: var(--body); }

/* ---- sección final de envío ---- */
.luxe-submit{ background: var(--beige); border-top: 1px solid color-mix(in oklab, var(--negro) 10%, transparent); }
.luxe-submit__summary{ font-family: var(--display); font-size: 1.3rem; color: var(--negro); }
.luxe-submit__btn{ background: var(--negro); color: var(--marfil); font-family: var(--body); font-weight: 600; }
.luxe-submit__btn:hover:not(:disabled){ background: color-mix(in oklab, var(--champagne) 70%, var(--negro) 30%); }
.luxe-submit__hint{ color: var(--ink-soft); }

/* ---- header ---- */
.ms-header{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem var(--page-pad-x);
  background: color-mix(in oklab, var(--marfil) 92%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid color-mix(in oklab, var(--negro) 10%, transparent);
}
.ms-header__brand{ display:flex; align-items:center; gap:.6rem; }
.ms-header__mark{ height: 32px; width:auto; }
.ms-header__wordmark{
  font-family: var(--display); font-weight:400; font-size:1.05rem;
  letter-spacing:.01em; color: var(--negro);
}
.ms-header__wordmark em{ font-style:italic; opacity:.6; font-size:.82em; margin-left:.3em; }

/* ---- animación de apertura, a tono con el estudio ---- */
.luxe-intro__word{ font-family: var(--body); }
.ms-header__meta{
  display:flex; flex-direction:column; align-items:flex-end;
  font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--ink-soft); line-height:1.6;
}

/* ---- hero ---- */
.ms-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(3.2rem,7vw,5.5rem) var(--page-pad-x) clamp(2.4rem,5vw,3.4rem);
}
.ms-hero > *{ position: relative; z-index: 2; }

/* luz de estudio: dos focos suaves que respiran muy lento detrás del titular */
.ms-hero__glow{
  position:absolute; z-index:1; inset: -20% -10% auto -10%; height: 140%;
  pointer-events:none;
  background:
    radial-gradient(42% 55% at 18% 15%, color-mix(in oklab, var(--champagne) 55%, transparent) 0%, transparent 70%),
    radial-gradient(38% 50% at 82% 38%, color-mix(in oklab, var(--beige) 60%, transparent) 0%, transparent 72%);
  filter: blur(6px);
  animation: studioBreathe 14s ease-in-out infinite alternate;
}
@keyframes studioBreathe{
  0%{ opacity:.55; transform: translate3d(0,0,0) scale(1); }
  100%{ opacity:.9; transform: translate3d(1%, -2%, 0) scale(1.06); }
}

/* barrido de luz único al cargar, como un flash de estudio encendiendo */
.ms-hero__scan{
  position:absolute; z-index:3; inset:0; pointer-events:none;
  background: linear-gradient(100deg, transparent 42%, color-mix(in oklab, var(--marfil) 85%, white) 50%, transparent 58%);
  transform: translateX(-140%);
  animation: heroScan 1.6s cubic-bezier(.2,.7,.2,1) .25s both;
}
@keyframes heroScan{
  0%{ transform: translateX(-140%); opacity:0; }
  15%{ opacity:1; }
  100%{ transform: translateX(140%); opacity:0; }
}

.ms-hero__kicker{
  margin:0 0 .9rem; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent);
}
.ms-hero__title{
  font-family: var(--display); font-weight:400;
  font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height:1.1; margin:0 0 1.1rem;
}
.ms-hero__sub{ max-width:56ch; color: var(--ink-soft); font-size:1rem; line-height:1.6; }

/* ---- ficha técnica de la sesión ---- */
.ms-hero__stats{
  display:flex; flex-wrap:wrap; gap: 1.8rem 2.6rem;
  margin: 2.2rem 0 0; padding-top: 1.6rem;
  border-top: 1px solid color-mix(in oklab, var(--negro) 14%, transparent);
}
.ms-hero__stats dt{
  font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
  color: var(--ink-soft); margin: 0 0 .3rem;
}
.ms-hero__stats dd{
  margin:0; font-family: var(--display); font-weight:400;
  font-size: 1.35rem; color: var(--negro);
}

/* ---- nav: carrete de contactos ---- */
.ms-nav{
  top: 60px;
  background: color-mix(in oklab, var(--marfil) 90%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in oklab, var(--negro) 8%, transparent);
}
.luxe-nav__list{ padding: .4rem var(--page-pad-x); }
.luxe-nav__text{ color: var(--ink-soft); }
.luxe-nav__label{
  font-size: .68rem; letter-spacing: .04em; text-transform: uppercase;
  font-weight: 600; color: var(--ink);
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.luxe-nav__count{ color: var(--ink-soft); }
.luxe-nav__link.is-active .luxe-nav__label{ color: color-mix(in oklab, var(--champagne) 65%, var(--negro) 35%); }

/* ---- viendo ahora / progreso, a tono con el estudio ---- */
.luxe-nowviewing{ font-family: var(--body); border-color: color-mix(in oklab, var(--negro) 14%, transparent); }
.luxe-nowviewing__label{ font-family: var(--display); font-weight: 400; font-size: .92rem; }
.luxe-progress__fill{ background: color-mix(in oklab, var(--champagne) 75%, var(--negro) 25%); }

/* ---- secciones: estilo ficha de catálogo ---- */
.luxe-section{ border-top: 1px solid color-mix(in oklab, var(--negro) 10%, transparent); }
.luxe-section__head{ align-items: baseline; gap: .8rem; margin-bottom: 1.1rem; }
.luxe-section__num{
  font-family: var(--body); font-weight:600; font-size:.8rem;
  color: var(--accent); letter-spacing: .04em;
}
.luxe-section__title{
  font-family: var(--display); font-weight:400;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); margin:0;
}
.luxe-section__count{
  margin-left:auto; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color: var(--ink-soft);
}

/* ---- footer ---- */
.ms-footer{
  padding: 3.5rem var(--page-pad-x) 6rem;
  display:flex; flex-direction:column; align-items:center; gap:.9rem;
  color: var(--ink-soft); text-align:center;
  border-top: 1px solid color-mix(in oklab, var(--negro) 10%, transparent);
}
.ms-footer__mono{ width:28px; opacity:.75; }
.ms-footer p{ font-size:.74rem; letter-spacing:.04em; }

/* ---- controles ---- */
.luxe-soundtoggle{
  background: color-mix(in oklab, var(--marfil) 80%, transparent);
  color: var(--negro);
  border: 1px solid color-mix(in oklab, var(--negro) 14%, transparent);
}
.luxe-selectbar{
  background: color-mix(in oklab, var(--marfil) 78%, transparent);
  color: var(--negro);
  padding:.65rem .9rem;
  border-radius: 999px;
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border: 1px solid color-mix(in oklab, var(--negro) 10%, transparent);
  box-shadow: 0 18px 40px -20px rgba(17,17,17,.3), 0 2px 10px -4px rgba(17,17,17,.12);
}
.luxe-selectbar__count{ font-size:.8rem; font-weight:500; padding-left:.4rem; color: var(--ink-soft); }
.luxe-selectbar button{
  border:none; border-radius:999px; padding:.5rem .9rem;
  font-size:.74rem; letter-spacing:.03em; background:transparent; color: var(--ink-soft);
}
.luxe-selectbar__view{
  border: 1px solid color-mix(in oklab, var(--negro) 16%, transparent) !important;
  color: var(--negro) !important;
}
.luxe-selectbar__view:hover{ background: color-mix(in oklab, var(--negro) 6%, transparent) !important; }
.luxe-selectbar__send{
  background: color-mix(in oklab, var(--champagne) 85%, var(--negro) 15%) !important;
  color: var(--negro) !important;
}
.luxe-selectbar__download{ background: color-mix(in oklab, var(--negro) 8%, transparent); color: var(--negro); }
.luxe-selectbar__download:hover{ background: color-mix(in oklab, var(--negro) 14%, transparent); }
.luxe-selectbar__clear:hover, .luxe-selectbar__copy:hover{ color: color-mix(in oklab, var(--champagne) 70%, var(--negro) 30%); }

/* ---- lightbox ---- */
.luxe-lightbox__close, .luxe-lightbox__prev, .luxe-lightbox__next{
  background: color-mix(in oklab, var(--negro) 55%, transparent);
  color: var(--marfil);
  border: 1px solid color-mix(in oklab, var(--marfil) 18%, transparent);
}
.luxe-lightbox__meta{ color: var(--beige); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; }
.luxe-lightbox__section{ color: var(--champagne); font-family: var(--display); font-size:.92rem; text-transform:none; letter-spacing:0; }

@media (max-width: 980px){ :root{ --cols: 3; } }
@media (max-width: 680px){ :root{ --cols: 2; } .ms-header__meta{ display:none; } }
@media (max-width: 420px){ :root{ --cols: 1; } }