/* AtiendeBien: depth and motion layer on the original palette (cream, white, navy, blue, orange).
   Loaded after site.css and before theme-dark.css. No gradients: depth comes from layered shadows, light top edges
   and dark bottom edges on flat colors. Every box holding a key phrase or a link carries the same slight drop shadow;
   the hero kit box carries a stronger layered one. Motion is transform and opacity only and is switched off by
   prefers-reduced-motion. */
:root {
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sh: 0 2px 4px rgba(11,27,59,.07), 0 10px 22px rgba(11,27,59,.12);               /* the one slight drop shadow */
  --sh-hover: 0 4px 8px rgba(11,27,59,.09), 0 20px 40px rgba(11,27,59,.20);
  --sh-kit: 0 2px 3px rgba(11,27,59,.28), 0 14px 26px rgba(11,27,59,.34), 0 34px 60px rgba(11,27,59,.26);
  --edge: inset 0 1px 0 rgba(255,255,255,.9);
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 10; transition: box-shadow .25s var(--ease); }
.site-header.scrolled { box-shadow: 0 6px 20px rgba(11,27,59,.12); }
section[id], .kit { scroll-margin-top: 76px; }
.nav a { transition: color .15s, border-color .15s; }

/* ---------- buttons: raised and pressable, flat color ---------- */
.btn { transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s; }
.btn.primary {
  position: relative; overflow: hidden; isolation: isolate;
  background-color: var(--cta); color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -3px 0 rgba(0,0,0,.22),
    0 1px 1px rgba(122,38,8,.55),
    0 6px 14px rgba(194,65,12,.34),
    0 16px 30px rgba(11,27,59,.14);
}
.btn.primary::after {                      /* a pale bar that crosses the button on hover */
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; z-index: -1; pointer-events: none;
  background: rgba(255,255,255,.22);
  transform: translateX(-160%) skewX(-22deg); transition: transform .6s var(--ease);
}
@media (hover: hover) {
  .btn.primary:hover {
    background-color: #B53A09; color: #fff; transform: translateY(-2px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.32),
      inset 0 -3px 0 rgba(0,0,0,.24),
      0 2px 2px rgba(122,38,8,.5),
      0 10px 20px rgba(194,65,12,.38),
      0 22px 38px rgba(11,27,59,.18);
  }
  .btn.primary:hover::after { transform: translateX(460%) skewX(-22deg); }
}
.btn.primary:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.30), 0 1px 1px rgba(122,38,8,.5), 0 2px 6px rgba(194,65,12,.25);
}
.btn.primary[disabled] { opacity: .75; transform: none; cursor: progress; }
.final .btn.primary { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -3px 0 rgba(0,0,0,.22), 0 1px 1px rgba(122,38,8,.55), 0 8px 22px rgba(194,65,12,.55); }
.link-arrow { display: inline-block; transition: transform .18s var(--ease); }
@media (hover: hover) { .link-arrow:hover { transform: translateX(3px); } }

/* ---------- boxes: one slight drop shadow on everything holding a key phrase or a link ---------- */
.card, .form, .kit-list li, details, .closing {
  background-color: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--edge), var(--sh);
}
.band .card, .band details, .band .closing { background-color: var(--bg); }
.card, .kit-list li, details { transition: transform .28s var(--ease), box-shadow .28s var(--ease); }
@media (hover: hover) {
  .card:hover, .kit-list li:hover, details:hover { transform: translateY(-3px); box-shadow: var(--edge), var(--sh-hover); }
  .form.card:hover { transform: none; box-shadow: var(--edge), var(--sh); }
}
@media (hover: none) {                       /* phones and tablets: a press is the feedback */
  .card:active, .kit-list li:active, summary:active { transform: scale(.985); }
  .card, .kit-list li, details { transition: transform .12s var(--ease), box-shadow .12s var(--ease); }
}

.closing { padding: 16px 20px; margin: 26px 0 12px; }
.kit-list { gap: 12px; }
.kit-list li { padding: 14px 16px; align-items: center; }
.kit-list .n { margin: 0; }
details { padding: 12px 18px; margin: 0 0 12px; }
details:last-of-type { border-bottom: 1px solid var(--line); }

