/* ─────────────────────────  TOKENS (paleta del mockup)  ───────────────────────── */
:root{
  --cream:   #F6F3EC;   /* fondo base                     */
  --panel:   #EDE9DE;   /* franjas beige                  */
  --tint:    #E3E6D5;   /* paneles verde suave            */
  --sage:    #77875D;   /* botones / acento               */
  --sage-dk: #5C6A45;   /* hover / contraste              */
  --forest:  #3F4A38;   /* titulares y texto fuerte       */
  --body:    #57604F;   /* texto corriente                */
  --ochre:   #C9A15C;   /* detalles                       */
  --line:    #DFD9CA;   /* bordes hairline                */
  --white:   #FFFFFF;
  --todo-bg: #FFF3C4;
  --todo-ink:#8A6D00;
  --radius:  10px;
  --shadow:  0 6px 24px rgba(63,74,56,.07);
  --max:     1120px;
}

/* ─────────────────────────  BASE  ───────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Mulish',system-ui,sans-serif;
  font-size:16.5px;line-height:1.65;
  color:var(--body);background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%}
a{color:var(--sage-dk)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* tipografía */
.serif{font-family:'Cormorant Garamond',serif;font-weight:600;color:var(--forest);line-height:1.15}
h1.serif{font-size:clamp(2.2rem,5.4vw,3.5rem)}
h2.serif{font-size:clamp(1.8rem,4.2vw,2.6rem)}
h3.serif{font-size:clamp(1.3rem,2.6vw,1.7rem)}
.eyebrow{
  display:inline-block;font-size:.74rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--sage-dk);
  margin-bottom:14px;
}
.lead{font-size:clamp(1rem,1.8vw,1.13rem);max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}

/* secciones */
.sec{padding:clamp(60px,8.5vw,104px) 0}
.sec--panel{background:var(--panel)}
.sec--tint{background:var(--tint)}
.sec--white{background:var(--white)}
.sec--forest{background:var(--forest)}
.sec-head{max-width:860px;margin:0 auto clamp(30px,5vw,52px)}

