/* ============================================================
   BASE.CSS — Variables, reset, fuentes
   TANTO LAMPS — Catálogo Digital  v2026060
   ============================================================ */

/* ---- Fuentes ---- */

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/pp-editorial-old/PPEditorialOld-Ultralight.otf') format('opentype');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/pp-editorial-old/PPEditorialOld-UltralightItalic.otf') format('opentype');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/pp-editorial-old/PPEditorialOld-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'PP Editorial Old';
  src: url('../fonts/pp-editorial-old/PPEditorialOld-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral/spectral-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral/spectral-300i.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral/spectral-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Spectral';
  src: url('../fonts/spectral/spectral-400i.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ---- Variables de diseño ---- */

:root {
  /* Paleta de marca */
  --c-terracota:    #7a3b2e;
  --c-terracota-cl: #9a5040;
  --c-verde:        #0f3b2e;
  --c-crema:        #fff4e6;
  --c-crema-os:     #f5e6d3;
  --c-negro:        #1a1a1a;
  --c-negro-pu:     #0d0d0d;
  --c-gris:         #888880;
  --c-gris-cl:      #ccc8c0;

  /* Tipografía */
  --f-titulo:   'PP Editorial Old', 'Georgia', serif;
  --f-cuerpo:   'Spectral', 'Georgia', serif;

  /* Pesos */
  --fw-ultralight: 200;
  --fw-light:      300;
  --fw-regular:    400;

  /* Escala tipográfica fluida */
  --t-xs:    clamp(0.55rem, 0.9vw, 0.7rem);
  --t-sm:    clamp(0.7rem,  1.1vw, 0.85rem);
  --t-base:  clamp(0.85rem, 1.3vw, 1rem);
  --t-md:    clamp(1rem,    1.8vw, 1.25rem);
  --t-lg:    clamp(1.4rem,  2.5vw, 2rem);
  --t-xl:    clamp(2rem,    4vw,   3.2rem);
  --t-hero:  clamp(2.8rem,  6vw,   5.5rem);

  /* Espaciado de página */
  --p-pagina:  clamp(20px, 3.5vw, 48px);
  --p-ficha:   clamp(16px, 2.5vw, 32px);

  /* Transiciones */
  --tr-rapida: 0.2s ease;
  --tr-media:  0.4s ease;
  --tr-lenta:  0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Sombras */
  --sombra-libro: 0 20px 60px rgba(0,0,0,0.6);
  --sombra-modal: 0 30px 90px rgba(0,0,0,0.55);

  /* UI exterior */
  --ui-fondo:    #e8e6e2;
  --ui-texto:    rgba(30,28,26,0.55);
  --ui-borde:    rgba(30,28,26,0.15);
  --ui-hover:    rgba(30,28,26,0.08);
}

/* ---- Reset ---- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--ui-fondo);
  color: var(--c-negro);
  font-family: var(--f-cuerpo);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ---- Loading screen ---- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--c-negro-pu);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Bloquear long-press (selección, diccionario, context menu) que
     en Chrome Android disparaban comportamientos espurios. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.loader * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.loader__logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  opacity: 0;
  animation: loaderFade 0.8s ease 0.3s forwards;
}

.loader__linea {
  width: 0;
  height: 1px;
  background: var(--c-terracota);
  animation: loaderLinea 1.2s ease 0.6s forwards;
}

/* Hint "Toca para empezar" — solo visible en móvil landscape (CSS abajo) */
.loader__hint {
  display: none;
  font-family: var(--f-cuerpo);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 244, 230, 0.45);
  margin-top: 24px;
  opacity: 0;
  animation: loaderHint 1s ease 1.2s forwards;
}

@keyframes loaderHint {
  to { opacity: 1; }
}

@keyframes loaderFade {
  to { opacity: 1; }
}

@keyframes loaderLinea {
  to { width: clamp(80px, 15vw, 140px); }
}

/* ---- Utilidades de imagen ---- */

/* Placeholder oscuro (gradiente) cuando no hay imagen real */
.placeholder-imagen {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a1a10 60%, #1a1008 100%);
  width: 100%;
  height: 100%;
}

/* Imagen como fondo CSS — mismas dimensiones que el contenedor */
.img-real {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.placeholder-crema {
  background: var(--c-crema);
}

.placeholder-oscuro {
  background: var(--c-negro);
}


/* Salida a la web desde la pantalla de carga: esquina superior izquierda,
   fuera del centro para que no compita con «Toca para empezar».
   Empieza oculta y solo aparece cuando el catalogo esta listo (la clase
   loader-ready la pone el JS). Antes salia de inmediato, con la pantalla aun
   en negro, y parecia la unica accion disponible. */
.loader__volver {
  position: absolute; top: clamp(18px, 3vw, 34px); left: clamp(18px, 3vw, 34px);
  z-index: 2;
  font-family: var(--f-ui, 'Instrument Sans', sans-serif);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 244, 230, 0.45); text-decoration: none;
  padding: 10px 4px;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease, color .3s ease;
}
/* En teléfono `loader-ready` no se pone nunca —main.js la reserva para el
   camino de escritorio—, así que este enlace se quedaba invisible para
   siempre en un móvil real. Se engancha también a `tlf.pre-tap`/`post-tap`,
   las mismas clases que ya hacen visible `.loader__hint` ahí. */
body.loader-ready .loader__volver,
body.tlf.pre-tap .loader__volver,
body.tlf.post-tap .loader__volver { opacity: 1; pointer-events: auto; }
.loader__volver:hover { color: rgba(255, 244, 230, 0.85); }