/* Claumar / Cloud — global styles
   System: editorial óleo + grain + liquid chrome moments
   Type: Bodoni Moda (display) + Montserrat (body) + Caveat (handwritten)
   Palette: Pantone-inspired — Cappucino Foam, Polished Metal, Brown 4625
*/
:root {
  /* PALETTE v3 — Baby blue + white + wine
     Primary: baby blue. Secondary: white/cream. Accent: deep wine/burgundy. NO green. NO sand. */
  --sky:        #A8D8EA;   /* PRIMARY — baby blue */
  --sky-soft:   #DCEEF5;   /* tint */
  --sky-tint:   #EEF6FA;   /* very pale */
  --sky-deep:   #6BA6C5;   /* readable mid */
  --sky-ink:    #2B5E78;   /* deep teal-blue for text on light */

  --white:      #FFFFFF;
  --cream:      #FBFAF7;   /* off-white background */
  --paper:      #F4F2EC;   /* paper-ish neutral */
  --paper-deep: #E4E0D6;

  --wine:       #6B2737;   /* ACCENT — deep wine/vinotinto */
  --wine-deep:  #44131F;
  --wine-bright:#9B3A52;
  --wine-soft:  #C9929E;   /* dusty rose tint */
  --burgundy-tint: #F3E3E7;

  --ink:        #1A1F2C;   /* near-black, slight blue undertone */
  --ink-soft:   #3A4252;
  --muted:      #6C7180;
  --muted-soft: #9CA1AE;

  /* ─── Legacy aliases (kept so existing components keep working) ─── */
  --foam:       var(--cream);
  --foam-deep:  var(--paper);
  --slate:      var(--sky-ink);
  --slate-deep: #163E54;
  --slate-ink:  var(--ink);
  --ivory:      var(--cream);
  --ivory-warm: var(--paper);
  --ivory-deep: var(--paper-deep);
  --paper-stain: var(--paper-deep);

  /* Sand/brown/green tokens — REMAPPED to blue/wine to scrub old colors site-wide */
  --butter:      var(--sky);
  --butter-soft: var(--sky-soft);
  --cocoa:       var(--ink);
  --cocoa-warm:  var(--ink-soft);
  --cocoa-soft:  var(--muted);
  --espresso:    var(--ink);
  --moss:        var(--sky);
  --moss-deep:   var(--sky-deep);
  --sage:        var(--sky);
  --sage-deep:   var(--sky-deep);
  --sage-soft:   var(--sky-soft);
  --sage-tint:   var(--sky-tint);
  --olive:       var(--wine-soft);
  --olive-deep:  var(--wine);
  --umber:       var(--wine);
  --umber-soft:  var(--wine-soft);
  --blush:       var(--burgundy-tint);
  --pink-pill:   var(--sky-tint);
  --pink-stripe: var(--sky-soft);
  --metal:       var(--sky-ink);
  --metal-deep:  var(--slate-deep);
  --metal-soft:  var(--sky-tint);
  --storm:       var(--sky-ink);
  --storm-deep:  var(--slate-deep);
}

/* ============== EMBOSSED PAPER HERO (interior pages) ============== */
/* Soft baby-blue paper background with grain — used for hero sections.
   Headlines on this bg use the .embossed-h1 class to read as debossed type. */