.n { box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 0 #14296F, 0 6px 10px rgba(30,64,175,.30); }

/* ---------- hero: the kit is one navy box with a strong layered drop shadow ---------- */
.hero { position: relative; overflow: hidden; }
.stack {
  position: relative; margin: 0 6px 10px 0; box-shadow: var(--sh-kit);
  will-change: transform;
}
html:not(.gsap-on) .stack { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease); }
.stack li { box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 4px rgba(0,0,0,.25); transition: transform .2s var(--ease), background-color .2s; }
@media (hover: hover) { .stack li:hover { transform: translateX(6px); background: rgba(255,255,255,.15); } }

/* one orchestrated entrance on load: the text rises in order, then the kit tiles */
.hero .eyebrow, .hero h1, .hero .lead, .hero p:has(.btn), .hero .micro { animation: rise .7s var(--ease) both; }
.hero .eyebrow { animation-delay: .05s; }
.hero h1 { animation-delay: .13s; }
.hero .lead { animation-delay: .23s; }
.hero p:has(.btn) { animation-delay: .33s; }
.hero .micro { animation-delay: .42s; }
.stack li { animation: rise .6s var(--ease) both; }
.stack li:nth-child(1) { animation-delay: .35s; } .stack li:nth-child(2) { animation-delay: .43s; }
.stack li:nth-child(3) { animation-delay: .51s; } .stack li:nth-child(4) { animation-delay: .59s; }
.stack li:nth-child(5) { animation-delay: .67s; }

/* ---------- form ---------- */
.field input[type=email], .field input[type=text], .field select {
  box-shadow: inset 0 1px 2px rgba(11,27,59,.10); transition: border-color .15s, box-shadow .15s;
}
.field input[type=email]:focus, .field input[type=text]:focus, .field select:focus {
  border-color: var(--blue); box-shadow: inset 0 1px 2px rgba(11,27,59,.08), 0 0 0 4px rgba(30,64,175,.16);
}

/* ---------- faq ---------- */
summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; transition: color .15s; }
summary::-webkit-details-marker { display: none; }
summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  font: 600 18px/1 "Lexend", Arial, sans-serif; color: #fff; background-color: var(--blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 0 #14296F; transition: transform .25s var(--ease);
}
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--blue); }
details[open] > p { animation: rise .35s var(--ease) both; }

/* ---------- scroll reveals (classes are added by motion.js; nothing is hidden without it) ---------- */
.reveal { opacity: 0; transform: translateY(20px); }
.reveal.in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); }
.card.reveal.in, .kit-list li.reveal.in, details.reveal.in { transition: opacity .6s var(--ease), transform .28s var(--ease), box-shadow .28s var(--ease); }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .btn.primary:hover, .card:hover, .kit-list li:hover, details:hover, .link-arrow:hover, .stack li:hover { transform: none; }
  .progress { display: none; }
}

/* ---------- GSAP layer ---------- */
html.gsap-on .btn.primary { transition: box-shadow .18s var(--ease), background-color .18s; will-change: transform; }
.progress { position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 3px; background: var(--cta); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
a, button, summary, .btn { -webkit-tap-highlight-color: rgba(194,65,12,.16); touch-action: manipulation; }
details { overflow-anchor: none; }

/* ---------- nav tabs: light up, lift, press ---------- */
.nav ul { gap: 4px 6px; }
.nav a, .nav button.tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 0; border-radius: 10px;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s, color .16s, text-decoration-color .16s;
}
.has-menu.open > .tab { color: var(--blue); text-decoration-color: var(--blue); }
@media (hover: hover) {
  .nav a:hover, .nav button.tab:hover, .has-menu.open > .tab {
    color: var(--blue); text-decoration-color: var(--blue); background-color: #fff;
    transform: translateY(-2px); box-shadow: var(--edge), 0 8px 16px rgba(11,27,59,.14);
  }
}
.nav a:active, .nav button.tab:active { transform: translateY(1px); background-color: #F4EEE4; box-shadow: inset 0 2px 5px rgba(11,27,59,.22); }
.caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); }
.has-menu.open .caret { transform: rotate(225deg) translate(-2px, 0); }

