/* brand.css: Integración del sistema de diseño y recursos de Hugo Álvarez */

:root {
  /* --- COLORES BASE (Astro Hugo Álvarez) --- */
  --default-color: #ffffff;
  --default-color-similar: #fff7f0; /* Tono cálido de fondo */
  
  --color-acento: #FF8000; /* Naranja identitario */
  --color-acento-light: #FF9933;
  --color-acento-gold: #FFB900;
  --color-acento2: #212121; /* Gris carbón para contraste moderno */

  /* Degradado oficial */
  --gradient-brand: linear-gradient(135deg, #FF8000 0%, #FFB900 100%);
  --gradient-brand-dark: linear-gradient(135deg, #e67300 0%, #FF8000 100%);
  --gradient-subtle: linear-gradient(135deg, rgba(255, 128, 0, 0.07) 0%, rgba(255, 185, 0, 0.03) 100%);

  /* --- FORMAS --- */
  --radius-capsule: 9999px;
  --radius-card: 24px;

  /* --- TIPOGRAFÍA (Mantenida en sans-serif legible para cuerpo y campos) --- */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================
   RESET Y BASE
   ========================================== */
body {
  background-color: var(--default-color-similar);
  color: var(--color-acento2);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Campos de formulario: Tipografía limpia y tamaño táctil iOS */
input, select, textarea, button {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
}

/* ==========================================
   BOTONES CON EFECTO BRINCO DE HUGO ÁLVAREZ
   ========================================== */
.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: var(--gradient-brand);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-capsule);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 128, 0, 0.32);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.btn-principal:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 22px rgba(255, 128, 0, 0.45);
}

.btn-principal:active {
  transform: scale(0.98);
}

.btn-secundario {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: var(--color-acento2);
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  padding: 0.85rem 1.75rem;
  border-radius: var(--radius-capsule);
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(33, 33, 33, 0.2);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.25s ease;
}

.btn-secundario:hover {
  transform: scale(1.03);
  box-shadow: 0 6px 18px rgba(33, 33, 33, 0.35);
}

.btn-secundario:active {
  transform: scale(0.98);
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: transparent;
  color: var(--color-acento);
  border: 2px solid var(--color-acento);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-capsule);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, color 0.2s ease;
}

.btn-outline:hover {
  transform: scale(1.03);
  background-color: var(--color-acento);
  color: #ffffff;
}

/* ==========================================
   COMPONENTES Y TARJETAS (RADIUS 24PX)
   ========================================== */
.card-hugo {
  background-color: var(--default-color);
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 128, 0, 0.12);
  box-shadow: 0 4px 20px -2px rgba(255, 128, 0, 0.05), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
}

.card-hero {
  border-radius: var(--radius-card);
  background: var(--gradient-brand);
  color: #ffffff;
  box-shadow: 0 12px 30px -4px rgba(255, 128, 0, 0.4);
}

/* Barra de navegación estilo cápsula */
.nav-capsule-bar {
  background-color: var(--default-color);
  border-radius: var(--radius-capsule);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(255, 128, 0, 0.15);
}

/* Distintivos (Badges) */
.badge-capsule {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-capsule);
  font-weight: 700;
  font-size: 0.75rem;
}

.badge-acento {
  background-color: rgba(255, 128, 0, 0.12);
  color: var(--color-acento);
  border: 1px solid rgba(255, 128, 0, 0.25);
}

.badge-acento2 {
  background-color: var(--color-acento2);
  color: #ffffff;
}