/* ==========================================================================
   Tipografía y sistema visual — estilo Apple
   Corporativo: azul #3498db · blanco · negro · tonos cálidos
   ========================================================================== */

:root {
  --opsm-font: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --opsm-text: #1d1d1f;
  --opsm-text-secondary: #1d1d1f;
  --opsm-text-muted: #424245;
  --opsm-heading: #1d1d1f;
  --opsm-brand: #3498db;
  --opsm-brand-hover: #5dade2;
  --opsm-brand-dark: #2980b9;
  --opsm-brand-soft: rgba(52, 152, 219, 0.1);
  --opsm-warm-bg: #fbfaf8;
  --opsm-surface: #f5f5f7;
  --opsm-radius: 18px;
  --opsm-radius-lg: 24px;
}

body,
button,
input,
select,
textarea {
  font-family: var(--opsm-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-size: 17px;
  line-height: 1.47059;
  font-weight: 400;
  color: var(--opsm-text);
  letter-spacing: -0.022em;
}

h1, h2, h3, h4, h5, h6,
.opsm-h1, .opsm-h2, .opsm-h3, .opsm-display {
  font-family: var(--opsm-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--opsm-heading);
  line-height: 1.08;
  margin: 0 0 0.45em;
}

h1, .opsm-h1, .opsm-display {
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

h2, .opsm-h2 {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.035em;
}

h3, .opsm-h3 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 600;
}

h4 { font-size: 1.25rem; font-weight: 600; }
h5 { font-size: 1.0625rem; font-weight: 600; }

p {
  margin: 0 0 1em;
  color: var(--opsm-text-secondary);
  font-size: 17px;
  line-height: 1.47059;
  letter-spacing: -0.022em;
}

.opsm-lead,
.lead {
  font-size: clamp(1.125rem, 2.2vw, 1.3125rem);
  line-height: 1.381;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--opsm-text-secondary);
}

.opsm-subhead {
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.381;
  font-weight: 400;
  color: var(--opsm-text-secondary);
  margin: 0.35em 0 0;
}

.opsm-caption {
  font-size: 14px;
  line-height: 1.4286;
  color: var(--opsm-text-muted);
  letter-spacing: -0.016em;
}

/* Pastilla corporativa — azul sólido, texto blanco (visual .cbox) */
.opsm-label,
.opsm-eyebrow,
.opsm-hero__kicker {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 10px 18px;
  font-family: var(--opsm-font);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff !important;
  background-color: var(--opsm-brand) !important;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.container p.opsm-eyebrow,
.section p.opsm-eyebrow,
.opsm-hero__glass .opsm-hero__kicker {
  color: #ffffff !important;
  font-size: 11px;
  line-height: 1.35;
  margin-bottom: 0.85rem;
}

.opsm-hero__glass .opsm-hero__lead,
.container .opsm-hero__glass p.opsm-hero__lead {
  color: rgba(255, 255, 255, 0.92) !important;
}

.cbox {
  background-color: var(--opsm-brand) !important;
  border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.2rem) clamp(1.25rem, 2.5vw, 1.75rem);
}

.cbox .cbox-title {
  font-family: var(--opsm-font) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.opsm-link {
  color: var(--opsm-brand);
  font-size: 17px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.2s ease;
}

.opsm-link:hover,
.opsm-link:focus {
  color: var(--opsm-brand-hover);
  text-decoration: underline;
}

.opsm-btn,
.opsm-hero__btn,
.btn.adv-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  padding: 11px 22px;
  font-family: var(--opsm-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.17647;
  letter-spacing: -0.022em;
  text-decoration: none;
  border: none;
  border-radius: 980px;
  cursor: pointer;
  transition: background-color 0.28s ease, color 0.28s ease;
}

.opsm-btn--primary,
.opsm-hero__btn--primary,
.btn.adv-color {
  color: #fff !important;
  background-color: var(--opsm-brand) !important;
  border: none !important;
  text-transform: none !important;
  font-weight: 400 !important;
  box-shadow: none !important;
}

.opsm-btn--primary:hover,
.opsm-btn--primary:focus,
.opsm-hero__btn--primary:hover,
.opsm-hero__btn--primary:focus,
.btn.adv-color:hover,
.btn.adv-color:focus,
.color-skin-2 .adv-color:hover,
.color-skin-2 .adv-color:focus {
  color: #fff !important;
  background-color: var(--opsm-brand-hover) !important;
  border-color: var(--opsm-brand-hover) !important;
  transform: none;
}

.opsm-btn--ghost {
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border: 1px solid #1d1d1f !important;
  text-transform: none !important;
  font-weight: 400 !important;
  transition: background-color 0.28s ease, color 0.28s ease, border-color 0.28s ease;
}

.opsm-hero__glass .opsm-hero__btn--ghost {
  color: #1d1d1f !important;
  background: #f5f5f7 !important;
  border: 1px solid #1d1d1f !important;
}

.opsm-btn--ghost:hover,
.opsm-btn--ghost:focus,
.opsm-hero__glass .opsm-hero__btn--ghost:hover,
.opsm-hero__glass .opsm-hero__btn--ghost:focus {
  color: #fff !important;
  background: #1d1d1f !important;
  border-color: #1d1d1f !important;
}

.container p,
.section p,
.portfolio-details p,
.sbox,
.sbox p,
.nbox p,
.cbox + .nbox .lead {
  font-size: 17px;
  line-height: 1.47059;
  color: #1d1d1f;
}

.sbox, .sbox:hover {
  color: #1d1d1f !important;
}

.container .portfolio-title,
.sbox-title {
  font-family: var(--opsm-font) !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  color: var(--opsm-heading) !important;
}

#caroufredsel-portfolio .portfolio-details {
  padding: 1.25rem 1.25rem 1.5rem;
}

#caroufredsel-portfolio .portfolio-title {
  margin: 0;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem) !important;
  line-height: 1.35 !important;
}

#caroufredsel-portfolio .portfolio-title a {
  font-size: inherit !important;
  line-height: inherit !important;
  color: #1d1d1f !important;
  text-decoration: none;
}

#caroufredsel-portfolio .portfolio-title a:hover,
#caroufredsel-portfolio .portfolio-title a:focus {
  color: var(--opsm-brand) !important;
}

#masthead .navbar-nav > li > a {
  font-family: var(--opsm-font);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
}

.archive-header .archive-title {
  font-family: var(--opsm-font);
  font-weight: 700;
  letter-spacing: -0.03em;
}

#site-info,
#site-info span,
#site-info p,
#site-info .footer-info-wrapper {
  color: rgba(255, 255, 255, 0.92) !important;
  font-size: 12px;
  font-weight: 400 !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#site-info a:hover {
  color: var(--opsm-brand-hover) !important;
}

/* Footer — solo los tres títulos de columna en negrita */
#supplementary,
#supplementary p,
#supplementary address,
#supplementary li,
#supplementary a {
  font-weight: 400;
}

#supplementary .subpage-title h5 {
  font-weight: 700 !important;
}

#supplementary .footer-social-title .subpage-title h5 {
  font-weight: 400 !important;
}

#supplementary .footer-address,
#supplementary .footer-address strong {
  font-weight: 400 !important;
}

#supplementary .footer-hours {
  font-weight: 400 !important;
}

#supplementary .footer-legal-links a {
  font-weight: 400 !important;
}

#supplementary .btn,
#supplementary a.btn {
  font-weight: 400 !important;
}