*{box-sizing:border-box}
:root{--navy:#062b62;--blue:#0b72bd;--green:#2d8f2f;--light:#f1f7fc;--text:#0a2b59}
html{scroll-behavior:smooth}
body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.container{width:min(1180px,92%);margin:auto}
.header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid #e7edf4}
.nav-wrap{min-height:92px;display:flex;align-items:center;gap:28px}
.logo{width:170px;flex:0 0 auto}
.logo img{width:100%;height:78px;object-fit:contain}
.nav{display:flex;gap:24px;margin-left:auto;font-weight:700;text-transform:uppercase;font-size:.78rem}
.nav a{padding:34px 0 12px;border-bottom:3px solid transparent}
.nav a:hover,.nav a.active{color:var(--green);border-color:var(--green)}
.whatsapp,.button{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;font-weight:800;text-transform:uppercase}
.top-whatsapp{background:var(--green);color:#fff;padding:13px 18px}
.menu-btn{display:none;margin-left:auto;background:none;border:0;width:40px}
.menu-btn span{display:block;height:3px;background:var(--navy);margin:6px 0}
.hero{position:relative;overflow:hidden;min-height:620px}
.hero-background{position:absolute;inset:0}
.hero-background>img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-background:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.58) 43%,rgba(255,255,255,.05) 68%)}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.45fr .65fr;gap:48px;align-items:center;min-height:620px;padding:45px 0 80px}
.hero-copy{max-width:670px}
.hero h1{font-size:clamp(2.9rem,5vw,5.2rem);line-height:.98;text-transform:uppercase;margin:0 0 24px;letter-spacing:-.04em;color:var(--navy)}
.hero h1 span{color:var(--green)}
.hero-copy p{font-size:1.2rem;font-weight:700;line-height:1.55;max-width:470px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.button{padding:15px 20px;font-size:.82rem;border:2px solid transparent}
.button.green{background:linear-gradient(#3da33a,#237b28);color:#fff}
.button.outline{border-color:#fff;background:rgba(9,87,151,.84);color:#fff}
.button.white{background:#fff;color:var(--green)}
.calculator{background:#fff;border-radius:18px;padding:28px;box-shadow:0 18px 48px rgba(1,32,77,.22)}
.calculator h2{text-align:center;text-transform:uppercase;margin:0 0 23px}
.calculator label{display:block;font-weight:700;margin:16px 0 7px}
.input-row{display:flex;border:1px solid #cbd6e4;border-radius:7px;overflow:hidden}
.input-row input{width:100%;border:0;padding:13px;font-weight:800;font-size:1rem}
.input-row span{padding:13px;background:#f3f6f9}
.calculator>small{display:block;margin-top:7px}
.calculator select{width:100%;padding:13px;border:1px solid #cbd6e4;border-radius:7px;background:#fff;font-weight:700}
.estimate-box{margin:18px 0;background:#eaf4e2;border-radius:9px;text-align:center;padding:20px}
.estimate-box span{text-transform:uppercase;font-size:.78rem}
.estimate-box strong{display:block;font-size:2.15rem;margin:5px;color:var(--navy)}
.full{width:100%}
.calculator p{text-align:center;font-size:.78rem;line-height:1.45}
.wave-divider{position:absolute;z-index:3;left:-5%;bottom:-45px;width:110%;height:95px;background:#fff;border-radius:50% 50% 0 0}
.water{position:absolute;left:-10%;width:120%;height:38px;bottom:0;background:repeating-radial-gradient(ellipse,rgba(255,255,255,.7) 0 3px,transparent 5px 15px);opacity:.18;animation:water 10s linear infinite}
.water-two{bottom:14px;animation-duration:14s;animation-direction:reverse}
.section{padding:78px 0}
.six-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.six-grid article{text-align:center;padding:10px 16px;border-right:1px solid #dce5ef}
.six-grid article:last-child{border-right:0}
.icon,.step-icon{font-size:2.7rem}
.six-grid h3,.steps h3{font-size:.9rem;text-transform:uppercase;color:var(--navy)}
.six-grid p,.steps p{font-size:.86rem;line-height:1.45}
.light-blue{background:#eef7ff}
.section-title{text-align:center;text-transform:uppercase;color:var(--navy);font-size:2rem;margin:0 0 42px}
.section-title span{color:var(--green)}
.steps-layout{display:grid;grid-template-columns:1fr 240px;gap:25px;align-items:center}
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.steps-grid article{position:relative;text-align:center;padding:18px}
.steps-grid b{position:absolute;left:10px;top:5px;background:var(--green);color:#fff;width:27px;height:27px;border-radius:50%;display:grid;place-items:center}
.choco-card{height:260px;overflow:hidden;display:flex;align-items:center;justify-content:center}
.choco-card img{width:100%;height:100%;object-fit:cover;object-position:50% 25%}
.pickup{display:grid;grid-template-columns:1fr 1.55fr;background:var(--navy);color:#fff}
.pickup-copy{display:flex;justify-content:flex-end;align-items:center;padding:55px 5vw}
.pickup-copy>div{max-width:420px}
.pickup h2{text-transform:uppercase;font-size:2rem;margin:0}
.pickup ul{list-style:none;padding:0;line-height:2}
.pickup li:before{content:"✓";display:inline-grid;place-items:center;background:var(--green);width:20px;height:20px;border-radius:50%;margin-right:8px}
.pickup-photo img{width:100%;height:100%;min-height:420px;object-fit:cover}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
blockquote{margin:0;padding:28px;border:1px solid #dde7f0;border-radius:14px;box-shadow:0 8px 24px rgba(3,40,84,.07);line-height:1.55}
blockquote cite{display:block;margin-top:20px;font-style:normal;color:var(--navy);font-weight:800}
.cta{background:linear-gradient(90deg,#27882d,#48a63d);color:#fff}
.cta-grid{position:relative;display:grid;grid-template-columns:1.4fr auto 180px;gap:24px;align-items:center;min-height:120px}
.cta h2{margin:0;text-transform:uppercase}
.cta p{margin:7px 0 0}
.cta img{position:absolute;right:0;bottom:0;width:185px;height:145px;object-fit:cover;object-position:65% 80%}
.footer{background:#052d62;color:#fff;padding:52px 0}
.footer-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:35px}
.footer-brand img{width:190px;background:#fff;border-radius:8px;padding:6px}
.footer h3{text-transform:uppercase;font-size:.9rem}
.footer a,.footer span{display:block;margin:9px 0;color:#d6e3f1;font-size:.9rem}
@keyframes water{to{transform:translateX(8%)}}
@media(max-width:950px){
 .nav,.top-whatsapp{display:none}
 .menu-btn{display:block}
 .nav.open{position:absolute;display:flex;flex-direction:column;left:0;right:0;top:92px;background:#fff;padding:20px 5%;box-shadow:0 12px 30px rgba(0,0,0,.15)}
 .hero-grid{grid-template-columns:1fr;padding-top:60px}
 .calculator{max-width:520px}
 .six-grid{grid-template-columns:repeat(3,1fr)}
 .steps-layout{grid-template-columns:1fr}
 .steps-grid{grid-template-columns:repeat(2,1fr)}
 .choco-card{max-width:320px;margin:auto}
 .pickup{grid-template-columns:1fr}
 .pickup-copy{justify-content:center}
 .testimonial-grid{grid-template-columns:1fr}
 .cta-grid{grid-template-columns:1fr auto;padding-right:190px}
 .footer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
 .logo{width:135px}.logo img{height:68px}.nav-wrap{min-height:78px}
 .nav.open{top:78px}
 .hero h1{font-size:2.55rem}
 .hero-grid{min-height:auto}
 .six-grid,.steps-grid{grid-template-columns:1fr}
 .six-grid article{border-right:0;border-bottom:1px solid #dce5ef}
 .pickup-photo img{min-height:330px}
 .cta-grid{grid-template-columns:1fr;padding:30px 150px 30px 0}
 .cta img{width:145px;height:120px}
 .footer-grid{grid-template-columns:1fr}
}


/* ===== Visible motion layer ===== */
.logo{
  position:relative;
  isolation:isolate;
}
.logo::after{
  content:"";
  position:absolute;
  width:58px;
  height:58px;
  border:3px solid transparent;
  border-top-color:#0b72bd;
  border-right-color:#2d8f2f;
  border-radius:50%;
  top:8px;
  left:67px;
  z-index:-1;
  animation:logoOrbit 7s linear infinite;
  opacity:.8;
}

.hero-background>img{
  animation:heroPan 10s ease-in-out infinite alternate;
  transform:scale(1.04);
  will-change:transform;
}

.calculator{
  animation:calculatorFloat 4.5s ease-in-out infinite;
}

.button.green{
  position:relative;
  overflow:hidden;
}
.button.green::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-120%);
  background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.35) 50%,transparent 75%);
  animation:buttonShine 4s ease-in-out infinite;
}

.choco-card img{
  animation:chocolitoBob 3s ease-in-out infinite;
  transform-origin:50% 80%;
}
.cta img{
  animation:chocolitoWave 3.4s ease-in-out infinite;
  transform-origin:70% 90%;
}

.icon,.step-icon{
  display:inline-block;
  animation:iconFloat 3.8s ease-in-out infinite;
}
.six-grid article:nth-child(2) .icon,
.steps-grid article:nth-child(2) .step-icon{animation-delay:.35s}
.six-grid article:nth-child(3) .icon,
.steps-grid article:nth-child(3) .step-icon{animation-delay:.7s}
.six-grid article:nth-child(4) .icon,
.steps-grid article:nth-child(4) .step-icon{animation-delay:1.05s}
.six-grid article:nth-child(5) .icon{animation-delay:1.4s}
.six-grid article:nth-child(6) .icon{animation-delay:1.75s}

.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease,transform .7s ease;
}
.reveal.visible{
  opacity:1;
  transform:none;
}

@keyframes logoOrbit{
  to{transform:rotate(360deg)}
}
@keyframes heroPan{
  0%{transform:scale(1.04) translate3d(-.5%,0,0)}
  100%{transform:scale(1.09) translate3d(.7%,-.5%,0)}
}
@keyframes calculatorFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes buttonShine{
  0%,55%{transform:translateX(-120%)}
  75%,100%{transform:translateX(120%)}
}
@keyframes chocolitoBob{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-8px) rotate(1.2deg)}
}
@keyframes chocolitoWave{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-6px) rotate(-1.5deg)}
}
@keyframes iconFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

@media(prefers-reduced-motion:reduce){
  .logo::after,
  .hero-background>img,
  .calculator,
  .button.green::after,
  .choco-card img,
  .cta img,
  .icon,
  .step-icon,
  .water{
    animation:none!important;
  }
}


/* ===== Chocolito subtle character motion ===== */
.choco-card{
  overflow:visible;
}
.chocolito-motion{
  position:relative;
  width:100%;
  height:100%;
  transform-origin:52% 82%;
  animation:chocolitoIdle 4.8s ease-in-out infinite;
  will-change:transform;
}
.chocolito-motion img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 25%;
  animation:none!important;
}
.chocolito-motion.wave{
  animation:chocolitoGesture .8s ease-in-out 1;
}
.blink{
  position:absolute;
  display:block;
  background:#111;
  border-radius:50%;
  transform-origin:center;
  transform:scaleY(0);
  opacity:.88;
  pointer-events:none;
  animation:blinkCycle 6.8s infinite;
}
/* Positions match the exact approved Chocolito crop */
.blink-left{
  left:28.8%;
  top:31.8%;
  width:3.6%;
  height:2.4%;
  transform:rotate(-4deg) scaleY(0);
}
.blink-right{
  left:39.4%;
  top:31.6%;
  width:4.2%;
  height:2.6%;
  transform:rotate(2deg) scaleY(0);
  animation-delay:.04s;
}
@keyframes chocolitoIdle{
  0%,100%{transform:translateY(0) rotate(0deg)}
  45%{transform:translateY(-4px) rotate(.4deg)}
  55%{transform:translateY(-5px) rotate(-.4deg)}
}
@keyframes chocolitoGesture{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-5px) rotate(-2deg)}
  65%{transform:translateY(-3px) rotate(1.5deg)}
}
@keyframes blinkCycle{
  0%,44%,48%,100%{transform:scaleY(0)}
  45.2%,46.8%{transform:scaleY(1)}
}
@media(prefers-reduced-motion:reduce){
  .chocolito-motion,
  .blink{animation:none!important}
}


/* Clean Chocolito integration — removes the screenshot-like framed look */
.choco-card{
  height:300px;
  overflow:visible;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
}
.chocolito-motion{
  width:100%;
  height:100%;
  background:transparent;
}
.chocolito-motion img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border:0;
  box-shadow:none;
  background:transparent;
  mix-blend-mode:multiply;
}


/* ===== Final subtle polish ===== */

/* Smoother water movement */
.water{
  opacity:.14;
  filter:blur(.3px);
  animation:waterSmooth 16s linear infinite;
}
.water-two{
  opacity:.09;
  animation-duration:22s;
  animation-direction:reverse;
}

/* Gentle hero ship/scene rock */
.hero-background{
  transform-origin:50% 68%;
  animation:heroRock 8s ease-in-out infinite;
}
.hero-background>img{
  animation:heroPanPremium 16s ease-in-out infinite alternate;
}

/* Refined logo orbit */
.logo::after{
  width:60px;
  height:60px;
  border-width:2px;
  opacity:.58;
  animation:logoOrbitPremium 18s linear infinite;
}

/* Natural Chocolito movement */
.chocolito-motion{
  animation:chocolitoBreath 5.6s ease-in-out infinite;
}
.chocolito-motion::after{
  content:"";
  position:absolute;
  right:17%;
  top:40%;
  width:18%;
  height:18%;
  transform-origin:15% 50%;
  background:transparent;
  animation:wingTwitch 11s ease-in-out infinite;
}
.chocolito-motion.wave{
  animation:chocolitoHeadTilt .9s ease-in-out 1;
}

/* More natural blinking cadence */
.blink{
  animation:blinkNatural 8.5s infinite;
}
.blink-right{
  animation-delay:.05s;
}

/* Premium hover polish */
.button,
.whatsapp,
.nav a{
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease, color .25s ease, border-color .25s ease;
}
.button:hover,
.whatsapp:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(3,40,84,.18);
  filter:saturate(1.08);
}
.nav a:hover{
  transform:translateY(-1px);
}
.calculator{
  transition:box-shadow .35s ease, transform .35s ease;
}
.calculator:hover{
  box-shadow:0 24px 58px rgba(1,32,77,.25);
}
.testimonial-grid blockquote{
  transition:transform .3s ease, box-shadow .3s ease;
}
.testimonial-grid blockquote:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(3,40,84,.10);
}

/* Keyframes */
@keyframes waterSmooth{
  0%{transform:translateX(-2%) translateY(0)}
  50%{transform:translateX(3%) translateY(-2px)}
  100%{transform:translateX(8%) translateY(0)}
}
@keyframes heroRock{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2px) rotate(.08deg)}
}
@keyframes heroPanPremium{
  0%{transform:scale(1.045) translate3d(-.35%,0,0)}
  100%{transform:scale(1.075) translate3d(.45%,-.25%,0)}
}
@keyframes logoOrbitPremium{
  to{transform:rotate(360deg)}
}
@keyframes chocolitoBreath{
  0%,100%{transform:translateY(0) rotate(0)}
  45%{transform:translateY(-3px) rotate(.25deg)}
  55%{transform:translateY(-4px) rotate(-.2deg)}
}
@keyframes chocolitoHeadTilt{
  0%,100%{transform:translateY(0) rotate(0)}
  35%{transform:translateY(-3px) rotate(-1.5deg)}
  70%{transform:translateY(-2px) rotate(.8deg)}
}
@keyframes wingTwitch{
  0%,84%,100%{transform:rotate(0)}
  87%{transform:rotate(-3deg)}
  90%{transform:rotate(2deg)}
  93%{transform:rotate(0)}
}
@keyframes blinkNatural{
  0%,34%,36.5%,68%,70%,100%{transform:scaleY(0)}
  35%,35.7%,69%,69.7%{transform:scaleY(1)}
}

@media(prefers-reduced-motion:reduce){
  .hero-background,
  .hero-background>img,
  .water,
  .logo::after,
  .chocolito-motion,
  .chocolito-motion::after,
  .blink{
    animation:none!important;
  }
}


/* ===== Homepage v1.0 footer mascot lock ===== */
.cta{
  position:relative;
  overflow:visible;
}
.cta::before,
.cta-grid::after{
  content:none !important;
  display:none !important;
}
.cta-grid{
  position:relative;
  overflow:visible;
  padding-right:140px;
}
.cta img{
  position:absolute;
  right:8px;
  bottom:-8px;
  width:110px;
  height:auto;
  object-fit:contain;
  object-position:center bottom;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  clip-path:none !important;
  mix-blend-mode:normal !important;
  opacity:1 !important;
  filter:drop-shadow(0 8px 11px rgba(0,0,0,.18));
  z-index:5;
  animation:footerMascotIdle 5.8s ease-in-out infinite;
  transform-origin:50% 95%;
}
@keyframes footerMascotIdle{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-3px) rotate(-.25deg)}
}
@media(max-width:900px){
  .cta-grid{padding-right:105px;}
  .cta img{width:85px;right:0;}
}
@media(max-width:600px){
  .cta-grid{padding-right:80px;}
  .cta img{width:65px;right:-4px;bottom:-4px;}
}


/* ===== Bottom Chocolito: no floating, only a brief subtle gesture ===== */
.cta img{
  animation:none !important;
  transform-origin:55% 88%;
}
.cta img.choco-gesture{
  animation:footerChocolitoGesture .9s ease-in-out 1 !important;
}
@keyframes footerChocolitoGesture{
  0%,100%{transform:rotate(0deg) scale(1)}
  28%{transform:rotate(-2deg) scale(1.015)}
  55%{transform:rotate(1.2deg) scale(1)}
  78%{transform:rotate(-.5deg) scale(1.005)}
}
@media(prefers-reduced-motion:reduce){
  .cta img.choco-gesture{animation:none !important}
}


/* ===== Globe-only logo animation ===== */
.logo{
  width:195px !important;
  flex:0 0 195px !important;
  position:relative !important;
  animation:none !important;
  transform:none !important;
}
.logo::after{content:none !important;display:none !important}
.logo-base{
  width:100% !important;
  height:88px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  position:relative;
  z-index:1;
}
.logo-globe-window{
  position:absolute;
  left:calc(50% - 30px);
  top:3px;
  width:58px;
  height:58px;
  border-radius:50%;
  overflow:hidden;
  z-index:2;
  pointer-events:none;
}
.logo-globe-spin{
  position:absolute;
  width:88px !important;
  height:88px !important;
  max-width:none !important;
  left:-15px;
  top:-3px;
  object-fit:contain;
  transform-origin:44px 44px;
  animation:globeOnlySpin 4.4s ease-in-out infinite;
}
@keyframes globeOnlySpin{
  0%,52%{transform:rotate(0deg)}
  80%,100%{transform:rotate(360deg)}
}

/* ===== Real palm-and-flower corners, shadow cleaned ===== */
.benefits{
  position:relative;
  overflow:hidden;
}
.benefits::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:88px;
  height:128px;
  background:url("assets/palm-flower-left.png") left bottom / contain no-repeat;
  opacity:.88;
  pointer-events:none;
  z-index:0;
}
.benefits::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:90px;
  height:132px;
  background:url("assets/palm-flower-right.png") right bottom / contain no-repeat;
  opacity:.88;
  pointer-events:none;
  z-index:0;
}
.benefits .container{
  position:relative;
  z-index:1;
}
@media(max-width:700px){
  .logo{width:158px !important;flex-basis:158px !important}
  .logo-base{height:76px !important}
  .logo-globe-window{
    left:calc(50% - 26px);
    top:2px;
    width:50px;
    height:50px;
  }
  .logo-globe-spin{
    width:76px !important;
    height:76px !important;
    left:-13px;
    top:-2px;
    transform-origin:38px 38px;
  }
  .benefits::before,
  .benefits::after{
    width:58px;
    height:88px;
    opacity:.75;
  }
}
@media(prefers-reduced-motion:reduce){
  .logo-globe-spin{animation:none !important}
}


/* ===== Final header logo lock: static original logo ===== */
.logo{
  width:195px !important;
  flex:0 0 195px !important;
  position:relative !important;
  transform:none !important;
  animation:none !important;
}

.logo::after,
.logo-globe-window,
.logo-globe-spin{
  content:none !important;
  display:none !important;
  animation:none !important;
}

.logo > img{
  width:100% !important;
  height:88px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  transform:none !important;
  animation:none !important;
  filter:none !important;
}

@media(max-width:700px){
  .logo{
    width:158px !important;
    flex-basis:158px !important;
  }
  .logo > img{
    height:76px !important;
  }
}


/* ===== Restore the approved spinning circle around the logo ===== */
/* The logo itself stays completely still. Only the outer circle rotates. */
.logo{
  width:195px !important;
  flex:0 0 195px !important;
  position:relative !important;
  overflow:visible !important;
  transform:none !important;
  animation:none !important;
}

.logo > img{
  width:100% !important;
  height:88px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
  transform:none !important;
  animation:none !important;
}

/* Blue/green orbit around the globe portion of the original logo */
.logo::after{
  content:"" !important;
  display:block !important;
  position:absolute;
  width:62px;
  height:62px;
  left:66px;
  top:7px;
  border:3px solid transparent;
  border-top-color:#0b72bd;
  border-right-color:#2d8f2f;
  border-bottom-color:rgba(11,114,189,.28);
  border-left-color:rgba(45,143,47,.28);
  border-radius:50%;
  pointer-events:none;
  z-index:3;
  animation:logoOrbitRestored 4.8s linear infinite !important;
  transform-origin:center center;
}

@keyframes logoOrbitRestored{
  to{transform:rotate(360deg)}
}

@media(max-width:700px){
  .logo{
    width:158px !important;
    flex-basis:158px !important;
  }
  .logo > img{
    height:76px !important;
  }
  .logo::after{
    width:52px;
    height:52px;
    left:53px;
    top:7px;
    border-width:2.5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .logo::after{
    animation:none !important;
  }
}


/* ===== Inicio v1.1 final polish: transparent flying Chocolito ===== */
/* Uses the user-supplied transparent PNG exactly as uploaded. */
.choco-card{
  height:360px !important;
  overflow:visible !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

.chocolito-motion{
  width:100% !important;
  height:100% !important;
  overflow:visible !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:transparent !important;
  animation:none !important;
}

.chocolito-motion .homepage-chocolito-final{
  width:118% !important;
  max-width:560px !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:drop-shadow(0 16px 20px rgba(5,43,98,.16));
  animation:homepageChocolitoFloat 5s ease-in-out infinite !important;
  transform-origin:52% 58%;
}

.blink{
  display:none !important;
}

@keyframes homepageChocolitoFloat{
  0%,100%{transform:translateY(0) rotate(-1deg)}
  50%{transform:translateY(-10px) rotate(1deg)}
}

@media(max-width:900px){
  .choco-card{
    height:320px !important;
  }

  .chocolito-motion .homepage-chocolito-final{
    width:108% !important;
    max-width:460px !important;
  }
}

@media(max-width:560px){
  .choco-card{
    height:270px !important;
  }

  .chocolito-motion .homepage-chocolito-final{
    width:100% !important;
    max-width:340px !important;
  }
}


/* ===== Inicio v1.2 — requested mascot polish only ===== */

/* Bottom CTA Chocolito: exactly 20% larger than v1.1 */
.cta-grid{
  padding-right:165px !important;
}
.cta img,
#footerChocolito{
  width:132px !important;
}

@media(max-width:900px){
  .cta-grid{
    padding-right:125px !important;
  }
  .cta img,
  #footerChocolito{
    width:102px !important;
  }
}

@media(max-width:600px){
  .cta-grid{
    padding-right:94px !important;
  }
  .cta img,
  #footerChocolito{
    width:78px !important;
  }
}