.paper-blue {
  position: relative;
  background:
    radial-gradient(ellipse 80% 60% at 30% 20%, #C9E2EE 0%, transparent 60%),
    radial-gradient(ellipse 70% 60% at 80% 90%, #B8D5E3 0%, transparent 65%),
    linear-gradient(160deg, #BBD7E5 0%, #A8C9DD 55%, #9CBFD6 100%);
}
.paper-blue::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.85;
}
.paper-blue::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' seed='8'/><feColorMatrix values='0 0 0 0 0.05  0 0 0 0 0.1  0 0 0 0 0.18  0 0 0 0.07 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.55;
}
/* Headline that looks pressed/debossed into the paper.
   Background-clip transparent + dual inner shadow (dark up-left, light down-right) = inset emboss. */
.embossed-h1 {
  color: transparent;
  background: linear-gradient(180deg, #A0C5D9 0%, #B6D4E2 100%);
  -webkit-background-clip: text; background-clip: text;
  filter:
    drop-shadow(2px 3px 1px rgba(255,255,255,0.55))
    drop-shadow(-2px -2px 2px rgba(36,72,98,0.32));
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 -1px 0 rgba(36,72,98,0.18);
}
.embossed-h1 .accent {
  background: linear-gradient(180deg, #97B9CD 0%, #B3D1E0 100%);
  -webkit-background-clip: text; background-clip: text;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
/* Kill sideways scroll — 3D page-turn cards overflow horizontally and exposed a white gutter */
html, body { overflow-x: clip; }
body {
  font-family: 'Montserrat', -apple-system, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--espresso);
  background: var(--foam);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 400;
}

/* ============== SCALLOPED FOOTER CARD ============== */
.cm-footer-card {
  position: relative;
  background: var(--wine);
  overflow: hidden;
  width: 100%;
}
.cm-scallop {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 40px;
  background: var(--sky);
  -webkit-mask: radial-gradient(circle 22px at 50% 0, #000 99%, transparent 100%) repeat-x;
  mask: radial-gradient(circle 22px at 50% 0, #000 99%, transparent 100%) repeat-x;
  -webkit-mask-size: 46px 40px;
  mask-size: 46px 40px;
  z-index: 3;
}
.cm-scallop-bottom {
  top: auto;
  bottom: 0;
  transform: scaleY(-1);
}

@media (max-width: 720px) {
  .cm-footer-nav { display: none !important; }
  /* nav móvil: ocultar links de escritorio, mostrar hamburguesa (ambos llevan display inline) */
  .nav-links-desktop { display: none !important; }
  .nav-burger { display: inline-flex !important; }
}

/* Headlines: Montserrat Bold UPPERCASE — bodies stay Montserrat regular */
.serif { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.serif-i { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; font-style: normal; }
.bodoni { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }
.cormorant { font-family: 'Montserrat', sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; }

/* Global override — any inline Cormorant/Bodoni gets remapped to Montserrat sans-serif.
   Uppercase is OPT-IN via h1/h2/h3 or .serif/.bodoni/.cormorant classes — body text stays sentence case. */
[style*="Cormorant"], [style*="Bodoni"] {
  font-family: 'Montserrat', sans-serif !important;
  font-style: normal !important;
}
h1[style*="Cormorant"], h2[style*="Cormorant"], h3[style*="Cormorant"],
h1[style*="Bodoni"], h2[style*="Bodoni"], h3[style*="Bodoni"] {
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
}

/* Header size dampener — Montserrat bold reads heavier than serif italic, so clamp it down */
h1 { font-size: clamp(40px, 6.5vw, 110px) !important; line-height: 1 !important; }
h2 { font-size: clamp(32px, 4.2vw, 64px) !important; line-height: 1.05 !important; }
h3 { font-size: clamp(22px, 2.6vw, 36px) !important; line-height: 1.1 !important; }
h1 .liquid-chrome, h2 .liquid-chrome { font-size: 1em !important; }
.editorial-num { font-size: clamp(56px, 6.5vw, 96px) !important; line-height: 1 !important; }
.handwritten { font-family: 'Caveat', cursive; font-weight: 500; }
.label { font-family: 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: 0.22em; font-size: 10px; font-weight: 600; }
.mono { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }

/* ============================================
   TEXTURE SYSTEM — oil painting + paper grain
   ============================================ */

/* Heavy paper grain — restored manuscript feel */
.paper-tex { position: relative; }
.paper-tex::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.30  0 0 0 0 0.20  0 0 0 0.22 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.7;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 0;
}
.paper-tex > * { position: relative; z-index: 1; }

/* Lighter grain over dark surfaces */
.grain-light { position: relative; }
.grain-light::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.92  0 0 0 0 0.88  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}
.grain-light > * { position: relative; z-index: 1; }

/* Heavy double-grain — for sketchbook / craft pages */
.craft-tex { position: relative; }
.craft-tex::before {
  content: '';
  position: absolute; inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='320' height='320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='2'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.24 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none; mix-blend-mode: multiply; opacity: 0.85; z-index: 0;
}
.craft-tex::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 20% 25%, rgba(168,138,94,0.18), transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 75%, rgba(110,80,50,0.15), transparent 70%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(217,207,182,0.4), transparent 70%);
  pointer-events: none; z-index: 0;
}
.craft-tex > * { position: relative; z-index: 1; }

/* Oil-painted sky — used for hero backgrounds */
.oil-sky {
  background: #A8D8EA;
  position: relative;
}
.oil-sky::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='5' seed='7'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.25  0 0 0 0 0.18  0 0 0 0.20 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.75; pointer-events: none;
}

/* Sage was green — REMAPPED to deep wine/burgundy editorial */
.oil-sage {
  background: #6B2737;
  position: relative;
}
.oil-sage::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' seed='3'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.08  0 0 0 0 0.12  0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.7; pointer-events: none;
}

