/* ============================================================
   BEBÉ DORMIDO — BRAND TOKENS
   ============================================================ */
:root{
  /* ——— Color ——— */
  --ink:           #0E1B33;        /* azul noche profundo, 'midnight ink' */
  --ink-soft:      #1E2C4A;
  --ink-mute:      #4A5878;

  --cream:         #F4ECDD;        /* crema cálida, papel de lino */
  --cream-soft:    #FAF5EA;
  --cream-deep:    #E8DCC4;

  --peach:         #E9A57B;        /* durazno terracota — acento principal */
  --peach-soft:    #F2C7A4;
  --peach-deep:    #C97D52;

  --sage:          #8AA290;        /* verde salvia tenue — acento secundario */
  --sage-soft:     #BFCFC0;

  --moon:          #F4D4A1;        /* dorado luna, sólo para detalles */

  --line:          rgba(14,27,51,.12);
  --line-on-dark:  rgba(244,236,221,.18);

  /* ——— Type ——— */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* ——— Rhythm ——— */
  --r1: 4px;  --r2: 8px;  --r3: 16px;  --r4: 24px;  --r5: 40px;
  --r6: 64px; --r7: 96px; --r8: 128px; --r9: 192px;

  --radius-s: 4px;
  --radius-m: 12px;
  --radius-l: 24px;

  --max: 1280px;
}

* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body{
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream-soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01","ss02","cv11";
  line-height: 1.5;
}

img, svg { display:block; max-width:100%; }
a { color: inherit; }

/* ============================================================
   UTILS
   ============================================================ */
.eyebrow{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--peach-deep);
  margin: 0 0 var(--r3);
}
.eyebrow--ink   { color: var(--ink-mute); }
.eyebrow--cream { color: rgba(244,236,221,.65); }

.h-display{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0;
}
.h-display em{
  font-style: italic;
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
}

.section{ padding: clamp(72px, 10vw, 140px) 6vw; }
.section--ink{ background: var(--ink); color: var(--cream); }
.section--cream{ background: var(--cream); }
.section--cream-soft{ background: var(--cream-soft); }

.container{ max-width: var(--max); margin: 0 auto; }

.divider-line{
  height: 1px;
  background: var(--line);
  border: none;
  margin: var(--r5) 0;
}
.section--ink .divider-line{ background: var(--line-on-dark); }

.badge{
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-weight: 500;
  padding: 7px 14px;
  border: 1px solid currentColor;
  border-radius: 999px;
  opacity: .75;
}

/* ============================================================
   COVER
   ============================================================ */
.cover{
  position: relative;
  min-height: 100vh;
  background: radial-gradient(ellipse at 50% 30%, #1a2a4a 0%, #0E1B33 55%, #060d1f 100%);
  color: var(--cream);
  padding: 6vw;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  isolation: isolate;
}
.cover__chrome{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(244,236,221,.6);
}
.cover__date{ font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: .04em; text-transform: none; color: rgba(244,236,221,.55);}
.cover__center{
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 2;
}
.cover__crest{
  width: 92px; color: var(--moon);
  margin-bottom: var(--r5);
  opacity: .92;
}
.cover__title{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  line-height: .9;
  letter-spacing: -.025em;
  margin: 0 0 var(--r5);
  display: flex; flex-direction: column; align-items: center;
  gap: .04em;
}
.cover__eyebrow{
  font-family: var(--sans);
  font-size: 13px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,236,221,.55);
  font-weight: 500;
  margin-bottom: var(--r3);
}
.cover__word{
  font-size: clamp(72px, 14vw, 188px);
  font-weight: 300;
}
.cover__word--italic{
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--moon);
  margin-top: -.08em;
}
.cover__sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 300;
  max-width: 460px;
  line-height: 1.5;
  color: rgba(244,236,221,.78);
  margin: var(--r3) 0 0;
}
.cover__foot{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,236,221,.5);
}
.cover__seal{
  font-family: var(--serif); font-style: italic;
  font-size: 13px; letter-spacing: .04em; text-transform: none;
}

