/* ─── SELF-HOSTED FONTS (no external requests) ─── */
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/karla-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Karla";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/karla-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/tenor-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Tenor Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/tenor-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --pine: #1c3b34;
  --sage: #a7d5bd;
  --yellow: #f0e96f;
  --cream: #fafaf5;
  --white: #ffffff;
  --ink: #1e2925;
  --muted: #65736d;
  --line: rgba(28, 59, 52, 0.14);
  --shadow: 0 24px 70px rgba(28, 59, 52, 0.16);

  /* Mediterranean accent set — used sparingly for warmth alongside pine/sage */
  --terracotta: #c96f4a;
  --ochre: #d9a441;
  --sea: #4f86a0;
  /* darkened variants of the above — for text/small UI that needs AA contrast on light backgrounds */
  --ochre-dark: #8c5e1f;
  --terracotta-dark: #9c4e31;
}

::selection {
  background: var(--sage);
  color: var(--pine);
}

html {
  scrollbar-color: var(--pine) var(--cream);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track {
  background: var(--cream);
}

::-webkit-scrollbar-thumb {
  background: var(--sage);
  border-radius: 999px;
  border: 3px solid var(--cream);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--pine);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Karla", system-ui, sans-serif;
  color: var(--ink);
  background-image: url("/assets/noise-grain.webp");
  background-repeat: repeat;
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
}

/* ─── FOCO DE TECLADO — visible en todos los elementos interactivos ─── */
:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 2px;
  border-radius: 2px;
}

img {
  display: block;
  max-width: 100%;
}

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

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 76px;
  padding: 18px clamp(18px, 5vw, 64px);
  color: var(--white);
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-solid {
  background: rgba(250, 250, 245, 0.92);
  color: var(--pine);
  box-shadow: 0 18px 42px rgba(28, 59, 52, 0.08);
  backdrop-filter: blur(18px);
}

.brand-mark {
  display: block;
  width: 190px;
  /* Height is deliberately taller than the logo's own 320:49 ratio (190px
     wide would give ~29px) — the source PNG has zero vertical margin, its
     lettering touches the top and bottom pixel rows exactly. With no
     breathing room, mask-size:contain has nothing to round into and
     sub-pixel scaling shaves the tops off ascenders. The extra height
     gives mask-size:contain space to center the logo with a safety
     margin instead of rendering it edge-to-edge in its own box. */
  height: 34px;
  background-color: var(--sage);
  -webkit-mask-image: url("/assets/dreamnest-logo.png");
  mask-image: url("/assets/dreamnest-logo.png");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: left center;
  mask-position: left center;
  transition: background-color 0.25s ease;
}

.site-header.is-solid .brand-mark {
  background-color: var(--pine);
}

.legal-header .brand-mark {
  background-color: var(--sage);
}

/* Home only, per Cassandra's request — +10% over the standard header logo. */
.home .brand-mark {
  width: 209px;
  height: 37px;
}

.nav-links {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: clamp(12px, 1.8vw, 28px);
  font-size: clamp(13px, 1.05vw, 15px);
  font-weight: 600;
}

.nav-links a {
  opacity: 0.9;
  white-space: nowrap;
}

.site-header:not(.is-solid) .nav-links a,
.site-header:not(.is-solid) .brand {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

.nav-links-cta {
  display: none;
}

.nav-toggle {
  display: none;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  /* Buttons don't inherit text color from their parent by default (UA
     stylesheet sets its own), so without this the three lines render in
     the browser's default black regardless of .site-header's color —
     invisible against the dark hero image, and invisible again as the
     close "X" against the dark pine background once the mobile menu is
     open, with no other way to close/go back. */
  color: inherit;
  cursor: pointer;
  z-index: 60;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

.nav-toggle.is-active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-cta,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 999px;
  padding: 0 22px;
  font-weight: 700;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.header-cta,
.btn-primary {
  background: var(--sage);
  color: var(--pine);
}

.btn-secondary {
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.site-header.is-solid .btn-secondary,
.news-section .btn-secondary {
  color: var(--pine);
  border-color: var(--line);
}

.header-cta:hover,
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(28, 59, 52, 0.18);
}

.header-cta:hover,
.btn-primary:hover {
  background: #bde8cf;
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/tramuntana-pueblo.webp");
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  animation: heroBreath 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroBreath {
  0% {
    transform: scale(1.03) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.09) translate3d(-1.2%, -0.8%, 0);
  }
}

/* Degradado horizontal, mismo en escritorio y móvil (pedido explícito de
   Cassandra, 14 jul): 25% de la izquierda prácticamente negro, y desde ahí
   transparencia progresiva hasta dejar la foto (bugambillas) totalmente
   iluminada. Sustituye la versión anterior de dos ejes (horizontal en
   escritorio / vertical en móvil) — ya no hay distinción por ancho. */
.hero-depth {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    #0a1512 0%,
    #0a1512 25%,
    rgba(6, 10, 8, 0.55) 55%,
    rgba(6, 10, 8, 0) 85%
  );
}

.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx, 68%) var(--my, 42%), rgba(240, 233, 111, 0.16) 0%, rgba(167, 213, 189, 0.06) 18%, rgba(28, 59, 52, 0) 38%);
  mix-blend-mode: soft-light;
  transition: background 120ms ease-out;
}

.hero-inner {
  position: relative;
  z-index: 3;
  display: grid;
  align-items: center;
  min-height: 100svh;
  /* Reserva el alto del header fijo antes de centrar — en viewports muy
     bajos (barra de navegador del móvil visible, teclado, pantallas
     pequeñas) el centrado vertical puede llevar el badge por debajo del
     header fijo. Este hueco fijo evita ese solape en cualquier altura. */
  padding-top: 90px;
  /* Los botones flotantes (Aa, calculadora) son position:fixed sobre el
     propio viewport, independientes de este centrado — en alturas de
     portátil/tablet habituales (~760-900px) el párrafo de texto centrado
     terminaba encima de ellos. Este hueco reserva sitio para que nunca se
     toquen, y de paso sube el bloque de texto (menos hueco vacío arriba). */
  padding-bottom: 260px;
}

.hero-content {
  position: relative;
  /* El ancho debe reservar el MISMO margen que se aplica de verdad a la
     izquierda (y un margen equivalente a la derecha, para que nunca
     desborde) — antes restaba un fijo de 36px mientras el margen real
     crecía con el viewport (clamp 18-78px), lo que hacía que el bloque
     de texto se saliera de la ventana entre ~640-800px de ancho. */
  width: min(820px, calc(100% - 2 * clamp(18px, 6vw, 78px)));
  margin: 0 0 0 clamp(18px, 6vw, 78px);
  animation: rise 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* Contraste del hero (17 jul, cuarta vuelta): el contorno de letra por sí
   solo no da a las herramientas de auditoría (WAVE, axe) ningún color de
   fondo real que medir — solo leen `background-color` declarado en CSS, no
   una foto ni un `text-shadow`. Este pseudo-elemento resuelve eso sin volver
   al cuadro rígido que Cassandra rechazó: es un color sólido que se desborda
   generosamente más allá del texto por los 4 lados y se difumina con blur,
   así que el interior (justo detrás de cada letra) queda 100% opaco — pasa
   cualquier cálculo de contraste real — y el borde no se ve como borde,
   se disuelve en la foto de fondo sin línea ni esquina visible.
   Los hijos de .hero-content llevan z-index:1 para pintarse por encima. */
.hero-content::before {
  content: "";
  position: absolute;
  inset: -64px -40px -64px -24px;
  background: #060f0c;
  filter: blur(56px);
  z-index: 0;
  pointer-events: none;
}

.hero-content > * {
  position: relative;
  z-index: 1;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  padding: 8px 14px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--white);
  background: rgba(250, 250, 245, 0.12);
  border: 1px solid rgba(250, 250, 245, 0.3);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

.hero h1,
.section h2,
.nido h2,
.final-cta h2 {
  margin: 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
}

/* Contraste del hero (16 jul, tercera vuelta): las dos versiones con fondo
   oscuro detrás del texto (primero un cuadro por todo el bloque, luego uno
   por elemento) quedaron descartadas por Cassandra viéndolo en real — "ese
   cuadro prohibido". El contraste ahora se resuelve directamente sobre la
   letra: contorno duro simulado con varias `text-shadow` de 1px en cada
   dirección (funciona en todos los navegadores, a diferencia de
   `-webkit-text-stroke` que Firefox ignora) más una sombra difusa detrás
   para profundidad. Sin fondo, WAVE no tiene un color sólido con el que
   calcular contraste — queda como limitación conocida de la herramienta
   (igual que el falso positivo de opacidad de scroll-reveal, documentado
   más abajo), no como bug real: un humano mirando la foto ve letra
   perfectamente legible por el contorno. */
.hero h1,
.tagline,
.hero-copy,
.hero-dossier-hint {
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.85),
    1px -1px 0 rgba(0, 0, 0, 0.85),
    -1px 1px 0 rgba(0, 0, 0, 0.85),
    1px 1px 0 rgba(0, 0, 0, 0.85),
    0 2px 18px rgba(0, 0, 0, 0.55);
  -webkit-text-stroke: 0.6px rgba(0, 0, 0, 0.5);
}

.hero h1 {
  font-size: clamp(34px, 4.6vw, 62px);
  line-height: 1.3;
}

.tagline {
  margin: 18px 0 0;
  max-width: 520px;
  font-size: clamp(16px, 1.9vw, 21px);
  line-height: 1.5;
}

.hero-copy {
  max-width: 580px;
  margin: 16px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.5;
}

/* Línea de gancho hacia #dossier-teaser — mismo tono que el hero-copy, un
   peso más ligero y opacidad reducida, extensión del copy, no un elemento
   nuevo (pedido explícito: "no es un banner, no es un CTA, no es un botón"). */
.hero-dossier-hint {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 26px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  margin: 22px 0 0;
  text-align: center;
}