/* Top flying Chocolito: subtle single-eye blink.
   The transparent mascot PNG itself remains unchanged. */
.chocolito-motion{
  position:relative !important;
}

.top-chocolito-eyelid{
  position:absolute;
  left:39.1%;
  top:10.4%;
  width:7.1%;
  height:3.2%;
  border-radius:50%;
  background:linear-gradient(180deg,#111 0%,#050505 72%,#2b1807 100%);
  transform:scaleY(0);
  transform-origin:center;
  opacity:0;
  pointer-events:none;
  z-index:4;
  animation:topChocolitoBlink 7.2s infinite;
}

@keyframes topChocolitoBlink{
  0%,46%,48.2%,100%{
    transform:scaleY(0);
    opacity:0;
  }
  46.5%,47.2%,47.9%{
    transform:scaleY(1);
    opacity:.98;
  }
}

@media(max-width:900px){
  .top-chocolito-eyelid{
    left:39.3%;
    top:10.7%;
  }
}

@media(prefers-reduced-motion:reduce){
  .top-chocolito-eyelid{
    animation:none !important;
    display:none !important;
  }
}


/* ===== Inicio v1.3 — remove failed top blink overlay ===== */
.top-chocolito-eyelid{
  display:none !important;
  content:none !important;
  animation:none !important;
  opacity:0 !important;
}


/* ===== Inicio v1.4 — logo ring spins behind the logo ===== */
.logo{
  position:relative !important;
  isolation:isolate !important;
}

.logo img{
  position:relative !important;
  z-index:2 !important;
}

.logo::after{
  z-index:1 !important;
  pointer-events:none !important;
}

/* Keep the animated ring behind the logo artwork instead of over it. */
.header,
.nav-wrap{
  overflow:visible !important;
}


/* ===== Inicio v1.5 — restore subtle visible logo animation ===== */
/* The ring remains animated, but is resized and repositioned so it
   surrounds the globe instead of crossing over the logo artwork. */
.logo{
  position:relative !important;
  isolation:auto !important;
}

.logo img{
  position:relative !important;
  z-index:1 !important;
}

.logo::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  width:68px !important;
  height:68px !important;
  left:59px !important;
  top:2px !important;
  border:2px solid transparent !important;
  border-top-color:rgba(11,114,189,.78) !important;
  border-right-color:rgba(45,143,47,.78) !important;
  border-bottom-color:rgba(11,114,189,.18) !important;
  border-left-color:rgba(45,143,47,.18) !important;
  border-radius:50% !important;
  z-index:3 !important;
  pointer-events:none !important;
  animation:orbit 5.2s linear infinite !important;
  transform-origin:center center !important;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset !important;
}

