/* ==========================================================================
   Etica_Lab.Equilibrium — faithful rebuild of the Webnode "cherry" theme
   Palette, fonts and layout measured from the live site.
   ========================================================================== */

/* ---------- Fonts (self-hosted Metropolis + Google Playfair Display) ------ */
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("/assets/fonts/Metropolis-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ------------------------------------------------- */
:root {
  --mauve: rgb(177, 122, 125);      /* page background, measured live */
  --mauve-deep: rgb(150, 98, 101);  /* sticky bar / hover */
  --pale-rose: rgb(230, 215, 215);  /* light heading text on mauve */
  --white: #ffffff;
  --ink: rgb(147, 87, 87);          /* body text on white panels (measured live) */
  --ink-soft: rgb(130, 96, 96);
  --title: rgb(147, 87, 87);        /* interior page titles */
  --quote: rgb(119, 60, 78);        /* wine serif headings / quotes on white */
  --rule: rgb(177, 122, 125);       /* short underline accent */
  --border: rgb(230, 211, 212);     /* hairline dividers on white */

  --serif: "Playfair Display", Georgia, serif;
  --sans: "Metropolis", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1200px;
  --masthead-pad: 2.4rem;
}

/* ---------- Reset --------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mauve);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  font-size: 17px;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

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

hr, hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.6rem 0;
}

/* ==========================================================================
   Masthead (centered logo + title + nav) — sits on the mauve background
   ========================================================================== */
.masthead {
  text-align: center;
  padding: var(--masthead-pad) 1.5rem 1.4rem;
  color: var(--white);
}
.masthead__logo img {
  width: 161px;
  height: auto;
  margin: 0 auto 0.5rem;
  border-radius: 0;
}
.masthead__title {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.05;
  color: var(--white);
  margin: 0.4rem 0 0.2rem;
}
.masthead__subtitle {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.3rem;
  color: var(--white);
  margin: 0.1rem 0 0;
}

/* ---------- Primary navigation (centered under the title) ----------------- */
.mainnav {
  margin-top: 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 1rem;
}
.mainnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
}
.mainnav__list a {
  font-family: var(--serif);
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.9);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.mainnav__list a:hover { color: var(--white); }
.mainnav__list a.is-active {
  color: var(--white);
  border-bottom-color: var(--white);
}

/* ---------- Language toggle (top-right of the toolbar) -------------------- */
.langbar {
  position: absolute;
  top: 1rem;
  right: 1.2rem;
  display: flex;
  gap: 0.15rem;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  z-index: 5;
}
.langbar a, .langbar span {
  padding: 0.25rem 0.5rem;
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.75);
  transition: background 0.2s, color 0.2s;
}
.langbar a:hover { color: var(--white); background: rgba(255, 255, 255, 0.15); }
.langbar .is-active { color: var(--white); font-weight: 600; background: rgba(255, 255, 255, 0.2); }
.langbar .is-missing { opacity: 0.45; }

/* ---------- Sticky compact nav (appears on scroll) ------------------------ */
.stickynav {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: var(--mauve);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transform: translateY(-100%);
  transition: transform 0.28s ease;
  z-index: 50;
}
.stickynav.is-visible { transform: translateY(0); }
.stickynav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0.35rem 1.5rem;
}
.stickynav .mainnav { margin: 0; border: 0; padding: 0; }
.stickynav .mainnav__list { gap: 0.3rem 1.3rem; }
.stickynav .mainnav__list a { font-size: 1rem; }
.stickynav .langbar { position: absolute; top: 50%; transform: translateY(-50%); right: 1.2rem; }

/* ==========================================================================
   Content sections
   ========================================================================== */

/* Wide banner image centered on the mauve background. */
.banner {
  padding: 0 1.5rem 2.4rem;
}
.banner img {
  max-width: 868px;
  width: 100%;
  margin: 0 auto;
  border-radius: 0;
  aspect-ratio: 868 / 241;
  object-fit: cover;
}

/* Homepage: the mauve hero section fills the first screen below the masthead,
   with the banquet banner kept at its original size, centred within it. So the
   next section only appears after scrolling. */