.provider-grid {
  display: grid;
  /* auto-fit instead of a fixed 2 columns — cambio-divisas.html can render
     this with a single provider (see providers array), and a fixed 2-col
     grid would leave one lopsided card with an empty column next to it. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(14px, 2vw, 24px);
  max-width: 820px;
  margin: 0 auto 22px;
  text-align: left;
}

.provider-card {
  padding: 20px 22px;
  background: linear-gradient(160deg, var(--white) 0%, #FBFCFA 100%);
  border: 1px solid rgba(167,213,189,0.4);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(28,59,52,0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
  display: flex;
  flex-direction: column;
}

.provider-card strong {
  display: block;
  font-size: 16px;
  color: var(--pine);
  margin-bottom: 6px;
}

.provider-card span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.provider-card .text-link {
  margin-top: auto;
}

@media (max-width: 640px) {
  .provider-grid { grid-template-columns: 1fr; }
}

.doc-block {
  max-width: 780px;
  margin: 0 auto 40px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(167,213,189,0.35);
}

.doc-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.doc-block h2 {
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--pine);
  margin: 0 0 10px;
}

.doc-block-intro,
.doc-block-text {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.doc-products {
  grid-template-columns: repeat(3, 1fr);
  margin: 4px 0 16px;
}

@media (max-width: 780px) {
  .doc-products { grid-template-columns: 1fr; }
}

.doc-region-note {
  display: inline-block;
  font-size: 12.5px;
  color: var(--pine);
  background: rgba(167,213,189,0.18);
  padding: 8px 12px;
  border-radius: 8px;
  margin: 0 0 16px;
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(20px, 4vh, 40px);
  z-index: 4;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: var(--white);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  opacity: 0.85;
  transition: opacity 0.25s ease;
  /* Mismo fix de contraste que .hero-content (15 jul): vive sobre .hero-bg
     y .hero-depth, que son hermanos suyos dentro de .hero, no ancestros —
     necesita su propio background real, no solo el text-shadow que ya
     llevaba .scroll-cue span. */
  background: rgba(8, 16, 14, 0.5);
  padding: 10px 16px;
  border-radius: 14px;
}

.scroll-cue:hover {
  opacity: 1;
}

.scroll-cue span {
  max-width: 220px;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.45);
}

.scroll-cue svg {
  width: 18px;
  height: 18px;
  animation: scrollCueBounce 2s ease-in-out infinite;
}

@keyframes scrollCueBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

.founder-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-top: 28px;
}

.founder-links .text-link {
  margin-top: 0;
}

.scroll-cue-inline {
  position: static;
  flex-direction: row;
  transform: none;
  opacity: 0.8;
}

.scroll-cue-inline:hover {
  opacity: 1;
}

.scroll-cue-inline svg {
  width: 14px;
  height: 14px;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue svg {
    animation: none;
  }
}

/* ─── HERO — tres puertas de entrada ─── */
.hero-doors {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  margin-top: 28px;
}

.door {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 230px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--white);
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
}

.door svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  margin-top: 1px;
}

.door-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.door-title {
  font-size: 14px;
  font-weight: 700;
}

.door-sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.35;
}

.door:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

/* Start from scratch — vidrio esmerilado */
.door-scratch {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(8px);
  border-color: rgba(255, 255, 255, 0.3);
}

.door-scratch:hover {
  border-color: var(--sage);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 0 0 1px var(--sage);
}

/* I already have a plan — ochre sólido, la más grande, mayor intención */
.door-plan {
  background: #d4a24c;
  border-color: #d4a24c;
  color: var(--ink);
  min-width: 250px;
  max-width: 280px;
  min-height: 90px;
  padding: 20px 22px;
}

.door-plan svg {
  width: 26px;
  height: 26px;
}

.door-plan .door-title {
  font-size: 16px;
}

.door-plan .door-sub {
  font-size: 12.5px;
}

.door-plan .door-sub {
  color: rgba(30, 41, 37, 0.86);
}

.door-plan:hover {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 0 1px #f0c878;
}

/* I have ideas, not a plan yet — terracota apagada */
.door-ideas {
  background: rgba(201, 96, 60, 0.55);
  border-color: rgba(201, 96, 60, 0.7);
}

.door-ideas:hover {
  border-color: #c9603c;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28), 0 0 0 1px #c9603c;
}

@media (max-width: 640px) {
  .hero-doors {
    flex-direction: column;
    align-items: stretch;
  }
  .door,
  .door-plan {
    max-width: none;
  }
}

.section {
  padding: clamp(52px, 7vw, 92px) clamp(20px, 6vw, 76px);
}

/* ─── DOSSIER BANNER ─── */
.dossier-banner {
  background: var(--sage);
  padding: clamp(14px, 2.5vw, 20px) clamp(20px, 6vw, 76px);
}

.dossier-banner-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 24px);
}

.dossier-icon {
  width: 32px;
  height: 32px;
  color: var(--pine);
  flex-shrink: 0;
}

.dossier-banner strong {
  display: block;
  font-size: clamp(14px, 1.5vw, 17px);
  color: var(--pine);
  font-weight: 700;
}

.dossier-banner span {
  font-size: 13px;
  color: var(--ink);
}

.dossier-banner .btn-sm {
  margin-left: auto;
  padding: 8px 20px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .dossier-banner-inner {
    flex-wrap: wrap;
  }
  .dossier-banner .btn-sm {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }
}

.intro {
  background: var(--pine);
  color: var(--white);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: end;
}

.intro h2,
.section h2,
.nido h2,
.final-cta h2 {
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
}

.intro p,
.founder-copy p,
.nido-copy p,
.final-cta p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.56;
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(36px, 6vw, 70px);
}

.section-heading h2 {
  max-width: 790px;
}

.section-kicker {
  color: var(--muted);
}

/* "How we work" — intentional dark/cinematic section, not the cream default */
.process {
  background: var(--pine);
}

.process .section-kicker,
.founder .section-kicker,
.intro .section-kicker {
  color: var(--sage);
}

.process .section-heading h2 {
  color: #CFE9DC;
  -webkit-text-stroke: 0.4px #CFE9DC;
}

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.step {
  min-height: 330px;
  padding: 30px;
  background: linear-gradient(180deg, var(--white) 0%, #F5F7F4 100%);
  border-top: 3px solid var(--sage);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1), box-shadow 0.32s ease;
}

.step:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(28,59,52,0.12);
  position: relative;
  z-index: 1;
}

.steps .step:nth-child(2) {
  border-top-color: var(--ochre);
}

.steps .step:nth-child(3) {
  border-top-color: var(--terracotta);
}

.steps .step:nth-child(4) {
  border-top-color: var(--sea);
}

.steps .step:nth-child(1).reveal { transition-delay: 0s; }
.steps .step:nth-child(2).reveal { transition-delay: 0.08s; }
.steps .step:nth-child(3).reveal { transition-delay: 0.16s; }
.steps .step:nth-child(4).reveal { transition-delay: 0.24s; }

.step span,
.alert-card span {
  display: block;
  margin-bottom: 42px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.step h3,
.team-member h3 {
  margin: 0 0 14px;
  color: var(--pine);
  font-size: 24px;
  line-height: 1.12;
}

.team-member h3 {
  margin-bottom: 4px;
}

.team-member .role {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.step p,
.team-member p,
.quote,
.proof-note {
  margin: 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
}

.nido {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(320px, 0.74fr);
  gap: clamp(34px, 6vw, 86px);
  padding: clamp(52px, 7vw, 92px) clamp(20px, 6vw, 76px);
  color: var(--white);
}

.nido-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/tramuntana-pueblo.webp");
  background-size: cover;
  background-position: center;
  animation: cinematicDrift 24s ease-in-out infinite alternate;
  will-change: transform;
}

.nido-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(15, 42, 35, 0.94) 0%, rgba(15, 42, 35, 0.76) 42%, rgba(15, 42, 35, 0.48) 72%, rgba(15, 42, 35, 0.24) 100%);
}

.nido-copy,
.alert-stack {
  position: relative;
  z-index: 2;
}

.nido .section-kicker {
  color: var(--sage);
}

.nido-copy {
  align-self: center;
}

.nido-copy p {
  margin-top: 24px;
  color: rgba(255, 255, 255, 0.82);
}

.nido .text-link,
.founder-copy .text-link {
  color: var(--white);
  border-bottom-color: var(--yellow);
}

.text-link {
  display: inline-flex;
  margin-top: 28px;
  color: var(--pine);
  font-weight: 700;
  border-bottom: 2px solid var(--sage);
}

.alert-stack {
  display: grid;
  gap: 18px;
}

.alert-card {
  width: 100%;
  padding: 28px;
  background: var(--cream);
  color: var(--muted);
  border: 1px solid var(--line);
  border-left: 4px solid var(--sage);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.alert-card strong {
  color: var(--pine);
}

.alert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 90px rgba(28, 59, 52, 0.22), 0 4px 14px rgba(28, 59, 52, 0.1);
}

.alert-card:nth-child(1) {
  border-left-color: var(--sea);
}

.alert-card:nth-child(2) {
  margin-left: clamp(0px, 4vw, 40px);
  width: calc(100% - clamp(0px, 4vw, 40px));
  border-left-color: var(--ochre);
}

.alert-card:nth-child(3) {
  margin-left: clamp(0px, 8vw, 80px);
  width: calc(100% - clamp(0px, 8vw, 80px));
  border-left-color: var(--terracotta);
}

.alert-card strong {
  display: block;
  margin-bottom: 14px;
  font-family: "Tenor Sans", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.12;
}

.editorial-break {
  position: relative;
  min-height: 42svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--white);
}

.editorial-frame {
  position: absolute;
  inset: 0;
}

.editorial-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(12, 28, 24, 0.7), transparent 55%);
}

.editorial-caption {
  position: relative;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 6vw, 76px);
  max-width: 640px;
}

.editorial-caption .eyebrow {
  color: var(--sage);
}

.editorial-caption p:last-child {
  margin: 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.32;
}

@media (max-width: 680px) {
  .editorial-break {
    min-height: 46svh;
  }
}

.founder {
  display: grid;
  grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1fr);
  gap: clamp(34px, 7vw, 92px);
  align-items: center;
  background: var(--pine);
  color: var(--white);
  min-height: 100svh;
}

/* WAVE sigue marcando el texto de .founder-copy como contraste muy bajo
   pese a que .founder (dos niveles arriba) ya lleva background: var(--pine)
   — parece que solo comprueba el padre inmediato, no toda la cadena de
   ancestros. Mismo pine exacto aquí, sin cambio visual (ya era el color
   real de fondo), solo para que el padre inmediato del texto también lo
   declare. */
