/* =========================================================================
   SOY MILLONARIO - "Yeso y Cinabrio"
   A gallery room, not a store. Silence is the luxury signal.
   ========================================================================= */

@layer reset, tokens, base, layout, components, utilities, motion, responsive;

/* ---------------------------------------------------------------- reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  img, svg { display: block; max-width: 100%; }
  button, input, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: none; cursor: pointer; }
  a { color: inherit; }
  ul { list-style: none; }
}

/* --------------------------------------------------------------- tokens */
@layer tokens {
  :root {
    color-scheme: light;

    /* Surfaces: plaster walls under diffuse north light. Never pure white. */
    --yeso:       oklch(0.968 0.006 85);
    --vitrina:    oklch(0.992 0.003 85);
    --hueco:      oklch(0.945 0.007 85);

    /* Ink: near-black, tinted cool. Never #000. */
    --tinta:      oklch(0.205 0.008 265);
    --grafito:    oklch(0.550 0.006 265);
    --polvo:      oklch(0.700 0.005 265);
    --linea:      oklch(0.880 0.005 85);
    --linea-viva: oklch(0.800 0.006 85);

    /* Cinnabar: the red dot that marks a sold work. Under 4% of surface. */
    --cinabrio:   oklch(0.550 0.200 27);
    --cinabrio-t: oklch(0.550 0.200 27 / 0.08);

    /* Type */
    --f-display: "Bodoni Moda", "Times New Roman", serif;
    --f-body:    "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono:    "Martian Mono", ui-monospace, SFMono-Regular, monospace;

    /* Modular scale, ratio ~1.33, fluid where it earns it */
    --t-cartela: 0.6875rem;
    --t-xs:      0.75rem;
    --t-sm:      0.875rem;
    --t-base:    1rem;
    --t-md:      clamp(1.125rem, 0.95rem + 0.7vw, 1.5rem);
    --t-lg:      clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
    --t-xl:      clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);
    --t-display: clamp(3.25rem, 1rem + 9.5vw, 8rem);

    /* Rhythm: varied on purpose. Same padding everywhere is monotony. */
    --gap-hair:  0.375rem;
    --gap-tight: 0.75rem;
    --gap:       1.5rem;
    --gap-wide:  clamp(2.5rem, 5vw, 5rem);
    --gap-room:  clamp(6rem, 13vw, 13rem);

    --rail: clamp(1.25rem, 5vw, 6rem);
    --measure: 62ch;

    /* Motion (Kowalski curves; the CSS built-ins are too weak) */
    --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --t-press: 140ms;
    --t-ui:    220ms;
    --t-enter: 620ms;
  }
}

/* ----------------------------------------------------------------- base */
@layer base {
  body {
    background: var(--yeso);
    color: var(--tinta);
    font-family: var(--f-body);
    font-size: var(--t-base);
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    /* `clip`, not `hidden`: `hidden` forces overflow-y to auto, which turns
       body into a scroll container and silently breaks IntersectionObserver. */
    overflow-x: clip;
  }

  ::selection { background: var(--cinabrio); color: var(--yeso); }

  :focus-visible { outline: 2px solid var(--cinabrio); outline-offset: 3px; }

  h1, h2, h3 { font-weight: 400; line-height: 1.02; letter-spacing: -0.015em; }

  p { max-width: var(--measure); }

  .display {
    font-family: var(--f-display);
    font-size: var(--t-display);
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.03em;
  }

  /* Wall label typography: the small institutional voice */
  .cartela-label {
    font-family: var(--f-body);
    font-size: var(--t-cartela);
    font-stretch: 125%;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grafito);
  }

  .dato { font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 400; }

  .skip {
    position: absolute; left: -9999px;
    background: var(--tinta); color: var(--yeso);
    padding: var(--gap-tight) var(--gap);
  }
  .skip:focus { left: var(--rail); top: var(--gap-tight); z-index: 99; }
}