/* Mobile placement */
@media(max-width:560px){
  .logo::after{
    width:58px !important;
    height:58px !important;
    left:47px !important;
    top:3px !important;
    border-width:2px !important;
  }
}


/* =========================================================
   INICIO v1.6 — cohesive subtle motion polish
   Uses transform and opacity for smooth browser animation.
   ========================================================= */

/* 1) Logo: visible thin orbit around the globe, not across the lettering */
.logo{
  position:relative !important;
  isolation:isolate !important;
}
.logo img{
  position:relative !important;
  z-index:2 !important;
}
.logo::after{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  width:70px !important;
  height:70px !important;
  left:58px !important;
  top:1px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:conic-gradient(
    from 0deg,
    rgba(11,114,189,0) 0deg 32deg,
    rgba(11,114,189,.9) 48deg 105deg,
    rgba(45,143,47,.9) 120deg 178deg,
    rgba(45,143,47,0) 194deg 250deg,
    rgba(11,114,189,.34) 275deg 318deg,
    rgba(11,114,189,0) 336deg 360deg
  ) !important;
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px)) !important;
  mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px)) !important;
  z-index:3 !important;
  opacity:.78 !important;
  animation:logoGlobeOrbit 6.8s linear infinite !important;
  pointer-events:none !important;
  box-shadow:none !important;
  transform-origin:center !important;
}
@keyframes logoGlobeOrbit{
  to{transform:rotate(360deg)}
}