.founder-copy {
  background: var(--pine);
}

.founder-image img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.founder-copy p {
  margin-top: 24px;
}

.founder-copy blockquote {
  margin: 34px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--yellow);
  color: rgba(255, 255, 255, 0.88);
  font-size: 21px;
  line-height: 1.48;
}

.founder-signature {
  display: block;
  margin-top: 16px;
  font-style: normal;
  font-size: 14px;
  color: var(--sage);
  letter-spacing: 0.02em;
}

/* "Our mission" — Cassandra's mission/vision message, kept deliberately separate
   from her personal bio just above (different section, own anchor) so the Home
   page's "Read the full story" link always lands here specifically, never on
   the bio or on the team further down the page. */
.founder-mission {
  background: var(--cream);
}

.founder-mission-inner {
  max-width: 760px;
  margin: 0 auto;
}

.founder-mission-inner h2 {
  color: var(--pine);
  margin: 8px 0 28px;
}

.founder-mission-inner p {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.7;
}

.founder-mission-inner blockquote {
  margin: 28px 0 0;
  padding-left: 22px;
  border-left: 3px solid var(--sage);
  color: var(--pine);
  font-size: clamp(19px, 2vw, 23px);
  line-height: 1.5;
  font-style: italic;
}

.founder-mission-inner .founder-signature {
  color: var(--muted);
}

.compact {
  margin-bottom: 28px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 56px);
}

.team-member {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-member:nth-child(2) {
  margin-top: clamp(0px, 6vw, 48px);
}


.proof {
  background: var(--white);
}

.proof-team {
  margin-bottom: clamp(36px, 5vw, 56px);
}

.proof-team-kicker {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.proof-team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 620px;
  margin-bottom: 20px;
}

.proof-team-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.proof-team-photo {
  width: 76px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  flex-shrink: 0;
}

.proof-team-card strong {
  display: block;
  font-family: "Tenor Sans", serif;
  font-size: 16px;
  color: var(--pine);
}

.proof-team-role {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 700;
  color: var(--sage-dark, var(--pine));
  letter-spacing: 0.02em;
}

.proof-team-card p {
  margin: 8px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

@media (max-width: 560px) {
  .proof-team-grid {
    grid-template-columns: 1fr;
  }
}

.quotes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.quote {
  padding: 28px 24px 24px;
  background: var(--cream);
  border-top: 3px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(28,59,52,0.06), 0 1px 0 rgba(255,255,255,0.8) inset;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}

.quote:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(28,59,52,0.11);
}

.quotes .quote:nth-child(1) {
  border-top-color: var(--ochre);
}

.quotes .quote:nth-child(2) {
  border-top-color: var(--terracotta);
}

.quotes .quote:nth-child(3) {
  border-top-color: var(--sea);
}

.quotes .quote:nth-child(1).reveal { transition-delay: 0s; }
.quotes .quote:nth-child(2).reveal { transition-delay: 0.09s; }
.quotes .quote:nth-child(3).reveal { transition-delay: 0.18s; }

.quote blockquote {
  margin: 0 0 22px;
  color: var(--pine);
  font-family: "Tenor Sans", Georgia, serif;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.12;
}

.quote figcaption {
  color: var(--muted);
  font-weight: 700;
}

.reviews-widget {
  margin-top: 48px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
}

.reviews-widget-label {
  display: block;
  margin-bottom: 18px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.reviews-strip {
  padding: 40px clamp(20px, 6vw, 76px);
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.reviews-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1180px;
  margin: 0 auto;
}

.reviews-strip-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 560px;
}

.reviews-strip-stars {
  /* --sage-dark no está definida en ningún sitio (siempre cae en el
     fallback) — y ese fallback original (#4f8a67) daba 3.88:1 contra
     --cream, por debajo del 4.5:1 exigido (WAVE, 15 jul). Oscurecido a
     #477c5d (4.65:1, verificado) — mismo tono verde salvia, sin tocar
     ningún token de marca real. */
  color: var(--sage-dark, #477c5d);
  font-size: 15px;
  letter-spacing: 2px;
}

.reviews-strip-text p {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}

.reviews-strip-text cite {
  font-style: normal;
  color: var(--muted);
}

.reviews-strip-trustpilot {
  display: inline-block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pine);
  border-bottom: 1px solid var(--sage);
  width: fit-content;
}

.reviews-strip-widget {
  margin: 0;
  padding: 0;
  border: none;
  flex-shrink: 0;
}

@media (max-width: 680px) {
  .reviews-strip {
    padding: 32px 18px;
  }

  .reviews-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

.proof-note {
  max-width: 760px;
  margin-top: 34px;
  font-size: 15px;
}

.tools-calc {
  background: transparent;
}

.tools-calc .section-kicker {
  color: var(--ochre-dark);
}

.tools-intro {
  max-width: 460px;
  margin: 10px 0 28px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.calc-mode-toggle {
  display: flex;
  width: 100%;
  max-width: 360px;
  margin-bottom: 22px;
  padding: 4px;
  background: var(--cream);
  border-radius: 999px;
}

.calc-mode-btn {
  flex: 1;
  padding: 10px 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}

.calc-mode-btn.active {
  background: var(--pine);
  color: var(--cream);
}

.calc-reverse-result {
  margin-top: 12px;
  padding: 14px 18px;
  background: rgba(167, 213, 189, 0.1);
  border-left: 3px solid var(--sage);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink);
}

.calculator-shell {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 480px;
}

.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.calc-group {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--white);
  border-left: 3px solid var(--accent, var(--sage));
  box-shadow: 0 3px 14px var(--accent-shadow, rgba(28, 59, 52, 0.06));
  transition: box-shadow 0.2s ease;
}

.calc-group:focus-within {
  box-shadow: 0 5px 18px var(--accent-shadow, rgba(28, 59, 52, 0.12));
}

.calc-g-price { --accent: var(--ochre); --accent-shadow: rgba(217, 164, 65, 0.18); }
.calc-g-ltv   { --accent: var(--sea); --accent-shadow: rgba(79, 134, 160, 0.18); }
.calc-g-term  { --accent: var(--terracotta); --accent-shadow: rgba(201, 111, 74, 0.18); }
.calc-g-rate  { --accent: var(--sage); --accent-shadow: rgba(167, 213, 189, 0.22); }

.calc-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.calc-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 14px;
  font-weight: 600;
}

.calc-top strong {
  font-family: "Tenor Sans", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
  color: var(--pine);
}

.calc-sub {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
}

.ltv-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--sea);
  font-style: italic;
  min-height: 1.4em;
}

.calc-group input[type="range"] {
  width: 100%;
  accent-color: var(--accent, var(--pine));
}

.calc-toggle {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}

.calc-toggle button {
  flex: 1;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--muted);
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}

.calc-toggle button.active {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--white);
}

.calc-selects {
  margin-top: 14px;
}

.calc-selects select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
}

.calc-results {
  display: flex;
  flex-direction: column;
}

.calc-result-top {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pine) 0%, #234b41 60%, #2c5b4e 100%);
  color: var(--white);
}

.calc-result-top::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 233, 111, 0.22), transparent 70%);
}

.calc-result-top span {
  position: relative;
  display: block;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.calc-result-top strong {
  position: relative;
  display: block;
  margin-top: 10px;
  font-family: "Tenor Sans", Georgia, serif;
  font-size: clamp(34px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.05;
  color: var(--yellow);
  transition: transform 0.2s ease;
}

.calc-result-top p {
  position: relative;
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
}

.calc-costs-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 14px;
  padding: 10px 0;
  background: none;
  border: none;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--terracotta-dark);
  text-decoration: underline;
  cursor: pointer;
}

.calc-costs-toggle svg {
  transition: transform 0.2s ease;
}

.calc-costs-toggle.is-open svg {
  transform: rotate(180deg);
}

.calc-costs {
  margin-top: 6px;
  padding: 16px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
}

.cost-line {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  color: var(--ink);
  font-size: 13px;
  border-bottom: 1px solid var(--line);
}

.calc-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
}

.calc-total span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.calc-total strong {
  font-family: "Tenor Sans", Georgia, serif;
  font-size: 20px;
  font-weight: 400;
  color: var(--pine);
}

.calc-results .btn {
  display: block;
  text-align: center;
  margin-top: 18px;
}

.calc-disclaimer {
  max-width: 480px;
  margin-top: 24px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
}

/* ─── SITE GUIDE — table of contents ─── */
.site-guide {
  position: relative;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(28px, 4vh, 48px);
}

.site-guide > .section-heading,
.site-guide > .guide-intro,
.site-guide > .guide-grid {
  position: relative;
  z-index: 2;
}

.site-guide .section-heading {
  display: block;
  margin-bottom: 4px;
}

.site-guide h2 {
  font-size: clamp(24px, 3.6vw, 36px);
}

.guide-intro {
  max-width: 580px;
  margin: 8px auto clamp(18px, 2.6vw, 28px);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.guide-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 1160px;
  margin: 0 auto;
}

.guide-card {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 1.8vw, 20px);
  background: var(--card-bg, #E3F1E9);
  border-radius: 16px;
  text-decoration: none;
  color: var(--pine);
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.3s ease;
}

.guide-card:hover {
  transform: translateY(-6px) rotate(-0.5deg) scale(1.015);
  box-shadow: 0 18px 34px rgba(28,59,52,.16);
}