/* botones */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:'Mulish',sans-serif;font-weight:800;font-size:.8rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:16px 28px;border-radius:6px;text-decoration:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  border:1.5px solid transparent;cursor:pointer;
}
.btn--solid{background:var(--sage);color:#fff;box-shadow:0 8px 20px rgba(119,135,93,.28)}
.btn--solid:hover{background:var(--sage-dk);transform:translateY(-2px)}
.btn--line{background:transparent;color:var(--sage-dk);border-color:var(--sage)}
.btn--line:hover{background:var(--tint)}
.btn--light{background:#fff;color:var(--forest)}
.btn--light:hover{background:var(--panel);transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}

/* placeholder de fotografía */
.ph{
  background:repeating-linear-gradient(45deg,#EFEBE0,#EFEBE0 14px,#E7E2D4 14px,#E7E2D4 28px);
  border:2px dashed var(--sage);border-radius:var(--radius);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--sage-dk);font-weight:700;font-size:.85rem;letter-spacing:.06em;
  padding:20px;min-height:280px;
}

/* reveal */
.reveal{
  opacity:0;
  transform:translate3d(0,28px,0) scale(.992);
  filter:blur(7px);
  transition:
    opacity .82s cubic-bezier(.22,1,.36,1),
    transform .82s cubic-bezier(.22,1,.36,1),
    filter .82s cubic-bezier(.22,1,.36,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform,filter;
}
.reveal.in{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{
    opacity:1;
    transform:none;
    filter:none;
    transition:none;
  }
  .btn{transition:none}
}

/* rama botánica decorativa */
.sprig{width:52px;height:52px;stroke:var(--sage);opacity:.55;margin:0 auto 10px}

/* lista de checks genérica */
.checklist{list-style:none;margin-top:20px;max-width:720px}
.checklist li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;font-weight:600;color:var(--forest);font-size:.98rem;line-height:1.5}
.checklist svg{width:19px;height:19px;flex:none;margin-top:4px;stroke:var(--sage-dk)}
.checklist.center-list{margin-left:auto;margin-right:auto}


/* ─────────────────────  IDENTIDAD VISUAL Y FOTOGRAFÍAS  ───────────────────── */
.brand{
  display:flex;align-items:center;gap:11px;
}
.brand-logo{
  width:46px;height:46px;object-fit:contain;flex:none;
  filter:saturate(.92) contrast(1.03);
}
.brand-copy{display:block}
.hero-visual{
  position:relative;max-width:500px;margin-left:auto;
}
.portrait-frame{
  position:relative;border-radius:28px;overflow:hidden;
  background:linear-gradient(145deg,#E6E9DC,#F6F3EC);
  box-shadow:0 24px 64px rgba(63,74,56,.18);
  border:1px solid rgba(119,135,93,.28);
  isolation:isolate;
}
.portrait-frame::before{
  content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.58);
  border-radius:20px;z-index:2;pointer-events:none;
}
.portrait-frame img{
  width:100%;height:100%;object-fit:cover;
}
.portrait-frame--hero{aspect-ratio:4/5}
.portrait-frame--hero img{object-position:center 34%}
.portrait-frame--about{aspect-ratio:4/5;max-width:470px}
.portrait-frame--about img{object-position:center 34%}
.photo-badge{
  position:absolute;left:-22px;bottom:28px;z-index:4;
  width:min(238px,58%);background:rgba(255,255,255,.94);
  backdrop-filter:blur(9px);border:1px solid rgba(119,135,93,.24);
  border-radius:14px;padding:15px 17px;box-shadow:0 16px 34px rgba(63,74,56,.16);
}
.photo-badge strong{
  display:block;color:var(--forest);font-family:'Cormorant Garamond',serif;
  font-size:1.15rem;line-height:1.15;
}
.photo-badge span{display:block;font-size:.78rem;font-weight:700;color:var(--sage-dk);margin-top:3px}
.photo-mark{
  position:absolute;right:-24px;top:-28px;z-index:4;
  width:112px;height:112px;border-radius:50%;background:rgba(246,243,236,.92);
  border:1px solid rgba(119,135,93,.24);padding:12px;box-shadow:var(--shadow);
  overflow:hidden;
}
.photo-mark img{width:100%;height:100%;object-fit:contain}
.about-photo-wrap{position:relative;max-width:470px}
.about-logo-card{
  position:absolute;right:-34px;bottom:30px;width:210px;z-index:4;
  background:rgba(246,243,236,.95);border:1px solid var(--line);
  border-radius:12px;padding:12px 16px;box-shadow:var(--shadow);
}
.about-logo-card img{width:100%;height:auto}
.footer-logo{
  width:min(310px,100%);height:auto;margin-bottom:12px;
}
.booking-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;
}
.booking-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow);text-align:left;
}
.booking-card h3{font-family:'Cormorant Garamond',serif;color:var(--forest);font-size:1.35rem;margin-bottom:8px}
.booking-card p{font-size:.93rem;margin-bottom:16px}
.booking-card .btn{width:100%}
.agenda-note{
  max-width:760px;margin:24px auto 0;text-align:center;font-size:.9rem;color:var(--body)
}
@media (max-width:880px){
  .hero-visual{margin:0 auto}
  .photo-badge{left:14px;bottom:18px}
  .photo-mark{right:10px;top:10px;width:92px;height:92px}
  .about-photo-wrap{margin:0 auto}
  .about-logo-card{right:10px;bottom:18px;width:180px}
  .booking-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .brand-logo{width:40px;height:40px}
  .brand .n{font-size:1.02rem}
  .brand .t{font-size:.57rem;letter-spacing:.2em}
  .nav .btn{padding:10px 13px;font-size:.68rem;letter-spacing:.08em}
  .photo-badge{position:absolute;width:calc(100% - 28px);left:14px;right:14px}
  .photo-mark{width:78px;height:78px}
  .about-logo-card{position:relative;right:auto;bottom:auto;width:100%;margin-top:12px}
}

/* ─────────────────────  HEADER  ───────────────────── */
header.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(246,243,236,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:14px;padding-bottom:14px}
.brand{line-height:1.15;text-decoration:none}
.brand .n{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.2rem;color:var(--forest);letter-spacing:.05em;text-transform:uppercase}
.brand .t{display:block;font-size:.64rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--sage-dk)}
.nav-links{display:flex;gap:26px;font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.nav-links a{color:var(--forest);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav-links a:hover{border-color:var(--sage)}
.nav .btn{padding:12px 20px}

/* ─────────────────────  HERO  ───────────────────── */
.hero{padding:clamp(48px,7vw,88px) 0}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,64px);align-items:center}
.hero .lead{margin:20px 0 28px}
.hero-checks{list-style:none;margin-top:18px}
.hero-checks li{display:flex;gap:10px;align-items:center;padding:5px 0;font-weight:700;color:var(--forest);font-size:.92rem}
.hero-checks svg{width:18px;height:18px;flex:none;stroke:var(--sage-dk)}
.hero-ph{min-height:420px}

