/* ============================================================
   BAILOS – Reusable Components v2.0
   Shared UI patterns across all pages
   ============================================================ */

/* ── Section Headers ───────────────────────────────────────── */
.sub {
  font-size:.75rem; text-transform:uppercase;
  letter-spacing:3px; font-weight:600; margin-bottom:1rem;
}
.sub-teal  { color:var(--teal); }
.sub-amber { color:var(--amber); }
.sub-green { color:var(--green); }

.section-header { text-align:center; margin-bottom:4rem; }
.section-header h2 {
  font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.8rem);
  font-weight:800; letter-spacing:-1.5px; margin-bottom:1rem;
}
.section-header p {
  color:var(--slate-light); max-width:600px; margin:0 auto;
  line-height:1.7; font-size:1rem;
}

/* ── Page Header (interior pages) ──────────────────────────── */
.page-header {
  padding:10rem 3rem 4rem; text-align:center;
  position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute;
  top:-80px; left:50%; transform:translateX(-50%);
  width:700px; height:400px;
  background:
    radial-gradient(ellipse at 40% 50%,rgba(0,166,166,.08),transparent 60%),
    radial-gradient(ellipse at 65% 50%,rgba(255,176,32,.04),transparent 50%);
  pointer-events:none;
}
.page-header .sub { animation:fadeUp .6s ease both; }
.page-header h1 {
  font-family:'Syne',sans-serif;
  font-size:clamp(2.2rem,5vw,4rem); font-weight:800;
  letter-spacing:-1.5px; margin-bottom:1.5rem;
  animation:fadeUp .6s ease .15s both;
}
.page-header p {
  color:var(--slate-light); max-width:640px; margin:0 auto;
  line-height:1.7; font-size:1.05rem;
  animation:fadeUp .6s ease .3s both;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  padding:1rem 2.2rem; background:var(--amber); border:none;
  border-radius:var(--radius-sm); color:var(--navy);
  font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer; transition:all .3s; position:relative; overflow:hidden;
  text-decoration:none; display:inline-flex; align-items:center; gap:.5rem;
}
.btn-primary::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(135deg,transparent,rgba(255,255,255,.3),transparent);
  transform:translateX(-100%); transition:transform .6s;
}
.btn-primary:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px var(--amber-glow);
}
.btn-primary:hover::before { transform:translateX(100%); }

.btn-secondary {
  padding:1rem 2rem; background:transparent;
  border:1px solid var(--border-light); border-radius:var(--radius-sm);
  color:var(--white); font-family:'DM Sans',sans-serif;
  font-weight:500; font-size:.95rem; cursor:pointer; transition:all .3s;
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
}
.btn-secondary:hover {
  border-color:var(--teal); color:var(--teal); background:var(--teal-dim);
}

.btn-teal {
  padding:1rem 2.2rem; background:var(--teal); border:none;
  border-radius:var(--radius-sm); color:var(--white);
  font-family:'Syne',sans-serif; font-weight:700; font-size:1rem;
  cursor:pointer; transition:all .3s; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-teal:hover {
  transform:translateY(-3px);
  box-shadow:0 12px 40px var(--teal-glow);
}

.btn-outline-teal {
  padding:.85rem 1.8rem; background:transparent;
  border:1px solid rgba(0,166,166,.3); border-radius:var(--radius-sm);
  color:var(--teal); font-family:'Syne',sans-serif; font-weight:700;
  font-size:.9rem; cursor:pointer; transition:all .3s; text-decoration:none;
  display:inline-flex; align-items:center; gap:.5rem;
}
.btn-outline-teal:hover {
  background:var(--teal-dim); border-color:var(--teal);
  box-shadow:0 4px 20px var(--teal-glow);
}

/* ── Cards ─────────────────────────────────────────────────── */
.card {
  background:var(--glass); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2rem;
  transition:all .45s cubic-bezier(.23,1,.32,1);
  position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; opacity:0; transition:opacity .4s;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  background:var(--teal);
}
.card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-lg);
  border-color:var(--border-light);
}
.card:hover::before { opacity:1; }

.card-amber::before { background:var(--amber); }
.card-green::before { background:var(--green); }

