/* ══════════════════════════════════════════════
   3DPubligrafiX — base.css
   Variables, componentes y utilidades compartidas
   ══════════════════════════════════════════════ */

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* Variables de marca */
:root {
  --navy:  #001E3C;
  --sky:   #29abe3;
  --mist:  #e8f4fc;
  --white: #ffffff;
}

/* Reset base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'DM Sans', system-ui, sans-serif; color: #1e293b; }

/* Tipografía de marca */
.font-display { font-family: 'Bricolage Grotesque', system-ui, sans-serif; }

/* Gradiente texto */
.text-gradient {
  background: linear-gradient(135deg, #29abe3 0%, #0077b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Sección estándar */
.section-pad   { padding: 5rem 1.25rem; }
.container-xl  { max-width: 1200px; margin: 0 auto; }
.section-title { font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; }

/* ── Botones ── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #29abe3; color: #fff; font-weight: 700; font-size: .95rem;
  padding: 14px 28px; border-radius: 12px; border: none;
  text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.btn-primary:hover {
  background: #0077b6;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(41,171,227,.35);
}
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #001E3C; font-weight: 700; font-size: .95rem;
  padding: 13px 27px; border-radius: 12px; border: 2px solid #001E3C;
  text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.btn-secondary:hover { background: #001E3C; color: #fff; }

.btn-white {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #001E3C; font-weight: 700; font-size: .95rem;
  padding: 14px 28px; border-radius: 12px; border: none;
  text-decoration: none; cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.btn-white:hover {
  background: #e8f4fc;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* ── Badge ── */
.badge-sky {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(41,171,227,.1); color: #29abe3;
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px;
  border: 1px solid rgba(41,171,227,.25);
}
.badge-navy {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(0,30,60,.08); color: #001E3C;
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 100px;
  border: 1px solid rgba(0,30,60,.15);
}

/* ── Card ── */
.card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid rgba(0,30,60,.07);
  box-shadow: 0 4px 20px rgba(0,30,60,.06);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0,30,60,.12);
}

/* ── Hero interno (páginas internas) ── */
.page-hero {
  background: linear-gradient(135deg, #001E3C 0%, #002444 60%, #00365f 100%);
  color: #fff;
  padding: 5rem 1.25rem 4rem;
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(41,171,227,.06) 1px, transparent 1px),
                    linear-gradient(to right, rgba(41,171,227,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.page-hero .container-xl { position: relative; z-index: 1; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: rgba(255,255,255,.5); margin-bottom: 1.5rem; }
.breadcrumb a { color: rgba(255,255,255,.5); text-decoration: none; transition: color .2s; }
.breadcrumb a:hover { color: #29abe3; }
.breadcrumb span { color: rgba(255,255,255,.3); }

/* ── Reveal animations ── */
.reveal        { opacity: 0; transform: translateY(24px); transition: opacity .65s ease, transform .65s ease; }
.reveal-l      { opacity: 0; transform: translateX(-30px); transition: opacity .65s ease, transform .65s ease; }
.reveal-r      { opacity: 0; transform: translateX(30px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible, .reveal-l.visible, .reveal-r.visible { opacity: 1; transform: none; }

/* ── Divider ── */
.section-divider { height: 1px; background: linear-gradient(to right, transparent, rgba(0,30,60,.1), transparent); margin: 0; }

/* ── Top bar ── */
#site-topbar { background: #001E3C; }

/* ── Responsive helpers ── */
@media (max-width: 1024px) {
  .section-pad { padding: 3.5rem 1.25rem; }
}
@media (max-width: 640px) {
  .section-pad { padding: 2.5rem 1rem; }
  .btn-primary, .btn-secondary, .btn-white { padding: 12px 22px; font-size: .88rem; }
}