/* ==========================================================================
   Aurora Bienestar — theme (fictional brand, demo)
   Calm, human, spacious: light header, centered hero, rounded shapes, pill buttons.
   Fonts: Fraunces 400 (+ italic) for display, Jost 400/500 for body (shared with base.css).
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-400-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces Fallback";
  src: local("Times New Roman"), local("Liberation Serif"), local("Noto Serif"), local("Georgia");
  size-adjust: 116%; /* Times/Liberation Serif scaled to Fraunces' average width (reduces layout shift on swap) */
}

:root {
  /* Brand palette (as briefed) — sage and clay are used for shapes/fills only */
  --aurora-sand: #f3ebdd;
  --aurora-sage: #8a9a7b;
  --aurora-green: #2f3e34;
  --aurora-clay: #c98b6b;

  /* AA-adjusted shades for text and UI (contrast measured against sand/cream unless noted) */
  --aurora-cream: #fbf7f0;
  --aurora-clay-ink: #93593d;    /* clay text: 4.75:1 on sand, 5.26:1 on cream */
  --aurora-sage-ink: #5a694e;    /* sage text & field borders: 4.98:1 on sand */
  --aurora-muted: #5c6458;       /* body muted: 5.19:1 on sand */
  --aurora-clay-light: #e8bfa6;  /* clay on deep green: 6.69:1 */
  --aurora-sage-light: #c9d2be;  /* sage on deep green: 7.23:1 */

  --color-bg: var(--aurora-sand);
  --color-surface: var(--aurora-cream);
  --color-text: var(--aurora-green);          /* 9.54:1 on sand */
  --color-text-muted: var(--aurora-muted);
  --color-border: #e3d8c6;
  --color-border-strong: var(--aurora-sage);  /* decorative lines only */
  --color-accent: var(--aurora-green);        /* primary buttons: sand on green 9.54:1 */
  --color-accent-ink: var(--aurora-clay-ink);
  --color-on-accent: var(--aurora-sand);

  --color-dark-bg: var(--aurora-green);
  --color-dark-surface: #3a4b3f;
  --color-dark-text: var(--aurora-sand);
  --color-dark-muted: var(--aurora-sage-light);
  --color-dark-border: #4a5c4f;

  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;

  --section-space: clamp(5rem, 3.5rem + 7vw, 9.5rem);
  --button-size: 1rem;
  --button-tracking: 0.01em;
  --button-transform: none;
  --button-radius: 999px;
  --button-padding: 0.875rem 1.875rem;
  --card-radius: 1.75rem;
  --field-radius: 0.875rem;
  --hero-space: clamp(5rem, 3rem + 8vw, 10rem);
  --hero-bg:
    radial-gradient(38rem 30rem at 12% 8%, rgb(138 154 123 / 0.3), transparent 65%),
    radial-gradient(34rem 26rem at 90% 92%, rgb(201 139 107 / 0.26), transparent 62%),
    var(--aurora-sand);
  --footer-bg: var(--aurora-green);
  --footer-text: var(--aurora-sage-light);
  --footer-border: transparent;
}

/* Dark contexts: the green accent would disappear on green, so switch to light clay. */
.on-dark,
.section--dark {
  --color-accent: var(--aurora-clay-light);
  --color-accent-ink: var(--aurora-clay-light);
  --color-on-accent: var(--aurora-green);    /* 6.69:1 */
}

/* ---- Typography ---- */
h1, h2, h3 {
  font-weight: 400;
  letter-spacing: -0.015em;
}
h1 {
  font-size: clamp(2.6rem, 1.6rem + 4.6vw, 5rem);
  line-height: 1.05;
}
h1 em,
h2 em {
  color: var(--color-accent-ink);
}
.eyebrow {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.125rem;
  letter-spacing: 0.01em;
  text-transform: none;
}
.lead {
  font-size: 1.1875rem;
}
.section__header {
  margin-bottom: var(--space-8);
}

