/* ============================================================
   Catálogo · capa de unificación

   La versión anterior igualaba el catálogo a la web quitándole
   la marca: papel a blanco, Helvetica en lugar de Work Sans y
   las páginas vino convertidas en gris claro.

   Esta capa hace lo contrario. El catálogo conserva vino, crema
   y Work Sans —que es lo que fija el manual— y solo se alinea
   con la web en lo que debe compartirse: hueco de cabecera,
   radio de producto, curva de movimiento y escala tipográfica.
   ============================================================ */

@media screen {

  /* La paleta y la tipografía vienen de styles.css. No se pisan. */

  html { scroll-padding-top: 90px; }

  /* Rejilla: mismo ancho útil que la web */
  .sheet { padding-inline: clamp(22px, 4vw, 48px); }
  .sheet > .page-head,
  .sheet > .page-content,
  .sheet > .page-foot { width: 100%; max-width: 1104px; margin-inline: auto; }

  /* Superficies: los tres registros del sistema, sin gris ajeno */
  /* Vino como ACENTO, no como superficie: las hojas antes vino pasan a
     una crema más profunda, y el acento se concentra en filetes y cifras. */
  .sheet.plum { --bg: #ece0cf; --fg: var(--ink); }
  /* La pagina de accion es la unica plancha de vino de todo el catalogo:
     es donde se le pide al cliente que reaccione. */
  .sheet.accion { --bg: var(--plum); --fg: var(--paper); }
  .accion .logo {  }
  .accion .kicker { color: var(--paper); opacity: .85; }
  .accion .page-foot, .accion .brief-grid article { border-color: rgba(252,242,231,.28); }
  .accion .text-link { border-bottom-color: var(--paper); }
  .plum .logo {  }
  .plum .kicker { color: var(--plum); opacity: 1; }
  .plum .page-foot, .plum .rows > div, .plum .brief-grid article { border-color: rgba(25,22,24,.16); }
  .plum .text-link { border-bottom-color: var(--plum); }
  .sheet.dark { --bg: var(--ink);  --fg: var(--paper); }

  /* Hueco de la cabecera flotante compartida */
  .cover { padding-top: 104px; }
  .cover .page-content { padding-top: 24px; gap: 6%; }
  .cover .model-stage { min-height: clamp(400px, 52vh, 525px); }

  /* Escala tipográfica común con la web */
  h1 { font-size: clamp(54px, 5.2vw, 72px); letter-spacing: -.035em; line-height: 1.05; }
  h2 { font-size: clamp(36px, 4.2vw, 58px); letter-spacing: -.025em; line-height: 1.1; }
  /* El contraste editorial lo da la cursiva ligera, no un segundo color */
  h1 em, h2 em { font-weight: 300; font-style: italic; letter-spacing: -.02em; }
  .lead { font-size: 19px; line-height: 1.5; }
  .copy > p:not(.kicker) { max-width: 465px; }
  /* Misma regla que en la presentacion: la etiqueta va apagada y solo
     el fragmento destacado lleva el acento. */
  .kicker { letter-spacing: .16em; font-weight: 600; color: var(--muted); }
  .kicker b, .kicker strong { color: var(--plum); font-weight: 600; }
  .dark .kicker, .accion .kicker { color: rgba(252,242,231,.55); }
  .dark .kicker b, .accion .kicker b { color: var(--paper); }

  /* Folios y etiquetas: misma familia, cifras alineadas.
     Antes usaban una monoespaciada que no está en el manual. */
  .page-foot, .case-labels { font-variant-numeric: tabular-nums; letter-spacing: .14em; }

  .catalogue-local-nav { display: flex; gap: 20px; font-size: 11px; line-height: 1.4; }
  .catalogue-local-nav a { opacity: .75; transition: opacity var(--t-fast, 220ms); }
  .catalogue-local-nav a:hover { opacity: 1; }

  /* Radio de producto: 10 px en imagen y visor, recto en documento */
  .visual > img, .model-stage { border-radius: var(--r-prod, 10px); }
  .model-stage { overflow: hidden; background: var(--ink); }

  /* Controles: mismo gesto que la web */
  .model-controls button,
  .load-3d,
  .submit {
    border-radius: 4px;
    transition: background var(--t-fast, 220ms), border-color var(--t-fast, 220ms), transform 150ms var(--spring, cubic-bezier(.22,1.15,.36,1));
  }
  .model-controls button { font-size: 12px; border-color: rgba(252,242,231,.38); padding: 9px 13px; }
  .model-controls button:hover { background: rgba(252,242,231,.12); border-color: var(--paper); }
  .model-controls button:active,
  .load-3d:active,
  .submit:active { transform: scale(.97); }
  .load-3d:active { transform: translateX(-50%) scale(.97); }
  .load-3d { background: var(--plum); border-color: var(--plum); color: var(--paper); }

  .text-link { transition: gap var(--t-fast, 220ms), color var(--t-fast, 220ms); }
  .text-link:hover { gap: 42px; }
  .tech-index > a { transition: transform var(--t-slow, 520ms) var(--spring, cubic-bezier(.22,1.15,.36,1)); }

  /* Entrada suave. Nada queda invisible si el observador no llega:
     el estado oculto solo se aplica cuando el script ya está activo. */
  .motion-ready .sheet:not(.cover) .copy,
  .motion-ready .sheet:not(.cover) .visual,
  .motion-ready .sheet:not(.cover) .product-viewer {
    transition: opacity var(--t-slow, 520ms) var(--spring, cubic-bezier(.22,1.15,.36,1)),
                transform var(--t-slow, 520ms) var(--spring, cubic-bezier(.22,1.15,.36,1));
  }
  .motion-ready .sheet.is-pending .copy,
  .motion-ready .sheet.is-pending .visual,
  .motion-ready .sheet.is-pending .product-viewer { opacity: 0; transform: translateY(28px); }
  .motion-ready .sheet .visual,
  .motion-ready .sheet .product-viewer { transition-delay: .08s; }
}

@media screen and (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  .cover { padding-top: 94px; }
  .cover .page-content { gap: 28px; padding-top: 30px; }
  .cover .model-stage { min-height: 400px; }
  .page-content { padding-top: 32px; }
  .catalogue-local-nav { gap: 13px; font-size: 10px; }
  h1 { font-size: 62px; }
  h2 { font-size: 42px; }
  .page-head .logo { width: 75px; }
  .wide h2 { font-size: 40px; }
  .lead { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .sheet .copy,
  .motion-ready .sheet .visual,
  .motion-ready .sheet .product-viewer { opacity: 1 !important; transform: none !important; transition: none !important; }
}

@media print {
  .catalogue-local-nav { display: none; }
  .motion-ready .sheet .copy,
  .motion-ready .sheet .visual { opacity: 1 !important; transform: none !important; }
}