/* ==========================================================================
   LA VIDA ES BELLA — Residencia Adulto Mayor
   Sistema de diseño derivado del logo oficial.
   Colores base extraídos de LOGO VECTORIZADO.pdf:
     #364884 azul marino · #6CB4B4 turquesa · #72AE54 verde
     #F6E45A amarillo    · #B46084 rosa
   ========================================================================== */

/* --------------------------------------------------------------- 1. TOKENS */
:root {
  /* Marca */
  --color-primary:         #364884;
  --color-primary-light:   #52649F;
  --color-primary-dark:    #232F5C;
  --color-primary-soft:    #E6E9F3;

  --color-secondary:       #6CB4B4;
  --color-secondary-light: #A3D2D2;
  --color-secondary-dark:  #387173;
  --color-secondary-soft:  #E4F1F1;

  --color-green:           #72AE54;
  --color-green-light:     #A6CE90;
  --color-green-dark:      #4E7C39;   /* 4,92 de contraste con blanco (AA) */
  --color-green-soft:      #EAF2E4;

  --color-yellow:          #F6E45A;
  --color-yellow-soft:     #FBF4CE;

  --color-pink:            #B46084;
  --color-pink-soft:       #F4E5EC;

  /* Neutros cálidos */
  --color-background:      #FDFCF9;
  --color-background-warm: #F7F2E9;
  --color-sand:            #EFE6D8;
  --color-surface:         #FFFFFF;
  --color-border:          #E8E2D6;

  --color-text:            #232A40;
  --color-text-muted:      #5C6478;
  --color-text-on-dark:    #F4F6FB;
  --color-text-on-dark-mut:#BFC7DD;

  /* Tipografía */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --step--1: clamp(0.88rem, 0.86rem + 0.1vw, 0.94rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);
  --step-5:  clamp(2.6rem, 1.8rem + 3.6vw, 5rem);

  /* Ritmo */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1.25rem;
  --space-m:   2rem;
  --space-l:   3.25rem;
  --space-xl:  5rem;
  --space-2xl: clamp(4.5rem, 3rem + 7vw, 9rem);

  --wrap: 1240px;
  --wrap-narrow: 780px;

  --radius-s:  10px;
  --radius-m:  18px;
  --radius-l:  32px;
  --radius-pill: 999px;

  --shadow-soft:  0 2px 8px rgba(35, 42, 64, 0.05), 0 12px 32px rgba(35, 42, 64, 0.06);
  --shadow-lift:  0 4px 12px rgba(35, 42, 64, 0.07), 0 20px 48px rgba(35, 42, 64, 0.09);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --nav-h: 78px;
}

/* ---------------------------------------------------------------- 2. RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--color-text);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, picture { display: block; max-width: 100%; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

/* Foco visible y consistente — requisito de accesibilidad */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; top: 0; left: 50%;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--color-primary); color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 0 0 var(--radius-s) var(--radius-s);
  transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ----------------------------------------------------------- 3. TIPOGRAFÍA */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--color-primary-dark);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

.lead {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* Ojo tipográfico: destacar una palabra dentro de un titular */
.accent-serif {
  font-style: italic;
  color: var(--color-secondary-dark);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-s);
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: var(--color-secondary);
  border-radius: 2px;
}
.eyebrow--on-dark { color: var(--color-secondary-light); }
.eyebrow--on-dark::before { background: var(--color-secondary-light); }

/* --------------------------------------------------------------- 4. LAYOUT */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}
@media (min-width: 768px) {
  .wrap { width: min(100% - 4rem, var(--wrap)); }
}

.wrap-narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
  margin-inline: auto;
}

.section { padding-block: var(--space-2xl); }
.section--tight { padding-block: var(--space-xl); }
.section--warm { background: var(--color-background-warm); }
.section--sand  { background: var(--color-sand); }

.section-head { max-width: 62ch; margin-bottom: var(--space-l); }
.section-head p { margin-top: var(--space-s); }

/* --------------------------------------------------------------- 5. BOTONES */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease),
              color 0.25s var(--ease), border-color 0.25s var(--ease),
              box-shadow 0.25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 8px 20px rgba(54, 72, 132, 0.22);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  box-shadow: 0 12px 28px rgba(54, 72, 132, 0.3);
}