/* --------------------------------------------------------------- layout */
@layer layout {
  /* The floor plan: a visible, rigorously asymmetric grid. */
  .sala {
    display: grid;
    grid-template-columns:
      [borde-i] var(--rail)
      [cartela] minmax(0, 4fr)
      [medio] minmax(0, 1fr)
      [obra] minmax(0, 6fr)
      [borde-d] var(--rail);
    column-gap: var(--gap-wide);
  }

  .col-cartela { grid-column: cartela / medio; }
  .col-obra    { grid-column: obra / borde-d; }
  .col-ancho   { grid-column: cartela / borde-d; }

  /* The entrance wall: the title runs the full width so the display face can
     be as large as the brand deserves, then the exhibit sits below it. */
  .portada { padding-top: var(--gap-wide); row-gap: var(--gap); }
  .portada__kicker { grid-column: cartela / borde-d; }
  .portada__titulo { grid-column: cartela / borde-d; }
  .portada__texto  { grid-column: cartela / medio; align-self: start; }
  .portada__obra   { grid-column: obra / borde-d; }

  section { padding-block: var(--gap-room); position: relative; }

  .division { border-top: 1px solid var(--linea); }

  .apilado > * + * { margin-top: var(--gap); }
  .apilado-tight > * + * { margin-top: var(--gap-tight); }
  .apilado-wide > * + * { margin-top: var(--gap-wide); }
}

