/* ==========================================================================
   CONTRERAS GROWTH SYSTEMS — AGENCY SITE
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Public+Sans:wght@400;500;600;700&display=swap');

:root{
  --color-bg:        #0A1412;
  --color-bg-alt:    #0F1D1A;
  --color-card:      #122320;
  --color-primary:   #2DD4BF;   /* teal/growth accent */
  --color-primary-light:#5EEAD4;
  --color-text:      #F0F7F5;
  --color-text-muted:#9FB3AE;
  --color-border:    rgba(45,212,191,0.22);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Public Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2.5rem; --space-5:4rem; --space-6:6rem;
  --radius: 6px;
  --header-h: 76px;
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); }
body{ margin:0; font-family:var(--font-body); background:var(--color-bg); color:var(--color-text); line-height:1.6; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; line-height:1.15; color:var(--color-text); }
p{ margin:0; }
:focus-visible{ outline:3px solid var(--color-primary); outline-offset:2px; }
.container{ max-width:1180px; margin:0 auto; padding:0 1.5rem; }
.section{ padding:var(--space-6) 0; }
.eyebrow{ font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--color-primary); font-weight:600; display:block; margin-bottom:.6rem; }
h2{ font-size:clamp(1.75rem,3.4vw,2.5rem); }
.section-head{ max-width:680px; margin-bottom:var(--space-4); }
.section-head p{ color:var(--color-text-muted); margin-top:.75rem; font-size:1.05rem; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.7rem; font-weight:600; font-size:.95rem; border-radius:var(--radius); border:1.5px solid transparent; white-space:nowrap; transition:.15s; }
.btn--primary{ background:var(--color-primary); color:#062420; }
.btn--primary:hover{ background:var(--color-primary-light); }
.btn--outline{ border-color:var(--color-primary); color:var(--color-primary-light); }
.btn--outline:hover{ background:rgba(45,212,191,.1); }
.btn--block{ width:100%; }

/* header */
.site-header{ position:sticky; top:0; z-index:100; background:rgba(10,20,18,.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--color-border); height:var(--header-h); }
.header-inner{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.logo{ font-family:var(--font-display); font-size:1.2rem; font-weight:600; color:var(--color-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:320px; flex-shrink:1; min-width:0; }
.logo span{ color:var(--color-primary); }
@media (max-width:480px){ .logo{ font-size:.95rem; } }
@media (max-width:360px){ .logo{ font-size:.8rem; } }
.main-nav ul{ display:flex; gap:1.6rem; }
.main-nav a{ font-size:.9rem; font-weight:500; color:var(--color-text-muted); }
.main-nav a:hover{ color:var(--color-primary-light); }
.header-actions{ display:flex; align-items:center; gap:.75rem; }
.lang-toggle{ display:flex; border:1.5px solid var(--color-border); border-radius:20px; overflow:hidden; }
.lang-toggle button{ background:none; border:none; color:var(--color-text-muted); font-weight:700; font-size:.7rem; padding:.35rem .6rem; cursor:pointer; }
.lang-toggle button.active{ background:var(--color-primary); color:#062420; }
.hamburger{ display:none; background:none; border:none; padding:.4rem; }
.hamburger svg{ width:24px; height:24px; color:var(--color-text); }
.mobile-nav{ display:none; position:fixed; inset:var(--header-h) 0 0 0; background:var(--color-bg); z-index:99; padding:var(--space-4) 1.5rem; overflow-y:auto; }
.mobile-nav.open{ display:block; }
.mobile-nav ul{ display:flex; flex-direction:column; gap:1.4rem; font-size:1.2rem; }
.mobile-nav .lang-toggle{ margin-top:var(--space-3); width:fit-content; }
.sticky-bar{ display:none; position:fixed; bottom:0; left:0; right:0; z-index:98; background:var(--color-bg-alt); border-top:1px solid var(--color-border); padding:.6rem 1rem; }
.sticky-bar .row{ display:flex; gap:.6rem; }
.sticky-bar a{ flex:1; text-align:center; padding-left:.8rem; padding-right:.8rem; font-size:.85rem; }
@media (max-width:900px){
  .main-nav{ display:none; }
  .hamburger{ display:block; }
  .sticky-bar{ display:block; }
  body{ padding-bottom:64px; }
  .header-actions .btn, .header-actions .lang-toggle{ display:none; }
  .logo{ max-width:none; flex:1; }
}

/* hero */
.hero{ padding:var(--space-6) 0 var(--space-5); background:radial-gradient(circle at 15% 20%, rgba(45,212,191,0.10), transparent 45%), var(--color-bg); }
.hero-copy{ max-width:760px; }
.hero-copy h1{ font-size:clamp(2.3rem,5vw,3.6rem); margin:.6rem 0 1rem; }
.hero-copy p{ font-size:1.15rem; color:var(--color-text-muted); max-width:600px; margin-bottom:var(--space-3); }
.hero-ctas{ display:flex; gap:1rem; flex-wrap:wrap; }

/* trust strip */
.trust-strip{ background:var(--color-bg-alt); border-bottom:1px solid var(--color-border); border-top:1px solid var(--color-border); }
.trust-strip .container{ display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-4); justify-content:center; padding:1.2rem 1.5rem; }
.trust-item{ font-weight:600; font-size:.9rem; color:var(--color-text-muted); white-space:nowrap; }

/* services */
.section--alt{ background:var(--color-bg-alt); }
.cards-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-3); margin-top:var(--space-4); }
.card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-3); }
.card h3{ font-size:1.1rem; margin-bottom:.5rem; }
.card p{ color:var(--color-text-muted); font-size:.92rem; }
@media (max-width:900px){ .cards-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .cards-grid{ grid-template-columns:1fr; } }