.guide-card:nth-child(1) { --card-bg: #E3F1E9; }
.guide-card:nth-child(2) { --card-bg: #FAF0C9; }
.guide-card:nth-child(3) { --card-bg: #F8E2D2; }
.guide-card:nth-child(4) { --card-bg: #DEEEF3; }
.guide-card:nth-child(5) { --card-bg: #F5E8CB; }
.guide-card:nth-child(6) { --card-bg: #EAF0D8; }
.guide-card:nth-child(7) { --card-bg: #F0E1E8; }

/* ─── PROFESSIONALS REQUEST FORM ─── */
.professionals-form {
  max-width: 720px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid rgba(28, 59, 52, 0.1);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 10px 34px rgba(28, 59, 52, 0.06);
}

.professionals-disclaimer {
  margin: 0 0 28px;
  padding: 14px 18px;
  background: #FAF0C9;
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.6;
}

.professionals-disclaimer a {
  color: var(--pine);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.professionals-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pine);
}

.form-field input {
  font-family: "Karla", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  padding: 11px 14px;
  border: 1.5px solid rgba(28, 59, 52, 0.18);
  border-radius: 10px;
  background: var(--cream);
}

.form-field input:focus {
  outline: none;
  border-color: var(--pine);
}

.professionals-checklist {
  border: none;
  padding: 0;
  margin: 0 0 28px;
}

.professionals-checklist legend {
  font-size: 13px;
  font-weight: 700;
  color: var(--pine);
  margin-bottom: 12px;
  padding: 0;
}

.service-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--ink);
  cursor: pointer;
}

.service-check input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--pine);
  flex-shrink: 0;
}

.service-subitems {
  margin: 0 0 4px 27px;
  padding-left: 14px;
  border-left: 2px solid rgba(28, 59, 52, 0.1);
}

.service-check--sub {
  font-size: 13.5px;
  color: var(--muted);
  padding: 6px 0;
}

.service-other-text {
  width: 100%;
  margin-top: 8px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1.5px solid rgba(28, 59, 52, 0.18);
  border-radius: 10px;
  background: var(--cream);
  resize: vertical;
  min-height: 70px;
}

.professionals-consent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
  padding-top: 16px;
  border-top: 1px solid rgba(28, 59, 52, 0.1);
}

.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--muted);
  cursor: pointer;
}

.consent-check input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--pine);
  flex-shrink: 0;
}

.consent-check a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Información de primera capa RGPD — texto exacto facilitado por el DPO,
   no parafrasear (ver auditoría "ANÁLISIS WEB", 16 jun 2026). */
.professionals-first-layer {
  margin: 0 0 20px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted);
}

.professionals-success {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--sage);
  border-radius: 12px;
  color: var(--pine);
}

.professionals-success strong {
  display: block;
  margin-bottom: 4px;
}

.professionals-success p {
  margin: 0;
  font-size: 13.5px;
}

@media (max-width: 680px) {
  .professionals-fields {
    grid-template-columns: 1fr;
  }
}

.guide-card strong {
  display: block;
  margin-bottom: 4px;
  font-size: 15px;
  color: var(--pine);
}

.guide-card span {
  font-size: 12.5px;
  color: #4d5a54;
  line-height: 1.45;
}

.guide-card-arrow {
  margin-top: auto;
  padding-top: 10px;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--pine) !important;
  transition: transform 0.25s ease;
}

.guide-card:hover .guide-card-arrow {
  transform: translateX(3px);
  opacity: 1;
}

.guide-card-cta {
  grid-column: 1 / -1;
  --card-bg: var(--pine);
}

.guide-card-cta strong {
  color: var(--white);
}

.guide-card-cta span {
  color: rgba(250,250,245,0.72);
}

.guide-card-cta .guide-card-arrow {
  color: var(--yellow) !important;
  opacity: 1;
}

@media (max-width: 980px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .guide-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .guide-card { padding: 14px; }
  .guide-card strong { font-size: 14px; }
  .guide-card span { font-size: 12px; }
  .guide-card-cta { grid-column: 1 / -1; }
}

.final-cta {
  position: relative;
  overflow: hidden;
  min-height: 50svh;
  /* Solid fallback so the white text stays readable even if the cover
     photo (.final-cta-bg) never paints — slow connection, data-saver
     mode blocking a decorative background-image, a stale cached asset,
     anything. When the photo does load, .final-cta-bg/.final-cta-shade
     sit on top of this and it's never seen — this only matters as a
     safety net, not a visible design change. */
  background: var(--pine);
  display: grid;
  place-items: center;
  padding: clamp(52px, 7vw, 92px) 20px;
  text-align: center;
  color: var(--white);
}

.final-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("/assets/tramuntana-pueblo.webp");
  background-size: cover;
  background-position: center;
  animation: cinematicDrift 24s ease-in-out infinite alternate;
  will-change: transform;
}

.final-cta-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(15, 42, 35, 0.5) 0%, rgba(15, 42, 35, 0.84) 100%);
}

.final-cta > div.reveal {
  position: relative;
  z-index: 2;
  max-width: 820px;
  /* Mismo motivo que .founder-copy: .final-cta (ancestro, no padre directo)
     ya tiene background: var(--pine) como respaldo sólido, pero un lector
     de contraste que solo mira el padre inmediato no llega a verlo. Mismo
     pine exacto, sin cambio visual. */
  background: var(--pine);
}

.final-cta .eyebrow {
  color: var(--sage);
}

.final-cta h2 {
  font-size: clamp(26px, 3.6vw, 40px);
}

.final-cta p {
  max-width: 560px;
  margin: 18px auto 30px;
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}

.final-cta .btn-hint {
  display: block;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(220px, 0.4fr) 1fr;
  gap: 40px;
  padding: 44px clamp(20px, 6vw, 76px);
  background: var(--pine);
  color: rgba(255, 255, 255, 0.72);
}

.site-footer img {
  width: 150px;
  filter: brightness(0) invert(1);
}

