/* ============================================================
   BANANA AGENCY — Design tokens & shared system
   ============================================================ */

:root{
  /* Color */
  --ink:        #0B0C0F;
  --ink-soft:   #15161B;
  --ink-card:   #1A1B21;
  --line-dark:  #2A2B31;
  --paper:      #F8F4E7;
  --paper-card: #FFFFFF;
  --line-light: rgba(11,12,15,.10);
  --gold:       #F5A623;
  --gold-deep:  #C97D0A;
  --gold-pale:  #FCE6BB;
  --teal:       #2BD4C8;
  --white:      #FFFFFF;
  --text-on-ink:        #F3F1EA;
  --text-on-ink-muted:  #95959E;
  --text-on-paper:      #15161B;
  --text-on-paper-muted:#6B6A60;

  /* Type */
  --font-display: 'Century Gothic', 'Questrial', 'Avenir Next', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

  --fs-h1: clamp(2.6rem, 7.5vw, 4.6rem);
  --fs-h2: clamp(1.9rem, 4.6vw, 2.8rem);
  --fs-h3: clamp(1.3rem, 2.6vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 2vw, 1.25rem);

  /* Space */
  --sp-1: .5rem;
  --sp-2: .75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  /* Shape */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 100px;

  --max-w: 1180px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}
body,h1,h2,h3,h4,p,figure,blockquote{margin:0}
img{max-width:100%;display:block}
ul{list-style:none;margin:0;padding:0}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}
input,textarea,select{font:inherit}

body{
  background:var(--ink);
  color:var(--text-on-ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink);
  padding:.6rem 1rem;border-radius:0 0 var(--radius-sm) 0;z-index:200;font-weight:700;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.08;
}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}

.lead{font-size:var(--fs-lead);line-height:1.55}

.eyebrow{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:600;
}
.eyebrow::before{
  content:'';width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 0 3px rgba(43,212,200,.18);
  flex-shrink:0;
}
.section--paper .eyebrow{color:var(--gold-deep)}

.muted{color:var(--text-on-ink-muted)}
.section--paper .muted,.section--paper .text-on-paper-muted{color:var(--text-on-paper-muted)}

.text-center{text-align:center}

/* ============================================================
   LAYOUT
   ============================================================ */
.container{
  width:100%;
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem;
}
@media (min-width:720px){.container{padding:0 2.5rem}}

.section{
  padding:var(--sp-6) 0;
  position:relative;
}
@media (min-width:880px){.section{padding:var(--sp-7) 0}}

.section--ink{background:var(--ink);color:var(--text-on-ink)}
.section--ink-soft{background:var(--ink-soft);color:var(--text-on-ink)}
.section--paper{background:var(--paper);color:var(--text-on-paper)}

.section-head{
  max-width:640px;
  margin-bottom:var(--sp-5);
}
.section-head h2{margin-top:.6rem}
.section-head--center{margin-left:auto;margin-right:auto;text-align:center}

.grid{display:grid;gap:1.25rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:880px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.divider{height:1px;background:var(--line-dark);border:0;width:100%}
.section--paper .divider{background:var(--line-light)}

/* hairline trace divider — signature motif used sparingly */
.trace-rule{
  display:flex;align-items:center;gap:.6rem;
  color:var(--text-on-ink-muted);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
}
.trace-rule::before,.trace-rule::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--font-display);
  font-weight:700;
  font-size:.95rem;
  padding:.9rem 1.8rem;
  border-radius:var(--radius-pill);
  border:1.5px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.btn svg{width:1.1em;height:1.1em;flex-shrink:0}

.btn--primary{background:var(--gold);color:var(--ink)}
.btn--primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(245,166,35,.55)}

.btn--ghost-dark{border-color:var(--line-dark);color:var(--text-on-ink);background:transparent}
.btn--ghost-dark:hover{border-color:var(--gold);color:var(--gold)}