.cover__stars{ position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.cover__stars span{
  position: absolute;
  left: var(--x); top: var(--y);
  width: var(--s); height: var(--s);
  background: var(--moon);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--moon);
  opacity: .6;
  animation: twinkle 4s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes twinkle{
  0%, 100% { opacity: .35; transform: scale(.9); }
  50%      { opacity: .9;  transform: scale(1.1); }
}

/* ============================================================
   TOC
   ============================================================ */
.toc{
  background: var(--cream);
  padding: clamp(80px, 12vw, 160px) 6vw;
}
.toc__inner{ max-width: 980px; margin: 0 auto; }
.toc__title{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  font-style: italic;
  font-size: clamp(40px, 6vw, 76px);
  letter-spacing: -.02em;
  margin: 0 0 var(--r6);
  color: var(--ink);
}
.toc__list{
  list-style: none; padding: 0; margin: 0;
}
.toc__list li{
  display: grid;
  grid-template-columns: 60px 1fr;
  align-items: baseline;
  gap: var(--r4);
  padding: var(--r4) 0;
  border-top: 1px solid var(--line);
}
.toc__list li:last-child{ border-bottom: 1px solid var(--line); }
.toc__num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 28px;
  color: var(--peach-deep);
}
.toc__list a{
  text-decoration: none;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--r3);
  align-items: baseline;
}
.toc__list a > span:first-child{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--ink);
}
.toc__list a > span:last-child{
  font-size: 14px;
  color: var(--ink-mute);
  font-style: italic;
  font-family: var(--serif);
}
.toc__lead{
  border-bottom: 1px dotted var(--line);
  align-self: end;
  margin-bottom: 6px;
  height: 1px;
}

/* ============================================================
   GENERIC SECTION HEAD
   ============================================================ */
.sec-head{
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--r6);
  margin-bottom: var(--r6);
  align-items: end;
}
.sec-head__num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(60px, 10vw, 140px);
  line-height: .9;
  color: var(--peach);
  margin: 0;
  letter-spacing: -.04em;
}
.sec-head__body h2{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 70;
  font-size: clamp(32px, 4.8vw, 60px);
  letter-spacing: -.02em;
  line-height: 1.02;
  margin: 0 0 var(--r3);
}
.sec-head__body h2 em{
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  color: var(--peach-deep);
}
.section--ink .sec-head__body h2 em{ color: var(--moon); }
.sec-head__body p{
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  max-width: 56ch;
  color: var(--ink-mute);
  margin: 0;
}
.section--ink .sec-head__body p{ color: rgba(244,236,221,.7); }

@media (max-width: 720px){
  .sec-head{ grid-template-columns: 1fr; gap: var(--r4); }
}

/* ============================================================
   ESENCIA
   ============================================================ */
.essence-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--r5);
}
.essence-card{
  grid-column: span 4;
  padding: var(--r5) var(--r4);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--cream-soft);
  position: relative;
}
.essence-card .essence__icon{
  width: 36px; height: 36px;
  color: var(--peach-deep);
  margin-bottom: var(--r4);
}
.essence-card h3{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -.01em;
  margin: 0 0 var(--r2);
}
.essence-card p{
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px){ .essence-card{ grid-column: span 12; } }

.promise{
  margin-top: var(--r6);
  padding: var(--r6) var(--r5);
  background: var(--ink);
  color: var(--cream);
  border-radius: var(--radius-l);
  position: relative;
  overflow: hidden;
}
.promise__quote{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-style: italic;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.15;
  margin: 0;
  letter-spacing: -.015em;
  max-width: 22ch;
}
.promise__quote em{ color: var(--moon); font-style: italic; }
.promise__attr{
  margin-top: var(--r4);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,236,221,.6);
}
.promise__moon{
  position: absolute;
  right: -40px; top: -40px;
  width: 240px; color: rgba(244,212,161,.08);
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r4);
  margin-top: var(--r5);
}
.pillar{
  padding: var(--r4);
  border-top: 2px solid var(--peach);
}
.pillar__num{
  font-family: var(--serif); font-style: italic;
  color: var(--peach-deep);
  font-size: 14px;
  margin-bottom: var(--r2);
}
.pillar h4{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  margin: 0 0 var(--r2);
}
.pillar p{
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
@media (max-width: 900px){ .pillars{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .pillars{ grid-template-columns: 1fr; } }

/* ============================================================
   LOGO SECTION
   ============================================================ */
.logo-stage{
  background: var(--cream);
  border-radius: var(--radius-l);
  padding: clamp(48px, 8vw, 120px) 6vw;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: 420px;
}
.logo-stage--ink{ background: var(--ink); color: var(--cream); }
.logo-stage--peach{ background: var(--peach-soft); }
.logo-stage--sage{ background: var(--sage-soft); }

.logo-stage::before{
  content: "";
  position: absolute; inset: 16px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius-l) - 8px);
  pointer-events: none;
}
.logo-stage--ink::before{ border-color: var(--line-on-dark); }

