@font-face {
  font-family: 'Chendolle';
  src: url('../fonts/Chendolle.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root{
  --yellow: #ECB31E;
  --yellow-deep: #D89A0E;
  --coral: #F7724F;
  --coral-deep: #E45A36;
  --coral-text: #B8451F;
  --black: #17140F;
  --ink: #211D16;
  --white: #FFFFFF;
  --cream: #FFFDF8;
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scrollbar-color: var(--coral) var(--cream); scrollbar-width: thin;}
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:'Plus Jakarta Sans', sans-serif;
  font-weight:500;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::after{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:url('../img/grain.jpg'); background-size:160px; opacity:.045;
  mix-blend-mode:multiply;
}
img{max-width:100%; height:auto; display:block;}
svg{max-width:100%; display:inline-block; vertical-align:middle; flex-shrink:0;}

/* custom scrollbar (webkit) */
::-webkit-scrollbar{ width:12px; }
::-webkit-scrollbar-track{ background:var(--cream); }
::-webkit-scrollbar-thumb{ background:var(--coral); border-radius:20px; border:3px solid var(--cream); }
::-webkit-scrollbar-thumb:hover{ background:var(--coral-deep); }

/* accessible focus state, on brand */
a:focus-visible, button:focus-visible, summary:focus-visible, details:focus-visible, [role="button"]:focus-visible{
  outline:3px solid var(--coral); outline-offset:3px; border-radius:8px;
}

.skip-link{
  position:absolute; top:-60px; left:12px; z-index:10001;
  background:var(--black); color:var(--white); font-weight:800;
  padding:12px 20px; border-radius:10px; text-decoration:none;
  transition:top .2s ease;
}
.skip-link:focus{ top:12px; }

/* scroll progress bar */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg, var(--coral), var(--yellow));
  z-index:10000; pointer-events:none;
}
a{color:inherit;}
::selection{background:var(--coral); color:var(--white);}

h1,h2,h3, .display{
  font-family:'Chendolle', 'Plus Jakarta Sans', sans-serif;
  font-weight:400;
  line-height:0.92;
  margin:0;
  letter-spacing:0.5px;
}

.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

/* accent tick for Chendolle diacritics (font has no á é í ó ú glyphs) */
.hl-acc{ position:relative; display:inline; }
.hl-acc::after{
  content:''; position:absolute; top:-0.02em; left:0.1em;
  width:0.09em; height:0.18em; background:var(--coral);
  border-radius:3px; transform:rotate(-45deg);
}
.on-black .hl-acc::after{ background:var(--yellow); }

/* ---------- sticker card (signature element) ---------- */
.sticker{
  background:var(--white);
  border:3px solid var(--black);
  border-radius:26px;
  box-shadow:7px 7px 0 var(--coral);
  rotate: var(--r,-1.2deg);
  transition:rotate .3s cubic-bezier(.2,.85,.35,1), transform .3s cubic-bezier(.2,.85,.35,1), box-shadow .3s cubic-bezier(.2,.85,.35,1);
}
.sticker:hover{ rotate:0deg; transform:translate(-2px,-2px); box-shadow:9px 9px 0 var(--coral); }
.sticker.on-black{ box-shadow:7px 7px 0 var(--yellow); }

.tag{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--white); border:2.5px solid var(--black);
  border-radius:999px; padding:9px 18px; font-weight:700;
  font-size:0.92rem; box-shadow:4px 4px 0 var(--black);
}

/* ---------- icon system (replaces OS emoji everywhere) ---------- */
.ic{ width:1em; height:1em; display:inline-block; vertical-align:-0.15em; flex:none; }
.tag .ic{ width:15px; height:15px; vertical-align:-2.5px; color:var(--coral-text); }
.hero-eyebrow .ic{ width:15px; height:15px; vertical-align:-2px; color:var(--coral-text); }
.btn .ic{ width:17px; height:17px; vertical-align:-3px; }
.redes-photo .cap .ic{ width:14px; height:14px; vertical-align:-2px; color:var(--coral-text); }
.port-note .ic{ width:17px; height:17px; vertical-align:-3px; color:var(--coral-text); }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:800; letter-spacing:.4px; font-size:.82rem;
  text-transform:uppercase; color:var(--coral-text);
}
.eyebrow::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral);display:inline-block;}

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:1rem;
  padding:15px 30px; border-radius:999px; border:3px solid var(--black);
  cursor:pointer; text-decoration:none; color:var(--black);
  background:var(--white); box-shadow:6px 6px 0 var(--black);
  transition:transform .22s cubic-bezier(.2,.85,.35,1), box-shadow .22s cubic-bezier(.2,.85,.35,1);
}
.btn:hover{ transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--black); }
.btn:active{ transform:translate(1px,1px); box-shadow:3px 3px 0 var(--black); transition:transform .05s ease, box-shadow .05s ease; }
.btn.primary{ background:var(--coral); color:var(--black); }
.btn.small{ padding:10px 18px; font-size:.86rem; box-shadow:4px 4px 0 var(--black); border-width:2.5px;}

section{ position:relative; }

