/* ==========================================================================
   Sukha · Centro Alternativo Holístico
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fuentes */

@font-face{font-family:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/lato-300-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:'Lato';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/lato-300-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:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lato-400-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:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/lato-400-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:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lato-700-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:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/lato-700-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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/playfair-display-500-italic-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:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url('../fonts/playfair-display-500-italic-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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/playfair-display-500-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:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/playfair-display-500-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}

/* --------------------------------------------------------------- 2. Tokens */

:root{
  /* verdes de marca, tomados de los folletos de Sukha */
  --ink:        #16331c;
  --ink-2:      #1c3f23;
  --ink-card:   #20472a;
  --ink-line:   #365c3e;

  /* superficies claras */
  --bg:         #f3f0e9;
  --white:      #ffffff;
  --lavender:   #e8e3d8;   /* banda crema, antes lavanda */
  --card:       #f8f6f0;
  --hairline:   #ded8ca;

  /* texto */
  --heading:    #14301a;
  --body:       #56605a;
  --body-dark:  #c6d2c5;
  --muted-dark: #9aaa9b;

  /* acentos */
  --teal:       #457052;
  --teal-light: #a8c2a9;
  --violet:     #3f6b4a;
  --magenta:    #3d6b4a;

  /* sin degradados llamativos: la marca es plana y sobria */
  --grad:       linear-gradient(100deg, #1e4526 0%, #2f5c39 100%);
  --grad-step:  linear-gradient(135deg, #1e4526 0%, #35643f 100%);
  --grad-quote: linear-gradient(105deg, #16331c 0%, #244c2c 100%);
  --grad-text:  linear-gradient(100deg, #457052 0%, #5d8a66 100%);

  /* sombras */
  --sh-card:    0 2px 4px rgba(20,48,26,.04), 0 12px 30px -12px rgba(20,48,26,.14);
  --sh-hover:   0 6px 14px rgba(20,48,26,.06), 0 26px 50px -18px rgba(20,48,26,.24);
  --sh-btn:     0 10px 24px -12px rgba(22,51,28,.55);

  /* ritmo */
  --wrap:       1160px;
  --gutter:     22px;
  --sec-y:      76px;
  --radius:     18px;
  --ease:       cubic-bezier(.22,.61,.36,1);
}

@media (min-width:768px){ :root{ --gutter:40px; --sec-y:104px } }
@media (min-width:1100px){ :root{ --sec-y:132px } }

/* --------------------------------------------------------------- 3. Base */

*,*::before,*::after{ box-sizing:border-box }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:84px;
  /* clip, no hidden: evita crear un contenedor de scroll en <body> */
  overflow-x:clip;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--body);
  font:400 16px/1.72 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{ max-width:100%; height:auto; display:block }
a{ color:inherit }
ul,ol{ margin:0; padding:0; list-style:none }
h1,h2,h3,p,blockquote,figure{ margin:0 }
button{ font:inherit; color:inherit; background:none; border:0 }

.sprite{ position:absolute; width:0; height:0; overflow:hidden }

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.section{ padding-block:var(--sec-y) }

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

.skip-link{
  position:absolute; left:50%; top:0; transform:translate(-50%,-140%);
  z-index:200; padding:12px 22px; border-radius:0 0 12px 12px;
  background:var(--ink); color:#fff; font-size:14px; text-decoration:none;
  transition:transform .2s var(--ease);
}
.skip-link:focus-visible{ transform:translate(-50%,0) }

:where(a,button,input):focus-visible{
  outline:2px solid #3f6b4a;
  outline-offset:3px;
  border-radius:6px;
}

/* --------------------------------------------------------------- 4. Tipografía */

.h2{
  font-family:'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight:500;
  font-size:clamp(2rem, 1.35rem + 2.75vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--heading);
}
.h2--onDark{ color:#fff }

.eyebrow{
  margin-bottom:16px;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.eyebrow--teal{ color:var(--teal) }
.eyebrow--violet{ color:var(--violet) }
.eyebrow--onDark{ color:var(--teal-light) }

.lead{
  margin-top:20px;
  max-width:48ch;
  font-size:1rem;
  color:var(--body);
  text-wrap:pretty;
}
.lead--onDark{ color:var(--body-dark) }

.grad-text{
  color:var(--teal);
  font-style:italic;
}

.rule{
  display:block;
  width:54px; height:2px;
  margin:26px 0 28px;
  background:var(--grad);
  border-radius:2px;
}

.sectionHead{ max-width:640px; margin-bottom:52px }
.sectionHead--center{ margin-inline:auto; text-align:center }
.sectionHead--center .lead{ margin-inline:auto }

@media (min-width:768px){
  .sectionHead{ margin-bottom:64px }
  .lead{ font-size:1.05rem }
}

/* --------------------------------------------------------------- 5. Botones */

.btn{
  --btn-py:13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:var(--btn-py) 26px;
  border-radius:999px;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.012em;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease);
}
.btn svg{ width:19px; height:19px; flex:none }

.btn--sm{ --btn-py:10px; padding-inline:22px; font-size:.83rem }
.btn--lg{ --btn-py:15px; padding-inline:32px; font-size:.95rem }

.btn--grad{
  color:#fff;
  background:var(--grad);
  background-size:150% 100%;
  background-position:0 0;
  box-shadow:var(--sh-btn);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-position .45s var(--ease);
}
.btn--grad:hover{ background-position:100% 0; transform:translateY(-2px); box-shadow:0 14px 34px -10px rgba(22,51,28,.5) }
.btn--grad:active{ transform:translateY(0) }

.btn--ghost{
  color:var(--heading);
  border:1px solid rgba(20,48,26,.28);
  background:transparent;
}
.btn--ghost:hover{ background:rgba(20,48,26,.06); border-color:rgba(20,48,26,.5); transform:translateY(-2px) }

/* --------------------------------------------------------------- 6. Cabecera */

.header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  transition:background-color .35s var(--ease), box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
.header.is-stuck{
  background:rgba(246,243,236,.9);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  box-shadow:0 1px 0 rgba(20,48,26,.1);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:72px;
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  flex:none;
}
.brand picture{ display:flex; flex:none }
.brand__mark{ width:34px; height:auto }
.brand__name{
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.2rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--heading);
}

.nav{ display:flex; align-items:center; gap:34px }
.nav > a:not(.nav__cta){
  position:relative;
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:rgba(20,48,26,.78);
  text-decoration:none;
  transition:color .25s var(--ease);
}
.nav > a:not(.nav__cta)::after{
  content:'';
  position:absolute; left:0; bottom:-7px;
  width:100%; height:1px;
  background:var(--grad-text);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav > a:not(.nav__cta):hover{ color:var(--heading) }
.nav > a:not(.nav__cta):hover::after{ transform:scaleX(1) }

.burger{
  display:none;
  width:44px; height:44px;
  margin-right:-10px;
  padding:12px 10px;
  flex-direction:column;
  justify-content:space-between;
  cursor:pointer;
}
.burger span{
  display:block; height:1.5px; width:100%;
  background:var(--heading); border-radius:2px;
  transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.5px) rotate(-45deg) }

@media (max-width:900px){
  .burger{ display:flex }
  .nav{
    position:fixed;
    inset:72px 0 auto;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px var(--gutter) 30px;
    background:rgba(246,243,236,.98);
    -webkit-backdrop-filter:blur(18px);
    backdrop-filter:blur(18px);
    border-top:1px solid rgba(20,48,26,.12);
    box-shadow:0 26px 40px -24px rgba(20,48,26,.35);
    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);
    transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:translateY(0) }
  .nav > a:not(.nav__cta){
    padding:17px 2px;
    font-size:.82rem;
    border-bottom:1px solid rgba(20,48,26,.1);
  }
  .nav > a:not(.nav__cta)::after{ display:none }
  .nav__cta{ margin-top:24px; align-self:flex-start }
}

/* --------------------------------------------------------------- 7. Hero */

.hero{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:auto;
  padding:136px 0 90px;
  background:var(--bg);
  overflow:hidden;
}

/* la atmósfera del concepto: brillo violeta arriba a la derecha,
   azul-verdoso abajo a la izquierda, sobre tinta profunda */
.hero__glow{
  position:absolute; inset:-10%;
  z-index:-1;
  background:
    radial-gradient(54% 46% at 88% 12%, rgba(150,178,150,.34) 0%, rgba(150,178,150,0) 64%),
    radial-gradient(46% 44% at 6% 88%, rgba(176,190,162,.30) 0%, rgba(176,190,162,0) 66%),
    linear-gradient(160deg, #f6f3ec 0%, #efece2 52%, #e9e5d9 100%);
}
.hero__glow::after{
  content:'';
  position:absolute; inset:0;
  background:none;
}

.hero__inner{
  position:relative;
  z-index:1;
  display:grid;
  gap:40px;
  align-items:center;
}
@media (min-width:900px){
  .hero{ padding:150px 0 118px }
  .hero__inner{ grid-template-columns:1.12fr .88fr; gap:58px }
}

.hero__media img{
  width:100%;
  aspect-ratio:1/1.04;
  object-fit:cover;
  border-radius:36px 36px 36px 10px;
  box-shadow:0 30px 60px -32px rgba(20,48,26,.45);
}

/* El contenido de la portada entra con CSS, no con JavaScript: se ve
   de inmediato aunque el script tarde o falle. */
@keyframes riseIn{
  from{ opacity:0; transform:translateY(20px) }
  to  { opacity:1; transform:none }
}
.hero__inner > *,
.hero__scroll{ animation:riseIn .85s var(--ease) both }
.hero .eyebrow  { animation-delay:.05s }
.hero__title    { animation-delay:.16s }
.hero__lead     { animation-delay:.32s }
.hero__actions  { animation-delay:.46s }
.hero__scroll   { animation-delay:.72s }

.hero .eyebrow{
  font-size:.66rem;
  letter-spacing:.26em;
  color:var(--teal);
}

.hero__title{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:clamp(2.2rem, 1.35rem + 2.6vw, 3.5rem);
  line-height:1.12;
  letter-spacing:-.018em;
  color:var(--heading);
}
.hero__title em{ display:inline-block; padding-bottom:.08em }

.hero__lead{
  margin:24px 0 0;
  max-width:42ch;
  font-weight:400;
  font-size:clamp(1rem, .94rem + .3vw, 1.08rem);
  color:var(--body);
}

.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:36px;
}

.hero__scroll{
  display:none;
  position:absolute;
  left:50%; bottom:34px;
  transform:translateX(-50%);
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:rgba(255,255,255,.4);
  text-decoration:none;
  transition:color .3s var(--ease);
}
.hero__scroll:hover{ color:rgba(255,255,255,.78) }
.hero__scrollLine{
  width:1px; height:38px;
  background:linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.55));
}

@media (max-width:600px){
  .hero{ min-height:auto; padding:126px 0 96px }
  .hero__actions .btn{ width:100%; max-width:300px }
  .hero__scroll{ display:none }
}

/* --------------------------------------------------------------- 8. Servicios */

.services{ background:var(--white) }

.cards{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .cards{ grid-template-columns:repeat(2,1fr); gap:20px } }
@media (min-width:1000px){ .cards{ grid-template-columns:repeat(3,1fr); gap:24px } }

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:32px 28px 26px;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--card);
  overflow:hidden;
  transition:transform .34s var(--ease), box-shadow .34s var(--ease), border-color .34s var(--ease);
}
.card::before{
  content:'';
  position:absolute; inset:0 0 auto;
  height:3px;
  background:linear-gradient(90deg, #457052, #2f5c39 60%, #1e4526);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .42s var(--ease);
}
.card:hover,
.card:focus-within{
  transform:translateY(-5px);
  border-color:transparent;
  box-shadow:var(--sh-hover);
}
.card:hover::before,
.card:focus-within::before{ transform:scaleX(1) }

.card__icon{
  display:grid;
  place-items:center;
  width:46px; height:46px;
  margin-bottom:22px;
  border-radius:13px;
  background:linear-gradient(140deg, #e6efe3, #eef0e2);
  color:#38603f;
}
.card__icon svg{ width:23px; height:23px }

.card__title{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:1.2rem;
  line-height:1.3;
  color:var(--heading);
}

.card__text{
  margin-top:12px;
  margin-bottom:22px;
  font-size:.9rem;
  line-height:1.7;
  color:var(--body);
}

.card__link{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:flex-start;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--magenta);
  text-decoration:none;
}
.card__link svg{
  width:15px; height:15px;
  transition:transform .3s var(--ease);
}
.card__link:hover svg{ transform:translateX(5px) }

/* --------------------------------------------------------------- 9. Frase */

.quote{
  padding-block:clamp(58px, 8vw, 92px);
  background:var(--grad-quote);
  text-align:center;
}
.quote__inner{ max-width:820px }
.quote__text{
  font-family:'Playfair Display', Georgia, serif;
  font-style:italic;
  font-weight:500;
  font-size:clamp(1.22rem, .95rem + 1.5vw, 1.95rem);
  line-height:1.5;
  color:#fff;
  text-wrap:balance;
}
.quote__source{
  margin-top:22px;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(255,255,255,.6);
}

/* --------------------------------------------------------------- 10. Nosotros */

.about{ background:var(--lavender) }

.about__inner{
  display:grid;
  gap:44px;
  align-items:center;
}
@media (min-width:900px){
  .about__inner{ grid-template-columns:1fr 1.06fr; gap:72px }
}

.about__media{ position:relative }
.about__media picture{ display:block }

.about__photo{
  width:100%;
  aspect-ratio:1/1.1;
  border-radius:44px 44px 44px 12px;
  object-fit:cover;
  background:linear-gradient(155deg, #e7ece2, #dfe2d3);  /* mientras carga */
  box-shadow:0 30px 60px -30px rgba(20,48,26,.42);
}

.about__badge{
  position:absolute;
  right:18px; bottom:-26px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:112px; height:112px;
  border-radius:50%;
  background:var(--grad-step);
  color:#fff;
  text-align:center;
  font-size:.6rem;
  letter-spacing:.07em;
  line-height:1.32;
  box-shadow:0 18px 34px -14px rgba(22,51,28,.55);
}
.about__badge b{ font-size:1.45rem; font-weight:400; line-height:1 }
.about__badge span{ max-width:74px }

@media (min-width:900px){
  .about__badge{
    right:-30px; bottom:34px;
    width:126px; height:126px;
    font-size:.63rem;
  }
  .about__badge span{ max-width:86px }
}

.about__text{ display:grid; gap:17px; max-width:52ch }
.about__text p{ font-size:.97rem }
.about__body > .reveal:last-child{ margin-top:34px }

/* --------------------------------------------------------------- 10b. Nuestro espacio */

.space{ background:var(--white) }

.gallery{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:640px){ .gallery{ grid-template-columns:repeat(3,1fr); gap:20px } }
@media (min-width:1000px){ .gallery{ gap:26px } }

.gallery__item{ margin:0 }

.gallery__item picture{ display:block }

.gallery__item img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:22px;
  background:linear-gradient(155deg, #e7ece2, #dfe2d3);  /* mientras carga */
  box-shadow:var(--sh-card);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.gallery__item:hover img{
  transform:translateY(-5px);
  box-shadow:var(--sh-hover);
}

.gallery__cap{
  margin-top:15px;
  font-size:.82rem;
  letter-spacing:.02em;
  color:var(--body);
  text-align:center;
}

@media (max-width:639px){
  .gallery__item img{ aspect-ratio:4/3.2 }
}

/* --------------------------------------------------------------- 11. Por qué Sukha */

.why{
  position:relative;
  isolation:isolate;
  background:var(--lavender);
  overflow:hidden;
}
.why .h2--onDark{ color:var(--heading) }
.why .lead--onDark{ color:var(--body) }
.why .eyebrow--onDark{ color:var(--teal) }
.why__glow{
  position:absolute; inset:0;
  z-index:-1;
  background:
    radial-gradient(46% 62% at 96% 84%, rgba(150,178,150,.26) 0%, rgba(150,178,150,0) 66%),
    radial-gradient(40% 54% at 4% 8%, rgba(176,190,162,.22) 0%, rgba(176,190,162,0) 68%);
}

.pillars{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:620px){ .pillars{ grid-template-columns:repeat(2,1fr); gap:20px } }
@media (min-width:1040px){ .pillars{ grid-template-columns:repeat(4,1fr); gap:22px } }

.pillar{
  padding:32px 26px 30px;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:var(--sh-card);
  transition:transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.pillar:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-hover);
}

.pillar__num{
  display:block;
  margin-bottom:16px;
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.9rem;
  font-weight:500;
  color:var(--teal);
}

.pillar__title{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:1.12rem;
  color:var(--heading);
}

.pillar__text{
  margin-top:12px;
  font-size:.88rem;
  line-height:1.72;
  color:var(--body);
}

/* --------------------------------------------------------------- 12. Proceso */

.process{ background:var(--white) }

.steps{
  position:relative;
  display:grid;
  gap:46px;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .steps{ grid-template-columns:repeat(3,1fr); gap:34px }
  /* la línea que une los tres pasos en el concepto */
  .steps::before{
    content:'';
    position:absolute;
    top:32px; left:16.6%; right:16.6%;
    height:1px;
    background:linear-gradient(90deg, rgba(69,112,82,0), rgba(69,112,82,.38) 12%, rgba(69,112,82,.38) 88%, rgba(69,112,82,0));
  }
}

.step{ position:relative; text-align:center }

.step__num{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:64px; height:64px;
  margin:0 auto 26px;
  border:5px solid var(--white);
  border-radius:50%;
  background:var(--grad-step);
  color:#fff;
  font-family:'Playfair Display', Georgia, serif;
  font-size:1.28rem;
  box-shadow:0 14px 28px -12px rgba(22,51,28,.5);
}

.step__title{
  font-family:'Playfair Display', Georgia, serif;
  font-weight:500;
  font-size:1.25rem;
  color:var(--heading);
}

.step__text{
  margin:12px auto 0;
  max-width:34ch;
  font-size:.9rem;
  line-height:1.72;
}

/* --------------------------------------------------------------- 13. Contacto */

.contact{ background:var(--bg) }

.contact__inner{
  display:grid;
  gap:44px;
  align-items:center;
}
@media (min-width:900px){
  .contact__inner{ grid-template-columns:1fr 1.1fr; gap:70px }
}

/* El mapa va dentro de un iframe; el degradado se ve mientras carga. */
.contact__map{
  position:relative;
  aspect-ratio:4/3.4;
  border-radius:26px;
  overflow:hidden;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 46px),
    radial-gradient(76% 66% at 50% 42%, #24492c 0%, #1a3821 62%, #16331c 100%);
  box-shadow:0 26px 54px -28px rgba(20,48,26,.5);
}
.contact__map iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
}

.details{
  display:grid;
  gap:2px;
  margin-top:34px;
  margin-bottom:34px;
}
.detail{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
}
.detail:last-child{ border-bottom:0 }

.detail__icon{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  flex:none;
  border-radius:12px;
  background:linear-gradient(140deg, #e6efe3, #eef0e2);
  color:#38603f;
}
.detail__icon svg{ width:20px; height:20px }

.detail__label{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--teal);
}
.detail__value{
  margin-top:3px;
  font-size:.96rem;
  color:var(--heading);
}
.detail__value + .detail__value{ margin-top:2px }
.detail__hint{
  margin-left:6px;
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
}
.detail__value a{ text-decoration:none; transition:color .25s var(--ease) }
.detail__value a:hover{ color:var(--magenta) }

/* --------------------------------------------------------------- 14. Pie */

.footer{
  padding:62px 0 40px;
  background:var(--ink);
  text-align:center;
}
.footer__inner{ display:grid; justify-items:center }

.brand--footer{ flex-direction:column; gap:14px }
.brand--footer .brand__name{ color:#f1ede3 }
.brand--footer .brand__mark{ width:44px }
.brand--footer .brand__name{ font-size:1.4rem; letter-spacing:.2em }

.footer__tagline{
  margin-top:16px;
  font-size:.85rem;
  color:var(--muted-dark);
}

.footer__nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px 30px;
  margin-top:32px;
}
.footer__nav a{
  font-size:.74rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(226,220,244,.72);
  text-decoration:none;
  transition:color .25s var(--ease);
}
.footer__nav a:hover{ color:#fff }

.social{
  display:flex;
  gap:12px;
  margin-top:30px;
}
.social a{
  display:grid;
  place-items:center;
  width:42px; height:42px;
  border:1px solid var(--ink-line);
  border-radius:50%;
  color:rgba(226,220,244,.78);
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.social svg{ width:19px; height:19px }
.social a:hover{
  color:#fff;
  border-color:rgba(168,194,169,.75);
  background:rgba(168,194,169,.16);
  transform:translateY(-2px);
}

.footer__note{
  max-width:52ch;
  margin-top:36px;
  font-size:.74rem;
  line-height:1.7;
  color:rgba(154,170,155,.85);
}

.footer__copy{
  width:100%;
  margin-top:26px;
  padding-top:26px;
  border-top:1px solid rgba(255,255,255,.07);
  font-size:.74rem;
  color:var(--muted-dark);
}

.footer__badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top:22px;
  padding:9px 16px 9px 14px;
  border:1px solid var(--ink-line);
  border-radius:999px;
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.02em;
  color:rgba(226,220,244,.82);
  text-decoration:none;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease), transform .25s var(--ease);
}
.footer__badge-dot{
  width:7px; height:7px;
  border-radius:50%;
  background:var(--teal-light);
  box-shadow:0 0 0 3px rgba(168,194,169,.2);
}
.footer__badge svg{ width:14px; height:14px; opacity:.75 }
.footer__badge:hover{
  color:#fff;
  border-color:rgba(168,194,169,.75);
  background:rgba(168,194,169,.16);
  transform:translateY(-2px);
}

/* --------------------------------------------------------------- 15. Botón flotante */

.fab{
  position:fixed;
  right:18px; bottom:18px;
  z-index:90;
  display:grid;
  place-items:center;
  width:56px; height:56px;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  box-shadow:0 12px 30px -8px rgba(22,51,28,.55);
  opacity:0;
  visibility:hidden;
  transform:translateY(14px) scale(.9);
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.fab.is-visible{ opacity:1; visibility:visible; transform:none }
.fab:hover{ transform:scale(1.06) }
.fab svg{ width:28px; height:28px }

@media (min-width:768px){
  .fab{ right:28px; bottom:28px; width:60px; height:60px }
}

/* --------------------------------------------------------------- 16. Animación */

.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
.js .reveal.is-in{ opacity:1; transform:none }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  .js .reveal{ opacity:1; transform:none; transition:none }
  .hero__inner > *,
  .hero__scroll{ animation:none }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* --------------------------------------------------------------- 17. Impresión */

@media print{
  .header,.fab,.hero__scroll,.contact__map{ display:none }
  body{ background:#fff; color:#000 }
  .hero,.why,.footer,.quote{ background:#fff !important; color:#000 }
  .hero__title,.h2--onDark,.pillar__title,.brand__name,.quote__text{ color:#000 !important }
}