.logo-stage__caption{
  position: absolute;
  bottom: 24px; left: 32px; right: 32px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.logo-stage--ink .logo-stage__caption{ color: rgba(244,236,221,.5); }
.logo-stage__caption em{
  font-family: var(--serif); font-style: italic;
  letter-spacing: .04em; text-transform: none;
  font-size: 13px;
}

.logo-grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--r4);
  margin-top: var(--r5);
}
@media (max-width: 900px){ .logo-grid{ grid-template-columns: 1fr; } }

.logo-grid--3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r4);
  margin-top: var(--r4);
}
@media (max-width: 800px){ .logo-grid--3{ grid-template-columns: 1fr; } }

.logo-stage--small{ min-height: 280px; padding: 40px; }

/* construction grid */
.construction{
  margin-top: var(--r5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r5);
  align-items: center;
}
.construction-stage{
  background: var(--cream);
  border-radius: var(--radius-l);
  padding: var(--r5);
  position: relative;
  display: grid; place-items: center;
  min-height: 360px;
}
.construction-notes p{
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 var(--r3);
}
.construction-notes p strong{ color: var(--ink); font-weight: 600; }
@media (max-width: 900px){ .construction{ grid-template-columns: 1fr; } }

/* clearspace overlay (visual only, decorative) */
.clearspace-line{
  stroke: var(--peach-deep);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  fill: none;
}
.clearspace-x{ fill: var(--peach-deep); font-family: var(--serif); font-style: italic; font-size: 11px; }

/* ============================================================
   COLOR
   ============================================================ */
.color-hero{
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr;
  height: 360px;
  border-radius: var(--radius-l);
  overflow: hidden;
  margin-bottom: var(--r5);
}
.swatch-hero{
  padding: var(--r4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.swatch-hero__name{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; font-weight: 400;
  letter-spacing: -.01em;
}
.swatch-hero__hex{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (max-width: 800px){
  .color-hero{ grid-template-columns: 1fr 1fr; height: auto; }
  .swatch-hero{ min-height: 160px; }
}

.color-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r4);
}
@media (max-width: 900px){ .color-grid{ grid-template-columns: 1fr; } }

.color-card{
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  overflow: hidden;
  background: var(--cream-soft);
}
.color-card__chip{
  height: 180px;
}
.color-card__body{
  padding: var(--r4);
}
.color-card__name{
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 var(--r1);
}
.color-card__hex{
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-bottom: var(--r3);
}
.color-card__hex span{ display:inline-block; margin-right: 12px; }
.color-card__use{
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
  margin: 0 0 var(--r3);
}
.color-card__pairs{
  display: flex; gap: 6px;
}
.color-card__pairs span{
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--line);
}

.ratio-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--r4);
  margin-top: var(--r5);
}
.ratio{
  padding: var(--r4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--cream-soft);
}
.ratio__bar{
  display: flex;
  height: 28px;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: var(--r3);
}
.ratio__label{
  font-family: var(--serif); font-style: italic;
  font-size: 18px;
  margin: 0 0 4px;
}
.ratio__caption{
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}
@media (max-width: 800px){ .ratio-row{ grid-template-columns: 1fr; } }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.type-pair{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r5);
  margin-bottom: var(--r6);
}
.type-card{
  padding: var(--r5);
  border-radius: var(--radius-l);
  background: var(--cream);
  border: 1px solid var(--line);
}
.type-card__name{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 100;
  font-style: italic;
  font-size: clamp(60px, 8vw, 110px);
  line-height: .9;
  letter-spacing: -.03em;
  margin: 0 0 var(--r3);
}
.type-card--sans .type-card__name{
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: clamp(56px, 7vw, 100px);
  letter-spacing: -.03em;
}
.type-card__alphabet{
  font-size: 22px;
  line-height: 1.4;
  margin: 0 0 var(--r4);
  color: var(--ink-soft);
}
.type-card--sans .type-card__alphabet{ font-family: var(--sans); }
.type-card--serif .type-card__alphabet{ font-family: var(--serif); }
.type-card__meta{
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px var(--r3);
  font-size: 13px;
  border-top: 1px solid var(--line);
  padding-top: var(--r3);
}
.type-card__meta dt{ color: var(--ink-mute); letter-spacing: .12em; text-transform: uppercase; font-size: 11px; font-weight: 600; }
.type-card__meta dd{ margin: 0; color: var(--ink); }
@media (max-width: 900px){ .type-pair{ grid-template-columns: 1fr; } }