.btn--ghost-light{border-color:rgba(11,12,15,.18);color:var(--text-on-paper);background:transparent}
.btn--ghost-light:hover{border-color:var(--gold-deep);color:var(--gold-deep)}

.btn--whatsapp{background:#25D366;color:#06210f}
.btn--whatsapp:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(37,211,102,.5)}

.btn--block{width:100%}
.btn--sm{padding:.6rem 1.2rem;font-size:.82rem}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(11,12,15,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-dark);
}
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:.9rem 0;
}
.nav__brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:var(--text-on-ink)}
.nav__brand img{width:34px;height:34px;object-fit:contain}
.nav__brand span{color:var(--gold)}

.nav__toggle{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:40px;height:40px;background:transparent;border:1px solid var(--line-dark);border-radius:8px;
}
.nav__toggle span{display:block;height:2px;width:18px;margin:0 auto;background:var(--text-on-ink);border-radius:2px}

.nav__menu{
  position:fixed;top:64px;left:0;right:0;height:calc(100vh - 64px);
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:1.5rem 1.5rem 2rem;
  gap:.25rem;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s var(--ease), transform .2s var(--ease);
  overflow-y:auto;
}
.nav__menu.is-open{opacity:1;transform:translateY(0);pointer-events:auto}

.nav__link{
  font-family:var(--font-display);font-weight:600;font-size:1.1rem;
  padding:1rem .25rem;border-bottom:1px solid var(--line-dark);color:var(--text-on-ink);
}
.nav__link.is-active{color:var(--gold)}
.nav__cta{margin-top:1.25rem}

@media (min-width:920px){
  .nav__toggle{display:none}
  .nav__menu{
    position:static;top:auto;left:auto;right:auto;height:auto;transform:none;opacity:1;pointer-events:auto;
    flex-direction:row;align-items:center;padding:0;gap:1.9rem;background:transparent;overflow:visible;
  }
  .nav__link{padding:.4rem 0;border-bottom:0;font-size:.95rem;position:relative}
  .nav__link::after{content:'';position:absolute;left:0;right:100%;bottom:-2px;height:2px;background:var(--gold);transition:right .25s var(--ease)}
  .nav__link:hover::after,.nav__link.is-active::after{right:0}
  .nav__cta{margin-top:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--ink-soft);border-top:1px solid var(--line-dark);padding:var(--sp-6) 0 var(--sp-4)}
.footer-grid{display:grid;gap:var(--sp-5);grid-template-columns:1fr}
@media (min-width:760px){.footer-grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.footer-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--font-display);font-weight:700;font-size:1.1rem;margin-bottom:.8rem}
.footer-brand span{color:var(--gold)}
.footer-col h4{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-ink-muted);margin-bottom:.9rem;font-weight:600}
.footer-col a,.footer-col p{display:block;color:var(--text-on-ink-muted);font-size:.9rem;margin-bottom:.55rem;transition:color .15s}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{
  margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line-dark);
  display:flex;flex-wrap:wrap;gap:.75rem;justify-content:space-between;align-items:center;
  font-size:.8rem;color:var(--text-on-ink-muted);
}

/* ============================================================
   WHATSAPP FLOATING BUTTON
   ============================================================ */
.wa-float{
  position:fixed;right:1.25rem;bottom:1.25rem;z-index:90;
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:#25D366;color:#06210f;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);
  transition:transform .2s var(--ease);
}
.wa-float:hover{transform:scale(1.08)}
.wa-float svg{width:28px;height:28px}

/* ============================================================
   CARDS
   ============================================================ */