/* ---- Header ---- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.375rem;
}
.wordmark svg {
  width: 1.75rem;
  height: 1.75rem;
}
.site-header {
  position: sticky;
}

/* ---- Hero ---- */
.hero__mark {
  width: 5.5rem;
  margin-bottom: var(--space-2);
}
.hero .lead {
  max-width: 34rem;
}

/* ---- Intro statement ---- */
.intro {
  padding-block: var(--space-8) 0;
}
.statement {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
}

/* ---- Service cards ---- */
.feature-grid {
  gap: var(--space-6);
}
.feature-grid--cards .feature {
  border-color: transparent;
  background: var(--color-surface);
  box-shadow: 0 1px 0 rgb(47 62 52 / 0.04), 0 18px 40px -28px rgb(47 62 52 / 0.35);
  gap: var(--space-4);
}
.feature__icon {
  width: 3.5rem;
  height: 3.5rem;
}

/* ---- Process timeline ---- */
.process-layout {
  display: grid;
  gap: var(--space-7);
}
@media (min-width: 60rem) {
  .process-layout {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
  }
  .process-layout .section__header {
    position: sticky;
    top: 7rem;
  }
}
.process--timeline .process__step::before {
  font-family: var(--font-display);
  color: var(--color-accent-ink);
  background: var(--color-bg);
  border-color: var(--aurora-sage);
}
.process--timeline .process__step:not(:last-child)::after {
  background: var(--aurora-sage);
}

/* ---- Social proof placeholder ---- */
.placeholder-block {
  border-radius: var(--card-radius);
  border-color: var(--aurora-sage);
  background: var(--color-surface);
}

/* ---- FAQ as soft cards ---- */
.faq {
  display: grid;
  gap: var(--space-3);
  border-top: 0;
}
.faq details {
  padding-inline: var(--space-5);
  border: 0;
  border-radius: 1.25rem;
  background: var(--color-bg);
}
.faq summary {
  font-weight: 400;
}

/* ---- Contact card ---- */
.contact--card {
  border: 0;
  box-shadow: 0 30px 60px -40px rgb(47 62 52 / 0.45);
}
.contact-form--light {
  --field-border: var(--aurora-sage-ink);  /* 5.89:1 on white */
}

/* ---- Footer ---- */
.site-footer {
  border-radius: var(--card-radius) var(--card-radius) 0 0;
}

/* ==========================================================================
   Premium layer (slow, breath-like variant) and image slots
   Long soft fades, a very small rise, a gentle ease-out: no bounce, no snap, no parallax.
   ========================================================================== */
[data-premium] {
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* soft ease-out: no overshoot */
  --duration: 360ms;
  --reveal-duration: 1100ms;
  --reveal-distance: 10px;
  --selection-bg: var(--aurora-sage-light);
  --selection-text: var(--aurora-green);          /* 7.23:1 or better */
  --footer-border: transparent;
  --shadow-sm: 0 1px 2px rgb(47 62 52 / 0.05), 0 4px 10px -4px rgb(47 62 52 / 0.1);
  --shadow-md: 0 1px 1px rgb(47 62 52 / 0.04), 0 8px 18px -8px rgb(47 62 52 / 0.18), 0 22px 40px -22px rgb(47 62 52 / 0.28);
  --tile-inset: 0.75rem;                          /* photos sit inside their card by 12px (16px from 48rem) */
  --tile-radius: calc(var(--card-radius) - var(--tile-inset));
}
@media (min-width: 48rem) {
  [data-premium] {
    --tile-inset: 1rem;
  }
}
/* Fraunces display keeps its soft tracking (the layer would tighten it). */
[data-premium] h1,
[data-premium] h2,
[data-premium] h3 {
  letter-spacing: -0.01em;
}

/* Images breathe in: a faint settle, never a zoom or a parallax. */
.reveal-ready [data-reveal]:not(.is-in) .ph img {
  transform: scale(1.015);
}
[data-premium] .ph img {
  transition-duration: 1800ms;
}
@media (prefers-reduced-motion: no-preference) {
  [data-premium] .hero .ph img {
    animation: aurora-settle 2400ms var(--ease) both;
  }
}
@keyframes aurora-settle {
  from { transform: scale(1.02); }
  to { transform: none; }
}