.footer-social {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.footer-social-label {
  margin-right: 2px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer-social img {
  width: 26px;
  height: 26px;
  filter: none;
  opacity: 0.85;
  transition: opacity 180ms ease, transform 180ms ease;
}

.footer-social a:hover img {
  opacity: 1;
  transform: translateY(-3px);
}

.site-footer p {
  margin: 14px 0 0;
  line-height: 1.55;
}

.footer-links {
  font-size: 13px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-links a:hover {
  color: var(--white);
}

.footer-copyright {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.footer-grant {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* The official badge itself uses dark text/logos (red.es, KIT DIGITAL) made
   for a light surface — it needs a light band behind it here, not the pine
   footer directly, or that text disappears the same way the final-cta text
   did when its background failed to load. Sage checks out at ~10:1 contrast
   for the badge's dark text (well past WCAG AA), so a full-width sage band
   reads as a deliberate, on-brand strip rather than a card dropped on top. */
.footer-grant-card {
  display: flex;
  justify-content: center;
  /* Full-bleed: rompe el padding lateral del footer para que la banda sage
     llegue de borde a borde de la ventana, no un recuadro suelto encima. */
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  background: var(--sage);
  padding: 20px clamp(20px, 6vw, 76px);
}

.footer-grant img {
  display: block;
  /* Joaquim (13 jul, y de nuevo 15 jul): el sello debe verse más grande, "al
     menos que se vean las letras". 180px -> 260px -> 420px no fue suficiente
     ninguna de las dos veces — son 4 logos en fila dentro de un único PNG
     muy ancho (1800x215px reales), así que un aumento moderado del
     contenedor apenas se nota por logo individual. Subido de nuevo, esta
     vez con un salto grande, a 640px — sigue dentro de la resolución real
     del original (1800px), sin pérdida de calidad. Si Joaquim sigue viendo
     letras pequeñas después de esto, el problema ya no es el tamaño del
     contenedor sino el propio archivo fuente (el margen/espacio en blanco
     alrededor de cada logo dentro del PNG) — haría falta pedirle un recorte
     más ajustado, no seguir agrandando el contenedor indefinidamente. */
  width: 640px;
  max-width: 100%;
  height: auto;
  /* .site-footer img above forces brightness(0) invert(1) to turn the
     Dream Nest wordmark white — this badge needs its own official colours
     intact (flag yellow/red, EU blue, red.es black), so cancel it here. */
  filter: none;
}

/* The Aa/calculator/chat floating buttons are position:fixed to the
   viewport — once the footer (and this badge) scrolls into view they'd
   otherwise sit permanently on top of it. Faded via IntersectionObserver
   in script.js for as long as the footer is on screen. */
body.footer-in-view .a11y-fab,
body.footer-in-view .calc-fab,
body.footer-in-view .chat-fab {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ─── COOKIE CONSENT BANNER ─── */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: var(--pine);
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  transform: translateY(100%);
  transition: transform 320ms ease;
}

.cookie-banner.is-visible {
  transform: translateY(0);
}

.cookie-banner-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
}

.cookie-banner-inner p {
  margin: 0;
  flex: 1 1 320px;
  font-size: 14px;
  line-height: 1.6;
}

.cookie-banner-inner a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
  flex-wrap: wrap;
}

.cookie-banner-actions button {
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
}

.cookie-banner-actions .btn-cookie-accept {
  background: var(--sage);
  color: var(--pine);
  border-color: var(--sage);
}

.cookie-banner-actions button:hover {
  opacity: 0.88;
}

/* While the consent banner is up, push the corner FABs above it so nothing
   sits underneath an unusable overlay — same push pattern as footer-in-view. */
body.cookie-banner-visible .a11y-fab,
body.cookie-banner-visible .calc-fab,
body.cookie-banner-visible .chat-fab {
  transform: translateY(-76px);
}

.reveal {
  /* 15 jul: se probó un suelo de opacidad aquí (ver .split-unit para el
     mismo mecanismo, que sí lo lleva) pero se revirtió — .reveal envuelve
     bloques enteros, y varios de esos bloques incluyen texto secundario en
     --muted que YA está justo de margen en contraste incluso al 100% de
     opacidad (ej. #65736D sobre --cream: 4.75:1, mínimo exigido 4.5:1).
     Cualquier suelo por debajo de ~98% (es decir, sin fundido real) hace
     que ese texto caiga por debajo del mínimo real — confirmado con
     axe-core en about.html/services.html/nido-activo.html. Se queda en 0;
     el falso positivo de WAVE en bloques con .reveal (no en titulares,
     ver .split-unit) queda documentado como limitación de la herramienta. */
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 15 jul, segunda vuelta: un `.reveal` que envuelve un titular animado
   (.split-words/.split-letters) seguía marcado en WAVE pese al suelo del
   90% en `.split-unit` — porque la opacidad se multiplica por el árbol:
   0 (este contenedor) × 0.9 (cada palabra) = 0 igual. `.final-cta > div`
   es exactamente ese caso. `:has()` selecciona solo los `.reveal` que
   además envuelven un titular (los que tienen margen real de contraste,
   ver .split-unit) — el resto de `.reveal` (con texto secundario --muted
   de margen ya justo, ver el comentario de arriba) se queda en 0 sin
   tocar. */
.reveal:has(.split-unit) {
  opacity: 0.9;
}

/* Excepción dentro de la excepción: .founder-mission-inner y .office-copy
   SÍ envuelven un titular split-words, pero también llevan como hermano un
   .section-kicker/.founder-signature en --muted (el mismo color de margen
   justo del comentario de .reveal) — el 90% de arriba los habría vuelto a
   dejar por debajo de 4.5:1 (confirmado con axe-core). Estos dos contenedores
   concretos se quedan en 0, como el resto de bloques con texto --muted. */
.founder-mission-inner.reveal,
.office-copy.reveal {
  opacity: 0;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Nav collapses to the hamburger menu well above the general 980px content
   breakpoint below — 10 nav items plus the (now bigger) logo, language
   picker and CTA stop fitting on a single row around 1400px, pushing the
   CTA button and language picker off-screen with no way to reach them
   (found live on real laptop widths like 1366px, not just narrow mobile). */
@media (max-width: 1480px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    background: var(--pine);
    color: var(--white);
    font-family: "Tenor Sans", Georgia, serif;
    font-size: 26px;
    font-weight: 400;
    opacity: 0;
    transform: translateY(-16px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* When the header has scrolled into its solid/blurred state, its
     backdrop-filter creates a new containing block for this fixed-position
     full-screen menu, shrinking it down to the header's own height instead
     of the full viewport — and the header's own low z-index otherwise lets
     the floating action buttons (chat, calculator, accessibility, back-to-
     top) paint on top of the open menu. Both are neutralised while open. */
  .site-header:has(.nav-links.is-open) {
    backdrop-filter: none;
    z-index: 960;
  }

  .nav-links a {
    opacity: 1;
  }

  .nav-links-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--sage);
    color: var(--pine);
    font-family: "Karla", system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
  }

  .header-cta {
    display: none;
  }

  body.nav-open {
    overflow: hidden;
  }
}

@media (max-width: 980px) {
  .intro-grid,
  .nido,
  .founder,
  .calculator-shell,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .steps,
  .quotes {
    grid-template-columns: repeat(2, 1fr);
  }

  .alert-stack {
    gap: 16px;
  }

  .alert-card,
  .alert-card:nth-child(2),
  .alert-card:nth-child(3) {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 680px) {
  .site-header {
    min-height: 66px;
    padding: 14px 16px;
  }

  .brand-mark {
    width: 140px;
    height: 25px;
  }

  .home .brand-mark {
    width: 154px;
    height: 28px;
  }

  .header-cta {
    min-height: 42px;
    padding: 0 14px;
    font-size: 14px;
  }

  .hero {
    min-height: 100svh;
    align-items: end;
  }

  .hero-shade {
    background:
      linear-gradient(0deg, rgba(12, 28, 24, 0.82), rgba(12, 28, 24, 0.42) 58%, rgba(12, 28, 24, 0.2)),
      linear-gradient(90deg, rgba(12, 28, 24, 0.28), rgba(12, 28, 24, 0.08));
  }

  .hero-content {
    width: calc(100% - 32px);
    margin: 0 16px 34px;
  }

  .hero h1 {
    font-size: clamp(30px, 7.2vw, 42px);
    line-height: 1.14;
  }

  .tagline {
    margin-top: 18px;
  }

  .hero-copy {
    margin-top: 14px;
    font-size: 15px;
    line-height: 1.5;
  }

  .hero-doors {
    margin-top: 26px;
    gap: 12px;
  }

  .hero-actions {
    flex-direction: column;
  }

  .btn {
    width: 100%;
  }

  .section {
    padding: 52px 18px;
  }

  .section-heading {
    display: block;
  }

  .steps,
  .quotes,
  .team-grid {
    grid-template-columns: 1fr;
  }

  .step {
    min-height: auto;
    padding: 24px 20px;
    background: linear-gradient(180deg, var(--white) 0%, #F5F7F4 100%);
    border-radius: 12px;
    margin-bottom: 12px;
  }

  .steps {
    gap: 0;
    background: transparent;
    border-top: 0;
    border-bottom: 0;
  }

  .team-member:nth-child(2) {
    margin-top: 0;
  }

}

.legal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(18px, 5vw, 64px);
  background: var(--pine);
  color: var(--white);
}

.legal-header .brand-mark {
  width: 170px;
  height: 30px;
}

.legal-back {
  font-size: 14px;
  font-weight: 700;
  opacity: 0.9;
}

.legal-hero {
  padding: clamp(64px, 9vw, 108px) clamp(20px, 6vw, 76px) 0;
  background: var(--cream);
}

.legal-hero .section-kicker {
  color: var(--muted);
}

.legal-hero h1 {
  margin: 0;
  max-width: 820px;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 54px);
  line-height: 1.08;
  color: var(--pine);
}

.legal-updated {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.legal-content {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 6vw, 76px) clamp(80px, 10vw, 132px);
  background: var(--cream);
}

.kit-digital-content {
  display: grid;
  grid-template-columns: minmax(200px, 320px) 1fr;
  gap: 40px;
  align-items: center;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 80px) clamp(20px, 6vw, 76px) clamp(80px, 10vw, 132px);
  background: var(--cream);
}

.kit-digital-logo img {
  width: 100%;
  height: auto;
}

.kit-digital-info {
  display: flex;
  flex-direction: column;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.kit-digital-info li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.kit-digital-info svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--pine);
}

.kit-digital-info a {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 680px) {
  .kit-digital-content {
    grid-template-columns: 1fr;
    text-align: left;
  }

  .kit-digital-logo {
    max-width: 260px;
  }
}

.legal-content h2 {
  margin: 48px 0 16px;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--pine);
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p {
  margin: 0 0 18px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.legal-content ul {
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

.legal-content li {
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--pine);
  font-weight: 700;
  border-bottom: 2px solid var(--sage);
}

.legal-note {
  padding: 18px 20px;
  margin: 0 0 18px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

@media (max-width: 680px) {
  .legal-content {
    padding: 48px 18px 80px;
  }

  .legal-content h2 {
    font-size: 22px;
  }
}

.about-hero {
  padding: clamp(120px, 15vw, 172px) clamp(20px, 6vw, 76px) clamp(56px, 8vw, 88px);
  background: var(--cream);
}

.page-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--pine);
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.page-back:hover {
  opacity: 1;
}

.about-hero h1 {
  margin: 18px 0 0;
  max-width: 780px;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.06;
  color: var(--pine);
  overflow-wrap: break-word;
}

.about-hero p {
  max-width: 620px;
  margin: 22px 0 0;
  color: #55645e;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
}

.advisor-profiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 56px);
}

.advisor-profile {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.advisor-profile h3 {
  margin: 4px 0 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: 26px;
  color: var(--pine);
}

.advisor-profile .role {
  display: block;
  margin-top: -12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.advisor-profile p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
}

.contact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin-top: 4px;
}

.contact-email {
  color: var(--pine);
  font-size: 14px;
  font-weight: 700;
  border-bottom: 2px solid var(--sage);
}

.contact-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pine);
  font-size: 14px;
  font-weight: 700;
}

.contact-whatsapp svg {
  width: 18px;
  height: 18px;
  color: var(--sage);
}

.founder-copy .contact-line {
  margin-top: 8px;
}

.about-values {
  background: var(--white);
}

.about-values-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.about-values-grid article {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.about-values-grid strong {
  display: block;
  margin-bottom: 10px;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  color: var(--pine);
}

.about-values-grid span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.about-trust {
  padding: clamp(48px, 7vw, 76px) clamp(20px, 6vw, 76px);
  background: var(--sage);
  color: var(--pine);
  text-align: center;
}

.about-trust .badge {
  display: inline-flex;
  padding: 8px 18px;
  background: var(--pine);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-trust p {
  max-width: 680px;
  margin: 16px auto 0;
  font-size: 15px;
  line-height: 1.6;
}

.about-trust a {
  color: var(--pine);
  font-weight: 700;
  border-bottom: 2px solid var(--pine);
}

.trust-story {
  max-width: 640px;
  margin: 24px auto 0;
  text-align: left;
}

.trust-story .section-kicker {
  text-align: center;
  color: var(--pine);
}

.trust-story p {
  max-width: none;
  text-align: left;
}

.trust-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  max-width: 1100px;
  margin: clamp(28px, 4vw, 44px) auto 0;
  text-align: left;
}

.trust-pillar {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.trust-pillar strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--pine);
}

.trust-pillar span {
  font-size: 14px;
  line-height: 1.65;
  color: var(--pine);
}