/* Icon boxes */
.icon-box {
  width:52px; height:52px; border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:1.25rem; transition:transform .3s;
}
.icon-box svg {
  width:24px; height:24px; fill:none; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon-box-teal {
  background:var(--teal-dim); border:1px solid rgba(0,166,166,.2);
}
.icon-box-teal svg { stroke:var(--teal); }
.icon-box-amber {
  background:var(--amber-dim); border:1px solid rgba(255,176,32,.2);
}
.icon-box-amber svg { stroke:var(--amber); }
.icon-box-green {
  background:var(--green-dim); border:1px solid rgba(34,197,94,.2);
}
.icon-box-green svg { stroke:var(--green); }

/* ── Tags / Badges ─────────────────────────────────────────── */
.tag {
  display:inline-block; font-size:.65rem; text-transform:uppercase;
  letter-spacing:1.5px; padding:.2rem .65rem; border-radius:4px;
}
.tag-teal  { color:var(--teal);  border:1px solid rgba(0,166,166,.25); }
.tag-amber { color:var(--amber); border:1px solid rgba(255,176,32,.25); }
.tag-green { color:var(--green); border:1px solid rgba(34,197,94,.25); }

/* ── Trust Bar ─────────────────────────────────────────────── */
.trust-bar {
  padding:4rem 3rem; text-align:center;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.trust-bar .sub { margin-bottom:2rem; }
.trust-logos {
  display:flex; align-items:center; justify-content:center;
  gap:3rem; flex-wrap:wrap;
}
.trust-logo {
  font-family:'Syne',sans-serif; font-weight:600; font-size:.95rem;
  color:var(--slate); opacity:.5; transition:all .3s;
}
.trust-logo:hover { opacity:1; color:var(--white); }

/* ── CTA Section ───────────────────────────────────────────── */
.cta-section { padding:6rem 3rem; text-align:center; }
.cta-box {
  max-width:800px; margin:0 auto; padding:4rem 3rem;
  background:var(--glass-light); border:1px solid var(--border);
  border-radius:var(--radius-xl); position:relative; overflow:hidden;
}
.cta-box::before {
  content:''; position:absolute; top:-50%; left:-10%;
  width:400px; height:400px;
  background:radial-gradient(circle,rgba(0,166,166,.06),transparent 60%);
  pointer-events:none;
}
.cta-box::after {
  content:''; position:absolute; bottom:-30%; right:-10%;
  width:300px; height:300px;
  background:radial-gradient(circle,rgba(255,176,32,.04),transparent 60%);
  pointer-events:none;
}
.cta-box h2 {
  font-family:'Syne',sans-serif; font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:800; letter-spacing:-1.5px; margin-bottom:1rem;
  position:relative; z-index:2;
}
.cta-box p {
  color:var(--slate-light); margin-bottom:2rem;
  font-size:1.05rem; line-height:1.7;
  position:relative; z-index:2;
}
.cta-box .cta-actions {
  display:flex; gap:1rem; justify-content:center;
  position:relative; z-index:2; flex-wrap:wrap;
}

/* ── Stats Row ─────────────────────────────────────────────── */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem;
  max-width:var(--max-width); margin:0 auto; padding:4rem 3rem;
}
.stat-card {
  text-align:center; padding:2rem 1.5rem;
  border:1px solid var(--border); border-radius:var(--radius-lg);
  background:var(--glass); backdrop-filter:blur(10px);
  transition:all .3s; position:relative; overflow:hidden;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:3px; background:var(--teal); opacity:0; transition:opacity .3s;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
}
.stat-card:hover { transform:translateY(-4px); border-color:var(--border-light); }
.stat-card:hover::before { opacity:1; }
.stat-number {
  font-family:'Syne',sans-serif; font-size:2.8rem; font-weight:800;
  color:var(--teal); margin-bottom:.5rem;
}
.stat-label { font-size:.85rem; color:var(--slate-light); }

/* ── Form Components ───────────────────────────────────────── */
.form-group {
  display:flex; flex-direction:column; gap:.4rem;
  margin-bottom:1rem; position:relative; z-index:2;
}
.form-group label {
  font-size:.75rem; text-transform:uppercase; letter-spacing:1px;
  color:var(--slate-light); font-weight:500;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding:.85rem 1rem; background:rgba(255,255,255,.05);
  border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--white); font-family:'DM Sans',sans-serif;
  font-size:.9rem; transition:all .3s; outline:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:var(--slate); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color:var(--teal);
  box-shadow:0 0 0 3px var(--teal-dim);
  background:rgba(255,255,255,.07);
}
.form-group select {
  cursor:pointer; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a88' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 1rem center;
}
.form-group select option { background:var(--navy); color:var(--white); }
.form-group textarea { resize:vertical; min-height:100px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

.btn-submit {
  width:100%; padding:1rem; background:var(--amber); border:none;
  border-radius:var(--radius-md); color:var(--navy); font-family:'Syne',sans-serif;
  font-weight:700; font-size:1rem; cursor:pointer; transition:all .3s;
  position:relative; z-index:2;
}
.btn-submit:hover { transform:translateY(-2px); box-shadow:0 12px 40px var(--amber-glow); }

.form-legal {
  font-size:.72rem; color:var(--slate); text-align:center;
  margin-top:1rem; line-height:1.4;
}
.form-legal a { color:var(--teal); text-decoration:none; }
.form-legal a:hover { text-decoration:underline; }

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1024px) {
  .stats-row { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:768px) {
  .page-header { padding:8rem 1.5rem 3rem; }
  .stats-row { padding:3rem 1.5rem; }
  .cta-section { padding:4rem 1.5rem; }
  .cta-box { padding:3rem 1.5rem; }
  .form-row { grid-template-columns:1fr; }
  .cta-box .cta-actions { flex-direction:column; align-items:center; }
}
@media(max-width:480px) {
  .stats-row { grid-template-columns:1fr; }
}