/* 2) Hero scene: gentle movement only */
.hero-background>img{
  animation:heroSceneDrift 14s ease-in-out infinite alternate !important;
  transform:scale(1.035);
  will-change:transform;
}
@keyframes heroSceneDrift{
  0%{transform:scale(1.035) translate3d(-.25%,0,0)}
  100%{transform:scale(1.065) translate3d(.45%,-.35%,0)}
}

/* 3) Water: visible layered ripples and traveling highlights */
.water{
  left:-12% !important;
  width:124% !important;
  height:54px !important;
  bottom:2px !important;
  opacity:.34 !important;
  overflow:visible !important;
  background:
    repeating-radial-gradient(
      ellipse at 50% 100%,
      rgba(255,255,255,.76) 0 2px,
      rgba(255,255,255,0) 4px 15px
    ) !important;
  background-size:84px 30px !important;
  animation:waterTravel 11s linear infinite !important;
  will-change:transform,background-position;
}
.water-two{
  bottom:19px !important;
  opacity:.20 !important;
  background-size:110px 36px !important;
  animation:waterTravelReverse 15s linear infinite !important;
}
.water::before,
.water::after{
  content:"";
  position:absolute;
  left:56%;
  bottom:8px;
  width:120px;
  height:20px;
  border:2px solid rgba(255,255,255,.50);
  border-radius:50%;
  opacity:0;
  transform:translateX(-50%) scale(.45);
  animation:ripplePulse 4.8s ease-out infinite;
  pointer-events:none;
}
.water::after{
  animation-delay:2.4s;
}
.water-two::before{
  left:69%;
  animation-delay:1.1s;
}
.water-two::after{
  left:69%;
  animation-delay:3.5s;
}
@keyframes waterTravel{
  from{transform:translate3d(-2%,0,0);background-position:0 0}
  to{transform:translate3d(5%,0,0);background-position:160px 0}
}
@keyframes waterTravelReverse{
  from{transform:translate3d(4%,0,0);background-position:150px 0}
  to{transform:translate3d(-3%,0,0);background-position:0 0}
}
@keyframes ripplePulse{
  0%{opacity:0;transform:translateX(-50%) scale(.42)}
  18%{opacity:.42}
  100%{opacity:0;transform:translateX(-50%) scale(1.55)}
}

