/* ============================================================
   Terapia con Fer — Homepage
   Palette: "Durazno y miel" (page) + "Durazno claro" (cierre/footer)
   Resolved from the design's theme system into static CSS variables.
   ============================================================ */

:root{
  /* --- Durazno y miel (page palette) --- */
  --bg:#fdf6f1;
  --band-a:#fde3df;
  --band-b:#fdeecd;
  --card:#fffdfb;
  --card-alt:#fdf3ee;
  --chip:#fbe4dd;
  --chip2:#fcecd2;
  --ink:#493138;
  --ink-body:#5a3f45;
  --ink-2:#6f5359;
  --ink-3:#85686d;
  --ink-italic:#7a5560;
  --accent:#d06d75;
  --accent-deep:#b85560;
  --accent-soft:#e0918c;
  --hair:#f3c9bd;
  --c-blob1:#f7bcb0;
  --c-blob2:#f6d59e;
  --c-blob3:#f3b0c6;
  --c1:#f2a0a8;
  --c2:#f6bd97;
  --c3:#f3d691;
  --c4:#cfd493;
  --c5:#f0a97e;
  --c6:#eeb0b8;
  --glow:rgba(208,109,117,.30);
  --sel:#f7d9cf;
  --on-accent:#ffffff;

  /* --- Durazno claro (cierre + footer tone) --- */
  --cta-bg:#fbe4dd;
  --cta-glow:rgba(208,109,117,.16);
  --cta-text:#493138;
  --cta-sub:#7a5560;
  --footer-bg:#fbe4dd;
  --footer-text:#5a3f45;
  --footer-muted:#96786f;
  --footer-head:#b85560;
  --footer-logo-text:#493138;
  --footer-chip:rgba(73,49,56,.07);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  overflow-x:clip;
  background:var(--bg);
  min-height:100vh;
  font-family:'Instrument Sans',system-ui,sans-serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--ink)}
::selection{background:var(--sel)}

/* ============ Keyframes ============ */
@keyframes ferUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes floatH{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
@keyframes floatUp{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes floatDown{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
@keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.09)}28%{transform:scale(1)}42%{transform:scale(1.05)}56%{transform:scale(1)}}
@keyframes ferIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes ferDriftA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(20%,-16%) scale(1.34)}}
@keyframes ferDriftB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-22%,18%) scale(1.3)}}
@keyframes ferDriftC{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(17%,22%) scale(1.36)}}
@keyframes drawband{from{stroke-dashoffset:1900}to{stroke-dashoffset:0}}
@keyframes rideIn{0%{opacity:0;transform:translate(70px,-10px) scale(.82) rotate(6deg)}60%{opacity:1}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes bloom{0%{opacity:0;transform:scale(.14)}55%{opacity:1}80%{transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@keyframes petalBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
@keyframes sway{0%{transform:rotate(-2.6deg)}50%{transform:rotate(2.6deg)}100%{transform:rotate(-2.6deg)}}
@keyframes leafFlutter{0%,100%{transform:rotate(0)}50%{transform:rotate(4deg)}}
@keyframes faceBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.55)}50%{opacity:1;transform:scale(1)}}
@keyframes floatSpark{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes glowPulse{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:.85;transform:scale(1.06)}}

@media (prefers-reduced-motion: reduce){
  [data-drift],[data-anim]{animation:none!important}
}

/* ============ Hover states (were style-hover in the prototype) ============ */
.btn-primary:hover{
  background:var(--accent-deep);
  transform:translateY(-2px);
  box-shadow:0 16px 34px var(--glow);
}
.svc-card:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 14px rgba(51,43,71,.06),0 22px 44px rgba(51,43,71,.10);
}
.cierre-primary:hover{
  background:var(--accent-deep);
  transform:translateY(-2px);
}
.cierre-ghost:hover{
  background:var(--accent);
  color:#fff;
}
.wa-float:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(51,43,71,.24);
}
.modal-close:hover{background:var(--hair)}

/* ============ Responsive (from v6) ============ */
.fer-msticky{display:none}
.fer-mnav{display:none}

@media(max-width:900px){
  .fer-dnav{display:none!important}
  .fer-mnav{display:flex!important}
}
@media(max-width:760px){
  .flor-wrap{width:150px!important;height:150px!important;margin-left:-75px!important;top:16px!important}
  .flor-glow{width:128px!important;height:128px!important;left:11px!important;top:13px!important}
  .rb-svg{height:190px!important}
  .fer-col2{grid-column:auto!important}
}
@media(max-width:480px){
  .rb-svg{height:150px!important}
}
@media(max-width:719px){
  .fer-desktopcta{display:none}
  .fer-msticky{display:flex}
  .fer-wa{bottom:92px!important}
  .fer-footpad{padding-bottom:130px!important}
}