/* ─────────────────────  TARJETAS  ───────────────────── */
.grid{display:grid;gap:20px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 26px;box-shadow:var(--shadow);
}
.card h3{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.35rem;color:var(--forest);margin:10px 0 8px}
.card p{font-size:.95rem}
.card .emo{
  width:52px;height:52px;border-radius:50%;background:var(--tint);
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;
}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,60px);align-items:center}

/* ─────────────────────  SOBRE MÍ  ───────────────────── */
.bio p{margin-bottom:14px}
.bio .sign{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:1.15rem;color:var(--forest);margin-top:6px}
.bio details{margin-top:4px}
.bio summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--sage-dk);
}
.bio summary::-webkit-details-marker{display:none}
.bio summary::after{content:"+";font-size:1.05rem}
.bio details[open] summary::after{content:"–"}
.bio details .more{margin-top:14px}

/* ─────────────────────  VERBOS (tiempo que tu salud merece)  ───────────────────── */
.verbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  max-width:820px;margin:clamp(26px,4vw,40px) auto 0;
}
.verb{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 12px;text-align:center;box-shadow:var(--shadow);
}
.verb svg{width:20px;height:20px;margin:0 auto 8px;stroke:var(--sage-dk)}
.verb p{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:1.3rem;color:var(--forest)}

/* ─────────────────────  EVIDENCIA  ───────────────────── */
.evidence{
  max-width:820px;margin:0 auto;background:var(--white);
  border:1px solid var(--line);border-left:5px solid var(--ochre);
  border-radius:var(--radius);box-shadow:var(--shadow);
  padding:clamp(26px,4vw,40px);
}
.evidence p{font-size:1.02rem}

/* ─────────────────────  FAQ  ───────────────────── */
.faq{max-width:780px;margin:0 auto}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:8px;margin-bottom:10px}
.faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:16px 20px;font-weight:700;color:var(--forest);font-size:.98rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:'Cormorant Garamond',serif;font-size:1.4rem;color:var(--sage-dk)}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 20px 18px;font-size:.94rem}

/* ─────────────────────  AGENDA (ENCUADRADO)  ───────────────────── */
.agenda-box{
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-top:clamp(24px,4vw,36px);
}
.agenda-fallback{padding:clamp(28px,5vw,44px) 22px;text-align:center;font-size:.9rem}
.agenda-fallback .btn{margin-top:12px}

/* ─────────────────────  CIERRE / FOOTER  ───────────────────── */
.sec--forest{color:#D8DCCF}
.quote-final{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,3.6vw,2.3rem);line-height:1.35;color:#fff;
  max-width:820px;margin:0 auto;
}
.contact-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:30px}
.contact-lines{margin-top:22px;font-size:.95rem;color:#C4C9BA}
.contact-lines a{color:#EDEFE6;text-decoration:none;font-weight:700}
.contact-lines a:hover{color:#fff}

footer{background:#333D2D;color:#D8DCCF;font-size:.88rem;padding:clamp(40px,6vw,60px) 0 0}
footer h4{
  font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:#fff;margin-bottom:14px;
}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1.4fr;gap:clamp(24px,4vw,48px);padding-bottom:34px}
.social-links{display:flex;gap:12px;margin-top:16px}
.social-links a{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:#C4C9BA;
  transition:color .2s,border-color .2s;
}
.social-links a:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.social-links svg{width:15px;height:15px}
.fbrand .n{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:#fff;letter-spacing:.05em;text-transform:uppercase}
.fbrand .t{font-size:.62rem;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--ochre);margin-top:2px}
footer ul{list-style:none}
footer li{padding:4px 0}
footer a{color:#D8DCCF;text-decoration:none}
footer a:hover{color:#fff}
.fnote{font-size:.83rem;line-height:1.6;color:#C4C9BA}
.fbar{border-top:1px solid rgba(255,255,255,.14);padding:16px 0;text-align:center;font-size:.8rem;color:#AEB4A3}

/* barra fija móvil */
.stickybar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  background:var(--white);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(63,74,56,.12);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
}
.stickybar .btn{width:100%;padding:14px 20px}

/* ─────────────────────  RESPONSIVE  ───────────────────── */
@media (max-width:880px){
  .nav-links{display:none}
  .hero .wrap,.split{grid-template-columns:1fr}
  .hero-ph{min-height:320px}
  .grid--3{grid-template-columns:1fr}
  .verbs{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .stickybar{display:block}
  body{padding-bottom:74px}
}