/* 4) Middle Chocolito: alive, but not constantly busy */
.chocolito-motion{
  position:relative !important;
  cursor:pointer;
  outline:none;
  animation:chocolitoCalmFlight 5.8s ease-in-out infinite !important;
  will-change:transform;
}
.chocolito-motion:hover,
.chocolito-motion:focus-visible{
  filter:drop-shadow(0 20px 23px rgba(5,43,98,.20));
}
.chocolito-motion .homepage-chocolito-final{
  animation:none !important;
  transition:filter .28s ease;
}
.chocolito-motion::after{
  content:"Tócame";
  position:absolute;
  right:7%;
  top:13%;
  padding:7px 10px;
  border-radius:12px 12px 3px 12px;
  background:rgba(255,255,255,.94);
  color:var(--navy);
  font-size:.72rem;
  font-weight:800;
  box-shadow:0 8px 18px rgba(5,43,98,.12);
  opacity:0;
  transform:translateY(6px);
  transition:opacity .25s ease,transform .25s ease;
  pointer-events:none;
}
.chocolito-motion:hover::after,
.chocolito-motion:focus-visible::after{
  opacity:1;
  transform:none;
}
.chocolito-motion.wave{
  animation:chocolitoFriendlySwoop .9s cubic-bezier(.2,.7,.25,1) 1 !important;
}
@keyframes chocolitoCalmFlight{
  0%,100%{transform:translate3d(0,0,0) rotate(-.7deg)}
  50%{transform:translate3d(5px,-8px,0) rotate(.7deg)}
}
@keyframes chocolitoFriendlySwoop{
  0%{transform:translate3d(0,0,0) rotate(0) scale(1)}
  28%{transform:translate3d(10px,-12px,0) rotate(3deg) scale(1.025)}
  55%{transform:translate3d(-5px,-7px,0) rotate(-2deg) scale(1.018)}
  78%{transform:translate3d(3px,-2px,0) rotate(.8deg) scale(1.006)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1)}
}

