/* Camomila Studio · estilos compartidos por todas las páginas.
   Colores en variables: :root = modo claro (diseño original), media query = modo oscuro. */

@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-normal.woff2") format("woff2");
  font-weight: 300 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-weight: 300 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("/assets/fonts/nunito-sans.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --bg: #F4F0E6;
  --paper: #FBF8F1;
  --ink: #1E2B23;
  --ink-soft: #46574B;
  --label: #4E6B58;
  --link: #2A4E3B;
  --link-hover: #16301F;
  --accent: #4F7A55;
  --line: #D8D0BD;
  --line-soft: #E3DCCB;
  --pill: #B8C4B0;
  --btn-bg: #2A4E3B;
  --btn-ink: #FFFFFF;
  --card: #FBF8F1;
  --shadow: rgba(60, 50, 30, 0.08);
  --shadow-strong: rgba(60, 50, 30, 0.25);
  --blob-hero: #DCE6D6;
  --blob-hero-opacity: 0.8;
  --blob-rose: #EED6C8;
  --blob-rose-opacity: 0.45;
  --grain-opacity: 0.16;
  --grain-blend: multiply;
  --leaf-opacity: 1;
  --vivero-bg: #2A4E3B;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Nunito Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141B16;
    --paper: #19221C;
    --ink: #E8E5D9;
    --ink-soft: #B3BDB0;
    --label: #9AB5A0;
    --link: #A8CDAD;
    --link-hover: #CFE6D1;
    --accent: #9CC29F;
    --line: #2F3B32;
    --line-soft: #263029;
    --pill: #4B5D4F;
    --btn-bg: #A8CDAD;
    --btn-ink: #11211A;
    --card: #E9E3D4;
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-strong: rgba(0, 0, 0, 0.6);
    --blob-hero: #26412F;
    --blob-hero-opacity: 0.6;
    --blob-rose: #4A3329;
    --blob-rose-opacity: 0.35;
    --grain-opacity: 0.08;
    --grain-blend: screen;
    --leaf-opacity: 0.75;
    --vivero-bg: #1C3326;
  }
}

/* ---------- Base ---------- */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--link); }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

em.green { font-style: italic; color: var(--accent); }

.page { position: relative; overflow: hidden; }

.sprite { position: absolute; width: 0; height: 0; }

.grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: var(--grain-opacity);
  pointer-events: none;
  mix-blend-mode: var(--grain-blend);
}

.blob { position: absolute; border-radius: 50%; pointer-events: none; }

.wrap { position: relative; max-width: 1200px; margin: 0 auto; }

.eyebrow {
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--label);
}