.banner--hero {
  min-height: calc(100vh - 300px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Full-bleed photo band with centered overlay text. */
.band {
  position: relative;
  min-height: 400px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4.5rem 1.5rem;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--pale-rose);
}
.band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(30, 20, 20, 0.22);
}
.band__inner { position: relative; max-width: 900px; }
.band__title {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 2.1rem;
  line-height: 1.25;
  color: var(--pale-rose);
  margin: 0;
}
.band__subtitle {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.7rem;
  color: var(--white);
  margin: 0.6rem 0 0;
}
/* Left-aligned band variant (contact section). */
.band--left { place-items: center start; text-align: left; }
.band--left .band__inner { padding-left: 1rem; max-width: 760px; }
.band--left .band__title { color: var(--white); margin-bottom: 0.8rem; }
.band--left .band__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: rgba(255, 255, 255, 0.8);
  margin-top: 0.9rem;
}
.band--left p { margin: 0.4rem 0 0; color: var(--white); }

/* Homepage contact band: full-screen, darker tint, airy line spacing. */
.band--contact { min-height: 88vh; padding: 5rem 1.5rem; }
.band--contact::before { background: rgba(0, 0, 0, 0.44); }
.band--contact .band__inner { max-width: 820px; }
.band--contact .band__title { font-size: 2.6rem; margin-bottom: 1.8rem; }
.band--contact p { margin: 1.4rem 0 0; font-size: 1.2rem; line-height: 2.1; }
.band--contact p strong { font-size: 1.3rem; }

/* White content panel. */
.panel {
  background: var(--white);
  padding: 4.5rem 0;
}
/* A more spacious panel (e.g. the homepage "Comer es fundamental" block). */
.panel--lg { padding: 6rem 0; }
.panel__grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.panel__grid--media-text { grid-template-columns: 1fr 1fr; }
.panel__grid--quotes-text { grid-template-columns: 1fr 1fr; }

.media-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.media-pair img { border-radius: 6px; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }

/* Mauve serif quote (Playfair) with a short underline accent. */
.quote {
  font-family: var(--serif);
  color: var(--quote);
  font-size: 2.25rem;
  line-height: 1.28;
  font-weight: 400;
  margin: 0 0 1.6rem;
}
.quote:last-child { margin-bottom: 0; }
.quote cite {
  display: block;
  font-style: normal;
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
}
.quote::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rule);
  margin-top: 1rem;
}
.prose p { margin: 0 0 1.1rem; }
.prose p:last-child { margin-bottom: 0; }
.prose__emphasis { color: var(--quote); font-size: 1.15rem; font-family: var(--serif); }
.prose blockquote { margin: 1.4rem 0; }

/* ==========================================================================
   Interior page building blocks
   ========================================================================== */

/* Big centered page title on white (typed with each page's own casing). */
.page-title {
  font-family: var(--serif);
  color: var(--title);
  text-align: center;
  font-size: 2.15rem;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 auto 2.2rem;
}
.page-title::after {
  content: "";
  display: block;
  width: 70px;
  height: 2px;
  background: var(--rule);
  margin: 1.1rem auto 0;
}

/* Mauve serif section heading with a short underline accent. */
.headline {
  font-family: var(--serif);
  color: var(--quote);
  font-size: 2.75rem;
  line-height: 1.18;
  font-weight: 400;
  margin: 0 0 1.3rem;
}
.headline--sm { font-size: 2rem; }
.headline--center { text-align: center; }
.headline::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  background: var(--rule);
  margin-top: 1rem;
}
.headline--center::after { margin-left: auto; margin-right: auto; }
.headline a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; }

/* Team-member row: portrait left, name + roles right. */
.member {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--border, #e6d3d4);
}
.member:last-of-type { border-bottom: 0; }
.member img { width: 180px; height: 180px; object-fit: cover; border-radius: 6px; }
.member__name {
  font-family: var(--serif);
  color: var(--quote);
  font-size: 1.35rem;
  letter-spacing: 0.03em;
  margin: 0 0 0.9rem;
}
.member__roles { margin: 0; padding: 0; list-style: none; }
.member__roles li { margin: 0 0 0.55rem; color: var(--ink); }
@media (max-width: 560px) {
  .member { grid-template-columns: 1fr; gap: 1rem; }
  .member img { width: 160px; height: 160px; }
}

/* Two-column masonry photo gallery. */
.gallery { columns: 2; column-gap: 1rem; margin: 1.5rem 0 0.5rem; }
.gallery img { width: 100%; margin: 0 0 1rem; border-radius: 6px; break-inside: avoid; }
@media (max-width: 560px) { .gallery { columns: 1; } }