.btn--ghost {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: transparent;
}
.btn--ghost:hover { background: var(--color-primary); color: #fff; }

.btn--light {
  background: #fff;
  color: var(--color-primary-dark);
  box-shadow: var(--shadow-soft);
}
.btn--light:hover { background: var(--color-background-warm); }

/* Degradado de Instagram. Los tonos son algo más profundos que los
   oficiales: el naranja original da 2,34 de contraste con texto blanco,
   muy por debajo del mínimo. Estos seis van de 5,29 a 7,06. */
.btn--instagram {
  background: linear-gradient(45deg,
    #A9541C 0%, #B44A28 18%, #C02240 42%, #A81C5E 64%, #8E2DA8 85%, #7A32B8 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(168, 28, 94, 0.28);
}
.btn--instagram:hover { filter: brightness(1.12); }

.btn--outline-light {
  border-color: rgba(244, 246, 251, 0.5);
  color: var(--color-text-on-dark);
}
.btn--outline-light:hover {
  background: rgba(244, 246, 251, 0.12);
  border-color: var(--color-text-on-dark);
}

.btn--whatsapp {
  background: var(--color-green-dark);
  color: #fff;
  box-shadow: 0 8px 20px rgba(78, 124, 57, 0.3);
}
.btn--whatsapp:hover { background: #3E6029; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  align-items: center;
}

/* Botón sólo icono (redes) — área táctil ≥ 44px */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-primary);
  transition: all 0.25s var(--ease);
}
.icon-btn svg { width: 21px; height: 21px; }
.icon-btn:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  transform: translateY(-2px);
}
.icon-btn--whatsapp:hover { background: var(--color-green-dark); border-color: var(--color-green-dark); }
.icon-btn--instagram:hover { background: var(--color-pink); border-color: var(--color-pink); }

/* ------------------------------------------------ 6. PLACEHOLDERS DE FOTO */
/* Reemplazar: poner un <img> dentro de .media y borrar el .media__ph.
   Ver README para el detalle.                                            */
.media {
  position: relative;
  overflow: hidden;
  background: var(--color-secondary-soft);
  border-radius: var(--radius-l);
}
.media > img { width: 100%; height: 100%; object-fit: cover; }

.media__ph {
  position: absolute; inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1.5rem;
  text-align: center;
  background:
    radial-gradient(120% 90% at 22% 12%, var(--color-secondary-soft) 0%, transparent 62%),
    radial-gradient(110% 100% at 82% 88%, var(--color-green-soft) 0%, transparent 58%),
    linear-gradient(160deg, var(--color-background-warm), var(--color-sand));
}
.media__ph svg { width: 30px; height: 30px; color: var(--color-secondary-dark); opacity: 0.65; }
.media__ph span {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--color-secondary-dark);
  max-width: 26ch;
  line-height: 1.45;
}

/* Recortes orgánicos: la marca es una gota y un círculo, no un rectángulo */
.media--blob   { border-radius: 58% 42% 48% 52% / 46% 52% 48% 54%; }
.media--drop   { border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 25%; }
.media--arch   { border-radius: 50% 50% var(--radius-l) var(--radius-l) / 34% 34% var(--radius-l) var(--radius-l); }
.media--circle { border-radius: 50%; }

.ratio-square    { aspect-ratio: 1 / 1; }
.ratio-portrait  { aspect-ratio: 4 / 5; }
.ratio-tall      { aspect-ratio: 3 / 4.4; }
.ratio-landscape { aspect-ratio: 3 / 2; }
.ratio-wide      { aspect-ratio: 16 / 9; }

/* ---------------------------------------------------- 7. FORMAS ORGÁNICAS */
.blob-deco {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}

.wave-divider {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: -1px;
}

/* ------------------------------------------------------------- 8. NAVBAR */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  transition: background-color 0.35s var(--ease), box-shadow 0.35s var(--ease),
              height 0.35s var(--ease);
}
.nav--solid {
  background: rgba(253, 252, 249, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--color-border), 0 8px 24px rgba(35, 42, 64, 0.05);
}
/* La navbar se oculta al bajar y reaparece al subir: navegación sin estorbo */
.nav--hidden { transform: translateY(-100%); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  width: 100%;
}

.nav__logo { display: flex; align-items: center; flex-shrink: 0; }
.nav__logo img { height: 54px; width: auto; transition: height 0.35s var(--ease); }
.nav__logo .logo-mark { display: none; }

.nav__links {
  display: none;
  align-items: center;
  gap: 1.6rem;
}
.nav__links a {
  position: relative;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-text);
  padding-block: 0.4rem;
  transition: color 0.2s var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--color-secondary);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__links a:hover { color: var(--color-primary); }