.scale{
  display: grid;
  grid-template-columns: 80px 110px 1fr;
  gap: var(--r4);
  align-items: baseline;
  padding: var(--r4) 0;
  border-top: 1px solid var(--line);
}
.scale:last-child{ border-bottom: 1px solid var(--line); }
.scale__role{ font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; }
.scale__spec{ font-family: var(--sans); font-size: 13px; color: var(--ink-mute); font-feature-settings: "tnum"; }
.scale__example{ color: var(--ink); }
.scale__example.is-h1{ font-family: var(--serif); font-weight: 300; font-variation-settings: "opsz" 144, "SOFT" 80; font-size: clamp(40px,6vw,76px); line-height: 1; letter-spacing: -.02em; }
.scale__example.is-h2{ font-family: var(--serif); font-weight: 300; font-style: italic; font-size: clamp(28px,4vw,48px); line-height: 1.05; letter-spacing: -.015em; }
.scale__example.is-h3{ font-family: var(--serif); font-weight: 400; font-size: clamp(22px,2.6vw,30px); }
.scale__example.is-eyebrow{ font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--peach-deep); }
.scale__example.is-lead{ font-family: var(--serif); font-style: italic; font-size: clamp(18px,2vw,22px); line-height: 1.5; }
.scale__example.is-body{ font-family: var(--sans); font-size: 16px; line-height: 1.6; }
.scale__example.is-small{ font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.scale__example.is-caption{ font-family: var(--sans); font-weight: 500; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }

@media (max-width: 700px){
  .scale{ grid-template-columns: 1fr; gap: 4px; }
}

/* ============================================================
   ICONS
   ============================================================ */
.icon-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--r3);
  margin-top: var(--r4);
}
.icon-cell{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--r3);
  text-align: center;
  gap: 12px;
}
.icon-cell svg{
  width: 44px; height: 44px;
  color: var(--ink);
  stroke-width: 1.4;
}
.icon-cell span{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
@media (max-width: 900px){ .icon-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 540px){ .icon-grid{ grid-template-columns: repeat(3, 1fr); } }

.illos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r4);
  margin-top: var(--r4);
}
.illo{
  background: var(--cream);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  padding: var(--r5) var(--r4);
  display: flex; flex-direction: column; align-items: center; gap: var(--r3);
  min-height: 280px;
  justify-content: center;
}
.illo--ink{ background: var(--ink); border-color: var(--line-on-dark); color: var(--cream); }
.illo--peach{ background: var(--peach-soft); border-color: rgba(0,0,0,0); }
.illo svg{ width: 64%; height: auto; color: currentColor; }
.illo__caption{
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
  color: var(--ink-mute);
}
.illo--ink .illo__caption{ color: rgba(244,236,221,.65); }
@media (max-width: 800px){ .illos{ grid-template-columns: 1fr; } }

/* ============================================================
   TEXTURES
   ============================================================ */