/* ---------- NAV ---------- */
header.nav{
  position:sticky; top:0; z-index:100;
  background:rgba(255,253,248,.9);
  backdrop-filter:blur(10px);
  border-bottom:3px solid var(--black);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:14px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.brand-badge{
  width:42px;height:42px;border-radius:50%;
  background:var(--yellow); border:2.5px solid var(--black);
  display:flex;align-items:center;justify-content:center; overflow:hidden;
  flex:none;
}
.brand-badge img{ width:78%; height:auto; }
.brand-word{ font-family:'Chendolle'; font-size:1.5rem; color:var(--black); white-space:nowrap; }
nav.links{ display:flex; gap:24px; align-items:center; }
nav.links a{
  text-decoration:none; font-weight:700; font-size:.92rem; color:var(--ink);
  position:relative; padding:4px 2px; white-space:nowrap;
}
nav.links a::after{
  content:""; position:absolute; left:0; bottom:-3px; height:3px; width:0%;
  background:var(--coral); transition:width .2s ease;
}
nav.links a:hover::after{width:100%;}
nav.links a.nav-highlight{
  background:var(--yellow); border:2px solid var(--black); border-radius:999px;
  padding:6px 14px; box-shadow:2.5px 2.5px 0 var(--black); color:var(--black); font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
nav.links a.nav-highlight:hover{
  background:var(--coral); transform:translate(-1px, -2px); box-shadow:4px 4px 0 var(--black);
}
nav.links a.nav-highlight::after{ display:none; }

/* Business Quick Bar */
.biz-bar{
  background:var(--yellow); border-bottom:3.5px solid var(--black); padding:12px 0; position:relative; z-index:10;
}
.biz-bar__inner{
  max-width:var(--max); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.biz-bar__text{
  display:flex; align-items:center; gap:12px; font-size:.95rem; color:var(--black);
}
.biz-bar__badge{
  background:var(--coral); color:var(--black); border:2px solid var(--black);
  border-radius:999px; padding:3px 12px; font-weight:800; font-size:.76rem;
  text-transform:uppercase; letter-spacing:.5px; box-shadow:2px 2px 0 var(--black); white-space:nowrap;
}
.biz-bar__actions{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
@media (max-width:800px){
  .biz-bar__inner{ flex-direction:column; text-align:center; padding:0 20px; }
  .biz-bar__text{ flex-direction:column; gap:8px; }
  .biz-bar__actions{ justify-content:center; width:100%; }
}
.nav-cta{ display:flex; align-items:center; gap:14px; }
.cta-short{ display:none; }

.burger{
  display:none; flex:none; width:42px; height:42px; border-radius:50%;
  border:2.5px solid var(--black); background:var(--white); cursor:pointer;
  align-items:center; justify-content:center; padding:0;
}
.burger svg{ width:20px; height:20px; }
.burger .icon-close{ display:none; }
.burger.open .icon-menu{ display:none; }
.burger.open .icon-close{ display:block; }

.mobile-drawer{
  display:none; position:absolute; top:100%; left:0; right:0; z-index:99;
  background:var(--cream); border-top:3px solid var(--black);
  padding:18px 28px 28px; overflow-y:auto; max-height:calc(100vh - 71px);
}
.mobile-drawer.open{ display:block; }
.mobile-drawer a{
  display:flex; align-items:center; justify-content:space-between;
  text-decoration:none; color:var(--black); font-weight:800; font-size:1.3rem;
  font-family:'Chendolle'; padding:16px 4px; border-bottom:2px solid rgba(23,20,15,.12);
}
.mobile-drawer a:last-child{ border-bottom:none; }
.mobile-drawer a span.arrow{ color:var(--coral-text); font-family:'Plus Jakarta Sans'; font-weight:800; }

.drawer-backdrop{
  display:none; position:fixed; inset:0; z-index:97;
  background:rgba(15,13,9,.45);
}
.drawer-backdrop.open{ display:block; }

@media (max-width:1100px){
  nav.links{ display:none; }
  .nav-cta .btn span.long{ display:none; }
  .nav-cta .btn span.cta-short{ display:inline; }
  .burger{ display:flex; }
}

@media (max-width:420px){
  .nav-inner{ padding:12px 16px; gap:8px; }
  .brand-word{ font-size:1.2rem; }
  .brand-badge{ width:36px; height:36px; }
  .nav-cta{ gap:8px; }
  .nav-cta .btn{ padding:9px 14px !important; font-size:.88rem; }
  .burger{ width:38px; height:38px; }
}

/* ---------- FLOATING WHATSAPP BUTTON ---------- */
.float-wa{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.float-wa__btn{
  width:60px;
  height:60px;
  border-radius:50%;
  background:linear-gradient(135deg, #2fe573 0%, #25D366 100%);
  border:2.5px solid var(--black);
  box-shadow:4px 4px 0 var(--black), 0 4px 16px rgba(37, 211, 102, 0.4);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#FFFFFF;
  position:relative;
  transition:transform .22s cubic-bezier(.2,.85,.35,1), box-shadow .22s cubic-bezier(.2,.85,.35,1);
}
.float-wa__btn svg{
  width:34px;
  height:34px;
  fill:#FFFFFF;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.float-wa:hover .float-wa__btn{
  transform:translate(-2px, -3px) scale(1.05);
  box-shadow:6px 6px 0 var(--black), 0 8px 24px rgba(37, 211, 102, 0.55);
}
.float-wa:active .float-wa__btn{
  transform:translate(1px, 1px) scale(0.98);
  box-shadow:2px 2px 0 var(--black);
}
.float-wa__tooltip{
  position:absolute;
  right:calc(100% + 12px);
  top:50%;
  transform:translateY(-50%) translateX(8px);
  background:var(--white);
  color:var(--black);
  border:2.5px solid var(--black);
  border-radius:999px;
  padding:7px 15px;
  font-size:.86rem;
  font-weight:800;
  box-shadow:3px 3px 0 var(--black);
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
}
.float-wa:hover .float-wa__tooltip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
@media (max-width:600px){
  .float-wa{ right:16px; bottom:16px; }
  .float-wa__btn{ width:54px; height:54px; }
  .float-wa__btn svg{ width:30px; height:30px; }
  .float-wa__tooltip{ display:none; }
}