.nav__links a:hover::after,
.nav__links a[aria-current="true"]::after { transform: scaleX(1); }

.nav__actions { display: flex; align-items: center; gap: 0.65rem; }
.nav__actions .btn { min-height: 46px; padding: 0.6rem 1.3rem; font-size: 0.95rem; }
.nav__cta-desktop { display: none; }
.nav__social { display: none; }

/* Hamburguesa */
.nav__toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px; height: 46px;
  padding: 0 11px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menú móvil: pensado para el pulgar — acciones abajo, grandes */
.nav__mobile {
  position: fixed;
  inset: var(--nav-h) 0 0 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  padding: var(--space-m) 1.25rem calc(var(--space-m) + env(safe-area-inset-bottom));
  background: var(--color-background);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.nav__mobile[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }

.nav__mobile ul { display: flex; flex-direction: column; }
.nav__mobile li + li { border-top: 1px solid var(--color-border); }
.nav__mobile a.nav__mobile-link {
  display: flex;
  align-items: center;
  min-height: 60px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-primary-dark);
}
.nav__mobile-actions {
  margin-top: auto;
  padding-top: var(--space-m);
  display: grid;
  gap: 0.75rem;
}
.nav__mobile-actions .btn { width: 100%; }
.nav__mobile-social { display: flex; gap: 0.75rem; justify-content: center; padding-top: 0.5rem; }

body[data-menu-open="true"] { overflow: hidden; }

/* ---------------------------------------------------------------- 9. HERO */
.hero {
  position: relative;
  padding-top: calc(var(--nav-h) + var(--space-l));
  padding-bottom: var(--space-xl);
  background:
    radial-gradient(90% 65% at 78% 8%,  var(--color-secondary-soft) 0%, transparent 60%),
    radial-gradient(70% 60% at 8% 92%,  var(--color-green-soft) 0%, transparent 62%),
    linear-gradient(180deg, #FBFAF6 0%, var(--color-background) 100%);
  overflow: hidden;
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.hero h1 { margin-bottom: var(--space-s); }
.hero .lead { max-width: 46ch; margin-bottom: var(--space-m); }

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-border);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.hero__trust li { display: flex; align-items: center; gap: 0.5rem; }
.hero__trust li::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green);
  flex-shrink: 0;
}
.hero__trust li:nth-child(2)::before { background: var(--color-yellow); }
.hero__trust li:nth-child(3)::before { background: var(--color-pink); }

.hero__media { position: relative; }
.hero__media .media { box-shadow: var(--shadow-lift); }
/* Pequeño guiño al emblema: un círculo amarillo como la gota de luz */
.hero__spark {
  position: absolute;
  width: clamp(70px, 12vw, 118px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-yellow);
  opacity: 0.85;
  bottom: 7%; left: -34px;
  z-index: -1;
}

/* ------------------------------------------------------------ 10. PILARES */
.pillars {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.pillar { position: relative; padding-left: 4.25rem; }
.pillar__icon {
  position: absolute;
  left: 0; top: 2px;
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 50% 14%;
  background: var(--color-secondary-soft);
  color: var(--color-secondary-dark);
}
.pillar:nth-child(2) .pillar__icon { background: var(--color-green-soft); color: #4E7C39; }
.pillar:nth-child(3) .pillar__icon { background: var(--color-pink-soft);  color: var(--color-pink); }
.pillar__icon svg { width: 24px; height: 24px; }
.pillar h3 { font-size: var(--step-1); margin-bottom: 0.4rem; }
.pillar p { color: var(--color-text-muted); font-size: 0.98rem; }

/* ------------------------------------------------- 11. MISIÓN Y VISIÓN */
.purpose {
  display: grid;
  gap: var(--space-m);
  margin-top: var(--space-l);
}
.purpose__card {
  position: relative;
  padding: var(--space-l) var(--space-m) var(--space-m);
  background: var(--color-surface);
  border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 30%;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.purpose__card::before {
  content: "";
  position: absolute;
  top: -70px; right: -70px;
  width: 190px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  opacity: 0.75;
}
.purpose__card:nth-child(2)::before { background: var(--color-green-soft); }
.purpose__card > * { position: relative; }
.purpose__card h3 { margin-bottom: var(--space-s); }

/* Marca de contenido pendiente — visible y fácil de encontrar */
.todo {
  display: block;
  padding: 1rem 1.15rem;
  border: 1.5px dashed var(--color-secondary);
  border-radius: var(--radius-m);
  background: var(--color-secondary-soft);
  color: var(--color-secondary-dark);
  font-size: 0.95rem;
  line-height: 1.55;
}
.todo strong { font-weight: 700; letter-spacing: 0.04em; }

/* --------------------------------------------------------- 12. EQUIPO */
.team {
  display: grid;
  gap: var(--space-l) var(--space-m);
  margin-top: var(--space-l);
}
.team__member { text-align: left; }
.team__member .media { margin-bottom: var(--space-s); box-shadow: var(--shadow-soft); }
.team__role {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary-dark);
  margin-bottom: 0.35rem;
}
.team__member h3 { font-size: var(--step-1); margin-bottom: 0.6rem; }
.team__member p { font-size: 0.97rem; color: var(--color-text-muted); }

/* Credenciales del equipo: legibles sin convertirse en un muro de texto */
.team__intro {
  font-size: 0.97rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-s);
}
/* Un solo tamaño y un solo color para toda la ficha: se lee como un
   texto continuo, no como tres estilos distintos apilados. */
.team__registry {
  display: block;
  font-size: 0.97rem;
  font-weight: 400;
  color: var(--color-text-muted);
}
.team__creds {
  display: grid;
  gap: 0.55rem;
  padding-top: var(--space-s);
  border-top: 1px solid var(--color-border);
}
.team__creds li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--color-text-muted);
}
.team__creds li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-green-light);
}

