@font-face{
  font-family:"Draftside";
  src:url("./assets/fonts/Draftside.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Draftside";
  src:url("./assets/fonts/Draftside-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"SanDeMore";
  src:url("./assets/fonts/SandeMore-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --ink:#2b2822;
  --muted:#655f57;
  --cream:#efe8d8;
  --ivory:#faf7f0;
  --blush:#f2dddb;
  --blush-soft:#f8e8e6;
  --sage:#d1dcd1;
  --olive:#cac49a;
  --olive-dark:#a89f65;
  --pink:#d99599;
  --pink-dark:#c97f84;
  --line:rgba(79,69,57,.13);
  --shadow:0 14px 30px rgba(75,57,45,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--ivory);
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;
  line-height:1.45;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}
.site{overflow:hidden}
.container{
  width:calc(100% - 64px);
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
h1,h2,h3{
  margin:0;
  font-family:"Draftside",Georgia,serif;
  font-weight:400;
  letter-spacing:-.015em;
}
h1{font-size:60px;line-height:1.01}
h2{font-size:48px;line-height:1.04}
h3{font-size:26px;line-height:1.10}
p{margin:0}

.eyebrow{
  margin:0 0 9px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:11px;
  font-weight:700;
  color:#5b564f;
}
.section-heading{
  max-width:900px;
  margin:0 auto 30px;
  text-align:center;
}
.section-heading .rule{
  width:32px;
  height:1px;
  background:#ad9671;
  margin:12px auto 0;
}
.btn{
  display:inline-block;
  min-height:48px;
  padding:14px 22px;
  color:#fff;
  background:#dfa0a3;
  border-radius:10px;
  box-shadow:0 8px 18px rgba(183,107,112,.23);
  font-weight:700;
  font-size:14px;
  text-align:center;
}
.btn:hover{transform:translateY(-1px)}
.btn-icon{font-size:17px;margin-right:6px}

/* HEADER */
.site-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:50;
  padding:20px 0;
}
.nav{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
}
.brand{
  width:132px;
  height:auto;
  flex:0 0 auto;
}
.nav-links{
  display:flex;
  align-items:center;
  padding-top:6px;
  font-size:12px;
  color:#4b4842;
  white-space:nowrap;
}
.nav-links a{margin-left:26px}
.nav-links a:first-child{
  margin-left:0;
  position:relative;
}
.nav-links a:first-child:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-9px;
  width:28px;
  height:2px;
  background:#49453f;
}
.nav-links .nav-cta{
  margin-left:24px;
  color:#fff;
  background:var(--olive-dark);
  border-radius:8px;
  padding:9px 17px;
}
.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:#9f9559;
  font-size:29px;
  line-height:1;
  padding:4px;
  cursor:pointer;
}

/* HERO */
.hero{
  position:relative;
  padding:138px 0 78px;
  background:
    radial-gradient(circle at 80% 20%,rgba(242,221,219,.30) 0,rgba(242,221,219,.30) 17%,transparent 18%),
    linear-gradient(180deg,#fbf9f4 0%,#f7f2e8 100%);
}
.hero:after{
  content:"";
  position:absolute;
  left:-4%;
  right:-4%;
  bottom:-34px;
  height:76px;
  background:var(--blush-soft);
  border-radius:50% 50% 0 0;
  transform:rotate(-1deg);
  z-index:1;
}
.hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:47% 53%;
  grid-column-gap:54px;
  align-items:center;
}
.hero-copy{
  padding-top:16px;
  max-width:560px;
}
.hero-copy h1{max-width:560px}
.hero-word{font-weight:700}
.hero-word-pink{color:var(--pink-dark)}
.hero-word-olive{color:#8d8759}
.hero-highlight{
  position:relative;
  display:inline-block;
  z-index:1;
  font-weight:700;
}
.hero-highlight:before{
  content:"";
  position:absolute;
  left:-7px;
  right:-7px;
  bottom:5px;
  height:.47em;
  background:rgba(202,196,154,.70);
  border-radius:40px;
  z-index:-1;
}
.hero-end{display:inline-block;margin-top:2px}
.hero-lead{
  max-width:525px;
  margin:22px 0 24px;
  color:#504b45;
  font-size:16px;
  line-height:1.50;
}
.hero-media{
  position:relative;
  min-height:430px;
  max-width:570px;
  margin-left:auto;
}
.hero-frame{
  position:relative;
  width:100%;
  transform:rotate(-1.2deg);
}
.hero-frame:before{
  content:"";
  position:absolute;
  left:15px;
  right:-15px;
  top:20px;
  bottom:-17px;
  background:rgba(242,221,219,.62);
  border-radius:22px;
  transform:rotate(2deg);
  z-index:-1;
}
.hero-photo{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:center 43%;
  border-radius:18px;
  border:9px solid rgba(255,250,243,.98);
  box-shadow:0 18px 34px rgba(77,58,45,.14);
}
.hero-mobile-photo{display:none}
.photo-tape{
  position:absolute;
  top:-15px;
  width:108px;
  height:31px;
  border-radius:3px;
  background:rgba(229,214,183,.94);
  border:1px solid rgba(177,157,117,.22);
  box-shadow:0 4px 9px rgba(77,58,45,.10);
  z-index:5;
}
.tape-left{left:44px;transform:rotate(-9deg)}
.tape-right{right:40px;transform:rotate(8deg)}

.photo-tag{
  position:absolute;
  right:24px;
  bottom:-18px;
  z-index:6;
  padding:8px 16px 7px;
  border:1px solid rgba(172,157,111,.20);
  border-radius:999px;
  background:rgba(255,250,243,.96);
  color:#8a8256;
  box-shadow:0 8px 18px rgba(77,58,45,.10);
  font-family:"SanDeMore",Georgia,serif;
  font-size:18px;
  line-height:1;
  letter-spacing:.01em;
}
.photo-tag:before{
  content:"✦";
  display:inline-block;
  margin-right:7px;
  color:#b9ae77;
  font-family:Georgia,serif;
  font-size:12px;
  vertical-align:2px;
}
.hero-butterfly{
  position:absolute;
  z-index:4;
  width:78px;
  left:-52px;
  top:36px;
  opacity:.95;
}
.hero-swirl{
  position:absolute;
  left:-54px;
  top:8px;
  width:50px;
  height:50px;
  border:1px dashed rgba(143,121,88,.34);
  border-right-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(-20deg);
}

/* PROBLEM */
.problem{
  position:relative;
  z-index:3;
  background:var(--blush-soft);
  padding:76px 0 72px;
}
.problem-questions{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-column-gap:42px;
  max-width:970px;
  margin:0 auto 24px;
}
.question{
  display:flex;
  align-items:flex-start;
  color:#56514b;
  font-size:14px;
}
.question .circle-icon{margin-right:12px}
.circle-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f7d6d5;
  color:#b9797b;
  font-size:18px;
}
.problem-grid{
  max-width:1040px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  overflow:hidden;
  border-radius:13px;
  background:rgba(255,255,255,.63);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 8px 20px rgba(93,70,58,.08);
}
.problem-item{
  min-height:94px;
  display:flex;
  align-items:center;
  padding:22px 26px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  color:#58534d;
  font-size:15px;
}
.problem-item .circle-icon{margin-right:16px;background:#f5dedd;color:#817c73}
.problem-item:nth-child(3n){border-right:0}
.problem-item:nth-last-child(-n+3){border-bottom:0}

/* SOLUTION */
.solution{background:#d6e0d4;padding:62px 0 52px}
.solution-sub{margin-top:10px;color:#605c55;font-size:13px}
.benefits{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  grid-column-gap:8px;
}
.benefit{
  min-height:170px;
  padding:20px 14px 16px;
  background:#f8f6ef;
  border-radius:10px;
  border:1px solid rgba(84,94,75,.12);
  box-shadow:0 7px 16px rgba(73,84,68,.08);
  text-align:center;
}
.benefit .circle-icon{margin:0 auto 12px;background:#cbd4bd;color:#69735f}
.benefit p{font-size:13px;line-height:1.35}
.solution-quote{
  margin-top:18px;
  text-align:center;
  font-family:"SanDeMore",Georgia,serif;
  font-style:italic;
  font-size:20px;
  color:#565148;
}

/* ABOUT */
.about{background:#faf7f0;padding:66px 0 62px}
.about-grid{
  display:grid;
  grid-template-columns:43% 57%;
  grid-column-gap:56px;
  align-items:center;
}
.collage{position:relative;min-height:405px}
.collage img{
  position:absolute;
  object-fit:cover;
  border-radius:12px;
  border:4px solid #fffaf3;
  box-shadow:0 10px 24px rgba(66,52,42,.16);
}
.collage .c1{width:57%;height:245px;left:5%;top:5%;object-position:center 43%}
.collage .c2{width:47%;height:205px;right:2%;top:28%;object-position:center 42%;transform:rotate(2deg)}
.collage .c3{width:46%;height:180px;left:0;bottom:2%;object-position:center;transform:rotate(-2deg)}
.collage .butterfly-about{
  z-index:4;
  width:72px;
  height:auto;
  left:-16px;
  top:105px;
  object-fit:contain;
  border:0;
  box-shadow:none;
}
.about-copy h2{margin-bottom:18px}
.credentials{list-style:none;padding:0;margin:0 0 18px}
.credentials li{display:flex;align-items:flex-start;margin:6px 0;font-size:13px}
.check{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin-right:9px;
  border-radius:50%;
  border:1px solid #ae9f59;
  color:#8f8146;
  display:grid;
  place-items:center;
  font-size:10px;
}
.bio{max-width:630px;color:#57524c;font-size:13px;line-height:1.48}
.cert{width:205px;margin:12px 0 0 auto}

/* METHOD */
.method{background:#d7e0d5;padding:54px 0 60px}
.method-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-column-gap:22px;
  margin-top:34px;
}
.method-card{
  position:relative;
  min-height:245px;
  padding:38px 25px 23px;
  text-align:center;
  background:#f8f6ef;
  border:1px solid rgba(88,94,78,.12);
  border-radius:11px;
  box-shadow:0 7px 18px rgba(75,85,69,.08);
}
.step{
  position:absolute;
  top:-19px;
  left:50%;
  transform:translateX(-50%);
  width:41px;
  height:41px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#a99d60;
  color:#fff;
  font-family:"Draftside",Georgia,serif;
  font-size:22px;
}
.method-card h3{margin-bottom:12px}
.method-card p{font-size:12px;color:#59554f}
.method-note{margin-top:19px;text-align:center;font-size:13px;color:#5e5951}
.method-note:before{content:"♥";color:#dfa4a5;margin-right:8px}

/* OFFER */
.offer{background:#f6dfdd}
.offer-grid{display:grid;grid-template-columns:38% 62%;min-height:352px}
.offer-art{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ebddcf,#f8ebde);
}
.notebook{
  position:relative;
  z-index:3;
  width:185px;
  height:245px;
  transform:rotate(-5deg);
  border-radius:6px;
  background:#dea9ac;
  box-shadow:0 12px 28px rgba(77,57,47,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:25px;
  font-family:"SanDeMore",Georgia,serif;
  font-size:22px;
  color:#654f49;
}
.notebook img{position:absolute;top:20px;left:64px;width:56px}
.paper{
  position:absolute;
  width:150px;
  height:214px;
  right:70px;
  bottom:38px;
  background:#f9f0e1;
  transform:rotate(8deg);
  box-shadow:0 7px 18px rgba(72,58,45,.08);
}
.pen{
  position:absolute;
  width:6px;
  height:190px;
  right:76px;
  top:84px;
  background:#a99153;
  border-radius:4px;
  transform:rotate(22deg);
}
.offer-copy{padding:42px 48px}
.offer-copy h2{font-size:38px}
.offer-copy ul{list-style:none;padding:0;margin:15px 0 18px}
.offer-copy li{display:flex;align-items:flex-start;margin:6px 0;font-size:12px}
.dot{
  width:16px;height:16px;flex:0 0 16px;margin:1px 8px 0 0;
  border-radius:50%;background:#e5a2a5;color:#fff;display:grid;place-items:center;font-size:9px
}
.offer-foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px}
.gift{
  display:flex;
  align-items:center;
  padding:7px 10px;
  background:rgba(255,255,255,.28);
  border-radius:8px;
  color:#bd7376;
  font-size:14px;
}
.gift>span:first-child{margin-right:10px}
.gift small{color:#8a6f68}

/* GUARANTEE / TESTIMONIALS / BOOKING */
.guarantee{
  padding:22px 0;
  text-align:center;
  background:#c8bd86;
  font-family:"SanDeMore",Georgia,serif;
  font-size:24px;
  color:#443e34;
}
.guarantee span{
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  margin-right:14px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.75);
  color:#fff;
}
.testimonials{background:#fbf8f1;padding:42px 0 46px}
.testimonial-grid{
  max-width:980px;
  margin:24px auto 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-column-gap:18px;
}
.quote{
  position:relative;
  min-height:180px;
  padding:28px 20px 20px;
  text-align:center;
  background:#fffaf4;
  border:1px solid #e8ddd0;
  border-radius:11px;
}
.quote:before{
  content:"“";
  position:absolute;
  left:12px;
  top:-2px;
  font-family:Georgia,serif;
  font-size:44px;
  color:#dc9497;
}
.quote p{font-size:12px;line-height:1.46;color:#56514c}
.quote cite{display:block;margin-top:12px;font-style:normal;font-size:12px}
.quote .heart{position:absolute;right:13px;bottom:9px;color:#9d9588}
.booking{background:#fbf8f1;padding:0 0 48px}
.booking-inner{max-width:860px;margin:0 auto;text-align:center}
.calendly-shell{
  margin-top:12px;
  min-height:120px;
  border:1px dashed #b6ab96;
  border-radius:7px;
  background:#fffdfa;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  color:#70685d;
}
.calendly-placeholder{font-family:"SanDeMore",Georgia,serif;font-size:22px}
.calendly-inline-widget{width:100%;min-width:320px;height:700px}
.footer{
  background:#c9bd83;
  padding:22px 0 20px;
  text-align:center;
  color:#645c48;
}
.footer-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.footer-brand{
  font-family:"Draftside",Georgia,serif;
  font-size:19px;
  letter-spacing:.04em;
  margin-bottom:5px;
}
.footer-legal{
  font-size:10px;
  letter-spacing:.06em;
  line-height:1.45;
}
.footer-credit{
  margin-top:4px;
  font-size:10px;
  letter-spacing:.04em;
  line-height:1.45;
}
.footer-credit strong{font-weight:700}
.mobile-panel{display:none}

/* TABLET */
@media(max-width:980px){
  .container{width:calc(100% - 42px)}
  h1{font-size:52px}
  h2{font-size:42px}
  .nav-links a{margin-left:16px}
  .nav-links .nav-cta{margin-left:18px}
  .hero-grid{grid-template-columns:46% 54%;grid-column-gap:32px}
  .benefits{grid-template-columns:repeat(3,1fr);grid-row-gap:10px}
  .benefit:nth-child(4),.benefit:nth-child(5){min-height:150px}
  .about-grid{grid-template-columns:44% 56%;grid-column-gap:32px}
}

/* MOBILE */
@media(max-width:760px){

  .photo-tag-desktop{display:none}
  .photo-tag-mobile{
    display:block;
    right:12px;
    bottom:-13px;
    padding:7px 13px 6px;
    font-size:16px;
  }

  /* Animación sutil y de una sola vez para el remate emocional del hero */
  .hero-end{
    position:relative;
    opacity:0;
    -webkit-transform:translateY(8px);
    transform:translateY(8px);
    -webkit-animation:carlaReveal .85s ease-out .45s forwards;
    animation:carlaReveal .85s ease-out .45s forwards;
  }
  .hero-end::after{
    content:"";
    position:absolute;
    left:4%;
    right:2%;
    bottom:-6px;
    height:7px;
    border-radius:999px;
    background:rgba(217,149,153,.28);
    -webkit-transform:scaleX(0) rotate(-1deg);
    transform:scaleX(0) rotate(-1deg);
    -webkit-transform-origin:left center;
    transform-origin:left center;
    -webkit-animation:carlaUnderline .75s ease-out 1.05s forwards;
    animation:carlaUnderline .75s ease-out 1.05s forwards;
  }

  @-webkit-keyframes carlaReveal{
    from{opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px)}
    to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
  }
  @keyframes carlaReveal{
    from{opacity:0;-webkit-transform:translateY(8px);transform:translateY(8px)}
    to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}
  }

  @-webkit-keyframes carlaUnderline{
    from{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg)}
    to{-webkit-transform:scaleX(1) rotate(-1deg);transform:scaleX(1) rotate(-1deg)}
  }
  @keyframes carlaUnderline{
    from{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg)}
    to{-webkit-transform:scaleX(1) rotate(-1deg);transform:scaleX(1) rotate(-1deg)}
  }

  .footer{padding:20px 0 18px}
  .footer-brand{font-size:18px}
  .footer-legal,.footer-credit{
    max-width:290px;
    font-size:10px;
    line-height:1.5;
  }

  .container{
    width:calc(100% - 30px);
    max-width:650px;
  }
  .site-header{
    position:relative;
    padding:12px 0 10px;
    background:#fbf8f2;
    border-bottom:1px solid rgba(177,158,116,.18);
  }
  .nav{align-items:center;justify-content:center;position:relative}
  .brand{width:104px;height:auto}
  .nav-links{display:none}
  .menu-btn{
    display:block;
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
  }

  .mobile-panel{
    display:flex;
    position:fixed;
    z-index:80;
    top:0;right:0;bottom:0;
    width:82%;
    max-width:330px;
    padding:84px 28px 28px;
    background:#fbf8f2;
    box-shadow:-14px 0 32px rgba(58,47,39,.14);
    flex-direction:column;
    transform:translateX(110%);
    transition:transform .22s ease;
  }
  .mobile-panel.open{transform:translateX(0)}
  .mobile-panel a{
    margin-bottom:23px;
    font-family:"Draftside",Georgia,serif;
    font-size:24px;
  }
  .mobile-panel .btn{font-family:Arial,Helvetica,sans-serif;font-size:13px}
  .menu-close{
    position:absolute;right:20px;top:18px;border:0;background:transparent;
    font-size:28px;color:#8d8351;cursor:pointer;
  }

  .hero{
    padding:48px 0 50px;
  }
  .hero:after{height:48px;bottom:-24px}
  .hero-grid{display:block}
  .hero-copy{
    max-width:none;
    padding-top:0;
    text-align:center;
  }
  h1{font-size:42px;line-height:1.04}
  h2{font-size:34px}
  .hero-copy h1{max-width:520px;margin:0 auto}
  .hero-highlight:before{left:-5px;right:-5px;bottom:4px}
  .hero-lead{
    max-width:510px;
    margin:18px auto 21px;
    font-size:14px;
  }
  .hero-media{
    min-height:0;
    max-width:520px;
    margin:28px auto 0;
  }
  .hero-frame{transform:none}
  .hero-frame:before{display:none}
  .photo-tape{display:none}

  .photo-tag{
    right:12px;
    bottom:-13px;
    padding:7px 13px 6px;
    font-size:16px;
  }
  .hero-photo{display:none}
  .hero-mobile-photo{
    display:block;
    width:100%;
    height:auto;
    object-fit:contain;
    object-position:center top;
    border-radius:15px;
    border:7px solid rgba(255,250,243,.98);
    box-shadow:0 14px 28px rgba(77,58,45,.12);
  }
  .hero-butterfly{width:62px;left:auto;right:7px;top:-25px}
  .hero-swirl{display:none}

  .problem{padding:60px 0 52px}
  .section-heading{margin-bottom:22px}
  .section-heading,.about-copy,.bio,.method-note,.offer-copy,.booking-inner,.quote{text-align:center}
  .problem-questions{display:block;margin-bottom:20px}
  .question{
    justify-content:center;
    max-width:520px;
    margin:0 auto 15px;
    text-align:center;
  }
  .question .circle-icon{margin-right:10px}
  .problem-grid{grid-template-columns:1fr 1fr}
  .problem-item{
    min-height:86px;
    justify-content:center;
    text-align:center;
    padding:16px 12px;
  }
  .problem-item:nth-child(3n){border-right:1px solid var(--line)}
  .problem-item:nth-child(2n){border-right:0}
  .problem-item:nth-child(5),.problem-item:nth-child(6){border-bottom:0}
  .problem-item .circle-icon{margin-right:10px}

  .solution{padding:48px 0 43px}
  .benefits{display:block}
  .benefit{
    min-height:0;
    margin-bottom:10px;
    padding:15px 16px;
    text-align:center;
  }
  .solution-quote{font-size:18px}

  .about{padding:50px 0 48px}
  .about-grid{display:block}
  .collage{min-height:350px;max-width:520px;margin:0 auto 28px}
  .collage .c1{width:58%;height:220px;left:3%}
  .collage .c2{width:49%;height:195px;right:0;top:29%}
  .collage .c3{width:48%;height:160px;left:0;bottom:0}
  .credentials li{justify-content:center;text-align:center}
  .check{margin-right:8px}
  .bio{margin-left:auto;margin-right:auto}
  .cert{width:185px;margin:16px auto 0}

  .method{padding:47px 0 48px}
  .method-grid{display:block;margin-top:32px}
  .method-card{min-height:0;margin-bottom:27px;padding:33px 20px 20px}

  .offer-grid{display:block}
  .offer-art{min-height:300px}
  .offer-copy{padding:32px 24px 35px}
  .offer-copy h2{font-size:34px}
  .offer-copy ul{max-width:520px;margin-left:auto;margin-right:auto}
  .offer-copy li{justify-content:center;text-align:center}
  .offer-foot{display:block}
  .gift{justify-content:center;text-align:center;margin-bottom:14px}
  .offer-foot .btn{width:100%}

  .guarantee{font-size:20px;padding:17px 0}
  .testimonial-grid{display:block}
  .quote{min-height:0;margin-bottom:14px}
  .calendly-shell{min-height:140px}
}

@media(max-width:420px){
  .container{width:calc(100% - 24px)}
  h1{font-size:39px}
  .hero{padding-top:42px}
  .brand{width:98px}
  .collage{min-height:325px}
  .collage .c1{height:198px}
  .collage .c2{height:176px}
  .collage .c3{height:148px}
  .problem-grid{display:block}
  .problem-item{
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }
  .problem-item:last-child{border-bottom:0!important}
}
.haile-link{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.haile-link:hover{
  opacity:.78;
}

.photo-tag-mobile{display:none}


@media (prefers-reduced-motion: reduce){
  .hero-end{
    opacity:1 !important;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-animation:none !important;
    animation:none !important;
  }
  .hero-end::after{
    -webkit-transform:scaleX(1) rotate(-1deg) !important;
    transform:scaleX(1) rotate(-1deg) !important;
    -webkit-animation:none !important;
    animation:none !important;
  }
}


/* =========================================================
   V15 · MOTION SYSTEM
   Sutil, editorial y activo en desktop + mobile
   ========================================================= */

/* 1) Remate del hero en loop: el texto respira y el trazo se redibuja */
.hero-end{
  position:relative;
  display:inline-block;
  opacity:1 !important;
  -webkit-transform:none !important;
  transform:none !important;
  -webkit-animation:heroEndLoop 5.2s ease-in-out infinite !important;
  animation:heroEndLoop 5.2s ease-in-out infinite !important;
}
.hero-end::after{
  content:"";
  position:absolute;
  left:3%;
  right:1%;
  bottom:-7px;
  height:7px;
  border-radius:999px;
  background:rgba(217,149,153,.30);
  -webkit-transform:scaleX(0) rotate(-1deg);
  transform:scaleX(0) rotate(-1deg);
  -webkit-transform-origin:left center;
  transform-origin:left center;
  -webkit-animation:heroUnderlineLoop 5.2s ease-in-out infinite !important;
  animation:heroUnderlineLoop 5.2s ease-in-out infinite !important;
}

@-webkit-keyframes heroEndLoop{
  0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
  10%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}
  20%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes heroEndLoop{
  0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}
  10%{-webkit-transform:translateY(-2px);transform:translateY(-2px)}
  20%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@-webkit-keyframes heroUnderlineLoop{
  0%,7%{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg);opacity:.2}
  18%,72%{-webkit-transform:scaleX(1) rotate(-1deg);transform:scaleX(1) rotate(-1deg);opacity:1}
  84%,100%{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg);opacity:.15}
}
@keyframes heroUnderlineLoop{
  0%,7%{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg);opacity:.2}
  18%,72%{-webkit-transform:scaleX(1) rotate(-1deg);transform:scaleX(1) rotate(-1deg);opacity:1}
  84%,100%{-webkit-transform:scaleX(0) rotate(-1deg);transform:scaleX(0) rotate(-1deg);opacity:.15}
}

/* 2) Aparición de contenido al hacer scroll */
.scroll-reveal{
  opacity:0;
  -webkit-transform:translateY(20px);
  transform:translateY(20px);
  -webkit-transition:
    opacity .72s ease var(--reveal-delay,0ms),
    -webkit-transform .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
  transition:
    opacity .72s ease var(--reveal-delay,0ms),
    transform .72s cubic-bezier(.2,.7,.2,1) var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.scroll-reveal.reveal-visible{
  opacity:1;
  -webkit-transform:translateY(0);
  transform:translateY(0);
}

/* pequeñas variantes para que no todo aparezca idéntico */
.scroll-reveal.reveal-soft-left{
  -webkit-transform:translateX(-18px);
  transform:translateX(-18px);
}
.scroll-reveal.reveal-soft-right{
  -webkit-transform:translateX(18px);
  transform:translateX(18px);
}
.scroll-reveal.reveal-soft-left.reveal-visible,
.scroll-reveal.reveal-soft-right.reveal-visible{
  -webkit-transform:translateX(0);
  transform:translateX(0);
}

/* 3) Mariposas: simulación de aleteo breve durante el scroll */
.hero-butterfly,
.butterfly-about{
  -webkit-transform-origin:50% 55%;
  transform-origin:50% 55%;
  will-change:transform;
}
.hero-butterfly.is-fluttering,
.butterfly-about.is-fluttering{
  -webkit-animation:butterflyFlutter .48s ease-in-out;
  animation:butterflyFlutter .48s ease-in-out;
}
@-webkit-keyframes butterflyFlutter{
  0%{-webkit-transform:rotate(0deg) scaleX(1) translateY(0);transform:rotate(0deg) scaleX(1) translateY(0)}
  24%{-webkit-transform:rotate(-3deg) scaleX(.84) translateY(-2px);transform:rotate(-3deg) scaleX(.84) translateY(-2px)}
  48%{-webkit-transform:rotate(2deg) scaleX(1.04) translateY(-4px);transform:rotate(2deg) scaleX(1.04) translateY(-4px)}
  72%{-webkit-transform:rotate(-1deg) scaleX(.90) translateY(-2px);transform:rotate(-1deg) scaleX(.90) translateY(-2px)}
  100%{-webkit-transform:rotate(0deg) scaleX(1) translateY(0);transform:rotate(0deg) scaleX(1) translateY(0)}
}
@keyframes butterflyFlutter{
  0%{-webkit-transform:rotate(0deg) scaleX(1) translateY(0);transform:rotate(0deg) scaleX(1) translateY(0)}
  24%{-webkit-transform:rotate(-3deg) scaleX(.84) translateY(-2px);transform:rotate(-3deg) scaleX(.84) translateY(-2px)}
  48%{-webkit-transform:rotate(2deg) scaleX(1.04) translateY(-4px);transform:rotate(2deg) scaleX(1.04) translateY(-4px)}
  72%{-webkit-transform:rotate(-1deg) scaleX(.90) translateY(-2px);transform:rotate(-1deg) scaleX(.90) translateY(-2px)}
  100%{-webkit-transform:rotate(0deg) scaleX(1) translateY(0);transform:rotate(0deg) scaleX(1) translateY(0)}
}

/* 4) "Carla Vargas": letras una por una + línea editorial */
.about-name{
  position:relative;
  display:inline-block;
  padding-bottom:8px;
}
.about-name .name-letter{
  display:inline-block;
  opacity:0;
  -webkit-filter:blur(4px);
  filter:blur(4px);
  -webkit-transform:translateY(15px) rotate(3deg) scale(.96);
  transform:translateY(15px) rotate(3deg) scale(.96);
  -webkit-transition:
    opacity .58s ease var(--letter-delay,0ms),
    -webkit-transform .72s cubic-bezier(.18,.75,.25,1.15) var(--letter-delay,0ms),
    -webkit-filter .58s ease var(--letter-delay,0ms);
  transition:
    opacity .58s ease var(--letter-delay,0ms),
    transform .72s cubic-bezier(.18,.75,.25,1.15) var(--letter-delay,0ms),
    filter .58s ease var(--letter-delay,0ms);
}
.about-name.name-visible .name-letter{
  opacity:1;
  -webkit-filter:blur(0);
  filter:blur(0);
  -webkit-transform:translateY(0) rotate(0) scale(1);
  transform:translateY(0) rotate(0) scale(1);
}
.about-name::after{
  content:"";
  position:absolute;
  left:2%;
  bottom:2px;
  width:68%;
  height:5px;
  border-radius:999px;
  background:rgba(202,196,154,.72);
  -webkit-transform:scaleX(0) rotate(-1.5deg);
  transform:scaleX(0) rotate(-1.5deg);
  -webkit-transform-origin:left center;
  transform-origin:left center;
  -webkit-transition:-webkit-transform .72s ease .75s;
  transition:transform .72s ease .75s;
}
.about-name.name-visible::after{
  -webkit-transform:scaleX(1) rotate(-1.5deg);
  transform:scaleX(1) rotate(-1.5deg);
}

/* 5) CTA de Oferta: glow + shimmer + micro pulso */
.offer-cta{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  -webkit-animation:offerButtonPulse 3.2s ease-in-out infinite;
  animation:offerButtonPulse 3.2s ease-in-out infinite;
  box-shadow:0 10px 24px rgba(190,111,116,.28);
}
.offer-cta::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:-40%;
  bottom:-40%;
  left:-42%;
  width:28%;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.48),
    rgba(255,255,255,0)
  );
  -webkit-transform:skewX(-18deg);
  transform:skewX(-18deg);
  -webkit-animation:offerShimmer 3.2s ease-in-out infinite;
  animation:offerShimmer 3.2s ease-in-out infinite;
}
.offer-cta .btn-icon,
.offer-cta .offer-cta-label{
  position:relative;
  z-index:2;
}
.offer-cta .btn-icon{
  display:inline-block;
  -webkit-animation:offerIconNudge 3.2s ease-in-out infinite;
  animation:offerIconNudge 3.2s ease-in-out infinite;
}
@-webkit-keyframes offerButtonPulse{
  0%,72%,100%{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 10px 24px rgba(190,111,116,.28)}
  80%{-webkit-transform:scale(1.025);transform:scale(1.025);box-shadow:0 14px 30px rgba(190,111,116,.38)}
  88%{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 10px 24px rgba(190,111,116,.28)}
}
@keyframes offerButtonPulse{
  0%,72%,100%{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 10px 24px rgba(190,111,116,.28)}
  80%{-webkit-transform:scale(1.025);transform:scale(1.025);box-shadow:0 14px 30px rgba(190,111,116,.38)}
  88%{-webkit-transform:scale(1);transform:scale(1);box-shadow:0 10px 24px rgba(190,111,116,.28)}
}
@-webkit-keyframes offerShimmer{
  0%,58%{left:-42%;opacity:0}
  64%{opacity:1}
  82%{left:118%;opacity:.85}
  83%,100%{left:118%;opacity:0}
}
@keyframes offerShimmer{
  0%,58%{left:-42%;opacity:0}
  64%{opacity:1}
  82%{left:118%;opacity:.85}
  83%,100%{left:118%;opacity:0}
}
@-webkit-keyframes offerIconNudge{
  0%,72%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
  80%{-webkit-transform:translateX(3px);transform:translateX(3px)}
  88%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes offerIconNudge{
  0%,72%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
  80%{-webkit-transform:translateX(3px);transform:translateX(3px)}
  88%{-webkit-transform:translateX(0);transform:translateX(0)}
}

/* Mantener el nombre especial centrado cuando el bloque está centrado en mobile */
@media(max-width:760px){
  .about-name{margin-left:auto;margin-right:auto}
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero-end,
  .hero-end::after,
  .hero-butterfly,
  .butterfly-about,
  .offer-cta,
  .offer-cta::before,
  .offer-cta .btn-icon{
    -webkit-animation:none !important;
    animation:none !important;
  }
  .scroll-reveal,
  .about-name .name-letter{
    opacity:1 !important;
    -webkit-filter:none !important;
    filter:none !important;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-transition:none !important;
    transition:none !important;
  }
  .about-name::after{
    -webkit-transform:scaleX(1) rotate(-1.5deg) !important;
    transform:scaleX(1) rotate(-1.5deg) !important;
    -webkit-transition:none !important;
    transition:none !important;
  }
  .hero-end::after{
    -webkit-transform:scaleX(1) rotate(-1deg) !important;
    transform:scaleX(1) rotate(-1deg) !important;
  }
}


/* =========================================================
   V16 · CV MOBILE SIGNATURE + REAL CALENDAR ICON
   ========================================================= */

/* Hide the old mobile text label if any browser still has the node */
.photo-tag-mobile{display:none !important}

/* Official butterfly + CV brand lockup as a subtle mobile photo signature */
.hero-mobile-signature{
  display:none;
}

.calendar-icon{
  position:relative;
  display:inline-block;
  width:18px;
  height:18px;
  flex:0 0 18px;
  border:2px solid currentColor;
  border-radius:3px;
  vertical-align:-3px;
  margin-right:8px;
}
.calendar-icon::before{
  content:"";
  position:absolute;
  left:2px;
  right:2px;
  top:5px;
  height:2px;
  background:currentColor;
  opacity:.95;
}
.calendar-icon::after{
  content:"";
  position:absolute;
  width:2px;
  height:4px;
  left:4px;
  top:-4px;
  background:currentColor;
  border-radius:1px;
  box-shadow:8px 0 0 currentColor;
}

.offer-cta .calendar-icon{
  position:relative;
  z-index:2;
  margin-right:9px;
  -webkit-animation:calendarNudge 3.2s ease-in-out infinite;
  animation:calendarNudge 3.2s ease-in-out infinite;
}

@-webkit-keyframes calendarNudge{
  0%,72%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
  80%{-webkit-transform:translateX(3px);transform:translateX(3px)}
  88%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes calendarNudge{
  0%,72%,100%{-webkit-transform:translateX(0);transform:translateX(0)}
  80%{-webkit-transform:translateX(3px);transform:translateX(3px)}
  88%{-webkit-transform:translateX(0);transform:translateX(0)}
}

@media(max-width:760px){
  .hero-mobile-signature{
    display:flex;
    position:absolute;
    right:-4px;
    bottom:-12px;
    z-index:8;
    width:92px;
    min-height:48px;
    align-items:center;
    justify-content:center;
    padding:8px 10px;
    background:rgba(255,250,243,.94);
    border:1px solid rgba(170,157,102,.18);
    border-radius:14px 0 0 14px;
    box-shadow:0 8px 18px rgba(77,58,45,.10);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px);
  }
  .hero-mobile-signature img{
    width:72px;
    height:auto;
    object-fit:contain;
  }
}

@media(max-width:420px){
  .hero-mobile-signature{
    width:84px;
    min-height:45px;
    right:-3px;
    bottom:-10px;
    padding:7px 9px;
  }
  .hero-mobile-signature img{width:66px}
}

@media (prefers-reduced-motion: reduce){
  .offer-cta .calendar-icon{
    -webkit-animation:none !important;
    animation:none !important;
  }
}


/* =========================================================
   V18 · FIRMA DE MARIPOSA EN HERO MOBILE
   ========================================================= */

@media(max-width:760px){
  .hero-mobile-signature{
    display:block;
    position:absolute;
    right:-7px;
    bottom:-22px;
    z-index:8;
    width:96px;
    min-height:0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0;
    box-shadow:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    pointer-events:none;
  }

  .hero-mobile-signature .mobile-brand-butterfly{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
    -webkit-filter:drop-shadow(0 7px 8px rgba(70,55,44,.14));
    filter:drop-shadow(0 7px 8px rgba(70,55,44,.14));
    -webkit-transform:rotate(-7deg);
    transform:rotate(-7deg);
  }
}

@media(max-width:420px){
  .hero-mobile-signature{
    right:-4px;
    bottom:-18px;
    width:82px;
  }
}


/* =========================================================
   V19 · SELLO BLANCO VISIBLE EN HERO MOBILE
   ========================================================= */

@media(max-width:760px){
  .hero-mobile-signature{
    display:flex;
    position:absolute;
    right:10px;
    bottom:-22px;
    z-index:9;
    width:86px;
    height:86px;
    min-height:86px;
    padding:12px;
    align-items:center;
    justify-content:center;
    background:rgba(255,250,243,.98);
    border:1px solid rgba(170,157,102,.24);
    border-radius:50%;
    box-shadow:
      0 9px 20px rgba(77,58,45,.13),
      inset 0 0 0 5px rgba(242,221,219,.34);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    pointer-events:none;
  }

  .hero-mobile-signature::after{
    content:"";
    position:absolute;
    inset:7px;
    border:1px dashed rgba(168,159,101,.34);
    border-radius:50%;
    pointer-events:none;
  }

  .hero-mobile-signature .mobile-brand-butterfly{
    position:relative;
    z-index:2;
    width:58px;
    height:auto;
    display:block;
    object-fit:contain;
    -webkit-filter:drop-shadow(0 3px 4px rgba(70,55,44,.10));
    filter:drop-shadow(0 3px 4px rgba(70,55,44,.10));
    -webkit-transform:rotate(-5deg);
    transform:rotate(-5deg);
  }
}

@media(max-width:420px){
  .hero-mobile-signature{
    right:7px;
    bottom:-18px;
    width:78px;
    height:78px;
    min-height:78px;
    padding:10px;
  }
  .hero-mobile-signature .mobile-brand-butterfly{
    width:52px;
  }
}


/* =========================================================
   V20 · ANIMACIÓN DE ENTRADA DE MARIPOSA / SELLO HERO
   ========================================================= */

/* Mariposa decorativa del hero (desktop y mobile) */
.hero-butterfly{
  -webkit-animation:heroButterflyFlyIn 1.9s cubic-bezier(.18,.72,.22,1) .15s both;
  animation:heroButterflyFlyIn 1.9s cubic-bezier(.18,.72,.22,1) .15s both;
}

@-webkit-keyframes heroButterflyFlyIn{
  0%{
    opacity:0;
    -webkit-transform:translate(-180px,-110px) rotate(-28deg) scale(.66);
    transform:translate(-180px,-110px) rotate(-28deg) scale(.66);
  }
  18%{
    opacity:1;
    -webkit-transform:translate(-120px,-72px) rotate(12deg) scale(.82);
    transform:translate(-120px,-72px) rotate(12deg) scale(.82);
  }
  34%{
    -webkit-transform:translate(-64px,-36px) rotate(-8deg) scale(1.02);
    transform:translate(-64px,-36px) rotate(-8deg) scale(1.02);
  }
  48%{
    -webkit-transform:translate(-36px,-18px) rotate(5deg) scale(.94);
    transform:translate(-36px,-18px) rotate(5deg) scale(.94);
  }
  62%{
    -webkit-transform:translate(-14px,-8px) rotate(-3deg) scale(1.02);
    transform:translate(-14px,-8px) rotate(-3deg) scale(1.02);
  }
  76%{
    -webkit-transform:translate(0,0) rotate(0deg) scale(.98);
    transform:translate(0,0) rotate(0deg) scale(.98);
  }
  100%{
    opacity:.95;
    -webkit-transform:translate(0,0) rotate(0deg) scale(1);
    transform:translate(0,0) rotate(0deg) scale(1);
  }
}
@keyframes heroButterflyFlyIn{
  0%{
    opacity:0;
    -webkit-transform:translate(-180px,-110px) rotate(-28deg) scale(.66);
    transform:translate(-180px,-110px) rotate(-28deg) scale(.66);
  }
  18%{
    opacity:1;
    -webkit-transform:translate(-120px,-72px) rotate(12deg) scale(.82);
    transform:translate(-120px,-72px) rotate(12deg) scale(.82);
  }
  34%{
    -webkit-transform:translate(-64px,-36px) rotate(-8deg) scale(1.02);
    transform:translate(-64px,-36px) rotate(-8deg) scale(1.02);
  }
  48%{
    -webkit-transform:translate(-36px,-18px) rotate(5deg) scale(.94);
    transform:translate(-36px,-18px) rotate(5deg) scale(.94);
  }
  62%{
    -webkit-transform:translate(-14px,-8px) rotate(-3deg) scale(1.02);
    transform:translate(-14px,-8px) rotate(-3deg) scale(1.02);
  }
  76%{
    -webkit-transform:translate(0,0) rotate(0deg) scale(.98);
    transform:translate(0,0) rotate(0deg) scale(.98);
  }
  100%{
    opacity:.95;
    -webkit-transform:translate(0,0) rotate(0deg) scale(1);
    transform:translate(0,0) rotate(0deg) scale(1);
  }
}

/* En mobile, el sello llega "volando" a su punto */
@media(max-width:760px){
  .hero-mobile-signature{
    -webkit-animation:mobileSealFlyIn 1.7s cubic-bezier(.18,.72,.22,1) .48s both;
    animation:mobileSealFlyIn 1.7s cubic-bezier(.18,.72,.22,1) .48s both;
  }
  .hero-mobile-signature .mobile-brand-butterfly{
    -webkit-animation:mobileSealFlutter 1.7s ease-in-out .48s both;
    animation:mobileSealFlutter 1.7s ease-in-out .48s both;
  }
}

@-webkit-keyframes mobileSealFlyIn{
  0%{
    opacity:0;
    -webkit-transform:translate(88px,-72px) scale(.38) rotate(28deg);
    transform:translate(88px,-72px) scale(.38) rotate(28deg);
  }
  25%{
    opacity:1;
    -webkit-transform:translate(54px,-44px) scale(.66) rotate(-12deg);
    transform:translate(54px,-44px) scale(.66) rotate(-12deg);
  }
  46%{
    -webkit-transform:translate(18px,-18px) scale(1.03) rotate(7deg);
    transform:translate(18px,-18px) scale(1.03) rotate(7deg);
  }
  66%{
    -webkit-transform:translate(-6px,4px) scale(.96) rotate(-3deg);
    transform:translate(-6px,4px) scale(.96) rotate(-3deg);
  }
  82%{
    -webkit-transform:translate(2px,-2px) scale(1.01) rotate(1deg);
    transform:translate(2px,-2px) scale(1.01) rotate(1deg);
  }
  100%{
    opacity:1;
    -webkit-transform:translate(0,0) scale(1) rotate(0deg);
    transform:translate(0,0) scale(1) rotate(0deg);
  }
}
@keyframes mobileSealFlyIn{
  0%{
    opacity:0;
    -webkit-transform:translate(88px,-72px) scale(.38) rotate(28deg);
    transform:translate(88px,-72px) scale(.38) rotate(28deg);
  }
  25%{
    opacity:1;
    -webkit-transform:translate(54px,-44px) scale(.66) rotate(-12deg);
    transform:translate(54px,-44px) scale(.66) rotate(-12deg);
  }
  46%{
    -webkit-transform:translate(18px,-18px) scale(1.03) rotate(7deg);
    transform:translate(18px,-18px) scale(1.03) rotate(7deg);
  }
  66%{
    -webkit-transform:translate(-6px,4px) scale(.96) rotate(-3deg);
    transform:translate(-6px,4px) scale(.96) rotate(-3deg);
  }
  82%{
    -webkit-transform:translate(2px,-2px) scale(1.01) rotate(1deg);
    transform:translate(2px,-2px) scale(1.01) rotate(1deg);
  }
  100%{
    opacity:1;
    -webkit-transform:translate(0,0) scale(1) rotate(0deg);
    transform:translate(0,0) scale(1) rotate(0deg);
  }
}

@-webkit-keyframes mobileSealFlutter{
  0%{-webkit-transform:rotate(-16deg) scale(.86);transform:rotate(-16deg) scale(.86)}
  22%{-webkit-transform:rotate(9deg) scale(1.02);transform:rotate(9deg) scale(1.02)}
  38%{-webkit-transform:rotate(-7deg) scale(.96);transform:rotate(-7deg) scale(.96)}
  54%{-webkit-transform:rotate(5deg) scale(1.02);transform:rotate(5deg) scale(1.02)}
  72%{-webkit-transform:rotate(-3deg) scale(.98);transform:rotate(-3deg) scale(.98)}
  100%{-webkit-transform:rotate(-5deg) scale(1);transform:rotate(-5deg) scale(1)}
}
@keyframes mobileSealFlutter{
  0%{-webkit-transform:rotate(-16deg) scale(.86);transform:rotate(-16deg) scale(.86)}
  22%{-webkit-transform:rotate(9deg) scale(1.02);transform:rotate(9deg) scale(1.02)}
  38%{-webkit-transform:rotate(-7deg) scale(.96);transform:rotate(-7deg) scale(.96)}
  54%{-webkit-transform:rotate(5deg) scale(1.02);transform:rotate(5deg) scale(1.02)}
  72%{-webkit-transform:rotate(-3deg) scale(.98);transform:rotate(-3deg) scale(.98)}
  100%{-webkit-transform:rotate(-5deg) scale(1);transform:rotate(-5deg) scale(1)}
}

/* También un mini aleteo inicial del sello en desktop si existiera visible allí más adelante */
.hero-mobile-signature .mobile-brand-butterfly{
  -webkit-transform-origin:50% 55%;
  transform-origin:50% 55%;
}

@media (prefers-reduced-motion: reduce){
  .hero-butterfly,
  .hero-mobile-signature,
  .hero-mobile-signature .mobile-brand-butterfly{
    -webkit-animation:none !important;
    animation:none !important;
    opacity:1 !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V21 · SIN VUELO + SELLO MÁS GRANDE Y LEGIBLE
   ========================================================= */

/* 1) Eliminar el efecto de vuelo del hero */
.hero-butterfly,
.hero-mobile-signature,
.hero-mobile-signature .mobile-brand-butterfly{
  -webkit-animation:none !important;
  animation:none !important;
  opacity:1 !important;
}

/* 2) Hacer crecer el sello móvil para que la gráfica interna se lea mejor */
@media(max-width:760px){
  .hero-mobile-signature{
    right:8px;
    bottom:-24px;
    width:98px;
    height:98px;
    min-height:98px;
    padding:6px;
    box-shadow:
      0 10px 22px rgba(77,58,45,.13),
      inset 0 0 0 4px rgba(242,221,219,.34);
  }

  .hero-mobile-signature::after{
    inset:4px;
    border-width:1px;
  }

  .hero-mobile-signature .mobile-brand-butterfly{
    width:86px;
    max-width:none;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-filter:drop-shadow(0 2px 3px rgba(70,55,44,.08));
    filter:drop-shadow(0 2px 3px rgba(70,55,44,.08));
  }
}

@media(max-width:420px){
  .hero-mobile-signature{
    right:6px;
    bottom:-20px;
    width:90px;
    height:90px;
    min-height:90px;
    padding:5px;
  }

  .hero-mobile-signature::after{
    inset:4px;
  }

  .hero-mobile-signature .mobile-brand-butterfly{
    width:79px;
  }
}


/* =========================================================
   V22 · ALETEO EN SU LUGAR + SELLO OFICIAL GRANDE
   ========================================================= */

/* B) Mobile hero seal:
   ahora usamos el sello circular oficial completo del Brand Board.
   Lo hacemos MUCHO más grande dentro de la circunferencia blanca. */
@media(max-width:760px){
  .hero-mobile-signature{
    display:flex !important;
    position:absolute;
    right:4px;
    bottom:-34px;
    z-index:10;
    width:132px;
    height:132px;
    min-height:132px;
    padding:5px;
    align-items:center;
    justify-content:center;
    overflow:visible;
    background:rgba(255,250,243,.99);
    border:1px solid rgba(170,157,102,.24);
    border-radius:50%;
    box-shadow:
      0 12px 25px rgba(77,58,45,.14),
      inset 0 0 0 4px rgba(242,221,219,.28);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    pointer-events:none;
    -webkit-animation:none !important;
    animation:none !important;
    -webkit-transform:none !important;
    transform:none !important;
  }

  /* eliminamos el aro punteado artificial anterior:
     el propio sello oficial ya contiene su circunferencia y lettering */
  .hero-mobile-signature::after{
    display:none !important;
  }

  .hero-mobile-signature .mobile-brand-butterfly{
    display:none !important;
  }

  .hero-mobile-signature .mobile-official-seal{
    display:block;
    width:122px;
    height:122px;
    max-width:none;
    object-fit:contain;
    margin:0;
    padding:0;
    opacity:1;
    -webkit-transform:none !important;
    transform:none !important;
    -webkit-animation:none !important;
    animation:none !important;
    -webkit-filter:none;
    filter:none;
  }
}

@media(max-width:420px){
  .hero-mobile-signature{
    right:2px;
    bottom:-29px;
    width:118px;
    height:118px;
    min-height:118px;
    padding:4px;
  }

  .hero-mobile-signature .mobile-official-seal{
    width:110px;
    height:110px;
  }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .hero-butterfly,
  .butterfly-about{
    -webkit-animation:none !important;
    animation:none !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V23 · ALETEO MÁS SUAVE Y DISPARADO POR EVENTO
   ========================================================= */

/* Mariposas quietas por defecto */
.hero-butterfly,
.butterfly-about{
  -webkit-transform-origin:50% 54%;
  transform-origin:50% 54%;
  -webkit-transform:scaleX(1) rotate(0deg);
  transform:scaleX(1) rotate(0deg);
  will-change:transform;
}

/* El aleteo solo ocurre cuando JS agrega la clase */
.hero-butterfly.is-fluttering,
.butterfly-about.is-fluttering{
  -webkit-animation:carlaWingFlapSoft .72s ease-in-out;
  animation:carlaWingFlapSoft .72s ease-in-out;
}

@-webkit-keyframes carlaWingFlapSoft{
  0%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
  18%{
    -webkit-transform:scaleX(.90) rotate(-1deg);
    transform:scaleX(.90) rotate(-1deg);
  }
  36%{
    -webkit-transform:scaleX(1.03) rotate(1deg);
    transform:scaleX(1.03) rotate(1deg);
  }
  54%{
    -webkit-transform:scaleX(.92) rotate(-1deg);
    transform:scaleX(.92) rotate(-1deg);
  }
  72%{
    -webkit-transform:scaleX(1.02) rotate(.5deg);
    transform:scaleX(1.02) rotate(.5deg);
  }
  100%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
}
@keyframes carlaWingFlapSoft{
  0%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
  18%{
    -webkit-transform:scaleX(.90) rotate(-1deg);
    transform:scaleX(.90) rotate(-1deg);
  }
  36%{
    -webkit-transform:scaleX(1.03) rotate(1deg);
    transform:scaleX(1.03) rotate(1deg);
  }
  54%{
    -webkit-transform:scaleX(.92) rotate(-1deg);
    transform:scaleX(.92) rotate(-1deg);
  }
  72%{
    -webkit-transform:scaleX(1.02) rotate(.5deg);
    transform:scaleX(1.02) rotate(.5deg);
  }
  100%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-butterfly,
  .butterfly-about{
    -webkit-animation:none !important;
    animation:none !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}


/* =========================================================
   V24 · ALETEO CONTINUO
   ========================================================= */

/* Las mariposas permanecen en su sitio y aletean continuamente.
   No vuelan ni se desplazan por la pantalla. */
.hero-butterfly,
.butterfly-about{
  -webkit-transform-origin:50% 54%;
  transform-origin:50% 54%;
  -webkit-animation:carlaWingFlapContinuous 1.15s ease-in-out infinite !important;
  animation:carlaWingFlapContinuous 1.15s ease-in-out infinite !important;
  will-change:transform;
}

/* Ignorar cualquier clase antigua que pudiera quedar del JS previo */
.hero-butterfly.is-fluttering,
.butterfly-about.is-fluttering{
  -webkit-animation:carlaWingFlapContinuous 1.15s ease-in-out infinite !important;
  animation:carlaWingFlapContinuous 1.15s ease-in-out infinite !important;
}

@-webkit-keyframes carlaWingFlapContinuous{
  0%,100%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
  20%{
    -webkit-transform:scaleX(.90) rotate(-1deg);
    transform:scaleX(.90) rotate(-1deg);
  }
  40%{
    -webkit-transform:scaleX(1.03) rotate(1deg);
    transform:scaleX(1.03) rotate(1deg);
  }
  60%{
    -webkit-transform:scaleX(.92) rotate(-1deg);
    transform:scaleX(.92) rotate(-1deg);
  }
  80%{
    -webkit-transform:scaleX(1.02) rotate(.5deg);
    transform:scaleX(1.02) rotate(.5deg);
  }
}
@keyframes carlaWingFlapContinuous{
  0%,100%{
    -webkit-transform:scaleX(1) rotate(0deg);
    transform:scaleX(1) rotate(0deg);
  }
  20%{
    -webkit-transform:scaleX(.90) rotate(-1deg);
    transform:scaleX(.90) rotate(-1deg);
  }
  40%{
    -webkit-transform:scaleX(1.03) rotate(1deg);
    transform:scaleX(1.03) rotate(1deg);
  }
  60%{
    -webkit-transform:scaleX(.92) rotate(-1deg);
    transform:scaleX(.92) rotate(-1deg);
  }
  80%{
    -webkit-transform:scaleX(1.02) rotate(.5deg);
    transform:scaleX(1.02) rotate(.5deg);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-butterfly,
  .butterfly-about{
    -webkit-animation:none !important;
    animation:none !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}

/* =========================================================
   V25 · AGENDA CON PREGUNTAS FILTRO → WHATSAPP
   (estructura inspirada en Espacio Integral)
   ========================================================= */
.booking{
  background:var(--blush);
  padding:72px 0 80px;
}
.booking-grid{
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:56px;
  align-items:start;
  text-align:left;
}
.booking-kicker{
  display:flex;align-items:center;gap:16px;
  margin:0 0 22px;
  text-transform:uppercase;letter-spacing:.24em;
  font-size:12px;font-weight:700;color:#5b564f;
}
.booking-kicker-line{display:inline-block;width:56px;height:1px;background:var(--pink-dark)}
.booking-title{font-size:54px;line-height:1.02;color:var(--ink)}
.booking-title em{
  font-family:"SanDeMore",Georgia,serif;
  font-style:normal;
  color:var(--pink-dark);
}
.booking-value{
  margin:28px 0 24px;
  padding:18px 0;
  border-top:1px solid rgba(79,69,57,.18);
  border-bottom:1px solid rgba(79,69,57,.18);
}
.booking-value-label{
  margin-bottom:8px;
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:700;color:#7a7268;
}
.booking-value-row{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.booking-value-time{font-family:"Draftside",Georgia,serif;font-size:24px;color:var(--ink)}
.booking-value-free{
  text-transform:uppercase;letter-spacing:.2em;font-size:13px;font-weight:700;color:var(--pink-dark);
}
.booking-text{font-size:16px;line-height:1.65;color:#4f4942}
.booking-checks{list-style:none;margin:22px 0 0;padding:0}
.booking-checks li{
  display:flex;gap:12px;align-items:flex-start;
  margin-bottom:12px;font-size:14px;line-height:1.5;color:#4f4942;
}
.booking-checks li span{color:var(--olive-dark);font-weight:700}

.booking-card{
  background:var(--ivory);
  border-radius:18px;
  box-shadow:0 20px 44px rgba(120,72,70,.14);
  overflow:hidden;
}
.booking-card-head{padding:30px 34px 22px;border-bottom:1px solid var(--line)}
.booking-card-head h3{font-size:32px;color:var(--ink)}
.booking-card-head p{margin-top:8px;font-size:14px;color:var(--muted)}
.booking-form{padding:26px 34px 30px}
.booking-form .field{margin-bottom:20px}
.booking-form .field[hidden]{display:none}
.booking-form label{
  display:block;margin-bottom:9px;
  text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;font-weight:700;color:#4a443d;line-height:1.35;
}
.booking-form input,
.booking-form select,
.booking-form textarea{
  width:100%;
  padding:15px 16px;
  font:inherit;font-size:15px;color:var(--ink);
  background:#fff;
  border:1px solid rgba(79,69,57,.2);
  border-radius:8px;
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;appearance:none;
}
.booking-form textarea{resize:vertical;min-height:92px;line-height:1.5}
.booking-form input::placeholder,
.booking-form textarea::placeholder{color:#a39b90}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(217,149,153,.2);
}
.booking-form .is-invalid{border-color:#c0575d;box-shadow:0 0 0 3px rgba(192,87,93,.14)}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";position:absolute;right:18px;top:50%;
  width:8px;height:8px;margin-top:-6px;
  border-right:1.6px solid #4a443d;border-bottom:1.6px solid #4a443d;
  transform:rotate(45deg);pointer-events:none;
}
.booking-form select{padding-right:44px;cursor:pointer}
.booking-form select:invalid{color:#6f675d}
.form-error{margin:-4px 0 14px;font-size:13px;color:#b0474d}
.booking-submit{
  display:block;width:100%;
  border:0;cursor:pointer;
  min-height:56px;
  text-transform:uppercase;letter-spacing:.18em;font-size:13px;
}
.booking-submit span{margin-left:8px}
.booking-note{margin-top:14px;text-align:center;font-size:12px;color:#7a7268}

@media(max-width:980px){
  .booking-grid{grid-template-columns:1fr;gap:36px}
  .booking-title{font-size:46px}
}
@media(max-width:760px){
  .booking{padding:52px 0 56px}
  .booking-grid,.booking-inner{text-align:left}
  .booking-title{font-size:40px}
  .booking-card-head{padding:24px 20px 18px}
  .booking-card-head h3{font-size:27px}
  .booking-form{padding:22px 20px 24px}
  .booking-form input,.booking-form select,.booking-form textarea{font-size:16px}
}