.inspiradores-hero { position: relative; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: 80vh; height: 80svh; min-height: 560px; max-height: 920px; overflow: hidden; color: var(--color-white); background-color: #0a0a0a; } .inspiradores-hero__bg { position: absolute; inset: 0; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.75) 100%), var(--hero-image); background-size: cover; background-position: center; } .inspiradores-hero__content { position: relative; z-index: 1; text-align: center; max-width: 900px; padding: 0 var(--space-6); } .inspiradores-hero__title { font-family: var(--font-heading); font-weight: var(--fw-light); font-size: clamp(2.25rem, 4.5vw, 4.375rem); line-height: 1.05; letter-spacing: -0.005em; color: var(--color-white); margin: 0 0 var(--space-4); text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .inspiradores-hero__tagline { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: clamp(1rem, 1.4vw, 1.5625rem); line-height: 1.4; color: var(--color-white); max-width: 50ch; margin: 0 auto; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); } @media (max-width: 768px) { .inspiradores-hero { max-height: 440px; } } .inspiradores-body { background: var(--color-bg); } .inspiradores-body__inner { max-width: 1606px; margin-inline: auto; padding: clamp(var(--space-10), 5vw, var(--space-16)) var(--page-gutter) clamp(var(--space-16), 8vw, var(--space-24)); } .inspiradores-body__heading { margin: 0 0 var(--space-6); text-align: center; font-family: var(--font-heading); font-weight: var(--fw-semibold); font-size: clamp(1.5rem, 2.5vw, 2rem); color: var(--color-text-dark); } .inspiradores-search { max-width: 480px; margin: 0 auto clamp(var(--space-8), 4vw, var(--space-12)); } .inspiradores-search__field { position: relative; display: flex; align-items: center; } .inspiradores-search__field i { position: absolute; left: var(--space-3); color: var(--color-text-muted); font-size: 1.1rem; pointer-events: none; } .inspiradores-search__input { width: 100%; min-height: 42px; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) * 2 + 16px); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-white); font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text); transition: border-color var(--duration-fast) var(--ease-out); } .inspiradores-search__input::placeholder { color: var(--color-text-muted); } .inspiradores-search__input:focus { outline: none; border-color: var(--color-canon-red); } .inspiradores-search__input:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 1px; } .inspiradores-search__input::-webkit-search-cancel-button { cursor: pointer; } .inspiradores-grid { margin: 0; padding: 0; } .inspiradores-grid > .col.is-collapsed { display: none; } .inspirador-card { display: flex; flex-direction: column; align-items: center; height: 100%; padding: clamp(var(--space-6), 3vw, var(--space-8)) var(--space-5); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-border); text-align: center; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); } .inspirador-card:hover { border-color: var(--color-canon-red); box-shadow: var(--shadow-md); transform: translateY(-2px); text-decoration: none; } .inspirador-card:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } .inspirador-card__photo { width: 96px; height: 96px; border-radius: var(--radius-full); object-fit: cover; background: var(--color-bg); margin-bottom: var(--space-4); } .inspirador-card__body { display: flex; flex-direction: column; align-items: center; gap: 4px; } .inspirador-card__name { margin: 0; font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-md); color: var(--color-text-dark); } .inspirador-card__country { margin: 0; gap: 6px; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted); } .inspirador-card__country i { font-size: 0.95rem; } .inspirador-card__categories { justify-content: center; gap: 6px; list-style: none; margin: var(--space-3) 0 0; padding: 0; } .inspirador-card__category { padding: 3px var(--space-3); border-radius: var(--radius-full); background: var(--color-canon-red-soft); color: var(--color-canon-red-alt); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-xs); } .inspiradores-empty { margin: var(--space-10) 0 0; text-align: center; font-family: var(--font-body); font-size: var(--fs-base); color: var(--color-text-muted); } .inspiradores-empty[hidden] { display: none; } .inspiradores-page__more { display: flex; justify-content: center; margin-top: clamp(1.75rem, 3vw, 2.5rem); } .inspiradores-page__more[hidden] { display: none; } .inspiradores-page__more-btn { min-width: 160px; padding: 0.75rem 1.5rem; border: 1px solid var(--color-text-dark); border-radius: 0.25rem; background: transparent; color: var(--color-text-dark); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 1rem; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .inspiradores-page__more-btn:hover { background: var(--color-canon-red-alt, #e22128); border-color: var(--color-canon-red-alt, #e22128); color: #fff; } .inspiradores-page__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: clamp(2rem, 4vw, 3rem) var(--space-4); text-align: center; } .inspiradores-page__empty-icon { font-size: 2.5rem; color: #9ca3af; } .inspiradores-page__empty-text { margin: 0; font-size: 1.0625rem; color: #6a7282; }