/* ------------------------------------------------- 13. BIENESTAR INTEGRAL */
.dimensions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: var(--space-m);
}
/* Deliberadamente NO es una grilla de tarjetas: son etiquetas orgánicas,
   para que no se lea como una lista clínica. */
.dimension {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.3rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  box-shadow: 0 2px 6px rgba(35, 42, 64, 0.04);
}
.dimension::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--color-secondary);
}
.dimension:nth-child(2)::before { background: var(--color-green); }
.dimension:nth-child(3)::before { background: var(--color-pink); }
.dimension:nth-child(4)::before { background: var(--color-yellow); }
.dimension:nth-child(5)::before { background: var(--color-secondary-dark); }
.dimension:nth-child(6)::before { background: var(--color-primary-light); }
.dimension:nth-child(7)::before { background: var(--color-green-light); }

.discipline {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding-block: var(--space-l);
}
.discipline + .discipline { border-top: 1px solid var(--color-border); }
.discipline__body h3 { margin-bottom: 0.4rem; }
.discipline__sub {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  color: var(--color-secondary-dark);
  margin-bottom: var(--space-s);
}

/* Vinculación universitaria — sin logos ni nombres de instituciones */
.link-network {
  position: relative;
  padding: var(--space-l) var(--space-m);
  border-radius: var(--radius-l);
  background: linear-gradient(140deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
.link-network h3 { color: #fff; }
.link-network p { color: var(--color-text-on-dark-mut); }
.link-network__svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  opacity: 0.28;
  pointer-events: none;
}
.link-network__inner { position: relative; z-index: 1; max-width: 60ch; }
.link-network__tags {
  display: flex; flex-wrap: wrap; gap: 0.6rem;
  margin-top: var(--space-m);
}
.link-network__tags li {
  padding: 0.45rem 1rem;
  border: 1px solid rgba(244, 246, 251, 0.3);
  border-radius: var(--radius-pill);
  font-size: 0.9rem;
  color: var(--color-text-on-dark);
}

/* Declaración de marca */
.statement {
  text-align: center;
  padding-block: var(--space-l);
}
.statement p:first-child {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.25;
  color: var(--color-primary-dark);
  max-width: 20ch;
  margin-inline: auto;
}
.statement p:last-child {
  margin-top: var(--space-s);
  max-width: 52ch;
  margin-inline: auto;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------- 14. MOSAICOS */
/* Composición asimétrica, no una grilla uniforme */
.mosaic {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-l);
}

/* Lo que incluye la mensualidad: una grilla de ítems escaneable de un
   vistazo. Sin descripciones, porque lo que importa es el listado. */
.included {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--space-l);
}
.included li {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 60px;
  padding: 0.9rem 1.2rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  font-weight: 500;
  color: var(--color-primary-dark);
  box-shadow: 0 1px 3px rgba(35, 42, 64, 0.03);
}
.included svg {
  width: 22px; height: 22px;
  flex-shrink: 0;
  color: var(--color-green-dark);
}
@media (min-width: 620px) { .included { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .included { grid-template-columns: repeat(3, 1fr); } }

/* Sin esto, una pieza del mosaico sin fotografía dentro colapsa a cero de
   alto: los marcadores van posicionados en absoluto y no aportan altura.
   Solo aplica en una columna: desde 620 px las filas de la grilla ya dan
   la altura, y forzar aquí una proporción hace que las piezas de dos
   columnas se salgan de su fila e invadan la sección siguiente. */
@media (max-width: 619px) {
  .mosaic > *:not([class*="ratio-"]) { aspect-ratio: 3 / 2; }
}

/* Mosaico por defecto. Las filas se dimensionan por la proporción de cada
   pieza, no con un alto fijo: con alto fijo, las piezas que ocupan dos
   columnas quedaban más altas que su fila y se montaban sobre la de abajo. */
@media (min-width: 860px) {
  .mosaic:not(.mosaic--editorial) { grid-auto-rows: auto; }
  .mosaic:not(.mosaic--editorial) > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic:not(.mosaic--editorial) > :nth-child(2),
  .mosaic:not(.mosaic--editorial) > :nth-child(3) { aspect-ratio: 3 / 2; }
  .mosaic:not(.mosaic--editorial) > :nth-child(4) { grid-column: span 2; aspect-ratio: 12 / 5; }
  .mosaic:not(.mosaic--editorial) > :nth-child(5) { aspect-ratio: auto; }
}

/* Composición editorial: una pieza vertical alta manda y el resto la
   acompaña. Se usa cuando la fotografía principal es de formato retrato. */
@media (min-width: 620px) {
  .mosaic.mosaic--editorial { grid-auto-rows: auto; }
  .mosaic.mosaic--editorial > .m-tall { aspect-ratio: 4 / 5; }
  .mosaic.mosaic--editorial > .m-wide { grid-column: span 2; aspect-ratio: 5 / 2; }
}
@media (min-width: 860px) {
  /* Tres columnas de igual altura: una pieza vertical, dos apiladas en el
     medio y otra vertical al final. La proporción 4:5 de la primera es la
     que fija la altura de las dos filas. */
  .mosaic.mosaic--editorial > .m-tall  { grid-column: 1; grid-row: 1 / span 2; }
  .mosaic.mosaic--editorial > :nth-child(2) { grid-column: 2; grid-row: 1; }
  .mosaic.mosaic--editorial > :nth-child(3) { grid-column: 2; grid-row: 2; }
  .mosaic.mosaic--editorial > .m-wide  { grid-column: 3; grid-row: 1 / span 2; }
  .mosaic.mosaic--editorial > :not(.m-tall) { aspect-ratio: auto; }
}

/* Nota aclaratoria dentro de una sección: información que conviene dejar
   dicha sin que compita con el texto principal. */
.note {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  max-width: 64ch;
  margin-top: var(--space-m);
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--color-secondary);
  border-radius: 0 var(--radius-m) var(--radius-m) 0;
  background: var(--color-surface);
  font-size: 0.97rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}
.note svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-secondary-dark);
}
.note strong { color: var(--color-text); font-weight: 500; }