.texture-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r3);
  margin-top: var(--r4);
}
.texture{
  aspect-ratio: 1 / 1.1;
  border-radius: var(--radius-l);
  position: relative;
  overflow: hidden;
  display: flex; align-items: end;
  padding: var(--r3);
  border: 1px solid var(--line);
}
.texture__name{
  position: relative;
  z-index: 2;
  font-family: var(--serif); font-style: italic;
  font-size: 14px;
  color: var(--ink);
  background: var(--cream-soft);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
}
.texture--dark .texture__name{ color: var(--cream); background: rgba(14,27,51,.85); border-color: rgba(244,236,221,.18); }
@media (max-width: 800px){ .texture-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ——— concrete textures ——— */
.tex-stars{
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 28% 64%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.8px 1.8px at 42% 30%, var(--moon) 50%, transparent 51%),
    radial-gradient(1px 1px   at 58% 74%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 72% 22%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 84% 56%, var(--moon) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 18% 88%, var(--moon) 50%, transparent 51%),
    radial-gradient(1px 1px   at 92% 12%, var(--moon) 50%, transparent 51%),
    radial-gradient(ellipse at 50% 0%, #1c2c4d 0%, var(--ink) 70%);
}
.tex-moons{
  background-color: var(--cream);
  background-image:
    radial-gradient(circle at 18px 18px, var(--cream) 8px, transparent 9px),
    radial-gradient(circle at 22px 18px, var(--peach-soft) 8px, transparent 9px);
  background-size: 64px 64px;
}
.tex-grain{
  background: var(--cream);
  position: relative;
}
.tex-grain::after{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(14,27,51,.07) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(14,27,51,.05) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 50%, rgba(14,27,51,.04) 0 1px, transparent 2px);
  background-size: 4px 4px, 7px 7px, 5px 5px;
  mix-blend-mode: multiply;
}
.tex-waves{
  background-color: var(--cream);
  background-image:
    repeating-radial-gradient(circle at 20% 50%, transparent 0 18px, rgba(14,27,51,.08) 18px 19px),
    repeating-radial-gradient(circle at 80% 50%, transparent 0 14px, rgba(201,125,82,.08) 14px 15px);
}
.tex-dots{
  background-color: var(--cream-soft);
  background-image: radial-gradient(circle, var(--ink-mute) 1px, transparent 1.6px);
  background-size: 16px 16px;
  opacity: .9;
}
.tex-rays{
  background:
    repeating-conic-gradient(from 0deg at 50% 110%, var(--peach-soft) 0deg 6deg, var(--cream) 6deg 12deg);
}
.tex-grid{
  background-color: var(--cream);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 24px 24px;
}
.tex-zzz{
  background: var(--ink);
  position: relative;
}
.tex-zzz::after{
  content: "z z z";
  position: absolute; inset: 0;
  font-family: var(--serif);
  font-style: italic;
  color: rgba(244,212,161,.18);
  font-size: 36px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: .3em;
  background:
    radial-gradient(circle at 24% 24%, rgba(244,212,161,.04) 0 14px, transparent 15px),
    radial-gradient(circle at 76% 70%, rgba(244,212,161,.04) 0 18px, transparent 19px);
}

/* ============================================================
   VOZ
   ============================================================ */