.h2 {
  margin: 0 0 20px;
  font-family: var(--serif);
  font-weight: 320;
  font-size: 52px;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.muted { margin: 0; color: var(--ink-soft); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-sizing: border-box;
}
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { color: var(--btn-ink); filter: brightness(1.08); }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Cabecera ---------- */

.site-header {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 32px 32px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* Por encima de la mancha difuminada de la portada, que si no aclara el menú. */
  z-index: 1;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
}
.brand:hover { color: var(--ink); }
.brand-name {
  font-family: var(--serif);
  font-size: 25px;
  font-weight: 380;
  letter-spacing: -0.01em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  align-items: center;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.nav a { text-decoration: none; padding: 10px 0; }
.nav a.lang {
  padding: 8px 16px;
  border: 1px solid var(--pill);
  border-radius: 999px;
}

/* ---------- Portada ---------- */

.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 32px 112px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 56px;
}
.hero .blob {
  top: -120px;
  right: -60px;
  width: 640px;
  height: 640px;
  background: var(--blob-hero);
  filter: blur(80px);
  opacity: var(--blob-hero-opacity);
}
.hero-text { position: relative; flex: 999 1 520px; min-width: 0; padding-bottom: 24px; }
.hero-eyebrow {
  margin: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.hero-eyebrow::before {
  content: "";
  display: inline-block;
  width: 40px;
  height: 1px;
  background: var(--label);
}
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(48px, 7.4vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--ink);
}
.hero h1 .calm { position: relative; white-space: nowrap; }
.hero h1 em { font-style: italic; font-weight: 300; color: var(--accent); }
.hero h1 .underline {
  position: absolute;
  left: -2%;
  bottom: -2px;
  width: 104%;
  height: 18px;
}
.lead {
  margin: 36px 0 0;
  max-width: 460px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.hero-actions {
  margin-top: 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
}
.text-link { font-weight: 700; text-underline-offset: 6px; padding: 14px 0; }

.plate {
  position: relative;
  flex: 1 1 380px;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plate-card {
  width: 100%;
  max-width: 440px;
  background: var(--card);
  padding: 22px;
  box-sizing: border-box;
  box-shadow: 0 1px 2px var(--shadow), 0 24px 48px -24px var(--shadow-strong);
  transform: rotate(1.2deg);
}
.plate-frame { border: 1px solid #D8D0BD; padding: 14px; }
.plate-frame svg { display: block; width: 100%; height: auto; }
.plate figcaption {
  margin-top: 20px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-soft);
}
.plate figcaption span { font-style: normal; letter-spacing: 0.04em; }

/* ---------- 01 Misión ---------- */

.mission {
  position: relative;
  background: var(--paper);
  padding: 128px 32px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.mission .leaf { position: absolute; opacity: calc(0.45 * var(--leaf-opacity)); }
.mission .leaf-a { left: 5%; top: 64px; width: 56px; height: 112px; transform: rotate(-28deg); }
.mission .leaf-b { right: 7%; bottom: 72px; width: 72px; height: 144px; transform: rotate(22deg); opacity: calc(0.4 * var(--leaf-opacity)); }
.mission-inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.mission .eyebrow { margin-bottom: 32px; }
.mission-statement {
  margin: 0;
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(32px, 4.4vw, 52px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.divider { display: block; margin: 44px auto; }
.divider path { stroke: var(--pill); }
.mission-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px 56px;
  text-align: left;
  max-width: 820px;
  margin: 0 auto;
}
.mission-columns p { margin: 0; color: var(--ink-soft); }
.quote {
  margin: 56px auto 0;
  max-width: 620px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  line-height: 1.45;
  color: var(--link);
}

/* ---------- 02 Principios ---------- */

.principles { position: relative; padding: 128px 32px; }
.principles .blob {
  bottom: 20px;
  right: -180px;
  width: 460px;
  height: 460px;
  background: var(--blob-rose);
  filter: blur(90px);
  opacity: var(--blob-rose-opacity);
}
.principles-layout { display: flex; flex-wrap: wrap; gap: 56px; }
.principles-intro { flex: 1 1 300px; min-width: 0; }
.principles-intro .muted { max-width: 340px; }
.principles-list {
  flex: 999 1 560px;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  column-gap: 48px;
}
.principle { padding: 32px 0; border-top: 1px solid var(--line); display: flex; gap: 20px; }
.numeral {
  position: relative;
  flex: 0 0 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.numeral svg { position: absolute; inset: 0; }
.numeral span {
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: #2A4E3B;
}
.principle h3 {
  margin: 4px 0 8px;
  font-family: var(--serif);
  font-weight: 420;
  font-size: 24px;
  color: var(--ink);
}
.principle p { margin: 0; font-size: 16px; color: var(--ink-soft); }

/* ---------- 03 Vivero ---------- */

.vivero {
  position: relative;
  background: var(--vivero-bg);
  color: #EEF2EA;
  padding: 128px 32px;
  overflow: hidden;
}
.vivero .blob-a {
  top: 40px;
  left: -140px;
  width: 520px;
  height: 520px;
  background: #45785A;
  filter: blur(80px);
  opacity: 0.75;
}
.vivero .blob-b {
  bottom: -120px;
  right: 8%;
  width: 380px;
  height: 380px;
  background: #8C9C50;
  filter: blur(100px);
  opacity: 0.35;
}
.vivero-layout { display: flex; flex-wrap: wrap; align-items: center; gap: 72px; }
.vivero-text { flex: 999 1 460px; min-width: 0; }
.vivero .eyebrow { color: #E8C66A; }
.vivero h2 {
  margin: 0 0 28px;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(64px, 9vw, 120px);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #F4F0E6;
}
.vivero-lead { margin: 0 0 40px; max-width: 500px; font-size: 21px; color: #DCE6DE; }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px;
  max-width: 560px;
  margin: 0 0 48px;
}
.facts div { border-top: 1px solid #6D9079; padding-top: 16px; }
.facts dt {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: #F4F0E6;
}
.facts dd { margin: 8px 0 0; font-size: 15px; color: #C9D7CD; }
.vivero-actions { display: flex; flex-wrap: wrap; gap: 16px; }
.btn-light { background: #F4F0E6; color: #1E2B23; }
.btn-light:hover { color: #1E2B23; background: #FFFFFF; }
.btn-outline { border: 1px solid #C9D7CD; color: #F4F0E6; }
.btn-outline:hover { color: #FFFFFF; border-color: #FFFFFF; }

.phone-wrap { flex: 1 1 300px; min-width: 0; display: flex; justify-content: center; }
.phone {
  width: 280px;
  height: 570px;
  border-radius: 46px;
  background: #15291D;
  padding: 12px;
  box-sizing: border-box;
  box-shadow: 0 40px 80px -20px rgba(5, 20, 12, 0.6);
  transform: rotate(-3deg);
}
.phone img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 36px;
  object-fit: cover;
  background: #DFE8E2;
}

/* ---------- 04 Cartas ---------- */

.letters { position: relative; padding: 128px 32px 112px; }
.letters-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 56px;
}
.letters-intro { max-width: 560px; }
.soon {
  flex: 0 1 auto;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 10px 26px 10px 18px;
  border: 1px dashed var(--pill);
  border-radius: 28px;
  box-sizing: border-box;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
}
.seasons {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.postcard { background: var(--card); padding: 16px; box-shadow: 0 1px 2px var(--shadow); }
.postcard svg { display: block; width: 100%; height: auto; }
.postcard .card-bg { fill: var(--card); }
.postcard h3 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  color: #1E2B23;
}
.postcard p { margin: 2px 0 0; font-size: 14px; color: #46574B; }

/* ---------- Pie ---------- */

.site-footer { position: relative; border-top: 1px solid var(--line); padding: 40px 32px 48px; }
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  font-size: 15px;
  color: var(--ink-soft);
}
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand span { font-family: var(--serif); font-style: italic; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* ---------- Páginas de texto (privacidad, 404) ---------- */

.prose {
  position: relative;
  max-width: 680px;
  margin: 0 auto;
  padding: 72px 32px 112px;
}
.prose h1 {
  margin: 0 0 32px;
  font-family: var(--serif);
  font-weight: 320;
  font-size: clamp(40px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.prose h2 {
  margin: 48px 0 12px;
  font-family: var(--serif);
  font-weight: 420;
  font-size: 24px;
}
.prose p, .prose li { color: var(--ink-soft); }
.prose ul { padding-left: 1.2em; }
.prose .updated { margin-top: 56px; font-size: 15px; font-style: italic; }

/* ---------- Móvil ---------- */

@media (max-width: 600px) {
  .prose { padding: 48px 32px 88px; }
}