/* --------------------------------------------------------- 15. FILOSOFÍA */
.philosophy {
  position: relative;
  padding-block: var(--space-2xl);
  background:
    radial-gradient(80% 70% at 50% 0%, rgba(108, 180, 180, 0.35) 0%, transparent 65%),
    linear-gradient(170deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-on-dark);
  text-align: center;
  overflow: hidden;
}
.philosophy h2 { color: #fff; max-width: 16ch; margin-inline: auto; }
.philosophy p {
  margin-top: var(--space-m);
  max-width: 54ch;
  margin-inline: auto;
  font-size: var(--step-1);
  color: var(--color-text-on-dark-mut);
}

/* ------------------------------------------------------ 16. TESTIMONIOS */
.testimonials { display: grid; gap: var(--space-m); margin-top: var(--space-l); }
.testimonial {
  position: relative;
  padding: var(--space-m);
  padding-top: calc(var(--space-m) + 1.25rem);
  background: var(--color-surface);
  border-radius: var(--radius-l) 30% var(--radius-l) var(--radius-l);
  box-shadow: var(--shadow-soft);
}
.testimonial::before {
  content: "\201C";
  position: absolute;
  top: 0.4rem; left: var(--space-m);
  font-family: var(--font-display);
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-secondary-light);
}
.testimonial__author { margin-top: var(--space-s); display: flex; align-items: center; gap: 0.85rem; }
.testimonial__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-sand);
  flex-shrink: 0;
}
.testimonial__author strong { display: block; font-size: 0.98rem; }
.testimonial__author span { font-size: var(--step--1); color: var(--color-text-muted); }