@media (max-width: 780px) {
  .trust-pillars {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.office {
  display: grid;
  grid-template-columns: minmax(280px, 0.6fr) minmax(0, 1fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  background: var(--white);
}

.office-frame {
  aspect-ratio: 3 / 4;
}

.office-copy p {
  margin-top: 20px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

@media (max-width: 980px) {
  .advisor-profiles {
    grid-template-columns: 1fr;
  }

  .about-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .office {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .about-values-grid {
    grid-template-columns: 1fr;
  }
}

.section-lead {
  max-width: 700px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
}

.services-list-section {
  background: var(--white);
}

.calc-callout-copy {
  max-width: 640px;
  margin: 0 0 24px;
  color: var(--muted);
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
}

.about-values-grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

@media (max-width: 680px) {
  .mail-grid {
    grid-template-columns: 1fr;
  }
}

.mail-mockup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

.mail-tag {
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--sage);
  color: var(--pine);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mail-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.mail-from {
  color: var(--pine);
  font-size: 14px;
  font-weight: 700;
}

.mail-date {
  color: var(--muted);
  font-size: 13px;
}

.mail-subject {
  margin: 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  color: var(--pine);
}

.mail-body {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

@media (max-width: 980px) {
  .about-values-grid.cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

.services-list {
  display: flex;
  flex-direction: column;
}

.service-segment {
  display: grid;
  grid-template-columns: minmax(220px, 0.32fr) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 64px);
  padding: clamp(36px, 5vw, 56px) 0;
  border-top: 1px solid var(--line);
  transition: background 0.3s ease, transform 0.3s ease;
}

.service-segment:hover {
  background: rgba(167, 213, 189, 0.08);
  transform: translateX(4px);
}

.service-segment:last-child {
  border-bottom: 1px solid var(--line);
}

.service-segment h3 {
  margin: 4px 0 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3vw, 34px);
  color: var(--pine);
  line-height: 1.16;
}

.service-body p {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.service-fit-label {
  display: block;
  margin: 22px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.service-fit {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 24px;
}

.service-fit li {
  position: relative;
  padding-left: 20px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}

.service-fit li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--sage);
}

@media (max-width: 980px) {
  .service-segment {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 680px) {
  .about-values-grid.cols-3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .service-fit {
    grid-template-columns: 1fr;
  }
}

/* Cinematic image motion */
@keyframes kenburns {
  0% {
    transform: scale(1) translate3d(0, 0, 0);
  }
  100% {
    transform: scale(1.08) translate3d(-1.2%, 1%, 0);
  }
}

@keyframes cinematicDrift {
  0% {
    transform: scale(1.04) translate3d(-0.8%, 0.4%, 0);
  }
  100% {
    transform: scale(1.1) translate3d(0.8%, -0.6%, 0);
  }
}

.image-cinema,
.depth-frame {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(28, 59, 52, 0.18);
}

.image-cinema img,
.depth-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: cinematicDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}

.founder-image {
  overflow: hidden;
}

.founder-image img {
  animation: kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}

.media-frame {
  overflow: hidden;
}

.media-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}

.team-photo,
.advisor-photo {
  width: 100%;
  aspect-ratio: 4 / 5;
}

/* Cinematic text reveal */
.split-word {
  display: inline-block;
  overflow-wrap: break-word;
}

.split-unit {
  display: inline-block;
  /* Suelo de opacidad (15 jul, pedido explícito de Cassandra): cada
     palabra/letra arrancaba en 0 (invisible del todo) hasta que el scroll
     disparaba `.split-words.is-visible`/`.split-letters.is-visible`. Un
     lector estático que nunca hace scroll (como WAVE) evaluaba ese
     instante inicial y lo marcaba como "very low contrast (1:1)" — texto
     literalmente invisible, no un problema real de color. Los titulares
     que usan split-words/split-letters van siempre en blanco o en --ink a
     saturación completa (no en --muted), así que tienen margen de sobra:
     comprobado con axe-core en todas las páginas del sitio que un suelo
     del 90% no baja ningún combinación real por debajo de 4.5:1, y la
     animación se sigue viendo (sube y termina de iluminarse), solo un
     poco menos dramática que arrancando desde la nada.
     NOTA: .reveal (bloques enteros, no palabra por palabra) NO lleva este
     mismo suelo — ver el comentario de .reveal más arriba, ese sí rompía
     contraste real en texto secundario --muted en otras páginas. */
  opacity: 0.9;
  transform: translateY(0.55em);
  transition: opacity 640ms cubic-bezier(0.2, 0.7, 0.2, 1), transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.split-words.is-visible .split-unit,
.split-letters.is-visible .split-unit {
  opacity: 1;
  transform: translateY(0);
}

/* Ambient flashlight glow that follows the pointer — from the original v1 prototype */
.cursor-light {
  position: fixed;
  top: 0;
  left: 0;
  width: 360px;
  height: 360px;
  z-index: 9998;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240, 233, 111, 0.2), transparent 62%);
  transform: translate(-50%, -50%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 250ms ease;
}

.cursor-light.is-active {
  opacity: 1;
}

/* Custom cinematic cursor */
.custom-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  background: var(--yellow);
  box-shadow: 0 0 12px 2px rgba(240, 233, 111, 0.55);
  transition: transform 180ms ease, box-shadow 180ms ease, opacity 200ms ease;
}

.custom-cursor-dot.is-hovering {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 0 18px 4px rgba(240, 233, 111, 0.65);
}

body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor select {
  cursor: none;
}

@media (hover: none), (pointer: coarse) {
  .custom-cursor-dot,
  .cursor-light {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .split-unit {
    opacity: 1 !important;
    transform: none !important;
  }

  .custom-cursor-dot,
  .cursor-light {
    display: none !important;
  }
}

/* ─── FREE BAND — the value ladder, compact ─── */
.free-band {
  padding: clamp(44px, 6vw, 72px) clamp(20px, 6vw, 76px);
  background: linear-gradient(180deg, var(--white) 0%, rgba(167,213,189,0.14) 100%);
  border-top: 1px solid rgba(167,213,189,0.35);
}

.free-band-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.free-band-head h2 {
  margin: 6px 0 28px;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--pine);
}

.free-items {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 24px);
  margin-bottom: 22px;
  text-align: left;
}

.free-item {
  padding: 16px 18px;
  background: linear-gradient(160deg, var(--white) 0%, #FBFCFA 100%);
  border: 1px solid rgba(167,213,189,0.4);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(28,59,52,0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s ease;
}

.free-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(28,59,52,0.09), 0 1px 0 rgba(255,255,255,0.6) inset;
}

.free-items .free-item:nth-child(1) { transition-delay: 0s; }
.free-items .free-item:nth-child(2) { transition-delay: 0.07s; }
.free-items .free-item:nth-child(3) { transition-delay: 0.14s; }
.free-items .free-item:nth-child(4) { transition-delay: 0.21s; }

.free-item strong {
  display: block;
  font-size: 15px;
  color: var(--pine);
  margin-bottom: 3px;
}

.free-item span {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.45;
}

.free-note {
  margin: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

.free-items .free-item:nth-child(5) { transition-delay: 0.28s; }
.free-items .free-item:nth-child(6) { transition-delay: 0.35s; }
.free-items .free-item:nth-child(7) { transition-delay: 0.42s; }

.faq-list {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  padding: 18px 22px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--pine);
  font-size: 15px;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
  color: var(--sage);
  font-weight: 700;
}

.faq-item[open] summary::before {
  content: "–";
}

.faq-item p {
  margin: 12px 0 0 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 980px) {
  .free-items { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .free-items { grid-template-columns: 1fr; }
}

/* ─── PARTNERS BAND ─── */
.partners-band {
  padding: clamp(48px, 7vw, 80px) clamp(20px, 6vw, 76px);
  background: var(--pine);
  text-align: center;
}

.partners-inner {
  max-width: 900px;
  margin: 0 auto;
}

.partners-block {
  margin-bottom: clamp(28px, 4vw, 44px);
}

.partners-eyebrow {
  display: block;
  margin-bottom: 22px;
  color: var(--sage);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.partners-banks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 0;
  margin-bottom: 18px;
}

.partner-bank {
  color: rgba(250,250,245,0.82);
  font-family: "Tenor Sans", Georgia, serif;
  font-size: clamp(17px, 2.1vw, 24px);
  letter-spacing: 0.02em;
  padding: 0 clamp(14px, 2vw, 28px);
  border-right: 1px solid rgba(167,213,189,0.2);
}

.partner-bank:last-child {
  border-right: none;
}

.partners-bank-note {
  margin: 0;
  font-size: 12.5px;
  color: rgba(250,250,245,0.68);
  line-height: 1.6;
  font-style: italic;
}

.partner-name,
.partner-link {
  color: rgba(250,250,245,0.82);
}

.partner-link {
  text-decoration: underline;
  text-decoration-color: rgba(250,250,245,0.4);
}

.partners-rule {
  height: 1px;
  background: rgba(167,213,189,0.14);
  margin: clamp(24px, 3.5vw, 40px) auto;
  max-width: 480px;
}

.partners-network-block {
  display: flex;
  justify-content: center;
  gap: clamp(40px, 8vw, 100px);
  flex-wrap: wrap;
  margin-bottom: 0;
}

.partners-col {
  text-align: center;
}

.partners-row-sm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

.partner-name-sm {
  color: rgba(250,250,245,0.65);
  font-family: "Tenor Sans", Georgia, serif;
  font-size: clamp(15px, 1.7vw, 18px);
  letter-spacing: 0.03em;
}

.partners-professionals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 14px 0 10px;
}

.partner-prof {
  padding: 6px 14px;
  border: 1px solid rgba(167, 213, 189, 0.25);
  border-radius: 999px;
  font-size: 13px;
  color: rgba(250,250,245,0.72);
  transition: border-color 0.2s;
}

.partner-prof:hover {
  border-color: var(--sage);
  color: var(--sage);
}

.partners-more {
  margin: clamp(24px, 3.5vw, 36px) 0 0;
  color: rgba(250,250,245,0.68);
  font-size: 12.5px;
  line-height: 1.6;
}

@media (max-width: 680px) {
  .partners-banks { gap: 6px 0; }
  .partner-bank {
    font-size: 15px;
    padding: 0 12px;
  }
  .partners-network-block { gap: 32px; }
}

/* ─── LANGUAGE PICKER ─── */
.lang-picker {
  position: relative;
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.30);
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  color: inherit;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.lang-btn:hover {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.18);
}

.site-header.is-solid .lang-btn {
  border-color: rgba(28,59,52,0.22);
  background: transparent;
  color: var(--pine);
}

.site-header.is-solid .lang-btn:hover {
  border-color: var(--sage);
  background: rgba(167,213,189,0.10);
}

.lang-chevron {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.lang-btn[aria-expanded="true"] .lang-chevron {
  transform: rotate(180deg);
}

.lang-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 152px;
  padding: 6px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(28,59,52,0.14);
  z-index: 200;
}

.lang-drop[hidden] { display: none; }

.lang-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
}

.lang-opt:not(.lang-dim):hover {
  background: rgba(167,213,189,0.18);
  color: var(--pine);
}

.lang-active {
  color: var(--pine);
  font-weight: 700;
}

.lang-opt abbr {
  display: inline-block;
  width: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--muted);
}

.lang-active abbr {
  color: var(--pine);
}

