:root { --paper: #F8F7F4; --paper-2: #F4F2EC; --paper-3: #F0EDE6; --paper-4: #E7E3D9; --ink: #111111; --ink-soft: #34352F; --mute: #95948E; --rule: rgba(17,17,17,0.16); --rule-soft: rgba(17,17,17,0.08); --sage-pale: #ECF1EB; --sage-l: #A9C5AC; --sage: #7FA082; --sage-d: #5E7A61; --sky-pale: #EAF3F8; --sky-l: #D4E4EE; --sky: #5B86A0; --sky-d: #3F6A85; --teal-pale: #E4F0EE; --teal-l: #8FBEB9; --teal: #2C807A; --teal-d: #1F6F6B; --brand: var(--sage); --brand-deep: var(--sage-d); --brand-light: var(--sage-l); --accent: var(--teal-d); --accent-light: var(--teal-l); --action: var(--teal-d); --action-hover: #185A57; --marea: var(--sky-d); --text-strong: var(--ink); --text-body: var(--ink-soft); --text-muted: var(--mute); --text-on-dark: var(--paper); --surface-page: var(--paper); --surface-card: var(--paper-3); --surface-dark: var(--sage-d); --surface-sky: var(--sky-pale); --border-rule: var(--rule); --border-soft: var(--rule-soft); --focus: var(--teal-d); }
:root { --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; --font-display: var(--serif); --font-body: var(--sans); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --display-xl: clamp(2.6rem, 3.8vw, 5rem); --display-l: clamp(2.2rem, 4vw, 3.8rem); --display-m: clamp(1.85rem, 3vw, 2.6rem); --display-s: clamp(1.4rem, 2vw, 1.85rem); --lede: clamp(1.15rem, 1.5vw, 1.35rem); --text-base: 1rem; --text-sm: 0.88rem; --text-xs: 0.83rem; --label: 0.65rem; --lh-display: 1.0; --lh-snug: 1.3; --lh-normal: 1.6; --lh-relaxed: 1.8; --ls-display: -0.02em; --ls-label: 0.18em; --ls-tag: 0.22em; }
:root { --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.75rem; --space-7: 2.5rem; --space-8: 3.5rem; --space-9: clamp(3.5rem, 7vw, 7rem); --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-pill: 999px; --shadow-img: 0 18px 50px -22px rgba(20,30,40,0.32); --shadow-none: none; --max: 1180px; --gutter: clamp(1.5rem, 4vw, 3rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 0.2s; --dur-base: 0.25s; --dur-slow: 0.7s; }
*, ::before, ::after { box-sizing: border-box; }
body { margin: 0px; font-family: var(--sans); font-size: var(--text-base); font-weight: var(--fw-light); line-height: var(--lh-normal); color: var(--text-body); background: var(--surface-page); -webkit-font-smoothing: antialiased; text-rendering: optimizelegibility; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: var(--fw-regular); color: var(--text-strong); line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0px; text-wrap: balance; }
h1 { font-size: var(--display-xl); }
h2 { font-size: var(--display-m); }
h3 { font-size: var(--display-s); line-height: var(--lh-snug); }
p { margin: 0px 0px 1em; text-wrap: pretty; }
em, .em { font-style: italic; font-weight: var(--fw-light); color: var(--brand); }
a { color: var(--brand-deep); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.container { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.tag-label { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--sans); font-size: 0.7rem; font-weight: var(--fw-medium); letter-spacing: var(--ls-tag); text-transform: uppercase; color: var(--brand); }
.tag-label::before { content: ""; width: 22px; height: 1px; background: currentcolor; }
.micro-label { font-family: var(--sans); font-size: var(--label); font-weight: var(--fw-medium); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-muted); }
.lede { font-family: var(--serif); font-style: italic; font-size: var(--lede); font-weight: var(--fw-regular); line-height: 1.5; color: var(--text-body); }
html, body { background: var(--surface-page); }
::selection { background: var(--sage-l); }
a { transition: color .2s var(--ease); }


/* ====================== RESPONSIVE (añadido a mano) ====================== */
/* Botón hamburguesa + menú móvil (inyectados por site.js) */
.mnav-btn{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:.35rem;line-height:0}
.mnav-btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.mnav{display:none;position:fixed;top:64px;left:0;right:0;z-index:60;flex-direction:column;
  background:var(--surface-page,#F8F7F4);border-bottom:1px solid var(--rule-soft);
  padding:.75rem var(--gutter) 1.5rem;box-shadow:0 16px 34px -20px rgba(0,0,0,.32)}
.mnav a{font-family:var(--sans);font-size:1.05rem;color:var(--ink-soft);text-decoration:none;
  padding:.85rem .15rem;border-bottom:1px solid var(--rule-soft)}
.mnav a:last-child{border-bottom:0;margin-top:.9rem;color:#fff;background:var(--sage-d);
  border-radius:999px;text-align:center;padding:.85rem 1rem;font-weight:500}
body.mnav-open{overflow:hidden}
body.mnav-open .mnav{display:flex}

@media (max-width: 860px){
  /* Navegación: ocultar enlaces de escritorio + CTA, mostrar hamburguesa */
  nav[aria-label] > ul{display:none !important}
  nav[aria-label] > a:not(:first-child){display:none !important}
  .mnav-btn{display:inline-flex}

  /* Rejillas multicolumna -> 1 columna */
  [style*="grid-template-columns: 4fr 6fr 3fr"],
  [style*="grid-template-columns: 5fr 7fr"],
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns: 1.1fr 0.9fr"],
  [style*="grid-template-columns: 340px 1fr"],
  [style*="grid-template-columns: 320px 1fr"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 120px 1fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"]{
    grid-template-columns: 1fr !important;
  }
  /* 4 columnas -> 2 */
  [style*="grid-template-columns: repeat(4, 1fr)"]{grid-template-columns: repeat(2,1fr) !important}
  /* reducir gaps/padding muy grandes en contenedores apilados */
  [style*="grid-template-columns: 4fr 6fr 3fr"]{gap:1.5rem !important}
}

@media (max-width: 600px){
  /* Todo lo de 2 columnas -> 1 */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns: repeat(2, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"]{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 600px){
  /* Cierre "en el fondo" de la home: agrandar en móvil */
  [style*="clamp(1.05rem, 1.6vw, 1.3rem)"]{font-size:1.2rem !important;line-height:1.65 !important}
}


/* ====== Ajustes (avión, contacto, WhatsApp) ====== */
/* Avión: la foto antes que el texto (escritorio y móvil) */
[style*="grid-template-columns: 1.1fr 0.9fr"] > div:first-child{order:2}
[style*="grid-template-columns: 1.1fr 0.9fr"] > div:last-child{order:1}

/* Botón flotante de WhatsApp */
.wa-float{position:fixed;right:18px;bottom:18px;width:56px;height:56px;border-radius:50%;
  background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.4);z-index:70;text-decoration:none;transition:transform .2s}
.wa-float:hover{transform:scale(1.06)}
.wa-float svg{width:32px;height:32px;fill:currentColor}

@media (max-width: 860px){
  /* Contacto: en móvil, el formulario antes que "Tu bienestar importa" */
  [style*="calc(-64px + 100vh)"] > aside{order:2 !important}
  [style*="calc(-64px + 100vh)"] > *:not(aside){order:1 !important}
}