*{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/inicio/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/inicio/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;
  }
}