.retos-status__tabs { position: relative; display: inline-flex; gap: var(--space-1); padding: 4px; margin-bottom: var(--space-6); background-color: var(--color-border); border-radius: var(--radius-full); } .retos-status__indicator { position: absolute; top: 0; left: 0; z-index: 0; border-radius: var(--radius-full); background-color: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); transition: transform var(--duration-fast) var(--ease-out), width var(--duration-fast) var(--ease-out); } .retos-status__tab { position: relative; z-index: 1; padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-full); background: none; font-family: var(--font-body); font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--color-text-muted); cursor: pointer; transition: color var(--duration-fast) var(--ease-out); } .retos-status__tab.is-active { color: var(--color-canon-red); } .retos-status__tab:focus-visible { outline: 2px solid var(--color-canon-red); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .retos-status__indicator { transition: none; } } .retos-page__list { gap: clamp(var(--space-6), 4vw, var(--space-20)); max-width: 1400px; margin-inline: auto; } .retos-page__empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(var(--space-4), 6vw, var(--space-10)) var(--space-4); } .retos-page__empty-img { width: clamp(120px, 14vw, 180px); height: auto; margin-bottom: var(--space-1); } .retos-page__empty-title { margin: 0 0 var(--space-2); font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: 1.125rem; color: var(--color-text); } .retos-page__empty-text { margin: 0; font-family: var(--font-body); font-size: var(--fs-sm); color: var(--color-text-muted); max-width: 32ch; } .reto-card { position: relative; aspect-ratio: 1362 / 540; max-height: 540px; min-height: 280px; } @media (min-width: 901px) { .reto-card { max-width: 1100px; min-height: 350px; margin-inline: auto; } } .reto-card__photo { position: absolute; inset: 0; right: auto; width: 62%; display: block; overflow: hidden; background-color: #ddd; } .reto-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .reto-card__panel { position: absolute; left: 49.5%; right: 14%; top: 50%; transform: translateY(-50%); background-color: var(--color-white); box-shadow: 0 6px 28px rgba(0, 0, 0, 0.13); gap: clamp(var(--space-3), 1.2vw, var(--space-5)); padding: clamp(var(--space-5), 2vw, var(--space-8)); width: 50%; } .reto-card:nth-child(even) .reto-card__photo { left: auto; right: 0; } .reto-card:nth-child(even) .reto-card__panel { left: 14%; right: 49.5%; } .reto-card__title-link { text-decoration: none; color: inherit; display: block; } .reto-card__title { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: clamp(1.375rem, 2.2vw, 2rem); line-height: 1.15; color: #da0e16; margin: 0; transition: color var(--duration-fast) var(--ease-out); } .reto-card__title-link:hover .reto-card__title { color: var(--color-canon-red-hover); } .reto-card__description { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: clamp(0.875rem, 1.2vw, 1.1875rem); line-height: 1.45; color: var(--color-black); margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .reto-card__divider { margin: 0; border: 0; height: 1px; background-color: var(--color-border); flex-shrink: 0; } .reto-card__footer { gap: var(--space-3); } .reto-card__meta { gap: var(--space-2); } .reto-card__meta-icon { font-size: 1.6rem; color: #1a1a1a; line-height: 1; flex-shrink: 0; } .reto-card__meta-text { line-height: 1.2; } .reto-card__meta-label { font-family: var(--font-body); font-weight: var(--fw-medium); font-size: clamp(0.8rem, 0.9vw, 1rem); color: #1a1a1a; } .reto-card__meta-date { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: clamp(0.8rem, 0.9vw, 1rem); color: #1a1a1a; } .reto-card__cta { padding: var(--space-2) var(--space-6); background-color: var(--color-canon-red); color: var(--color-white); border-radius: 4px; font-family: var(--font-body); font-weight: var(--fw-regular); font-size: clamp(0.875rem, 1vw, 1.05rem); text-decoration: none; white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); flex-shrink: 0; } .reto-card__cta:hover { background-color: var(--color-canon-red-hover); transform: translateY(-1px); color: var(--color-white); text-decoration: none; } @media (max-width: 900px) { .reto-card, .reto-card:nth-child(even) { aspect-ratio: auto; max-height: none; min-height: unset; display: flex; flex-direction: column; } .reto-card__photo, .reto-card:nth-child(even) .reto-card__photo { position: static; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 250px; } .reto-card__panel, .reto-card:nth-child(even) .reto-card__panel { position: static; transform: none; padding: clamp(var(--space-4), 4vw, var(--space-6)); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10); width: 100%; } }