/* ---------- service-area window ---------- */
.has-menu { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; width: min(820px, calc(100vw - 24px));
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px 14px; text-align: left;
  box-shadow: var(--edge), 0 6px 12px rgba(11,27,59,.10), 0 26px 60px rgba(11,27,59,.22);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.985); transform-origin: top right;
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility 0s linear .18s;
}
.menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }   /* keeps the window open while the pointer crosses the gap */
.has-menu.open .menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.menu-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 22px; }
.menu-h { font: 600 14px "Lexend", Arial, sans-serif; color: var(--muted); margin: 8px 0 4px; }
.area-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 2px; }
.menu .area {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 7px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
  font: 600 15px "Lexend", Arial, sans-serif;
  text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background-color .16s, color .16s, text-decoration-color .16s;
}
.menu .area .st { font: 600 12px "Lexend", Arial, sans-serif; color: var(--muted); }
@media (hover: hover) {
  .menu .area:hover { color: var(--blue); text-decoration-color: var(--blue); background-color: var(--bg); transform: translateY(-2px); box-shadow: var(--edge), 0 6px 12px rgba(11,27,59,.14); }
}
.menu .area:active { transform: translateY(1px); background-color: #F4EEE4; box-shadow: inset 0 2px 5px rgba(11,27,59,.22); }
.menu .area[aria-pressed="true"] { color: var(--blue); text-decoration-color: var(--blue); background-color: #F4EEE4; box-shadow: inset 0 2px 5px rgba(11,27,59,.22); }
.menu-blurb { margin-top: 10px; padding: 12px 16px; border-radius: 12px; background: var(--bg); box-shadow: inset 0 1px 3px rgba(11,27,59,.12); min-height: 86px; }
.menu-blurb.pop { animation: rise .3s var(--ease) both; }
.blurb-name { font: 600 17px "Lexend", Arial, sans-serif; margin: 0 0 4px; }
.blurb-text { margin: 0; font-size: 16px; color: var(--muted); }
.menu-blurb.empty .blurb-name, .menu-blurb.empty .blurb-text { color: var(--muted); }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; font-size: 15px; color: var(--muted); }
.menu-all { font: 600 15px "Lexend", Arial, sans-serif; padding: 6px 10px; border-radius: 10px; }
.menu .area:focus-visible, .menu .menu-all:focus-visible { outline-offset: 1px; }

/* ---------- full service-area page ---------- */
.zonas { padding: 44px 0 64px; }
.zonas h2 { margin: 36px 0 4px; }
.zona p { margin: 0; color: var(--muted); font-size: 17px; }

@media (max-width: 759px) {
  .has-menu { position: static; }
  .menu { left: 12px; right: 12px; width: auto; top: 100%; max-height: 72vh; overflow: auto; transform-origin: top center; }
  .menu-cols { grid-template-columns: 1fr 1fr; }
  .nav a { padding: 7px 10px; }
}
@media (max-width: 479px) {
  .menu-cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .menu-blurb.pop { animation: none; } }

/* ---------- window layout fixes: lists inside the nav must not inherit the tab row's flex ---------- */
.menu .area-list { display: grid; flex-wrap: nowrap; gap: 2px; margin: 0 0 6px; padding: 0; }
.menu { max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; }
@media (max-width: 759px) {
  .menu { display: flex; flex-direction: column; max-height: calc(100vh - 150px); }
  .menu > * { flex: none; }
  .menu-blurb { order: -1; position: sticky; top: 0; z-index: 2; margin: 0 0 10px; box-shadow: inset 0 1px 3px rgba(11,27,59,.12), 0 6px 10px rgba(11,27,59,.10); }
  .menu-cols { order: 0; }
  .menu-foot { order: 1; }
}

/* ---------- area cards on the full page: photo on top, short facts below ---------- */
.zona { padding: 0; overflow: hidden; scroll-margin-top: 92px; }
.zona-pic { margin: 0; }
.zona-pic img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: #E7DFD2; }
.zona-pic figcaption { font-size: 12px; line-height: 1.35; color: var(--muted); padding: 6px 14px 0; }
.zona-pic figcaption a { color: inherit; }
.zona-body { padding: 10px 16px 16px; }
.zona h3 { margin: 4px 0 8px; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.facts li { font-size: 16px; line-height: 1.4; color: var(--ink); }
.facts strong { font: 600 13px "Lexend", Arial, sans-serif; color: var(--blue); margin-right: 2px; }
.zona:target { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: var(--edge), var(--sh-hover); }
.zona p { color: var(--muted); }

.nav button.tab { font: 600 15px "Lexend", Arial, sans-serif; color: var(--ink); background: transparent; cursor: pointer; }
.menu .area { cursor: default; user-select: none; }

/* ---------- /kit: the eyebrow block and the blue contents box ---------- */
.kit-eyebrow { margin-bottom: 12px; }
.kit-eyebrow .eyebrow { font-size: 16px; margin-bottom: 6px; }
.kit-eyebrow .trades { font: 600 20px/1.3 "Lexend", Arial, sans-serif; color: var(--ink); margin: 0; text-wrap: balance; }
.kitbox { margin-top: 24px; padding: 22px 22px 20px; }
.kitbox ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.kitbox li {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 2px 4px rgba(0,0,0,.25);
}
.kitbox .n { flex: none; margin: 0; background-color: var(--cta); color: #fff; }
.kitbox strong { display: block; font: 600 17px/1.25 "Lexend", Arial, sans-serif; color: #fff; }
.kitbox .d { display: block; font-size: 15px; line-height: 1.35; color: #C9D3E6; margin-top: 2px; }

/* ---------- the email box follows you down until it is level with the end of the blue box ---------- */
@media (min-width: 760px) {
  .kit-grid > .kit-form { position: sticky; top: 92px; align-self: start; }
}

/* ---------- service cards: pain-point questions ---------- */
.offer { display: flex; flex-direction: column; }
.offer .offer-link { margin: auto 0 0; padding-top: 6px; }
.pains-lead { font: 600 15px "Lexend", Arial, sans-serif; color: var(--muted); margin: 6px 0 4px; }
.pains { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; }
.pains li { font-size: 17px; line-height: 1.4; }
.pains.big li { font-size: 19px; }

/* ---------- service card titles: blue like the link, underline that draws in, and a small pop on hover ---------- */
.offer h3 {
  position: relative; display: inline-block; color: var(--blue); transform-origin: left center;
  transition: transform .2s var(--ease);
}
.offer h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .28s var(--ease);
}
@media (hover: hover) {
  .offer h3:hover { transform: translateY(-2px) scale(1.03); }
  .offer h3:hover::after { transform: scaleX(1); }
}

/* ---------- legal pages: short numbered sections, and a small bar to move between the three ---------- */
.legal-nav ul { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.legal-nav a, .legal-nav span { display: inline-block; padding: 7px 14px; border-radius: 10px; font: 600 15px "Lexend", Arial, sans-serif; text-decoration: none; }
.legal-nav a { background: #fff; color: var(--blue); box-shadow: var(--edge), var(--sh); transition: transform .16s var(--ease), box-shadow .16s var(--ease); }
@media (hover: hover) { .legal-nav a:hover { transform: translateY(-2px); box-shadow: var(--edge), var(--sh-hover); } }
.legal-nav a:active { transform: translateY(1px); box-shadow: inset 0 2px 5px rgba(11,27,59,.22); }
.legal-nav span { color: var(--ink); background: transparent; border: 2px solid var(--line); }
.legal h1 { margin-bottom: 4px; }
.legal-date { color: var(--muted); margin: 0 0 10px; }
.legal h2 { font-size: 22px; margin: 28px 0 6px; }
.legal p, .legal li { font-size: 18px; line-height: 1.55; }
.legal ul { padding-left: 22px; margin: 0 0 12px; display: grid; gap: 6px; }
.legal .legal-nav ul { display: flex; flex-wrap: wrap; padding-left: 0; gap: 8px 10px; margin: 0 0 18px; }

/* ---------- WhatsApp button: the one place green is used ---------- */
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn.whatsapp {
  position: relative; background-color: #15803D; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -3px 0 rgba(0,0,0,.22), 0 1px 1px rgba(10,70,30,.55), 0 6px 14px rgba(21,128,61,.30), 0 16px 30px rgba(11,27,59,.12);
}
.btn.whatsapp:hover { background-color: #126E34; color: #fff; }
@media (hover: hover) { .btn.whatsapp:hover { transform: translateY(-2px); } }
.btn.whatsapp:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(0,0,0,.3), 0 2px 6px rgba(21,128,61,.25); }
@media (max-width: 759px) { .cta-row .btn { width: 100%; } }