/* 5) Bottom Chocolito: keep 20% larger and make CTA interaction visible */
#footerChocolito{
  transition:filter .25s ease;
  will-change:transform;
}
.cta:hover #footerChocolito{
  filter:drop-shadow(0 12px 14px rgba(1,43,28,.22));
}
#footerChocolito.choco-gesture{
  animation:footerChocolitoHello .95s cubic-bezier(.2,.72,.25,1) 1 !important;
}
@keyframes footerChocolitoHello{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  30%{transform:translate3d(-4px,-8px,0) rotate(-3deg)}
  58%{transform:translate3d(3px,-5px,0) rotate(2deg)}
  80%{transform:translate3d(-1px,-2px,0) rotate(-.6deg)}
}

/* 6) Buttons and cards: brief interaction, not constant motion */
.button,
.calculator,
.six-grid article,
.steps-grid article,
blockquote{
  transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.button:hover,
.button:focus-visible{
  transform:translateY(-2px);
}
.calculator:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 52px rgba(1,32,77,.24);
}
.six-grid article:hover,
.steps-grid article:hover,
blockquote:hover{
  transform:translateY(-3px);
}

/* Mobile logo alignment */
@media(max-width:560px){
  .logo::after{
    width:58px !important;
    height:58px !important;
    left:46px !important;
    top:4px !important;
  }
  .chocolito-motion::after{
    display:none;
  }
}