.pillar-card{
  background:var(--ink-card);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  display:flex;flex-direction:column;gap:.9rem;
  transition:border-color .2s, transform .2s var(--ease);
}
.pillar-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.pillar-card__num{font-family:var(--font-mono);font-size:.78rem;color:var(--gold);letter-spacing:.1em}
.pillar-card__icon{
  width:50px;height:50px;border-radius:50%;
  background:linear-gradient(135deg,#F9C158,var(--gold-deep));
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.4rem;
}
.pillar-card h3{margin-top:.2rem}
.pillar-card p{color:var(--text-on-ink-muted);font-size:.92rem;flex:1}
.pillar-card__link{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.05em;color:var(--gold);display:inline-flex;align-items:center;gap:.4rem}

.service-card{
  background:var(--ink-card);
  border:1px solid var(--line-dark);
  border-radius:var(--radius-md);
  padding:var(--sp-4);
  display:flex;flex-direction:column;
}
.service-card__icon{
  width:48px;height:48px;border-radius:50%;
  background:linear-gradient(135deg,#F9C158,var(--gold-deep));
  display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1.3rem;
  margin-bottom:1rem;
}
.service-card h4{font-family:var(--font-display);font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.service-card__desc{color:var(--text-on-ink-muted);font-style:italic;font-size:.88rem;margin-bottom:.9rem;min-height:2.6em}
.service-card__items{display:flex;flex-direction:column;gap:.5rem;border-top:1px solid var(--line-dark);padding-top:.9rem;margin-bottom:1.1rem;flex:1}
.service-card__items li{display:flex;gap:.5rem;font-size:.85rem;color:var(--text-on-ink);align-items:flex-start}
.service-card__items li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--gold);margin-top:.55em;flex-shrink:0}

/* ============================================================
   CTA BANNER (mirrors brochure highlight banner)
   ============================================================ */
.cta-banner{
  border:1.5px solid var(--gold);
  background:linear-gradient(135deg, rgba(245,166,35,.12), rgba(245,166,35,.04));
  border-radius:var(--radius-md);
  padding:var(--sp-4) var(--sp-5);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;
}
.cta-banner p{font-size:1.05rem}
.cta-banner strong{color:var(--gold)}

/* ============================================================
   FORMS
   ============================================================ */
.field{margin-bottom:1.25rem}
.field label{display:block;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-on-ink-muted);margin-bottom:.5rem}
.field input,.field textarea,.field select{
  width:100%;background:var(--ink-soft);border:1.5px solid var(--line-dark);border-radius:var(--radius-sm);
  padding:.85rem 1rem;color:var(--text-on-ink);transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold);outline:none}
.field textarea{resize:vertical;min-height:120px}
.hp-field{position:absolute;left:-9999px;opacity:0}

.form-note{font-size:.82rem;color:var(--text-on-ink-muted);margin-top:.9rem}
.form-success,.form-error{
  border-radius:var(--radius-sm);padding:1rem 1.2rem;margin-bottom:1.5rem;font-size:.92rem;
}
.form-success{background:rgba(43,212,200,.1);border:1px solid var(--teal);color:var(--text-on-ink)}
.form-error{background:rgba(220,80,60,.1);border:1px solid #d9543f;color:var(--text-on-ink)}

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.tag-pill{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--ink-card);border:1px solid var(--line-dark);
  border-radius:var(--radius-pill);padding:.4rem .9rem;font-size:.8rem;color:var(--text-on-ink-muted);
}
.stack-sm > * + *{margin-top:.6rem}
.stack-md > * + *{margin-top:1.25rem}

.skel-photo{
  aspect-ratio:4/3;border-radius:var(--radius-md);
  background:linear-gradient(135deg,var(--ink-card),var(--ink-soft));
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;color:var(--text-on-ink-muted);
  font-family:var(--font-mono);font-size:.78rem;text-align:center;padding:1rem;
}

/* ============================================================
   HERO + CIRCUIT-TRACE SIGNATURE
   ============================================================ */
.hero{
  position:relative;
  padding:var(--sp-6) 0 var(--sp-5);
  overflow:hidden;
}
.hero::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(60% 50% at 78% 18%, rgba(245,166,35,.10), transparent 70%);
  pointer-events:none;
}
.hero__grid{
  position:relative;z-index:2;
  display:grid;gap:var(--sp-5);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:980px){
  .hero__grid{grid-template-columns:1.05fr .95fr;gap:var(--sp-6)}
}
.hero__title{margin-top:.7rem}
.hero__title .accent{color:var(--gold)}
.hero__lead{margin-top:1.1rem;max-width:480px}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:var(--sp-4)}

