/* ================================================================
   Laser Place Miami — Brand tokens
   Light editorial theme: cream background + charcoal text + gold accents
   (fiel a las brand guidelines — el dark se reserva al hero del sitio)
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');

@font-face {
  font-family: 'Modny Bold';
  src: url('/static/fonts/ModnyBold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ----- Colores oficiales del brand ----- */
  --lp-charcoal:   #2C2A28;
  --lp-charcoal-2: #1a1917;
  --lp-charcoal-3: #3a3834;

  --lp-gold:       #B89778;
  --lp-gold-soft:  #c9ab8f;
  --lp-gold-deep:  #9a7c5e;

  --lp-taupe:      #928B7E;
  --lp-sand:       #D6C4AC;
  --lp-nude:       #DCC5B5;

  --lp-cream:      #f5f0e8;
  --lp-white:      #faf7f2;
  --lp-paper:      #fbf7f0;   /* fondo principal — crema cálido */
  --lp-paper-2:    #ffffff;   /* card surface */
  --lp-line:       #e6dccd;   /* hairline borders */
  --lp-line-2:     #d8cdba;   /* hover/separators */

  /* ----- Estados funcionales ----- */
  --lp-ok:         #6f8a5d;
  --lp-warn:       #b8893f;
  --lp-error:      #a9524a;

  /* ----- Tipografía ----- */
  --ff-display: 'Modny Bold', 'Montserrat', 'Cormorant Garamond', 'Didot', Georgia, serif;
  --ff-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    'SF Mono', Menlo, Consolas, monospace;

  /* ----- Spacing & radii ----- */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* ----- Sombras editoriales (suaves, no estridentes) ----- */
  --sh-card:   0 1px 2px rgba(60,46,30,0.04), 0 8px 28px rgba(60,46,30,0.06);
  --sh-card-h: 0 2px 4px rgba(60,46,30,0.06), 0 16px 36px rgba(60,46,30,0.10);
}

/* ----- Base ----- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--ff-sans);
  background: var(--lp-paper);
  color: var(--lp-charcoal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  max-width: 100vw;
}

h1, h2, h3, .display {
  font-family: var(--ff-display);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--lp-charcoal);
}

h1 { font-size: 1.6rem; text-transform: uppercase; }
h2 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--lp-charcoal); }
h3 { font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--lp-gold-deep); font-weight: 500; font-family: var(--ff-sans); }
@media (min-width: 720px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.4rem; letter-spacing: 0.18em; }
  h3 { font-size: 0.85rem; letter-spacing: 0.22em; }
}

a { color: var(--lp-gold-deep); text-decoration: none; }
a:hover { color: var(--lp-gold); }

/* ----- Brand header ----- */
.lp-brand {
  text-align: center;
  padding: 18px 12px 12px;
  background: var(--lp-paper-2);
  border-bottom: 1px solid var(--lp-line);
  overflow: hidden;
}
@media (min-width: 720px) {
  .lp-brand { padding: 28px 16px 20px; }
}

/* ----- Cards ----- */
.lp-card {
  background: var(--lp-paper-2);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-lg);
  padding: 22px;
  box-shadow: var(--sh-card);
}
.lp-card h3 { margin-bottom: 14px; }

/* ----- Stats ----- */
.lp-stat {
  font-family: var(--ff-display);
  font-size: 1.8rem;
  font-weight: 400;
  color: var(--lp-charcoal);
  line-height: 1;
  word-break: break-word;
  overflow-wrap: break-word;
}
@media (min-width: 720px) {
  .lp-stat { font-size: 2.6rem; }
}
.lp-stat-label {
  font-size: 0.65rem;
  color: var(--lp-taupe);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top: 8px;
  font-weight: 500;
}

/* ----- Status chips ----- */
.lp-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  font-weight: 500;
}
.lp-chip.ok    { color: var(--lp-ok); }
.lp-chip.warn  { color: var(--lp-warn); }
.lp-chip.error { color: var(--lp-error); }

/* ----- Divider editorial ----- */
.lp-rule {
  border: none;
  border-top: 1px solid var(--lp-line);
  margin: 24px 0;
}

/* ----- Mobile-first grid ----- */
.lp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 16px;
}
@media (min-width: 720px) {
  .lp-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 24px; }
}
@media (min-width: 1080px) {
  .lp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .lp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ----- Noise/grain sutil para textura editorial ----- */
.lp-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  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>");
  z-index: 0;
}