/* Accessibility: keep the site usable when reduced motion is requested */
@media(prefers-reduced-motion:reduce){
  .logo::after,
  .hero-background>img,
  .water,
  .water::before,
  .water::after,
  .chocolito-motion,
  #footerChocolito,
  .button.green::after{
    animation:none !important;
  }
  .reveal{
    opacity:1 !important;
    transform:none !important;
  }
}


/* ===== Inicio v1.7 — remove the "Tócame" hover bubble ===== */
.chocolito-motion::after,
.chocolito-motion:hover::after,
.chocolito-motion:focus-visible::after{
  content:none !important;
  display:none !important;
  opacity:0 !important;
}


/* ===== Inicio v1.8 — remove fake water circles and whole-image floating ===== */
.hero-background > img{
  animation:none !important;
  transform:none !important;
  will-change:auto !important;
}

.water,
.water-one,
.water-two,
.water::before,
.water::after,
.water-two::before,
.water-two::after{
  display:none !important;
  content:none !important;
  animation:none !important;
  background:none !important;
  border:0 !important;
  opacity:0 !important;
}

/* Keep only the animations that are genuinely tied to separate elements. */
.logo::after{
  animation:logoGlobeOrbit 6.8s linear infinite !important;
}

.chocolito-motion{
  animation:chocolitoCalmFlight 5.8s ease-in-out infinite !important;
}

.chocolito-motion.wave{
  animation:chocolitoFriendlySwoop .9s cubic-bezier(.2,.7,.25,1) 1 !important;
}

#footerChocolito.choco-gesture{
  animation:footerChocolitoHello .95s cubic-bezier(.2,.72,.25,1) 1 !important;
}