.hero__visual{position:relative;min-height:340px}
.hero__mascot{
  position:relative;z-index:3;
  width:min(360px,78%);margin:0 auto;display:block;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.55));
}
.hero__trace{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.hero__trace path{
  fill:none;stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;
  stroke-dasharray:6 460; stroke-dashoffset:0;
  opacity:.85;
  animation:trace-draw 1.8s var(--ease) forwards;
}
.hero__trace path.is-teal{stroke:var(--teal)}
.hero__trace circle{fill:var(--ink);stroke:var(--gold);stroke-width:1.5}
.hero__trace circle.is-teal{stroke:var(--teal)}

@keyframes trace-draw{
  from{stroke-dasharray:0 1000}
  to{stroke-dasharray:1000 0}
}
@media (prefers-reduced-motion: reduce){
  .hero__trace path{animation:none}
}

.hero__tag{
  position:absolute;
  display:flex;align-items:center;gap:.5rem;
  background:var(--ink-card);border:1px solid var(--line-dark);
  border-radius:var(--radius-pill);
  padding:.5rem .9rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.6);
  z-index:4;
  opacity:0;
  animation:tag-in .5s var(--ease) forwards;
}
.hero__tag b{color:var(--gold);font-weight:700}
.hero__tag .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);flex-shrink:0}
@keyframes tag-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion: reduce){.hero__tag{animation:none;opacity:1}}

.hero__tag--01{top:2%;left:-2%;animation-delay:.5s}
.hero__tag--02{top:18%;right:-4%;animation-delay:.85s}
.hero__tag--03{bottom:22%;left:-6%;animation-delay:1.2s}
.hero__tag--04{bottom:4%;right:2%;animation-delay:1.55s}

@media (max-width:979px){
  .hero__tag{position:static;animation:none;opacity:1;margin:0}
  .hero__tags-mobile{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.75rem;position:relative;z-index:3}
  .hero__trace,.hero__tag--01,.hero__tag--02,.hero__tag--03,.hero__tag--04{display:none}
}
@media (min-width:980px){
  .hero__tags-mobile{display:none}
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4)}
@media (min-width:760px){.stats-strip{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;padding:var(--sp-3) var(--sp-1);border-left:1px solid var(--line-dark)}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.4rem);color:var(--gold)}
.stat span{font-size:.82rem;color:var(--text-on-ink-muted)}

/* ============================================================
   PROBLEM / VALUE STRIP (paper section)
   ============================================================ */
.value-row{display:flex;gap:1rem;align-items:flex-start;padding:1.4rem 0;border-bottom:1px solid var(--line-light)}
.value-row:last-child{border-bottom:0}
.value-row__num{font-family:var(--font-mono);color:var(--gold-deep);font-weight:700;font-size:.9rem;flex-shrink:0;padding-top:.2rem}
.value-row h4{font-family:var(--font-display);font-size:1.05rem;margin-bottom:.3rem}
.value-row p{color:var(--text-on-paper-muted);font-size:.92rem}

/* ============================================================
   PAGE HERO (for sub-pages: servicios, nosotros, contacto, catalogo)
   ============================================================ */
.page-hero{padding:var(--sp-6) 0 var(--sp-4);text-align:center}
.page-hero h1{margin-top:.7rem}
.page-hero .lead{max-width:560px;margin:1rem auto 0}

.pillar-band{padding:var(--sp-6) 0}
.pillar-band__head{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:flex-end;justify-content:space-between;margin-bottom:var(--sp-4)}
.pillar-band__head h2{margin-top:.5rem;max-width:560px}
.pillar-band__head p{max-width:420px}