.voice-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--r4);
}
@media (max-width: 800px){ .voice-grid{ grid-template-columns: 1fr; } }
.voice-card{
  padding: var(--r5);
  border-radius: var(--radius-l);
  border: 1px solid var(--line);
  background: var(--cream-soft);
}
.voice-card--yes{ border-color: var(--sage); background: #F0F4EE; }
.voice-card--no{  border-color: rgba(201,125,82,.4); background: #FBEEE5; }
.voice-card h4{
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  margin: 0 0 var(--r3);
  font-weight: 400;
}
.voice-card--yes h4{ color: #4A6B53; }
.voice-card--no h4{ color: var(--peach-deep); }
.voice-card ul{
  list-style: none; padding: 0; margin: 0;
}
.voice-card li{
  padding: 12px 0;
  font-size: 16px;
  line-height: 1.5;
  border-top: 1px dashed var(--line);
  color: var(--ink-soft);
}
.voice-card li:first-child{ border-top: 0; padding-top: 0; }
.voice-card li::before{
  display: inline-block;
  margin-right: 10px;
  font-family: var(--serif); font-style: italic;
  color: inherit;
}
.voice-card--yes li::before{ content: "✓"; color: #6B8C72; }
.voice-card--no li::before{ content: "×"; color: var(--peach-deep); }

.voice-attrs{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--r3);
  margin-top: var(--r5);
}
.voice-attr{
  padding: var(--r4);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--cream);
}
.voice-attr__label{
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  margin: 0 0 4px;
}
.voice-attr__sub{
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
}
@media (max-width: 800px){ .voice-attrs{ grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   APPLICATIONS
   ============================================================ */
.apps{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--r5);
}
@media (max-width: 1000px){ .apps{ grid-template-columns: 1fr; } }
.app-card{
  background: var(--cream);
  border-radius: var(--radius-l);
  padding: var(--r5);
  border: 1px solid var(--line);
}
.app-card__label{
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--r4);
}
.app-card__label h3{
  font-family: var(--serif); font-style: italic;
  font-size: 22px; font-weight: 400; margin: 0;
}
.app-card__label span{
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.app-stage{
  background: #ddd;
  border-radius: var(--radius-m);
  overflow: hidden;
  display: grid; place-items: center;
  padding: var(--r4);
  background: var(--cream-deep);
}

/* PDF cover mock */
.pdf-cover{
  width: 100%;
  max-width: 360px;
  aspect-ratio: 360 / 510;
  background: var(--ink);
  color: var(--cream);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(14,27,51,.4), 0 12px 20px -10px rgba(14,27,51,.3);
  padding: 32px 28px;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.pdf-cover__stars{ position: absolute; inset: 0; pointer-events: none; }
.pdf-cover__stars span{
  position: absolute;
  width: 1.5px; height: 1.5px;
  background: var(--moon);
  border-radius: 50%;
  opacity: .7;
}
.pdf-cover__top{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 9px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(244,236,221,.5);
}
.pdf-cover__brand{
  font-family: var(--serif); font-style: italic;
  font-size: 11px; letter-spacing: .04em; text-transform: none;
  color: var(--moon);
}
.pdf-cover__center{
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  position: relative; z-index: 2;
}
.pdf-cover__crest{ width: 36px; color: var(--moon); margin-bottom: 18px; opacity: .9; }
.pdf-cover__eyebrow{
  font-size: 9px; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(244,236,221,.55); margin-bottom: 14px;
}
.pdf-cover__title{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 90;
  line-height: .92;
  letter-spacing: -.025em;
  margin: 0;
}
.pdf-cover__title .a{ font-size: 56px; display: block; }
.pdf-cover__title .b{ font-size: 56px; display: block; font-style: italic; color: var(--moon); margin-top: -2px; font-variation-settings: "opsz" 144, "SOFT" 100; }
.pdf-cover__sub{
  font-family: var(--serif); font-style: italic;
  font-size: 13px; line-height: 1.4;
  margin: 18px 0 0;
  color: rgba(244,236,221,.78);
  max-width: 220px;
}
.pdf-cover__bottom{
  display: flex; justify-content: space-between; align-items: end;
  font-size: 9px; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(244,236,221,.5);
}
.pdf-cover__pill{
  font-family: var(--serif); font-style: italic;
  font-size: 12px; letter-spacing: .04em; text-transform: none;
  border: 1px solid rgba(244,212,161,.4);
  color: var(--moon);
  padding: 5px 12px; border-radius: 999px;
}

/* PDF interior page */
.pdf-page{
  width: 100%; max-width: 320px;
  aspect-ratio: 320 / 440;
  background: var(--cream-soft);
  border-radius: 6px;
  padding: 26px 24px 22px;
  box-shadow: 0 20px 50px -15px rgba(14,27,51,.25), 0 8px 16px -8px rgba(14,27,51,.2);
  display: flex; flex-direction: column;
  position: relative;
}
.pdf-page__hdr{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink-mute); padding-bottom: 10px; border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
}
.pdf-page__hdr em{ font-family: var(--serif); font-style: italic; letter-spacing: .04em; text-transform: none; font-size: 10px; color: var(--peach-deep); }
.pdf-page__eyebrow{ font-size: 9px; letter-spacing: .25em; text-transform: uppercase; color: var(--peach-deep); font-weight: 600; margin-bottom: 8px; }
.pdf-page__h{
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: 26px; line-height: 1; letter-spacing: -.02em;
  margin: 0 0 12px;
}
.pdf-page__h em{ font-style: italic; color: var(--peach-deep); font-variation-settings: "opsz" 144, "SOFT" 100; }
.pdf-page__lead{
  font-family: var(--serif); font-style: italic;
  font-size: 11px; line-height: 1.45;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.pdf-page__body{
  font-size: 9px; line-height: 1.55; color: var(--ink-soft);
  margin: 0;
}
.pdf-page__rule{
  height: 1px; background: var(--line); margin: 12px 0;
}
.pdf-page__callout{
  background: var(--ink); color: var(--cream);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--serif); font-style: italic;
  font-size: 10px; line-height: 1.45;
  margin-top: auto;
}
.pdf-page__callout strong{ color: var(--moon); font-weight: 400; }
.pdf-page__ftr{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 8px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-mute); padding-top: 10px; border-top: 1px solid var(--line);
  margin-top: 14px;
}

/* IG post */
.ig-row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--r3);
  margin-top: var(--r4);
}
@media (max-width: 800px){ .ig-row{ grid-template-columns: 1fr; } }
.ig-post{
  aspect-ratio: 1/1;
  border-radius: var(--radius-m);
  position: relative;
  overflow: hidden;
  padding: 8%;
  display: flex; flex-direction: column;
  isolation: isolate;
}
.ig-post--ink{ background: var(--ink); color: var(--cream); }
.ig-post--cream{ background: var(--cream); color: var(--ink); }
.ig-post--peach{ background: var(--peach-soft); color: var(--ink); }
.ig-post__top{ display: flex; justify-content: space-between; font-size: 9px; letter-spacing: .25em; text-transform: uppercase; opacity: .55; }
.ig-post__main{
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.ig-post__main h4{
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(20px, 2.6vw, 32px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}
.ig-post__main h4 em{ font-style: italic; color: var(--moon); font-variation-settings: "opsz" 144, "SOFT" 100; }
.ig-post--cream .ig-post__main h4 em{ color: var(--peach-deep); }
.ig-post--peach .ig-post__main h4 em{ color: var(--ink); }
.ig-post__bottom{
  font-family: var(--serif); font-style: italic;
  font-size: 12px; opacity: .7;
}
.ig-post__num{
  position: absolute; top: 10%; right: 10%;
  font-family: var(--serif); font-style: italic;
  font-size: 64px; line-height: 1;
  opacity: .15;
}
.ig-post__stars{ position: absolute; inset: 0; pointer-events: none; }
.ig-post__stars span{ position: absolute; width: 2px; height: 2px; background: var(--moon); border-radius: 50%; opacity: .55; }

/* AD */
.ad-card{
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: var(--r4);
  max-width: 520px;
  margin: var(--r4) auto 0;
  font-family: var(--sans);
}
.ad-card__head{
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.ad-card__avatar{
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  color: var(--moon);
  font-family: var(--serif); font-style: italic;
  font-size: 16px;
}
.ad-card__brand{ font-weight: 600; font-size: 14px; }
.ad-card__brand small{ display: block; font-weight: 400; font-size: 11px; color: var(--ink-mute); margin-top: 2px; letter-spacing: .12em; text-transform: uppercase; }
.ad-card__copy{ font-size: 14px; line-height: 1.5; margin: 0 0 14px; }
.ad-card__media{
  aspect-ratio: 4/5;
  border-radius: var(--radius-m);
  background: var(--ink);
  color: var(--cream);
  position: relative; overflow: hidden;
  padding: 10% 8%;
  display: flex; flex-direction: column; justify-content: space-between;
}
.ad-card__media h4{
  font-family: var(--serif); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1; letter-spacing: -.02em; margin: 0;
}
.ad-card__media h4 em{ font-style: italic; color: var(--moon); font-variation-settings: "opsz" 144, "SOFT" 100; }
.ad-card__cta-row{
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; padding-top: 12px;
}
.ad-card__btn{
  background: var(--ink); color: var(--cream);
  border-radius: 6px; padding: 8px 16px;
  font-weight: 600; font-size: 13px;
}

/* ============================================================
   FINAL
   ============================================================ */
.outro{
  padding: clamp(72px, 12vw, 160px) 6vw;
  background: var(--ink);
  color: var(--cream);
  text-align: center;
}
.outro h2{
  font-family: var(--serif);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  font-style: italic;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -.02em;
  margin: 0 0 var(--r4);
  line-height: 1;
}
.outro h2 .moon{ color: var(--moon); }
.outro p{
  font-family: var(--serif); font-style: italic;
  max-width: 520px; margin: 0 auto var(--r5);
  font-size: 18px; line-height: 1.5;
  color: rgba(244,236,221,.75);
}
.outro__sig{
  font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: rgba(244,236,221,.5);
}