/* ========================================================
   MERY CALVO · SISTEMA DE DISEÑO
   Tonos tierra saturados + tipografía editorial
   ======================================================== */

:root {
  /* PALETA OFICIAL DE MARCA (abr 2026) — 10 colores exactos del feed IG
     Fondos: blanco roto + crema · Texto: negro roto + gris cálido
     Acentos: sage, oliva oscuro, terracota, mostaza, beige caramelo · 0 rosa */
  --bg: #f2f2ec;            /* BLANCO ROTO — fondo principal */
  --bg-soft: #dbd7c9;       /* crema cálida (secciones alternas) */
  --bg-deep: #292929;       /* NEGRO ROTO — footer, máximo contraste */
  --blanco-hueso: #f2f2ec;  /* blanco premium (cards destacadas, paneles) */
  --ink: #292929;           /* NEGRO ROTO — texto principal */
  --ink-soft: #665f5f;      /* gris cálido — texto secundario */
  --sage: #849271;          /* VERDE SAGE — acento del feed IG */
  --sage-soft: #849271;
  --sage-deep: #637055;     /* VERDE OLIVA OSCURO — texto sobre bg */
  --oliva: #637055;
  --oliva-claro: #849271;
  --terracota: #c67052;     /* terracota tostado — solo detalles (eyebrows, em italic, stickers); NO usar en fondos */
  --terracota-deep: #292929; /* terracota oscuro — texto sobre bg, cumple AA */
  --marron: #8f8470;        /* BEIGE TOPO — acento neutro */
  --marron-claro: #c1ae8d;
  --caramelo: #c1ae8d;      /* BEIGE CARAMELO — separadores, acentos sutiles */
  --mostaza: #cf9546;       /* MOSTAZA DORADA — decoración (badges, stickers) */
  --mostaza-deep: #665f5f;  /* mostaza oscuro — texto sobre bg */
  --rojo: #c67052;
  --crema-pura: #dbd7c9;    /* crema warm (cards y polaroids) */

  /* TIPOGRAFÍA */
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Barlow Condensed", "Fira Sans Condensed", "Oswald", system-ui, sans-serif;
  --sans-body: "Albert Sans", "Inter", system-ui, sans-serif;

  /* RITMO */
  --maxw: 1240px;
  --gutter: clamp(20px, 4vw, 64px);
  /* Esquinas estilo Apple (squircle feel sin webkit pseudo) */
  --radius-sm: 12px;        /* inputs, badges pequeños */
  --radius: 20px;           /* cards, paneles, secciones */
  --radius-lg: 32px;        /* cards grandes destacadas */
  --radius-xl: 40px;        /* hero cards / contenedores muy grandes */
}

/* OPCIÓN tipográfica B — Cormorant editorial puro */
[data-typo="b"] {
  --serif: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --sans: "Albert Sans", "Inter", system-ui, sans-serif;
  --sans-body: "Albert Sans", "Inter", system-ui, sans-serif;
}
/* OPCIÓN tipográfica C — Fraunces moderno */
[data-typo="c"] {
  --serif: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --sans: "Inter Tight", "Inter", system-ui, sans-serif;
  --sans-body: "Inter", system-ui, sans-serif;
}

/* HAND-LETTERING — el subtítulo cursiva característico (mostaza) */
.handletter {
  font-family: "Caveat", cursive;
  color: var(--mostaza);
  font-weight: 600;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* TIPOGRAFÍA UTIL */
.serif { font-family: var(--serif); font-weight: 400; }
.serif-it { font-family: var(--serif); font-style: italic; font-weight: 400; }
.sans-cond { font-family: var(--sans); font-weight: 600; letter-spacing: 0.01em; }
.eyebrow {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terracota);
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(48px, 7.5vw, 120px); }
h2 { font-size: clamp(36px, 5vw, 72px); }
h3 { font-size: clamp(26px, 3vw, 44px); }

p { max-width: 60ch; }
em { font-family: var(--serif); font-style: italic; }

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

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2,0.8,0.2,1), background 0.3s;
}
.btn:hover { transform: translate(2px, -2px); background: var(--terracota); }
.btn--terracota { background: var(--sage-deep); color: var(--blanco-hueso); }
.btn--terracota:hover { background: var(--ink); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }

/* SCROLL REVEAL */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.22s; }
.reveal-delay-3 { transition-delay: 0.34s; }
.reveal-delay-4 { transition-delay: 0.46s; }

[data-anim="off"] .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-anim="off"] * { animation-play-state: paused !important; }

/* PLACEHOLDERS DE FOTO */
.photo {
  background: var(--bg-soft);
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.photo::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--bg-soft), transparent 50%),
    radial-gradient(circle at 80% 70%, var(--sage), transparent 50%);
  pointer-events: none;
}
.photo > span { position: relative; z-index: 1; opacity: 0.75; }
.photo--frame { border: 1px solid var(--marron-claro); }

/* DOODLES — formas decorativas SVG */
.doodle { position: absolute; pointer-events: none; color: var(--terracota); }
.doodle--oliva { color: var(--oliva); }
.doodle--mostaza { color: var(--mostaza); }
.doodle--ink { color: var(--ink); }

/* MARQUEE */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee {
  display: flex;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  width: max-content;
}
[data-anim="off"] .marquee { animation: none; }

/* SECCIÓN UTIL */
.section { padding-block: clamp(80px, 12vh, 160px); position: relative; }
.section--dark { background: var(--bg-deep); color: var(--bg); }
.section--dark .eyebrow { color: var(--mostaza); }
.section--soft { background: var(--bg-soft); }

/* HR decorativo */
.rule {
  height: 1px;
  background: var(--marron-claro);
  border: none;
  margin-block: 48px;
}

/* Selection */
::selection { background: var(--terracota); color: var(--crema-pura); }

/* Subrayados manuales */
.underline-doodle {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 Q 50 2, 100 6 T 198 7' stroke='%23c67052' stroke-width='3' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.4em;
  padding-bottom: 2px;
}

.highlight {
  background: linear-gradient(180deg, transparent 60%, var(--mostaza) 60%);
  padding: 0 4px;
}

/* Numbers (capítulos) */
.chapter-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(80px, 12vw, 200px);
  line-height: 0.8;
  color: var(--caramelo);
}