/* portfolio */
.portfolio-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3); margin-top:var(--space-4); }
.portfolio-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.portfolio-card .swatch{ height:120px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:1.4rem; color:rgba(255,255,255,.9); }
.portfolio-card .body{ padding:var(--space-3); flex:1; display:flex; flex-direction:column; }
.portfolio-card h3{ font-size:1.05rem; margin-bottom:.4rem; }
.portfolio-card p{ color:var(--color-text-muted); font-size:.88rem; margin-bottom:var(--space-2); flex:1; }
.portfolio-card .tag{ font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-primary); font-weight:700; margin-bottom:.5rem; }
@media (max-width:700px){ .portfolio-grid{ grid-template-columns:1fr; } }

/* pricing */
.pricing-card{ max-width:520px; margin:var(--space-4) auto 0; background:var(--color-card); border:1.5px solid var(--color-primary); border-radius:var(--radius); padding:var(--space-4); text-align:center; }
.pricing-card .price{ font-family:var(--font-display); font-size:3rem; color:var(--color-primary); margin:.5rem 0; }
.pricing-card .price span{ font-size:1rem; color:var(--color-text-muted); font-family:var(--font-body); }
.pricing-list{ text-align:left; margin:var(--space-3) 0; }
.pricing-list li{ padding:.5rem 0; border-bottom:1px solid var(--color-border); font-size:.92rem; color:var(--color-text-muted); display:flex; gap:.6rem; }
.pricing-list li::before{ content:"✓"; color:var(--color-primary); font-weight:700; flex-shrink:0; }
.pricing-note{ margin-top:var(--space-3); font-size:.82rem; color:var(--color-text-muted); }
.pricing-excludes{ margin-top:var(--space-2); font-size:.8rem; color:var(--color-text-muted); text-align:left; }
.pricing-excludes strong{ color:var(--color-text); }

/* contact / cta */
.cta-section{ background:linear-gradient(160deg,#122320,#0A1412); border-top:1px solid var(--color-border); }
.cta-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); align-items:start; }
.cta-copy h2{ margin-bottom:var(--space-2); }
.cta-copy p{ color:var(--color-text-muted); margin-bottom:var(--space-3); }
.schedule-box{ margin-top:var(--space-4); padding-top:var(--space-4); border-top:1px solid var(--color-border); }
.schedule-box h3{ margin-bottom:.5rem; font-size:1.05rem; }
.form-card{ background:var(--color-card); border:1px solid var(--color-border); border-radius:var(--radius); padding:var(--space-4); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
.form-field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1rem; }
.form-field label{ font-size:.85rem; font-weight:600; color:var(--color-text-muted); }
.form-field input, .form-field select, .form-field textarea{ padding:.75rem .9rem; border:1.5px solid var(--color-border); border-radius:4px; background:#0D1A17; color:var(--color-text); font-family:inherit; font-size:.95rem; }
.consent-box{ background:rgba(45,212,191,.06); border:1px solid var(--color-border); border-radius:4px; padding:.9rem 1rem; margin:1rem 0; }
.consent-box p{ font-size:.82rem; color:var(--color-text-muted); line-height:1.55; }
.consent-box a{ color:var(--color-primary-light); text-decoration:underline; }
.form-note{ margin-top:1rem; padding:.75rem 1rem; border-radius:4px; background:rgba(45,212,191,.1); border:1px solid var(--color-border); font-size:.85rem; color:var(--color-primary-light); font-weight:600; }
.form-consent{ font-size:.75rem; color:var(--color-text-muted); margin-top:1rem; }
.form-consent a{ color:var(--color-primary-light); }
@media (max-width:900px){ .cta-grid{ grid-template-columns:1fr; } .form-row{ grid-template-columns:1fr; } }

/* footer */
.site-footer{ padding:var(--space-4) 0; border-top:1px solid var(--color-border); text-align:center; }
.site-footer p{ color:var(--color-text-muted); font-size:.85rem; }
.site-footer a{ color:var(--color-primary-light); }