/* ----------------------------------------------------------- components */
@layer components {

  /* --- Header: institutional plate, not a nav bar --------------------- */
  .plato {
    position: sticky; top: 0; z-index: 40;
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--gap);
    padding: var(--gap-tight) var(--rail);
    background: color-mix(in oklab, var(--yeso) 88%, transparent);
    border-bottom: 1px solid var(--linea);
    backdrop-filter: saturate(1.1) blur(6px);
  }
  .plato__marca {
    font-family: var(--f-body);
    font-stretch: 125%;
    font-weight: 700;
    font-size: var(--t-sm);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .plato__nav { display: flex; gap: var(--gap); }
  .plato__nav a {
    text-decoration: none;
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--grafito);
    transition: color var(--t-ui) var(--ease-out);
  }
  .plato__nav a:hover, .plato__nav a[aria-current="page"] { color: var(--tinta); }

  /* --- The vitrine: the object under glass --------------------------- */
  .vitrina {
    position: relative;
    display: grid;
    place-items: center;
    min-height: min(52dvh, 460px);
    background: var(--vitrina);
    border: 1px solid var(--linea);
    /* Gallery light: a soft pool from above, not a drop shadow. */
    box-shadow:
      inset 0 40px 90px -50px oklch(0.55 0.006 265 / 0.28),
      0 30px 70px -60px oklch(0.35 0.01 265 / 0.5);
  }
  .vitrina::after {
    content: "";
    position: absolute;
    inset: auto 22% 12% 22%;
    height: 14px;
    background: radial-gradient(50% 100% at 50% 0%, oklch(0.5 0.01 265 / 0.22), transparent 72%);
    pointer-events: none;
  }
  .vitrina__pieza { width: min(46%, 230px); overflow: visible; }

  /* --- Wall label ----------------------------------------------------- */
  .cartela { border-top: 1px solid var(--tinta); padding-top: var(--gap-tight); }
  .cartela dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--gap);
    row-gap: var(--gap-hair);
    margin-top: var(--gap);
  }
  .cartela dt {
    font-size: var(--t-cartela);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--polvo);
    white-space: nowrap;
    padding-top: 0.25em;
  }
  .cartela dd { font-size: var(--t-sm); color: var(--tinta); }

  /* --- Price: the loudest number on the page ------------------------- */
  .precio {
    display: flex; align-items: baseline; gap: 0.3em;
    font-family: var(--f-mono);
    font-size: var(--t-xl);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .precio__signo { font-size: 0.44em; color: var(--grafito); font-weight: 400; }
  .precio--vivo { color: var(--cinabrio); }

  /* --- Red dot: the sold marker. The only saturated thing on screen. -- */
  .punto {
    display: inline-flex; align-items: center; gap: 0.55em;
    font-size: var(--t-cartela);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grafito);
  }
  .punto::before {
    content: "";
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--cinabrio);
    flex: none;
  }
  .punto--libre::before { background: transparent; border: 1px solid var(--linea-viva); }

  /* --- Buttons: institutional, pressable ------------------------------ */
  .accion {
    display: inline-flex; align-items: center; gap: 0.7em;
    padding: 0.95em 1.7em;
    background: var(--tinta);
    color: var(--yeso);
    font-size: var(--t-xs);
    font-stretch: 112%;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid var(--tinta);
    transition: transform var(--t-press) var(--ease-out),
                background-color var(--t-ui) var(--ease-out),
                border-color var(--t-ui) var(--ease-out);
  }
  .accion:active { transform: scale(0.97); }
  .accion--fantasma { background: transparent; color: var(--tinta); }
  .accion[disabled] { opacity: 0.4; pointer-events: none; }

  @media (hover: hover) and (pointer: fine) {
    .accion:hover { background: var(--cinabrio); border-color: var(--cinabrio); color: var(--yeso); }
  }

  /* --- Lot index: rows, not a card grid ------------------------------- */
  .indice { border-top: 1px solid var(--tinta); }
  .indice__fila {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--gap);
    padding: clamp(1.1rem, 2.4vw, 2rem) 0;
    border-bottom: 1px solid var(--linea);
    text-decoration: none;
    transition: background-color var(--t-ui) var(--ease-out);
  }
  .indice__fila:hover { background: var(--hueco); }
  .indice__serie {
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    color: var(--polvo);
    font-variant-numeric: tabular-nums;
  }
  .indice__nombre { font-family: var(--f-display); font-size: var(--t-lg); line-height: 1; }
  .indice__sub { font-size: var(--t-xs); color: var(--grafito); margin-top: 0.2em; }
  .indice__meta { text-align: right; }

  /* --- Bid ticker ----------------------------------------------------- */
  .ticker { border-top: 1px solid var(--tinta); }
  .ticker__fila {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: var(--gap);
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--linea);
  }
  .ticker__nombre { font-size: var(--t-sm); }
  .ticker__monto {
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
  }
  .ticker__hora { font-size: var(--t-cartela); color: var(--polvo); white-space: nowrap; }
  .ticker__fila--lider { background: var(--cinabrio-t); }
  .ticker__fila--lider .ticker__monto { color: var(--cinabrio); }

  /* --- Countdown ------------------------------------------------------ */
  .reloj { display: flex; gap: var(--gap); }
  .reloj__campo { display: flex; flex-direction: column; gap: var(--gap-hair); }
  .reloj__num {
    font-family: var(--f-mono);
    font-size: var(--t-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
  }
  .reloj__uni {
    font-size: var(--t-cartela);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--polvo);
  }

  /* --- Forms ---------------------------------------------------------- */
  .campo { display: flex; flex-direction: column; gap: var(--gap-hair); }
  .campo label {
    font-size: var(--t-cartela);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--grafito);
  }
  .campo input, .campo textarea, .campo select {
    background: var(--vitrina);
    border: 1px solid var(--linea-viva);
    padding: 0.8em 0.9em;
    font-size: var(--t-base);
    transition: border-color var(--t-ui) var(--ease-out);
  }
  .campo input:focus, .campo textarea:focus, .campo select:focus {
    border-color: var(--tinta); outline: none;
  }
  .campo--mono input { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
  .campo__ayuda { font-size: var(--t-xs); color: var(--polvo); }
  .campo__error { font-size: var(--t-xs); color: var(--cinabrio); min-height: 1.2em; }
  .trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* --- Demo banner ---------------------------------------------------- */
  .aviso-demo {
    display: flex; align-items: center; gap: 0.7em; flex-wrap: wrap;
    padding: 0.7em var(--rail);
    background: var(--tinta);
    color: var(--yeso);
    font-size: var(--t-cartela);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  .aviso-demo strong { font-stretch: 125%; }
  .aviso-demo span { text-transform: none; letter-spacing: 0.02em; opacity: 0.72; }

  /* --- Storyboard of the delivery ------------------------------------- */
  .guion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 1px;
    background: var(--linea);
    border: 1px solid var(--linea);
  }
  .guion__acto { background: var(--yeso); padding: var(--gap-wide) var(--gap); }
  .guion__num {
    font-family: var(--f-mono);
    font-size: var(--t-sm);
    color: var(--cinabrio);
    font-variant-numeric: tabular-nums;
  }
  .guion__acto h3 { font-family: var(--f-display); font-size: var(--t-md); margin-top: var(--gap-tight); }
  .guion__acto p { font-size: var(--t-sm); color: var(--grafito); margin-top: var(--gap-hair); }

  .figura { margin: 0; }
  .figura img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    filter: grayscale(1) contrast(1.04);
    transition: filter 480ms var(--ease-out);
    background: var(--hueco);
  }
  .figura:hover img { filter: grayscale(0.55) contrast(1.02); }
  .figura figcaption { margin-top: var(--gap-tight); font-size: var(--t-cartela); color: var(--polvo); }

  .pie {
    padding: var(--gap-wide) var(--rail);
    border-top: 1px solid var(--tinta);
    display: flex; flex-wrap: wrap; gap: var(--gap-wide);
    justify-content: space-between; align-items: flex-start;
    font-size: var(--t-xs);
    color: var(--grafito);
  }
  .pie a { text-decoration: none; }
  .pie a:hover { color: var(--tinta); }
}