.oil-stormy {
  background: #A8D8EA;
  position: relative;
}
.oil-stormy::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' seed='9'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.40  0 0 0 0 0.50  0 0 0 0.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.55; pointer-events: none;
}

/* Warm was sand — REMAPPED to cream/white */
.oil-warm {
  background: #FBFAF7;
  position: relative;
}
.oil-warm::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.4' numOctaves='5' seed='5'/><feColorMatrix values='0 0 0 0 0.60  0 0 0 0 0.65  0 0 0 0 0.72  0 0 0 0.14 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: 0.55; pointer-events: none;
}

/* Painted cloud forms — atmospheric soft shapes */
.painted-cloud {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,240,230,0.92) 0%, rgba(232,224,206,0.4) 50%, transparent 75%);
  filter: blur(20px);
  pointer-events: none;
}

/* ============================================
   PLACEHOLDERS — backed with real Unsplash imagery + tinted overlays
   ============================================ */
.ph {
  position: relative;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #b0c8d9;
  background-image:
    linear-gradient(170deg, rgba(216,227,236,0.18) 0%, rgba(176,200,217,0.15) 60%, rgba(138,160,180,0.22) 100%),
    url('https://images.unsplash.com/photo-1499346030926-9a72daac6c63?w=900&q=70&auto=format&fit=crop');
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 50% at 30% 30%, rgba(216,227,236,0.9), transparent 70%),
    radial-gradient(ellipse 50% 40% at 75% 65%, rgba(176,200,217,0.85), transparent 70%),
    linear-gradient(170deg, #d8e3ec 0%, #b0c8d9 60%, #8aa0b4 100%);
}
.ph::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='4' seed='2'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.32  0 0 0 0 0.42  0 0 0 0.25 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.55;
  pointer-events: none;
}
.ph::after {
  content: attr(data-label);
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ivory);
  background: rgba(74,101,128,0.7);
  padding: 4px 10px;
  border: 1px solid rgba(245,240,230,0.4);
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Variants — each one is its own painted atmosphere */
.ph-warm {
  background-image:
    linear-gradient(170deg, rgba(240,230,204,0.18), rgba(200,168,120,0.15) 60%, rgba(138,104,64,0.22) 100%),
    url('https://images.unsplash.com/photo-1487530811176-3780de880c2d?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-warm::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='6'/><feColorMatrix values='0 0 0 0 0.40  0 0 0 0 0.28  0 0 0 0 0.15  0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.ph-sage {
  background-image:
    linear-gradient(170deg, rgba(216,228,200,0.18), rgba(125,138,107,0.18) 60%, rgba(90,106,74,0.25) 100%),
    url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-sage::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' seed='8'/><feColorMatrix values='0 0 0 0 0.30  0 0 0 0 0.36  0 0 0 0 0.22  0 0 0 0.30 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.ph-stormy {
  background-image:
    linear-gradient(170deg, rgba(216,224,232,0.22), rgba(106,117,129,0.22) 50%, rgba(74,86,96,0.32) 100%),
    url('https://images.unsplash.com/photo-1534274988757-a28bf1a57c17?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-stormy::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' seed='11'/><feColorMatrix values='0 0 0 0 0.20  0 0 0 0 0.24  0 0 0 0 0.30  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ph-stormy::after { color: var(--ivory); background: rgba(45,55,70,0.7); }

.ph-wine {
  background-image:
    linear-gradient(170deg, rgba(181,106,122,0.28), rgba(107,39,55,0.32) 50%, rgba(74,24,37,0.42) 100%),
    url('https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-wine::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='4' seed='13'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.10  0 0 0 0 0.15  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.ph-wine::after { color: var(--ivory); background: rgba(74,24,37,0.75); }

.ph-paper {
  background-image:
    linear-gradient(170deg, rgba(250,246,236,0.25), rgba(217,207,182,0.25) 70%, rgba(217,207,182,0.35) 100%),
    url('https://images.unsplash.com/photo-1519682337058-a94d519337bc?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-paper::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='5' seed='15'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.32 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.7;
}
.ph-paper::after { color: var(--umber); background: rgba(250,246,236,0.9); border-color: var(--umber-soft); }

.ph-dark {
  background-image:
    linear-gradient(170deg, rgba(74,101,128,0.4), rgba(44,62,79,0.55) 100%),
    url('https://images.unsplash.com/photo-1465101046530-73398c7f28ca?w=900&q=70&auto=format&fit=crop');
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.ph-dark::after { color: var(--ivory); background: rgba(44,62,79,0.85); }

/* ============================================
   EMBOSSED LETTERS — clay/paint pressed effect
   Letter color ~= background, shadows do the work
   ============================================ */
.liquid-chrome {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
  color: inherit;
  text-shadow:
    0 -2px 1px rgba(255,255,255,0.7),
    0 -1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(40,60,80,0.18),
    0 5px 6px rgba(40,60,80,0.16),
    0 10px 16px rgba(40,60,80,0.14);
}

/* Embossed text utility — use on heroes */
.embossed-text {
  text-shadow:
    0 -2px 1px rgba(255,255,255,0.7),
    0 -1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(40,60,80,0.18),
    0 5px 6px rgba(40,60,80,0.16),
    0 10px 16px rgba(40,60,80,0.14) !important;
}

/* Hero embossed lettering — same hue as bg, just a touch darker. Auto-applied to h1/h2 inside oil-* */
.oil-stormy h1, .oil-stormy h2,
.oil-sage h1, .oil-sage h2,
.oil-warm h1, .oil-warm h2,
.oil-sky h1, .oil-sky h2 {
  text-shadow:
    0 -2px 1px rgba(255,255,255,0.7),
    0 -1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(40,60,80,0.18),
    0 5px 6px rgba(40,60,80,0.16),
    0 10px 16px rgba(40,60,80,0.14) !important;
  filter: none !important;
}
.oil-stormy h1, .oil-stormy h2 { color: #a3bdd0 !important; }
.oil-sage h1, .oil-sage h2 { color: #a8b8a0 !important; }
.oil-warm h1, .oil-warm h2 { color: #d4b896 !important; }
.oil-sky h1, .oil-sky h2 { color: #b0c4d0 !important; }

/* Force <em> and inner spans inside hero h1/h2 to inherit the same solid color */
.oil-stormy h1 em, .oil-stormy h2 em, .oil-stormy h1 span, .oil-stormy h2 span,
.oil-sage h1 em, .oil-sage h2 em, .oil-sage h1 span, .oil-sage h2 span,
.oil-warm h1 em, .oil-warm h2 em, .oil-warm h1 span, .oil-warm h2 span,
.oil-sky h1 em, .oil-sky h2 em, .oil-sky h1 span, .oil-sky h2 span {
  color: inherit !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  filter: none !important;
}

/* Parallax tiles inside flat heroes: replace photo placeholders with soft solid panels */
.oil-stormy .ph, .oil-stormy .ph-warm, .oil-stormy .ph-sage, .oil-stormy .ph-stormy, .oil-stormy .ph-wine, .oil-stormy .ph-paper, .oil-stormy .ph-dark,
.oil-sage .ph, .oil-sage .ph-warm, .oil-sage .ph-sage, .oil-sage .ph-stormy, .oil-sage .ph-wine, .oil-sage .ph-paper, .oil-sage .ph-dark {
  background-image: none !important;
}
.oil-stormy .ph, .oil-stormy .ph-stormy { background-color: #97b0c4 !important; }
.oil-stormy .ph-warm { background-color: #d4baa0 !important; }
.oil-stormy .ph-sage { background-color: #a4b48c !important; }
.oil-stormy .ph-wine { background-color: #8a4a58 !important; }
.oil-stormy .ph-paper { background-color: #e6dcc4 !important; }
.oil-stormy .ph-dark { background-color: #4a5660 !important; }

.oil-sage .ph, .oil-sage .ph-sage { background-color: #a4b48c !important; }
.oil-sage .ph-warm { background-color: #d4baa0 !important; }
.oil-sage .ph-stormy { background-color: #97b0c4 !important; }
.oil-sage .ph-wine { background-color: #8a4a58 !important; }
.oil-sage .ph-paper { background-color: #e6dcc4 !important; }
.oil-sage .ph-dark { background-color: #4a5660 !important; }

/* Hide the data-label JetBrains Mono tag on flat hero tiles */
.oil-stormy .ph::after, .oil-sage .ph::after { display: none !important; }
.oil-stormy .ph::before, .oil-sage .ph::before { display: none !important; }

/* Painted clouds were atmospheric — hide on flat heroes */
.oil-stormy .painted-cloud,
.oil-sage .painted-cloud,
.oil-warm .painted-cloud,
.oil-sky .painted-cloud { display: none; }

/* SVG goo filter applied via style attribute */
.goo { filter: url(#goo-filter); }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes glow-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.75; }
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes drift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50%  { transform: translate(8px,-6px) scale(1.02); }
}
@keyframes float-slow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}
@keyframes float-soft {
  0%, 100% { transform: translate(0,0); }
  33%  { transform: translate(8px, -10px); }
  66%  { transform: translate(-6px, -4px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes wobble {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.02, 0.98) rotate(0.5deg); }
  75% { transform: scale(0.98, 1.02) rotate(-0.5deg); }
}
@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.glow-pulse { animation: glow-pulse 4s ease-in-out infinite; }
.spin-slow { animation: spin-slow 30s linear infinite; }
.float-slow { animation: float-slow 7s ease-in-out infinite; }
.float-soft { animation: float-soft 9s ease-in-out infinite; }
.fade-in { animation: fadeIn 0.6s ease both; }
.fade-up { animation: fadeUp 0.7s ease both; }
.wobble { animation: wobble 6s ease-in-out infinite; }
.marquee-track { display: inline-flex; white-space: nowrap; animation: marquee 40s linear infinite; will-change: transform; }
.marquee-slow { animation-duration: 70s; }

/* Image hover zoom */
.img-zoom { overflow: hidden; }
.img-zoom > .ph { transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.img-zoom:hover > .ph { transform: scale(1.05); }

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.editorial-num {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.02em;
}

.italic-em {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  /* legacy weight override */
  --legacy-italic: 0;
}

/* Embossed — same color as background */
.embossed {
  color: var(--ivory);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.18),
    0 2px 6px rgba(0,0,0,0.35),
    0 -1px 0 rgba(0,0,0,0.25);
}
.embossed-dark {
  color: var(--slate);
  text-shadow:
    0 1px 0 rgba(255,255,255,0.4),
    0 -1px 0 rgba(0,0,0,0.15);
}

/* Hand-drawn underline accent */
.hand-underline {
  display: inline-block;
  position: relative;
}
.hand-underline::after {
  content: '';
  position: absolute;
  left: -2px; right: -2px; bottom: -4px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'><path d='M2,3 Q15,1 30,2.5 T55,2 T82,3 T98,2.5' stroke='%236b2737' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") repeat-x;
  background-size: 100px 6px;
}

/* Hand-drawn circle accent — wraps a word like a marker scribble */
.hand-circle {
  position: relative;
  display: inline-block;
  padding: 0 6px;
}
.hand-circle::before {
  content: '';
  position: absolute;
  inset: -8px -10px -8px -10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 80' preserveAspectRatio='none'><path d='M22,40 Q12,16 60,11 Q140,6 180,28 Q198,52 150,68 Q70,80 22,58 Q8,42 22,40 Z' stroke='%236b2737' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-dasharray='420' stroke-dashoffset='420'><animate attributeName='stroke-dashoffset' from='420' to='0' dur='1.4s' fill='freeze' begin='0.4s'/></path></svg>") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* Outline text — stroke only, transparent fill */
.text-outline {
  -webkit-text-stroke: 1.5px currentColor;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.text-outline-thick { -webkit-text-stroke-width: 2.5px; }

/* Ink-bleed text — turbulence displacement filter */
.text-ink {
  filter: url(#ink-bleed);
}

/* Fill-from-bottom on hover/scroll */
.text-fill-rise {
  background: linear-gradient(to top, currentColor 50%, transparent 50%);
  background-size: 100% 200%;
  background-position: 0% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px currentColor;
  transition: background-position 0.8s cubic-bezier(.2,.7,.2,1);
}
.text-fill-rise.in { background-position: 0% 0%; }

/* Letter reveal — clip-path mask animation */
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.clip-reveal { animation: clipReveal 1.2s cubic-bezier(.2,.7,.2,1) both; }

/* Letter-by-letter rise */
@keyframes letterRise {
  from { opacity: 0; transform: translateY(60%) rotate(2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}
.letter-rise > span {
  display: inline-block;
  animation: letterRise 0.8s cubic-bezier(.2,.7,.2,1) both;
  opacity: 1;
}
@supports (animation-timeline: scroll()) { /* keep keyframe */ }

/* Glitch double-print */
.text-glitch {
  position: relative;
  display: inline-block;
}
.text-glitch::before,
.text-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.text-glitch::before {
  color: var(--wine);
  transform: translate(-2px, 1px);
  opacity: 0.6;
}
.text-glitch::after {
  color: var(--sky);
  transform: translate(2px, -1px);
  opacity: 0.5;
}

/* Line-strike text */
.text-strike {
  position: relative;
  display: inline-block;
}
.text-strike::after {
  content: '';
  position: absolute;
  left: -4%; right: -4%;
  top: 52%; height: 3px;
  background: currentColor;
  transform-origin: left;
  transform: scaleX(0) rotate(-1deg);
  animation: strikeIn 1s 0.6s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes strikeIn { to { transform: scaleX(1) rotate(-1deg); } }

/* Marker scribble underline (animated) */
.scribble {
  position: relative;
}
.scribble::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'><path d='M2,8 Q40,2 80,7 T160,5 T198,9' stroke='%236b2737' stroke-width='2.4' fill='none' stroke-linecap='round'/></svg>") no-repeat;
  background-size: 100% 100%;
  transform: scaleX(0);
  transform-origin: left;
  animation: scribbleIn 1.1s 0.5s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes scribbleIn { to { transform: scaleX(1); } }

/* Vertical writing — for side rails */
.vertical-rl {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 0.3em;
}

/* Scroll text reveal — line clipping */
.line-reveal {
  overflow: hidden;
}
.line-reveal > * {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.9s cubic-bezier(.2,.7,.2,1);
}
.line-reveal.in > * { transform: translateY(0); }

/* ============================================
   COMPONENTS
   ============================================ */

/* Buttons */
.btn {
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 10px;
  font-weight: 500;
  background: var(--wine);
  color: var(--ivory);
  border: 1px solid var(--wine);
  padding: 14px 22px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
  display: inline-block;
  text-align: center;
}
.btn:hover { background: var(--wine-deep); transform: scale(1.02); }
.btn-ghost { background: transparent; color: var(--wine); border-color: var(--wine); }
.btn-ghost:hover { background: var(--wine); color: var(--ivory); }
.btn-block { display: block; width: 100%; }
.btn-slate { background: var(--slate); border-color: var(--slate); }
.btn-slate:hover { background: var(--slate-deep); }
.btn-ivory { background: var(--ivory); color: var(--slate); border-color: var(--slate); }
.btn-ivory:hover { background: var(--slate); color: var(--ivory); }

/* Inputs */
.input {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  background: var(--ivory);
  border: 1px solid var(--sky);
  color: var(--slate);
  padding: 14px 16px;
  width: 100%;
  outline: none;
  transition: border-color 0.2s ease;
}
.input::placeholder { color: var(--muted-soft); font-size: 12px; letter-spacing: 0.04em; }
.input:focus { border-color: var(--slate); }

/* Tag pills */
.tag {
  font-family: 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10px;
  border: 1px solid var(--slate);
  color: var(--slate);
  background: var(--ivory);
  padding: 7px 14px;
  display: inline-block;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.tag.active, .tag:hover { background: var(--slate); color: var(--ivory); }

/* Polaroid frame — for Real Life page */
.polaroid {
  background: var(--cream);
  padding: 14px 14px 60px;
  box-shadow: 0 14px 30px -12px rgba(74,82,90,0.35), 0 2px 4px rgba(0,0,0,0.06);
  position: relative;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.polaroid::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3'/><feColorMatrix values='0 0 0 0 0.4  0 0 0 0 0.32  0 0 0 0 0.18  0 0 0 0.10 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none; mix-blend-mode: multiply; opacity: 0.5;
}
.polaroid:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }

/* Tape — decorative washi piece */
.tape {
  position: absolute;
  width: 80px; height: 22px;
  background: rgba(216,217,180,0.65);
  border-left: 1px dashed rgba(255,255,255,0.4);
  border-right: 1px dashed rgba(255,255,255,0.4);
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  transform: rotate(-6deg);
  z-index: 3;
}
.tape-wine { background: rgba(181,106,122,0.55); }
.tape-sage { background: rgba(184,194,164,0.7); }

/* ============================================
   UTILS
   ============================================ */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ivory); }
::-webkit-scrollbar-thumb { background: var(--sky); border-radius: 4px; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

.hr-sky { border: 0; border-top: 1px solid var(--sky); }
.hr-paper { border: 0; border-top: 1px solid var(--paper-stain); }

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

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

/* Soft cloud watermark */
.cloud-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 380px 180px at 50% 45%, rgba(176,200,217,0.55), transparent 70%),
    radial-gradient(ellipse 260px 130px at 38% 38%, rgba(176,200,217,0.45), transparent 70%),
    radial-gradient(ellipse 220px 110px at 62% 52%, rgba(176,200,217,0.40), transparent 70%);
  filter: blur(2px);
  z-index: 0;
}

/* ============================================
   DARK GATE — coral CTA + dark inputs
   ============================================ */
.input-dark {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid rgba(176,106,122,0.4);
  color: var(--ivory);
  padding: 16px 18px;
  width: 100%;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
  font-weight: 500;
}
.input-dark::placeholder {
  color: rgba(245,240,230,0.45);
  letter-spacing: 0.18em;
}
.input-dark:focus {
  border-color: var(--wine-soft);
  background: rgba(176,106,122,0.06);
}

.btn-coral {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  background: var(--wine-soft);
  color: #14202c;
  border: 1px solid var(--wine-soft);
  padding: 18px 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.25s ease, color 0.3s ease;
  position: relative;
  overflow: hidden;
}
.btn-coral::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--wine);
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.btn-coral > * { position: relative; z-index: 1; }
.btn-coral:hover::before { transform: translateY(0); }
.btn-coral:hover { color: var(--ivory); transform: translateY(-2px); }
.btn-coral:disabled { opacity: 0.65; cursor: wait; }

/* ============================================
   PANTONE PILLS — animated filter chips
   ============================================ */
.pill-group { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--cocoa);
  background: var(--foam); color: var(--cocoa);
  cursor: pointer;
  transition: background 0.4s cubic-bezier(.2,.7,.2,1), color 0.3s, transform 0.3s, border-color 0.3s, box-shadow 0.4s;
  white-space: nowrap;
}
.pill:hover { transform: translateY(-2px); box-shadow: 0 6px 16px -8px rgba(74,36,24,0.4); }
.pill.active { background: var(--cocoa); color: var(--foam); border-color: var(--cocoa); }
.pill.butter { border-color: var(--olive-deep); color: var(--olive-deep); }
.pill.butter.active { background: var(--butter); color: var(--cocoa); border-color: var(--butter); }
.pill.metal { border-color: var(--metal-deep); color: var(--metal-deep); }
.pill.metal.active { background: var(--metal); color: var(--foam); border-color: var(--metal); }
.pill.moss { border-color: var(--moss-deep); color: var(--moss-deep); }
.pill.moss.active { background: var(--moss); color: var(--foam); border-color: var(--moss); }
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }

/* Flip-reveal grid item */
.flip-item { transition: opacity 0.5s cubic-bezier(.2,.7,.2,1), transform 0.6s cubic-bezier(.2,.7,.2,1), filter 0.5s; }
.flip-item.hide { opacity: 0; transform: scale(0.85); pointer-events: none; filter: blur(8px); max-height: 0; overflow: hidden; }
.flip-item.show { opacity: 1; transform: scale(1); filter: blur(0); }

/* Polaroid photo for photography */
.polaroid-photo {
  background: #fdfaf1;
  padding: 12px 12px 48px;
  box-shadow: 0 18px 36px -16px rgba(74,36,24,0.4), 0 4px 10px rgba(0,0,0,0.08);
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s;
  display: inline-block;
}
.polaroid-photo:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.02) !important;
  box-shadow: 0 26px 50px -18px rgba(74,36,24,0.5), 0 6px 14px rgba(0,0,0,0.12);
  z-index: 5;
}
.polaroid-photo .pp-img { width: 100%; display: block; position: relative; overflow: hidden; }
.polaroid-photo .pp-caption {
  text-align: center;
  font-family: 'Caveat', cursive;
  font-size: 20px;
  color: var(--cocoa);
  margin-top: 14px;
}

/* Marquee */
@keyframes marqueeX {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee { display: flex; overflow: hidden; white-space: nowrap; }
.marquee-track { display: flex; gap: 60px; animation: marqueeX 28s linear infinite; flex-shrink: 0; }
.marquee:hover .marquee-track { animation-play-state: paused; }

/* Float bob */
@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-10px) rotate(var(--r, 0deg)); }
}
.float-bob { animation: float-bob 5s ease-in-out infinite; }

/* Reveal */
.reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); }
.reveal-up.in { opacity: 1; transform: translateY(0); }

/* Display heavy — now Montserrat black uppercase */
.display-bodoni {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}
.display-bodoni-i {
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  letter-spacing: -0.02em;
}


/* Visor de imágenes del detalle de proyecto (Lightbox en gallery.jsx).
   La ficha va al lado en escritorio y debajo en el teléfono, donde una columna
   de 300px al lado de un plano no deja ver ninguna de las dos cosas. */
.lightbox {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 340px);
  align-items: center;
  gap: 24px;
}
@media (max-width: 860px) {
  .lightbox {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    overflow-y: auto;
  }
}