/* ---- "Illustrative image" label: quiet cream pill, always visible (green on cream ≈ 10:1) ---- */
.img-tag {
  position: absolute;
  z-index: 2;
  right: var(--space-3);
  bottom: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: rgb(251 247 240 / 0.94);
  color: var(--aurora-green);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.img-tag::before {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--aurora-clay);
}

/* ---- Hero: wide arch-topped photo below the headline and buttons (copy stays on clean sand) ---- */
.hero__photo {
  position: relative;
  width: min(100%, 60rem);
  margin: var(--space-6) auto 0;
}
.hero__photo .ph {
  aspect-ratio: 3 / 2;
  border-radius: 50% 50% var(--card-radius) var(--card-radius) / 30% 30% var(--card-radius) var(--card-radius);
  box-shadow: var(--shadow-md);
}
.hero__photo .ph img {
  object-position: 50% 62%;
}
@media (min-width: 40rem) {
  .hero__photo .ph {
    aspect-ratio: 16 / 9;
  }
}

/* ---- Statement: a soft band of light between the opening line and the services ---- */
.intro__band {
  position: relative;
  max-width: 70rem;
  margin: var(--space-7) auto 0;
}
.intro__band .ph {
  aspect-ratio: 16 / 9;
  border-radius: var(--card-radius);
}
@media (min-width: 48rem) {
  .intro__band .ph {
    aspect-ratio: 21 / 9;
  }
}

/* ---- Service cards: image tile on top, then title and text; rows aligned across the row ---- */
.feature-grid--cards {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0;
  column-gap: var(--space-4);
}
@media (min-width: 48rem) {
  .feature-grid--cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 72rem) {
  .feature-grid--cards {
    column-gap: var(--space-6);
  }
}
.feature-grid--cards .feature {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;   /* figure / title / text line up across the three cards */
  row-gap: 0;
  align-content: stretch;
  margin-bottom: var(--space-5);
  padding: var(--tile-inset) var(--tile-inset) var(--space-6);
}
@media (min-width: 48rem) {
  .feature-grid--cards .feature {
    margin-bottom: 0;
  }
}
.feature__img {
  position: relative;
  margin: 0 0 var(--space-4);
}
.feature__img .ph {
  aspect-ratio: 3 / 2;
  border-radius: var(--tile-radius);
}
@media (min-width: 48rem) {
  .feature__img .ph {
    aspect-ratio: 4 / 3;
  }
}
.feature-grid--cards .feature h3 {
  margin: 0 0 var(--space-2);
  padding-inline: var(--space-3);
  align-self: start;
}
.feature-grid--cards .feature p {
  padding-inline: var(--space-3);
  align-self: start;
}

/* ---- Process: lead image under the heading (above the timeline on mobile) ---- */
.process__lead {
  position: relative;
  margin: var(--space-5) 0 0;
}
.process__lead .ph {
  aspect-ratio: 3 / 2;
  border-radius: var(--card-radius);
}
@media (min-width: 60rem) {
  .process-layout .section__header {
    position: static;
  }
}

/* ---- Contact: photo above the copy's end, beside the form card ---- */
.contact__photo {
  position: relative;
  margin: var(--space-3) 0 0;
}
.contact__photo .ph {
  aspect-ratio: 4 / 3;
  border-radius: 1.25rem;
}

