/* ══════════════════════════════════════════════════════
   BASE.CSS — Brocal Seguridad / Red de sitios
   Reset, tokens de marca, utilidades globales
   ══════════════════════════════════════════════════════ */

/* ── Tokens de marca ── */
:root {
  /* Acento — color oficial Manual de Marca: Pantone 716C */
  --accent:     #EF7D00;
  --accent-dk:  #C46500;
  --accent-lt:  #F59D30;

  /* Escala de grises */
  --black:      #0D0D0D;
  --gray-dk:    #1A1A1A;
  --gray-md:    #2C2C2C;
  --gray-lt:    #444444;
  --white:      #FFFFFF;
  --white-soft: #F5F5F5;
  --text-muted: #AAAAAA;

  /* Utilidades */
  --radius:     6px;
  --transition: .25s ease;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html  { scroll-behavior: smooth; }
/* Tipografía oficial: Ubuntu (Manual de Marca) — cargar en cada HTML con Google Fonts */
body  { font-family: 'Ubuntu', system-ui, sans-serif; background: var(--black); color: var(--white); line-height: 1.6; }
a     { color: inherit; text-decoration: none; }
img   { display: block; max-width: 100%; }
ul    { list-style: none; }

/* ── Layout ── */
.container { width: min(1160px, 92%); margin-inline: auto; }
section    { padding: 5rem 0; }

/* ── Botones ── */
.btn {
  display: inline-block; padding: .75rem 1.75rem; border-radius: var(--radius);
  font-weight: 700; font-size: .95rem; letter-spacing: .04em; cursor: pointer;
  transition: background var(--transition), transform var(--transition);
  border: none;
}
.btn-accent         { background: var(--accent); color: var(--white); }
.btn-accent:hover   { background: var(--accent-dk); transform: translateY(-2px); }
.btn-outline        { background: transparent; color: var(--accent); border: 2px solid var(--accent); }
.btn-outline:hover  { background: var(--accent); color: var(--white); transform: translateY(-2px); }

/* ── Tipografía de sección ── */
.section-label {
  font-size: .75rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .75rem;
}
.section-title      { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 900; margin-bottom: 1rem; }
.section-title em   { color: var(--accent); font-style: normal; }
.section-sub        { color: var(--text-muted); max-width: 560px; font-size: 1rem; }

/* ── Animación fade-up (Intersection Observer en main.js) ── */
.fade-up            { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.fade-up.visible    { opacity: 1; transform: translateY(0); }

/* ── Animaciones base ── */
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes blink { 50% { opacity: 0; } }

/* ── Responsive breakpoints ── */
@media (max-width: 900px) {
  .hide-tablet { display: none; }
}
@media (max-width: 600px) {
  .hide-mobile { display: none; }
}