/* -------------------------------------------------------------- 17. FAQ */
.faq { margin-top: var(--space-l); border-top: 1px solid var(--color-border); }
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  width: 100%;
  min-height: 68px;
  padding: 1.1rem 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--color-primary-dark);
}
.faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--color-secondary-soft);
  transition: background-color 0.3s var(--ease), transform 0.3s var(--ease);
}
.faq__icon::before, .faq__icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 2px;
  border-radius: 2px;
  background: var(--color-secondary-dark);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease);
}
.faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__icon { background: var(--color-primary); }
.faq__q[aria-expanded="true"] .faq__icon::before,
.faq__q[aria-expanded="true"] .faq__icon::after { background: #fff; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) rotate(0deg); }

.faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--ease);
}
.faq__a > div { overflow: hidden; }
.faq__a[data-open="true"] { grid-template-rows: 1fr; }
.faq__a p, .faq__a .todo { margin-bottom: 1.4rem; max-width: 68ch; color: var(--color-text-muted); }

/* Lista dentro de una respuesta del FAQ */
.faq__list {
  display: grid;
  gap: 0.5rem;
  margin: var(--space-s) 0 1.4rem;
}
.faq__list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--color-text-muted);
}
.faq__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--color-green);
}

/* El FAQ y el cierre comparten el mismo fondo crema. Sin un cambio de color
   entre ambos, los dos espaciados se suman y se leen como un vacío: aquí se
   reducen a poco menos de la mitad, manteniendo el aire pero sin el hueco. */
#faq { padding-bottom: clamp(3rem, 2.2rem + 3vw, 4.5rem); }

/* --------------------------------------------------------- 18. CTA FINAL */
.final-cta {
  position: relative;
  /* Menos aire arriba: comparte fondo con el FAQ y los dos espaciados se sumaban */
  padding-top: clamp(3rem, 2.2rem + 3vw, 4.5rem);
  padding-bottom: var(--space-2xl);
  background: var(--color-background-warm);
  text-align: center;
  overflow: hidden;
}
.final-cta .btn-row { justify-content: center; margin-top: var(--space-m); }
.final-cta p { max-width: 50ch; margin-inline: auto; margin-top: var(--space-s); }

/* --------------------------------------------------------- 19. CONTACTO */
.contact { display: grid; gap: var(--space-l); margin-top: var(--space-l); }

.contact__list { display: grid; gap: 1.1rem; }
.contact__item { display: flex; gap: 1rem; align-items: flex-start; }
.contact__item svg { width: 22px; height: 22px; color: var(--color-secondary-dark); flex-shrink: 0; margin-top: 3px; }
.contact__item dt {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.15rem;
}
.contact__item dd { margin: 0; font-weight: 500; }
.contact__item a:hover { color: var(--color-primary); text-decoration: underline; }

/* Bloque de contacto por WhatsApp: reemplaza al formulario. La residencia
   prefiere que las familias escriban directo. */
.wa-panel {
  position: relative;
  padding: var(--space-l) var(--space-m);
  background: var(--color-surface);
  border-radius: var(--radius-l) var(--radius-l) var(--radius-l) 30%;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.wa-panel::before {
  content: "";
  position: absolute;
  top: -80px; right: -80px;
  width: 220px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--color-green-soft);
}
.wa-panel > * { position: relative; }

.wa-panel__icon {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: var(--space-s);
  border-radius: 50% 50% 50% 14%;
  background: var(--color-green-dark);
  color: #fff;
}
.wa-panel__icon svg { width: 30px; height: 30px; }

.wa-panel h3 { margin-bottom: 0.5rem; }
.wa-panel > p { color: var(--color-text-muted); max-width: 42ch; }

.wa-panel__actions {
  display: grid;
  gap: 0.75rem;
  margin-top: var(--space-m);
}
.wa-panel__actions .btn { width: 100%; }

.wa-panel__alt {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--color-text-muted);
}
.wa-panel__alt a { font-weight: 500; color: var(--color-primary); }
.wa-panel__alt a:hover { text-decoration: underline; }

@media (min-width: 520px) {
  .wa-panel { padding: var(--space-l); }
  .wa-panel__actions { grid-auto-flow: column; grid-auto-columns: max-content; }
  .wa-panel__actions .btn { width: auto; }
}