/* Generated by scripts/images.mjs: image placeholders (dominant colour + 24px WebP). */
.ph-aurora-01-sala{background-color:#9b8064;background-image:url(data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAABQBACdASoYABAAPu1iqU2ppaOiMAgBMB2JQBOmUAnABHeVCD9xjp6i8JIAAP7gdma4VG3/dXIE0EvJ7WICZd0SMO7dOQCGJVN3QN94W6mqGcXLYo1hJovxTRNWXJ4iGiFg1dr8nCHLFMnRfOmtEXgt7SSdztZdQrNdDscDULt8wAAA)}
.ph-aurora-07-luz{background-color:#c9a883;background-image:url(data:image/webp;base64,UklGRnoAAABXRUJQVlA4IG4AAADQAwCdASoYAAoAPu1iqk4ppaQiMAgBMB2JQBOgAxioyg1Ghnc62IAA/uB4/OsmQtmzGbGrTsWm54O3LIUxMejTItQUMvesjiag6poF/QR+WHpYPeRecIKNyDeGPRS41I8qpmWafI7klutcsAAAAA==)}
.ph-aurora-02-sesiones{background-color:#ad9074;background-image:url(data:image/webp;base64,UklGRsIAAABXRUJQVlA4ILYAAACwBQCdASoYABIAPu1sq1EppaOiqAqpMB2JYwCdM4DOO5HfzBDCA06PxTNQngoiwaWgWVXrQQAA/gOj13gLgZofGHjJA67LEPmPCkOF48v0UI28qu5GUyLS2gpXe+ApJskjGMHz/k8PX1ezh2YnKvltueKpUP5D4haWxOVuYgcO30TYPSyxNwtqDXgiub6Q3BQYzkqrBb2ue9pVW7faqfNVGlOiHFGc7bYTVsV31uZKfQJDKJiAAA==)}
.ph-aurora-03-programa{background-color:#ae9175;background-image:url(data:image/webp;base64,UklGRtgAAABXRUJQVlA4IMwAAABQBQCdASoYABIAPu1ur1IppiQiqAgBMB2JYwCdL9SAgxSq3RMHZBWJ6LMO1brc7GjXFAAA/R4i/ir71qsa9Ptt/390F/lsXyKsXeSsU3uZsLYPAyhkfu5TDE2Aa3heD7rmBW4NfIGRvvFWY8GZNF45RBhBd4YFLokRDJBOwogtcuQ6PFoYda8YFLw90DeFkDmnHbemCI4v0Xsv3cwdsPvah8L7gq85WXplYTOQehVNp/MDaiPXB1vqNNwmssDUF2k9hxqsQQnJ41QAAAA=)}
.ph-aurora-04-talleres{background-color:#bea388;background-image:url(data:image/webp;base64,UklGRs4AAABXRUJQVlA4IMIAAADwBQCdASoYABIAPu1srFEppaQiqAqpMB2JYwC7OUANFgMHTJQkxef3bGTKV5IbjtXg600cTVs4AAD5dlxuMxTayW3tszeGAqsLZAlYz7NyoyUfYzADa2SbYYBcIY4wpvDG//oAwPWORAyKwjxMSKabTDWNwPf7i53EkfQRggGob9O8hT62ikjVFU3DH2hPLsqUo+dT/IYD5CLeEPuCH+FH1yMRByfKEKlNahQrgKp4VHaR7y62GWINjdjbCGk8QzaAAA==)}
.ph-aurora-05-camino{background-color:#a2846c;background-image:url(data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAAAwBACdASoYABAAPu1iqU2ppaQiMAgBMB2JZgCdMoR3ACnRoSK5fvWoYfAA/tMkU0aRRxw8ljFy9OiRFynIT5/d/WgVN5puVa9b76CjN6JND3Qj7O7PoGJE+AN51llhorEurrSULg9xrnZ2RnZndK8NBnkdiv31JtkqkggrnSPpZWYAAAA=)}
.ph-aurora-06-conversacion{background-color:#a78566;background-image:url(data:image/webp;base64,UklGRsgAAABXRUJQVlA4ILwAAADwBACdASoYABIAPu1sqlEppaOiqAqpMB2JQAqvsH359oKdvWtvQU3I1e5P6pp/l4AAzZpiNoMQb6oc7yvn5T+lrBFKFvDJNkmtbHAJgycBhc8Gg5WZkRF8J5vSg8Vqr+91GJpb9soJ8fqzWijMjrSITZKHtt/UMluGPR5W3etVJH2fsq1T08wIS5eKGhRiCkFxt0kQ/F81qnukn8y7QtSS/N5vnzwzOkgNv1uuDyG4cQhNnzOW3kzI1hAAAA==)}