/* ------------------------------------------------------------ utilities */
/* Named because the CSP forbids inline style attributes, and because a
   style="" scattered through a template is where design systems go to die. */
@layer utilities {
  .display--medio { font-size: var(--t-xl); }
  .titulo-seccion { font-family: var(--f-display); font-size: var(--t-lg); }
  .remate {
    font-family: var(--f-display);
    font-size: var(--t-md);
    max-width: 32ch;
    padding-top: var(--gap);
  }
  .nota { font-size: var(--t-sm); color: var(--grafito); }
  .medida-corta { max-width: 36ch; }
  .medida-media { max-width: 48ch; }

  .botonera { display: flex; gap: var(--gap-tight); flex-wrap: wrap; margin-top: var(--gap); }
  .mt        { margin-top: var(--gap); }
  .mt-tight  { margin-top: var(--gap-tight); }
  .mt-hair   { margin-top: 0.35em; }
  .derecha   { text-align: right; }
  .bloque    { display: block; }
  .polvo     { color: var(--polvo); }
  .fuerte    { font-weight: 600; }
  .vivo      { color: var(--cinabrio); }

  .girador { width: 100%; display: grid; place-items: center; }

  .cartela--aviso { border-color: var(--cinabrio); }
  .cartela-label--vivo { color: var(--cinabrio); }

  .punto--bloque { display: flex; margin-top: 0.35em; }

  .ticker__fila--duo { grid-template-columns: 1fr auto; }
  .ticker__sub {
    display: block;
    font-size: var(--t-cartela);
    color: var(--grafito);
    margin-top: 0.25em;
  }

  /* Consent row: checkbox beside a full-sentence label, not a shouted caps one */
  .campo--fila { flex-direction: row; align-items: flex-start; gap: 0.7em; }
  .campo--fila input { width: auto; margin-top: 0.35em; flex: none; }
  .campo--fila label {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--t-sm);
    color: var(--tinta);
  }
}

/* --------------------------------------------------------------- motion */
@layer motion {
  /* Entrance: staggered reveal, transform + opacity only. */
  [data-revelar] {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity var(--t-enter) var(--ease-out),
      transform var(--t-enter) var(--ease-out);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  [data-revelar].visible { opacity: 1; transform: none; }

  /* Without scripting there is no observer to reveal anything, so the entrance
     state must never be the resting state. Content first, choreography second. */
  @media (scripting: none) {
    [data-revelar] { opacity: 1; transform: none; transition: none; }
  }

  /* The clip draws itself. Length is measured at runtime. */
  .traza {
    stroke-dasharray: var(--largo, 2400);
    stroke-dashoffset: var(--largo, 2400);
    transition: stroke-dashoffset 1900ms var(--ease-in-out);
  }
  .traza.dibujado { stroke-dashoffset: 0; }

  @media (prefers-reduced-motion: reduce) {
    /* Fewer and gentler, not zero: keep opacity, drop movement. */
    [data-revelar] {
      transform: none;
      transition: opacity 260ms var(--ease-out);
      transition-delay: 0ms;
    }
    .traza { transition: none; stroke-dashoffset: 0; }
  }
}

/* ----------------------------------------------------------- responsive */
@layer responsive {
  @media (max-width: 900px) {
    .sala {
      grid-template-columns: [borde-i] var(--rail) [cartela] minmax(0, 1fr) [borde-d] var(--rail);
      row-gap: var(--gap-wide);
    }
    .col-cartela, .col-obra, .col-ancho,
    .portada__kicker, .portada__titulo, .portada__texto, .portada__obra {
      grid-column: cartela / borde-d;
    }
    .portada { row-gap: var(--gap); }
    section { padding-block: clamp(3.5rem, 12vw, 6rem); }
    .indice__fila { grid-template-columns: 3rem minmax(0, 1fr); row-gap: var(--gap-tight); }
    .indice__meta { grid-column: 2; text-align: left; }
    .ticker__fila { grid-template-columns: 1fr auto; }
    .ticker__hora { grid-column: 2; text-align: right; }
    .plato__nav { gap: var(--gap-tight); }
  }

  @media (max-width: 560px) {
    .plato { flex-direction: column; align-items: flex-start; gap: var(--gap-hair); }
    .plato__nav { flex-wrap: wrap; }
    .reloj { flex-wrap: wrap; gap: var(--gap-tight) var(--gap); }
  }
}