/* ------------------------------------------------ 19b. PÁGINAS LEGALES */
.legal { padding-block: calc(var(--nav-h) + var(--space-xl)) var(--space-2xl); }
.legal__head { margin-bottom: var(--space-l); }
.legal__head h1 { font-size: var(--step-4); margin-bottom: var(--space-s); }
.legal__meta {
  display: flex; flex-wrap: wrap; gap: 0.5rem var(--space-m);
  padding-top: var(--space-s); margin-top: var(--space-s);
  border-top: 1px solid var(--color-border);
  font-size: var(--step--1); color: var(--color-text-muted);
}

/* Índice de contenidos */
.legal__toc {
  padding: var(--space-m);
  margin-bottom: var(--space-xl);
  background: var(--color-background-warm);
  border-radius: var(--radius-l);
}
.legal__toc h2 {
  font-family: var(--font-body); font-size: var(--step--1);
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-s);
}
.legal__toc ol { counter-reset: toc; display: grid; gap: 0.45rem; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 0.7rem; padding: 0.2rem 0; font-size: 0.97rem; }
.legal__toc a::before {
  content: counter(toc) "."; color: var(--color-secondary-dark);
  font-variant-numeric: tabular-nums; min-width: 1.6rem;
}
.legal__toc a:hover { color: var(--color-primary); text-decoration: underline; }

.legal section { margin-bottom: var(--space-xl); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.legal h2 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.legal h3 { font-size: var(--step-1); margin: var(--space-m) 0 0.5rem; }
.legal p, .legal li { color: var(--color-text-muted); }
.legal p + p { margin-top: var(--space-s); }
.legal ul { display: grid; gap: 0.6rem; margin-top: var(--space-s); }
.legal ul li { position: relative; padding-left: 1.3rem; }
.legal ul li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary);
}
.legal strong { color: var(--color-text); font-weight: 500; }
.legal a:not(.btn) { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Tabla de datos y plazos */
.legal__table { width: 100%; margin-top: var(--space-s); border-collapse: collapse; font-size: 0.95rem; }
.legal__table th, .legal__table td {
  padding: 0.8rem 0.9rem; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--color-border);
}
.legal__table th { color: var(--color-text); font-weight: 500; background: var(--color-background-warm); }
.legal__table td { color: var(--color-text-muted); }
.legal__scroll { overflow-x: auto; margin-top: var(--space-s); }

/* Bloque destacado: avisos importantes */
.legal__note {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  border-left: 4px solid var(--color-secondary);
  background: var(--color-secondary-soft);
}
.legal__note p, .legal__note li { color: var(--color-primary-dark); }
.legal__note--warn { border-left-color: var(--color-yellow); background: var(--color-yellow-soft); }

/* ----------------------------------------------------------- 20. FOOTER */
.footer {
  background: var(--color-primary-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-xl) var(--space-m);
}
/* El logo es a color: va sobre un panel claro para no alterarlo */
.footer__logo-panel {
  display: inline-flex;
  padding: 1.1rem 1.5rem;
  background: var(--color-background);
  border-radius: var(--radius-m);
}
.footer__logo-panel img { height: 54px; width: auto; }