/* Centered intro paragraph. */
.lead {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2.6rem;
}

/* Three-column feature cards (image, heading, text). */
.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin: 1rem 0 2.5rem;
}
.feature img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 1.1rem;
}
.feature__title {
  font-family: var(--serif);
  color: var(--quote);
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 0.7rem;
}
.feature p { margin: 0; }
@media (max-width: 760px) {
  .features { grid-template-columns: 1fr; gap: 2.5rem; max-width: 420px; margin-inline: auto; }
}

/* Value page: pricing list + etymology aside. */
.value-layout {
  display: grid;
  grid-template-columns: 1.9fr 1fr;
  gap: 3rem;
  align-items: start;
}
@media (max-width: 820px) { .value-layout { grid-template-columns: 1fr; gap: 2rem; } }

.pricing__item {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
}
.pricing__item:first-child { padding-top: 0; }
.pricing__item:last-child { border-bottom: 0; }
.pricing__title {
  font-family: var(--serif);
  color: var(--quote);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}
.pricing__body p { margin: 0; }
.pricing__price {
  font-family: var(--serif);
  color: var(--quote);
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}
.pricing__price a { text-decoration: underline; }
@media (max-width: 480px) {
  .pricing__item { flex-direction: column; gap: 0.6rem; }
  .pricing__price { text-align: left; }
}

.pullquote {
  position: relative;
  font-family: var(--serif);
  color: var(--quote);
  font-size: 1.5rem;
  line-height: 1.4;
  padding: 2.4rem 0 0 0.2rem;
  margin: 0;
}
.pullquote::before {
  content: "\201C";
  position: absolute;
  top: -0.4rem;
  left: -0.1rem;
  font-size: 4rem;
  line-height: 1;
  color: var(--rule);
}
.pullquote em { font-style: italic; }

/* Contact details list. */
.contact-list { display: grid; gap: 1.5rem; margin: 2.5rem 0; max-width: 560px; }
.contact-row { display: flex; align-items: flex-start; gap: 1rem; }
.contact-row svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 4px; stroke: var(--quote); fill: none; }
.contact-row__name {
  font-family: var(--serif);
  color: var(--quote);
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
}
.contact-row a { color: var(--brand-mid, #7a5c3e); text-decoration: underline; }
.contact-row a:hover { color: var(--quote); }

/* Centered emphasis lines (mauve). */
.lede-center {
  text-align: center;
  color: var(--quote);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.35;
  margin: 0.4rem 0;
}

/* Text-with-floated-portrait (biography). */
.bio { overflow: hidden; }
.bio__portrait {
  float: left;
  width: 340px;
  max-width: 42%;
  margin: 0.4rem 2.2rem 1rem 0;
  border-radius: 6px;
}
.bio p { margin: 0 0 1.1rem; }

/* Centered constrained figure. */
.figure { margin: 2.6rem 0; }
.figure img { max-width: 720px; width: 100%; margin: 0 auto; border-radius: 6px; }

/* Generic two-column text block. */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.cols-2 p { margin: 0 0 1.1rem; }
.cols-2 p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--mauve);
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
  padding: 2rem 1.5rem 2.6rem;
  font-size: 0.85rem;
  font-family: var(--sans);
}
.site-footer a { color: var(--white); text-decoration: underline; }
.site-footer p { margin: 0.3rem 0; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .panel__grid--media-text,
  .panel__grid--quotes-text { grid-template-columns: 1fr; }
  .masthead__title { font-size: 2.3rem; }
  .band__title { font-size: 1.7rem; }
  .quote { font-size: 1.6rem; }
  .stickynav { display: none; } /* rely on the top masthead nav on small screens */
}

@media (max-width: 760px) {
  .cols-2 { grid-template-columns: 1fr; gap: 1.5rem; }
  .page-title { font-size: 2.1rem; }
}

@media (max-width: 640px) {
  .bio__portrait { float: none; width: 100%; max-width: 100%; margin: 0 0 1.3rem; }
}

@media (max-width: 560px) {
  .mainnav__list { gap: 0.3rem 1rem; }
  .mainnav__list a { font-size: 0.98rem; }
  .media-pair { grid-template-columns: 1fr; }
}