.lang-dim {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

@media (max-width: 980px) {
  .lang-picker { display: none; }

  .nav-links.is-open ~ .lang-picker {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 32px;
    transform: translateX(-50%);
    z-index: 60;
  }

  .nav-links.is-open ~ .lang-picker .lang-btn {
    border-color: rgba(255,255,255,0.35);
    background: rgba(255,255,255,0.12);
    color: var(--white);
  }

  .nav-links.is-open ~ .lang-picker .lang-btn:hover {
    background: rgba(255,255,255,0.2);
  }

  .nav-links.is-open ~ .lang-picker .lang-drop {
    top: auto;
    bottom: calc(100% + 8px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ─── NEWS / BLOG SECTION ─── */
.news-section {
  background: var(--cream);
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: clamp(28px, 4vw, 48px) auto 0;
}

.news-card {
  padding: clamp(22px, 3vw, 32px);
  background: var(--white);
  border: 1px solid rgba(28,59,52,0.08);
  border-top: 3px solid var(--sage);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease;
}

.news-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(28,59,52,0.09);
}

.news-card-image {
  margin: calc(-1 * clamp(22px, 3vw, 32px)) calc(-1 * clamp(22px, 3vw, 32px)) 4px;
  border-radius: 13px 13px 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.news-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.news-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pine);
  background: rgba(167,213,189,0.28);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(167,213,189,0.35);
}

.news-card h3 {
  margin: 0;
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(16px, 1.6vw, 19px);
  color: var(--pine);
  line-height: 1.28;
  flex: 1;
}

.news-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

.news-coming {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(28,59,52,0.4);
  border: 1px solid rgba(28,59,52,0.14);
  padding: 3px 10px;
  border-radius: 999px;
  align-self: flex-start;
}

.news-cta-row {
  max-width: 1160px;
  margin: clamp(24px, 3.5vw, 40px) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.news-note {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  max-width: 520px;
}

@media (max-width: 980px) {
  .news-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .news-grid { grid-template-columns: 1fr; }
  .news-cta-row { flex-direction: column; align-items: flex-start; }
}

/* ─── NEWS ARCHIVE PAGE (/news.html) ─── */
.news-date {
  font-size: 12px;
  color: var(--muted);
}

.news-archive-empty {
  text-align: center;
  max-width: 520px;
  margin: 0 auto;
  padding-top: clamp(8px, 2vw, 16px);
}

.news-archive-empty h2 {
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 28px);
  color: var(--pine);
  margin: 0 0 12px;
}

.news-archive-empty p {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.news-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1160px;
  margin: 0 auto clamp(28px, 4vw, 40px);
}

.news-filter {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--pine);
  background: var(--white);
  border: 1px solid rgba(28,59,52,0.14);
  padding: 7px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.news-filter:hover {
  border-color: var(--sage);
}

.news-filter.is-active {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--white);
}

.news-archive-month {
  max-width: 1160px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}

.news-archive-month-title {
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--pine);
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(28,59,52,0.1);
}

.news-archive-grid {
  margin-top: 20px;
}

.news-card.is-hidden {
  display: none;
}

.news-archive-month.is-hidden {
  display: none;
}

/* ─── BACK TO TOP ─── */
.back-to-top {
  position: fixed;
  bottom: 88px;
  right: clamp(16px, 3vw, 28px);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--pine);
  border: 2px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 900;
  box-shadow: 0 4px 18px rgba(28,59,52,0.28), 0 0 0 1px rgba(28,59,52,0.5);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #2a5c4e;
}

.back-to-top svg {
  width: 18px;
  height: 18px;
  stroke: var(--cream);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ─── PHOTO CAROUSEL ─── */
.photo-carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  user-select: none;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.carousel-slide::before {
  content: "";
  position: absolute;
  inset: -20px;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.75) saturate(1.1);
  transform: scale(1.15);
  z-index: 0;
}

.carousel-slide img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  pointer-events: none;
  /* override any inherited kenburns animation */
  animation: none !important;
}

.carousel-caption {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 2;
  max-width: calc(100% - 28px);
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(14, 33, 28, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--cream);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(28, 59, 52, 0.6);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background 0.2s;
}

.carousel-btn:hover {
  background: var(--pine);
}

.carousel-btn svg {
  width: 16px;
  height: 16px;
  stroke: var(--cream);
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-btn--prev { left: 12px; }
.carousel-btn--next { right: 12px; }

.carousel-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 3;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 0;
  cursor: pointer;
  transition: background 0.25s;
}

.carousel-dot.is-active {
  background: #fff;
  border-color: #fff;
}

/* ─── PHOTO STRIP (homepage) ─── */
.photo-strip {
  background: var(--cream);
}

.photo-strip-wrap {
  max-width: 380px;
  margin: clamp(28px, 4vw, 48px) auto 0;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  position: relative;
}

@media (max-width: 680px) {
  .photo-strip-wrap {
    max-width: 300px;
    border-radius: 14px;
  }
}


/* ─── CALCULATOR FLOATING BUTTON ─── */
.calc-fab {
  position: fixed;
  bottom: clamp(20px, 4vw, 28px);
  left: clamp(16px, 3vw, 28px);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  height: 48px;
  background: var(--yellow);
  color: var(--pine);
  border-radius: 999px;
  text-decoration: none;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  z-index: 901;
  box-shadow: 0 4px 20px rgba(240, 233, 111, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
  white-space: nowrap;
}

.calc-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(240, 233, 111, 0.50);
  background: #e6df5a;
  color: var(--pine);
}

.calc-fab svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

@media (max-width: 480px) {
  .calc-fab {
    padding: 0;
    width: 48px;
    height: 48px;
    justify-content: center;
    border-radius: 50%;
  }
  .calc-fab span { display: none; }
  .back-to-top { bottom: 84px; }
}

/* ─── CALCULATOR MODAL ─── */
.calc-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 950;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 40px);
}

.calc-modal:not([hidden]) {
  display: flex;
}

.calc-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 33, 28, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.calc-modal-panel {
  position: relative;
  width: min(600px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  background-image: linear-gradient(rgba(250, 250, 245, 0.85), rgba(250, 250, 245, 0.85)), url("/assets/lifestyle-planning.webp");
  background-size: cover;
  background-position: center;
  border-radius: 20px;
  padding: clamp(20px, 4vw, 40px);
  box-shadow: 0 30px 90px rgba(14, 33, 28, 0.35);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.28s ease;
}

.calc-modal.is-open .calc-modal-backdrop {
  opacity: 1;
}

.calc-modal.is-open .calc-modal-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.calc-modal-close {
  position: sticky;
  top: 0;
  left: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: -38px;
  border: none;
  border-radius: 50%;
  background: rgba(28, 59, 52, 0.08);
  color: var(--pine);
  cursor: pointer;
  transition: background 0.2s ease;
  z-index: 1;
}

.calc-modal-close:hover {
  background: rgba(28, 59, 52, 0.16);
}

.calc-modal-body .tools-calc {
  padding: 0;
}

.calc-modal-body .section-heading {
  margin-bottom: clamp(20px, 3vw, 32px);
}

body.calc-modal-open {
  overflow: hidden;
}

/* ─── CHAT FAQ WIDGET ─── */
.chat-fab {
  position: fixed;
  bottom: clamp(20px, 4vw, 28px);
  right: clamp(16px, 3vw, 28px);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pine);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 901;
  box-shadow: 0 4px 20px rgba(28, 59, 52, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
  color: var(--cream);
}

.chat-fab:hover {
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 28px rgba(28, 59, 52, 0.45);
}

.chat-fab svg {
  width: 24px;
  height: 24px;
}

.chat-panel {
  position: fixed;
  bottom: 88px;
  right: clamp(16px, 3vw, 28px);
  width: min(340px, calc(100vw - 32px));
  max-height: min(480px, calc(100vh - 180px));
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(20, 30, 27, 0.28);
  display: none;
  flex-direction: column;
  overflow: hidden;
  z-index: 902;
  font-family: "Karla", system-ui, sans-serif;
}

.chat-panel:not([hidden]) {
  display: flex;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--pine);
  color: var(--cream);
  font-weight: 700;
  font-size: 14px;
}

.chat-close {
  background: none;
  border: none;
  color: var(--cream);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.chat-messages {
  flex: 1;
  min-height: 160px;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-msg {
  max-width: 85%;
  padding: 9px 13px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.45;
}

.chat-msg-bot {
  align-self: flex-start;
  background: var(--cream);
  color: var(--ink);
}

.chat-msg-user {
  align-self: flex-end;
  background: var(--sage);
  color: var(--ink);
}

.chat-note {
  padding: 0 16px;
  font-size: 11px;
  color: var(--muted);
}

.chat-contact-row {
  display: flex;
  gap: 14px;
  padding: 8px 16px 12px;
  border-bottom: 1px solid var(--line);
}

.chat-contact-row a {
  font-size: 12px;
  font-weight: 700;
  color: var(--pine);
  border-bottom: 2px solid var(--sage);
}

.chat-input-row {
  display: flex;
  gap: 8px;
  padding: 12px;
}

.chat-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  font-family: inherit;
  font-size: 13.5px;
}

.chat-input:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}

.chat-send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--cream);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chat-send svg {
  width: 17px;
  height: 17px;
}

@media (max-width: 480px) {
  .chat-panel {
    bottom: 84px;
    right: 12px;
    left: 12px;
    width: auto;
  }
}

/* ─── ACCESSIBILITY WIDGET — self-built, no third-party service ───
   `zoom` scales the whole page, but most headings/hero text on this site
   are sized with clamp(px, vw, px) — vw is always relative to the real
   viewport, not to the zoomed-in element, so those don't shrink to
   compensate the way native browser zoom does. The result was headings
   and buttons spilling past the right edge and overlapping other text
   instead of cleanly growing. Toned the zoom levels down and contained
   the overflow so it can no longer visually break a page.

   The classes below target #pageZoomScope (a wrapper script.js builds
   around the page content on load) instead of :root/body — deliberately.
   zoom applied to an ancestor of a position:fixed element (the Aa button,
   its own settings panel, the calculator/chat buttons) is exactly where
   mobile Chrome/WebView hit-testing has known bugs: the element paints at
   its scaled position but taps keep landing against its unscaled
   coordinates, so a real tap on it does nothing. That was hitting the Aa
   panel itself — after zooming in, the panel meant to let you zoom back
   out or toggle contrast stopped responding to any tap at all, because it
   was a descendant of the zoomed root. Every floating control is appended
   straight to <body> in script.js, landing as a sibling of this wrapper —
   structurally outside the zoomed subtree, so it can never desync from
   its own click target regardless of zoom level. The remaining, larger
   fix (routing every clamp() font-size through a shared scale variable so
   headline text also grows with this control) is flagged separately. */
#pageZoomScope.a11y-zoom-1,
#pageZoomScope.a11y-zoom-2 {
  overflow-x: hidden;
}

#pageZoomScope.a11y-zoom-1 {
  zoom: 1.08;
}

#pageZoomScope.a11y-zoom-2 {
  zoom: 1.16;
}