.footer__banner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
  padding: var(--space-m);
  margin-bottom: var(--space-xl);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-l);
}
.footer__banner h2 { color: #fff; font-size: var(--step-2); }

.footer__grid { display: grid; gap: var(--space-l); }
.footer h3 {
  color: var(--color-secondary-light);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-s);
}
.footer p, .footer li, .footer a { color: var(--color-text-on-dark-mut); font-size: 0.96rem; }
.footer a:hover { color: #fff; text-decoration: underline; }
.footer__nav li + li { margin-top: 0.6rem; }

/* Los botones del pie no deben heredar el color de texto del footer:
   la regla .footer a pisaba el blanco propio del botón. */
.footer .btn--whatsapp { color: #fff; }
.footer .btn--outline-light { color: var(--color-text-on-dark); }
.footer .btn--instagram { color: #fff; }
.footer__social { display: flex; gap: 0.7rem; margin-top: var(--space-s); }
.footer .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.footer .icon-btn:hover { background: #fff; color: var(--color-primary-dark); border-color: #fff; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem var(--space-m);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: var(--step--1);
}
.footer__bottom ul { display: flex; flex-wrap: wrap; gap: var(--space-s); }

/* ------------------------------------------------ 21. WHATSAPP FLOTANTE */
.wa-float {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 90;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  border-radius: var(--radius-pill);
  background: var(--color-green-dark);
  color: #fff;
  box-shadow: 0 6px 16px rgba(35, 42, 64, 0.18), 0 0 0 0 rgba(78, 124, 57, 0.5);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), width 0.3s var(--ease);
  animation: wa-pulse 3.4s ease-out infinite;
}
.wa-float svg { width: 30px; height: 30px; }
.wa-float span { display: none; }
.wa-float:hover { transform: scale(1.06); }
/* Oculto hasta pasar el hero, y al llegar al footer para no tapar el cierre */
.wa-float[data-visible="false"] {
  opacity: 0;
  transform: scale(0.8) translateY(12px);
  pointer-events: none;
}

@keyframes wa-pulse {
  0%       { box-shadow: 0 6px 16px rgba(35,42,64,0.18), 0 0 0 0 rgba(78,124,57,0.45); }
  55%, 100%{ box-shadow: 0 6px 16px rgba(35,42,64,0.18), 0 0 0 20px rgba(78,124,57,0); }
}

/* -------------------------------------------------------- 22. ANIMACIÓN */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal[data-visible="true"] { opacity: 1; transform: none; }

/* ======================================================================= */
/*                          23. RESPONSIVE                                  */
/*  Construido de móvil hacia arriba: cada corte reorganiza la composición, */
/*  no se limita a escalar.                                                 */
/* ======================================================================= */

/* --- Móvil pequeño: el lockup no cabe, se usa sólo el emblema --- */
@media (max-width: 420px) {
  .nav__logo .logo-lockup { display: none; }
  .nav__logo .logo-mark { display: block; height: 44px; }
  .nav__actions .btn span { display: none; }
}

/* --- Tablet vertical --- */
@media (min-width: 620px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
  .purpose { grid-template-columns: repeat(2, 1fr); }
  .testimonials { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(150px, auto);
  }
  .mosaic:not(.mosaic--editorial) > :nth-child(1) { grid-column: span 2; }
  .form { padding: var(--space-l); }
}

/* --- Tablet horizontal --- */
@media (min-width: 860px) {
  .team { grid-template-columns: repeat(3, 1fr); }
  /* Composición asimétrica: la del centro sube, las laterales bajan */
  .team__member:nth-child(2) { transform: translateY(-2.5rem); }
  .pillars { grid-template-columns: repeat(3, 1fr); }
  .discipline { grid-template-columns: 1fr 1fr; gap: var(--space-l); }
  .discipline--reverse .discipline__media { order: -1; }
  .contact { grid-template-columns: 0.85fr 1.15fr; gap: var(--space-xl); }
  .footer__banner { grid-template-columns: 1fr auto; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-xl); }
  .mosaic {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 200px;
  }
  .mosaic:not(.mosaic--editorial) > :nth-child(1) { grid-column: span 2; grid-row: span 2; }
  .mosaic:not(.mosaic--editorial) > :nth-child(4) { grid-column: span 2; }
  .statement p:first-child { font-size: var(--step-4); }
}

/* --- Escritorio: aparece la navegación horizontal --- */
@media (min-width: 1000px) {
  :root { --nav-h: 88px; }
  .nav__toggle { display: none; }
  .nav__mobile { display: none; }
  .nav__links { display: flex; }
  .nav__cta-desktop { display: inline-flex; }
  .nav__social { display: flex; gap: 0.5rem; }
  .nav__logo img { height: 62px; }
  .nav--solid .nav__logo img { height: 52px; }

  .hero {
    padding-top: calc(var(--nav-h) + var(--space-xl));
    padding-bottom: var(--space-2xl);
  }
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-xl); }

  .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xl); align-items: center; }
  .split--wide-left { grid-template-columns: 1.15fr 0.85fr; }
  .split--wide-right { grid-template-columns: 0.85fr 1.15fr; }

  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

@media (min-width: 1240px) {
  .hero h1 { font-size: clamp(3.2rem, 2rem + 3.6vw, 5.2rem); }
  .wa-float { width: auto; padding-inline: 1.35rem; gap: 0.6rem; }
  .wa-float span { display: inline; font-weight: 500; font-size: 0.98rem; }
}

/* ------------------------------------------- 24. PREFERENCIAS DE USUARIO */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .team__member:nth-child(2) { transform: none; }
}

@media (prefers-contrast: more) {
  :root { --color-text-muted: #414A61; --color-border: #B9B2A4; }
}

@media print {
  .nav, .wa-float, .nav__mobile { display: none; }
  body { background: #fff; }
}