:root.a11y-contrast {
  --muted: #2b332f;
  --line: rgba(28, 59, 52, 0.4);
}

:root.a11y-contrast body {
  color: #000;
}

:root.a11y-contrast a:not(.btn):not(.door):not(.guide-card):not(.card) {
  text-decoration: underline;
}

:root.a11y-contrast :focus-visible {
  outline-width: 4px;
  outline-color: var(--yellow);
}

.a11y-fab {
  position: fixed;
  bottom: 84px;
  left: clamp(16px, 3vw, 28px);
  z-index: 950;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--pine);
  color: var(--cream);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Tenor Sans", Georgia, serif;
  font-size: 17px;
  box-shadow: 0 8px 24px rgba(28, 59, 52, 0.32);
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.25s ease, visibility 0.25s ease;
}

.a11y-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 30px rgba(28, 59, 52, 0.4);
}

.a11y-panel {
  position: fixed;
  bottom: 144px;
  left: clamp(16px, 3vw, 28px);
  z-index: 950;
  width: min(300px, calc(100vw - 32px));
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(28, 59, 52, 0.28);
  border: 1px solid var(--line);
  overflow: hidden;
  display: none;
}

.a11y-panel:not([hidden]) {
  display: block;
}

.a11y-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  background: var(--pine);
  color: var(--cream);
}

.a11y-panel-header span {
  font-family: "Tenor Sans", Georgia, serif;
  font-size: 15px;
}

.a11y-close {
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 4px;
  display: flex;
}

.a11y-panel-body {
  padding: 18px;
  display: grid;
  gap: 18px;
}

.a11y-group label {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.a11y-steps {
  display: flex;
  gap: 6px;
}

.a11y-step {
  flex: 1;
  padding: 10px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  color: var(--pine);
  font-family: "Tenor Sans", Georgia, serif;
  cursor: pointer;
}

.a11y-step:nth-child(1) { font-size: 13px; }
.a11y-step:nth-child(2) { font-size: 16px; }
.a11y-step:nth-child(3) { font-size: 19px; }

.a11y-step.is-active {
  background: var(--sage);
  border-color: var(--sage);
}

.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--cream);
  cursor: pointer;
  font-size: 14px;
  color: var(--ink);
}

.a11y-toggle-track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.a11y-toggle-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.2s ease;
}

.a11y-toggle[aria-pressed="true"] .a11y-toggle-track {
  background: var(--pine);
}

.a11y-toggle[aria-pressed="true"] .a11y-toggle-track::after {
  transform: translateX(16px);
}

.a11y-reset {
  font-size: 12px;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  justify-self: start;
}

@media (max-width: 480px) {
  .a11y-panel {
    left: 12px;
    right: 12px;
    width: auto;
  }
}

/* ─── DOSSIER TEASER (Home, entre Hero y #founder) ───────────── */
.dossier-teaser {
  position: relative;
  background: linear-gradient(160deg, #04100a 0%, #071b10 35%, #0a2216 65%, #04100a 100%);
  padding: clamp(56px, 8vw, 96px) clamp(20px, 6vw, 76px) clamp(40px, 6vw, 64px);
  text-align: center;
  overflow: hidden;
}

.dossier-teaser-inner {
  max-width: 680px;
  margin: 0 auto;
}

.dossier-teaser .section-kicker {
  color: rgba(240, 230, 211, 0.6);
}

.dossier-teaser-title {
  font-family: "Tenor Sans", Georgia, serif;
  font-weight: 400;
  color: #f0e6d3;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.35;
  margin: 0 0 14px;
}

.dossier-teaser-badge {
  display: inline-block;
  margin-top: 18px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 230, 211, 0.85);
  border: 1px solid rgba(240, 230, 211, 0.3);
  border-radius: 999px;
}

.dossier-fan {
  position: relative;
  width: clamp(280px, 46vw, 380px);
  height: clamp(400px, 62vw, 540px);
  margin: clamp(48px, 7vw, 72px) auto clamp(56px, 8vw, 80px);
  perspective: 1200px;
}

.dossier-page {
  position: absolute;
  width: clamp(190px, 34vw, 270px);
  border-radius: 6px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  /* La rotación del abanico vive en --rot (definida por cada posición más
     abajo) en vez de escribirse directamente en `transform`, para poder
     animar solo escala/altura en .is-landing sin perder el ángulo propio
     de esa posición — evitaría un salto brusco al terminar la animación. */
  transform: rotate(var(--rot, 0deg));
  transition: top 0.9s cubic-bezier(0.22, 1, 0.36, 1), left 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.9s ease;
}

.dossier-page:hover,
.dossier-page:focus-visible {
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}

.dossier-page img {
  width: 100%;
  display: block;
  pointer-events: none;
}

/* Base estática por nth-child — se aplica siempre, sin depender de JS.
   Cubre el caso sin JavaScript y el de prefers-reduced-motion (en ambos
   initDossierFanCycle no llega a asignar ninguna clase .pos-N). Sin esta
   base, esos casos verían las 7 páginas apiladas en el origen sin abanico. */
.dossier-fan .dossier-page:nth-child(1) { --rot: -1deg; z-index: 7; top: 0%; left: 16%; }
.dossier-fan .dossier-page:nth-child(2) { --rot: 3.5deg; z-index: 6; top: 4%; left: 30%; }
.dossier-fan .dossier-page:nth-child(3) { --rot: -4deg; z-index: 5; top: 9%; left: 6%; }
.dossier-fan .dossier-page:nth-child(4) { --rot: 5.5deg; z-index: 4; top: 14%; left: 34%; }
.dossier-fan .dossier-page:nth-child(5) { --rot: -5.5deg; z-index: 3; top: 19%; left: 3%; }
.dossier-fan .dossier-page:nth-child(6) { --rot: 4deg; z-index: 2; top: 24%; left: 28%; }
.dossier-fan .dossier-page:nth-child(7) { --rot: -2.5deg; z-index: 1; top: 29%; left: 12%; }

/* Con JS activo (initDossierFanCycle, script.js) estas mismas 7 posiciones
   se reasignan por clase en vez de por nth-child, y van rotando qué imagen
   concreta ocupa cada una — automáticamente cada pocos segundos, o al
   instante si se toca/hace click en cualquier página del montón. Van
   después en el CSS a propósito: misma especificidad que nth-child, gana
   la última declarada. */
.dossier-fan .dossier-page.pos-1 { --rot: -1deg; z-index: 7; top: 0%; left: 16%; }
.dossier-fan .dossier-page.pos-2 { --rot: 3.5deg; z-index: 6; top: 4%; left: 30%; }
.dossier-fan .dossier-page.pos-3 { --rot: -4deg; z-index: 5; top: 9%; left: 6%; }
.dossier-fan .dossier-page.pos-4 { --rot: 5.5deg; z-index: 4; top: 14%; left: 34%; }
.dossier-fan .dossier-page.pos-5 { --rot: -5.5deg; z-index: 3; top: 19%; left: 3%; }
.dossier-fan .dossier-page.pos-6 { --rot: 4deg; z-index: 2; top: 24%; left: 28%; }
.dossier-fan .dossier-page.pos-7 { --rot: -2.5deg; z-index: 1; top: 29%; left: 12%; }

/* "Aterrizaje" de la página que pasa a estar arriba del todo (pos-1) — se
   activa al tocar/hacer click en el montón, y también en cada vuelta
   automática, para que de verdad parezca una hoja que se mueve y se
   asienta, no solo un cambio de posición. Mantiene --rot durante toda la
   animación (mismo ángulo que su posición final) para no dar un salto al
   terminar — solo anima elevación/inclinación 3D y escala. */
.dossier-page.is-landing {
  animation: dossierPageLand 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 20 !important;
}

@keyframes dossierPageLand {
  0% {
    transform: rotate(var(--rot, 0deg)) translateY(-26px) rotateX(10deg) rotateY(-8deg) scale(1.07);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55);
  }
  60% {
    transform: rotate(var(--rot, 0deg)) translateY(4px) rotateX(-2deg) rotateY(2deg) scale(1.02);
  }
  100% {
    transform: rotate(var(--rot, 0deg)) translateY(0) rotateX(0) rotateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dossier-page.is-landing {
    animation: none;
  }
}

.dossier-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(16px, 3vw, 36px);
  max-width: 620px;
  margin: 0 auto;
  text-align: left;
}

.dossier-feature strong {
  display: block;
  color: #f0e6d3;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
}

.dossier-feature span {
  display: block;
  color: rgba(240, 230, 211, 0.72);
  font-size: 12.5px;
  line-height: 1.5;
}

.dossier-teaser-cue {
  display: flex;
  margin: clamp(40px, 6vw, 60px) auto 0;
  width: fit-content;
  color: rgba(240, 230, 211, 0.7);
}

@media (max-width: 680px) {
  .dossier-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 380px;
  }
}

/* Escritorio (900px+): imágenes del dossier a la izquierda, descripción a
   la derecha — pedido explícito de Cassandra viendo la versión apilada en
   PC ("queda feísimo"). Por debajo de 900px se mantiene el apilado vertical
   de siempre (cabecera → abanico → features → flecha), que en móvil sí
   puede resolverse con scroll normal. */
@media (min-width: 900px) {
  .dossier-teaser {
    display: grid;
    grid-template-columns: minmax(360px, 42%) 1fr;
    grid-template-areas:
      "fan kicker"
      "fan features"
      "fan cue";
    align-items: center;
    gap: clamp(40px, 5vw, 90px);
    text-align: left;
    max-width: 1280px;
    margin: 0 auto;
  }

  /* Se colocan por grid-area en vez de reordenar el HTML — el DOM se queda
     en el orden original (cabecera → abanico → features → flecha), que es
     el que se usa tal cual en móvil sin grid. Solo cambia dónde cae cada
     bloque visualmente en la rejilla de escritorio. */
  .dossier-fan {
    grid-area: fan;
    margin: 0;
    justify-self: center;
  }

  .dossier-teaser-inner {
    grid-area: kicker;
    margin: 0;
  }

  .dossier-features {
    grid-area: features;
    margin: clamp(28px, 3vw, 40px) 0 0;
  }

  .dossier-teaser-cue {
    grid-area: cue;
    margin: clamp(28px, 4vw, 44px) 0 0;
  }
}