.vidaytu-fichas-icon-cards {
padding-block: var(--wp--preset--spacing--70, var(--wp--preset--spacing--60));
}
.vidaytu-fichas-icon-cards.is-bg-default {
background: var(--wp--preset--color--bg);
}
.vidaytu-fichas-icon-cards.is-bg-soft {
background: var(--wp--preset--color--bg-soft);
}
.vidaytu-fichas-icon-cards.is-bg-muted {
background: var(--wp--preset--color--bg-muted);
}
.vidaytu-fichas-icon-cards__inner {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--60);
}
.vidaytu-fichas-icon-cards.alignfull .vidaytu-fichas-icon-cards__inner {
max-width: none;
padding-inline: var(--wp--preset--spacing--40);
} .vidaytu-fichas-icon-cards__header {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20);
max-width: 56rem;
}
.vidaytu-fichas-icon-cards.is-header-center .vidaytu-fichas-icon-cards__header {
margin-inline: auto;
text-align: center;
align-items: center;
}
.vidaytu-fichas-icon-cards.is-header-left .vidaytu-fichas-icon-cards__header {
text-align: left;
align-items: flex-start;
}
.vidaytu-fichas-icon-cards__kicker {
margin: 0;
font-size: var(--wp--preset--font-size--sm);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--primary);
}
.vidaytu-fichas-icon-cards__heading {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--3xl);
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--wp--preset--color--navy);
text-wrap: balance;
}
.vidaytu-fichas-icon-cards__intro {
color: var(--wp--preset--color--text-muted);
font-size: var(--wp--preset--font-size--md);
line-height: 1.6;
}
.vidaytu-fichas-icon-cards__intro p {
margin: 0 0 var(--wp--preset--spacing--20);
}
.vidaytu-fichas-icon-cards__intro p:last-child {
margin-bottom: 0;
} .vidaytu-fichas-icon-cards__grid {
display: grid;
gap: var(--wp--preset--spacing--40);
}
.vidaytu-fichas-icon-cards.is-cols-2 .vidaytu-fichas-icon-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.vidaytu-fichas-icon-cards.is-cols-3 .vidaytu-fichas-icon-cards__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.vidaytu-fichas-icon-cards.is-cols-4 .vidaytu-fichas-icon-cards__grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
} .vidaytu-fichas-icon-cards__card {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--30);
padding: var(--wp--preset--spacing--40);
background: var(--wp--preset--color--bg);
color: var(--wp--preset--color--text);
border: 1px solid var(--wp--preset--color--border);
transition: transform 160ms ease, box-shadow 160ms ease;
}
.vidaytu-fichas-icon-cards.is-card-default .vidaytu-fichas-icon-cards__card {
background: var(--wp--preset--color--bg);
border-color: var(--wp--preset--color--border);
}
.vidaytu-fichas-icon-cards.is-card-soft .vidaytu-fichas-icon-cards__card {
background: var(--wp--preset--color--bg-soft);
border-color: transparent;
}
.vidaytu-fichas-icon-cards.is-card-muted .vidaytu-fichas-icon-cards__card {
background: var(--wp--preset--color--bg-muted);
border-color: transparent;
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__card {
background: var(--wp--preset--color--navy);
color: #ffffff;
border-color: transparent;
}
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__card {
background: var(--wp--preset--color--primary);
color: #ffffff;
border-color: transparent;
}
.vidaytu-fichas-icon-cards.is-rounded .vidaytu-fichas-icon-cards__card {
border-radius: var(--wp--custom--radius--lg);
}
.vidaytu-fichas-icon-cards.has-card-shadow .vidaytu-fichas-icon-cards__card {
box-shadow: var(--wp--custom--shadow--md);
}
.vidaytu-fichas-icon-cards.has-card-shadow .vidaytu-fichas-icon-cards__card:hover {
transform: translateY(-2px);
box-shadow: var(--wp--custom--shadow--lg);
}
.vidaytu-fichas-icon-cards.is-card-align-center .vidaytu-fichas-icon-cards__card {
text-align: center;
align-items: center;
}
.vidaytu-fichas-icon-cards.is-card-align-left .vidaytu-fichas-icon-cards__card {
text-align: left;
align-items: flex-start;
} .vidaytu-fichas-icon-cards__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 3rem;
height: 3rem;
border-radius: 999px;
color: #ffffff;
background: var(--wp--preset--color--primary);
}
.vidaytu-fichas-icon-cards__icon svg {
width: 60%;
height: 60%;
display: block;
} .vidaytu-fichas-icon-cards.is-icon-size-sm .vidaytu-fichas-icon-cards__icon {
width: 2.25rem;
height: 2.25rem;
}
.vidaytu-fichas-icon-cards.is-icon-size-md .vidaytu-fichas-icon-cards__icon {
width: 3rem;
height: 3rem;
}
.vidaytu-fichas-icon-cards.is-icon-size-lg .vidaytu-fichas-icon-cards__icon {
width: 3.75rem;
height: 3.75rem;
} .vidaytu-fichas-icon-cards.is-icon-circle-filled .vidaytu-fichas-icon-cards__icon {
border-radius: 999px;
}
.vidaytu-fichas-icon-cards.is-icon-circle-outline .vidaytu-fichas-icon-cards__icon {
border-radius: 999px;
background: transparent;
border: 2px solid currentColor;
}
.vidaytu-fichas-icon-cards.is-icon-square-rounded .vidaytu-fichas-icon-cards__icon {
border-radius: var(--wp--custom--radius--md);
}
.vidaytu-fichas-icon-cards.is-icon-plain .vidaytu-fichas-icon-cards__icon {
background: transparent;
border-radius: 0;
width: auto;
height: auto;
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-size-sm .vidaytu-fichas-icon-cards__icon svg {
width: 1.5rem;
height: 1.5rem;
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-size-md .vidaytu-fichas-icon-cards__icon svg {
width: 2rem;
height: 2rem;
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-size-lg .vidaytu-fichas-icon-cards__icon svg {
width: 2.5rem;
height: 2.5rem;
} .vidaytu-fichas-icon-cards.is-icon-color-primary .vidaytu-fichas-icon-cards__icon {
background: var(--wp--preset--color--primary);
color: #ffffff;
}
.vidaytu-fichas-icon-cards.is-icon-color-navy .vidaytu-fichas-icon-cards__icon {
background: var(--wp--preset--color--navy);
color: #ffffff;
}
.vidaytu-fichas-icon-cards.is-icon-color-accent .vidaytu-fichas-icon-cards__icon {
background: var(--wp--preset--color--accent);
color: var(--wp--preset--color--navy);
}
.vidaytu-fichas-icon-cards.is-icon-color-neutral .vidaytu-fichas-icon-cards__icon {
background: var(--wp--preset--color--bg-muted);
color: var(--wp--preset--color--navy);
} .vidaytu-fichas-icon-cards.is-icon-circle-outline.is-icon-color-primary .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--primary);
border-color: var(--wp--preset--color--primary);
}
.vidaytu-fichas-icon-cards.is-icon-circle-outline.is-icon-color-navy .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--navy);
border-color: var(--wp--preset--color--navy);
}
.vidaytu-fichas-icon-cards.is-icon-circle-outline.is-icon-color-accent .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--accent);
border-color: var(--wp--preset--color--accent);
}
.vidaytu-fichas-icon-cards.is-icon-circle-outline.is-icon-color-neutral .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--text-muted);
border-color: var(--wp--preset--color--border);
} .vidaytu-fichas-icon-cards.is-icon-plain.is-icon-color-primary .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--primary);
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-color-navy .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--navy);
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-color-accent .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--accent);
}
.vidaytu-fichas-icon-cards.is-icon-plain.is-icon-color-neutral .vidaytu-fichas-icon-cards__icon {
background: transparent;
color: var(--wp--preset--color--text-muted);
} .vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__icon,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__icon {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.6);
} .vidaytu-fichas-icon-cards__content {
display: flex;
flex-direction: column;
gap: var(--wp--preset--spacing--20);
flex: 1 1 auto;
width: 100%;
}
.vidaytu-fichas-icon-cards__card-title {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: var(--wp--preset--font-size--lg);
font-weight: 700;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--wp--preset--color--navy);
text-wrap: balance;
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__card-title,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__card-title {
color: #ffffff;
}
.vidaytu-fichas-icon-cards__card-body {
color: var(--wp--preset--color--text-muted);
font-size: var(--wp--preset--font-size--md);
line-height: 1.6;
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__card-body,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__card-body {
color: rgba(255, 255, 255, 0.85);
}
.vidaytu-fichas-icon-cards__card-body p {
margin: 0 0 var(--wp--preset--spacing--20);
}
.vidaytu-fichas-icon-cards__card-body p:last-child {
margin-bottom: 0;
} .vidaytu-fichas-icon-cards__cta-wrap {
margin: auto 0 0; padding-top: var(--wp--preset--spacing--20);
}
.vidaytu-fichas-icon-cards__cta {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
font-size: var(--wp--preset--font-size--md);
text-decoration: none;
transition: color 120ms ease, background-color 120ms ease, transform 120ms ease;
}
.vidaytu-fichas-icon-cards__cta--link {
color: var(--wp--preset--color--primary);
padding: 0;
background: transparent;
}
.vidaytu-fichas-icon-cards__cta--link:hover,
.vidaytu-fichas-icon-cards__cta--link:focus-visible {
color: var(--wp--preset--color--primary-hover);
}
.vidaytu-fichas-icon-cards__cta--link .vidaytu-fichas-icon-cards__cta-arrow {
transition: transform 120ms ease;
}
.vidaytu-fichas-icon-cards__cta--link:hover .vidaytu-fichas-icon-cards__cta-arrow,
.vidaytu-fichas-icon-cards__cta--link:focus-visible .vidaytu-fichas-icon-cards__cta-arrow {
transform: translateX(2px);
}
.vidaytu-fichas-icon-cards__cta--button {
background: var(--wp--preset--color--primary);
color: #ffffff;
border-radius: var(--wp--custom--radius--md);
padding: 0.625rem 1.25rem;
box-shadow: var(--wp--custom--shadow--sm);
}
.vidaytu-fichas-icon-cards__cta--button:hover,
.vidaytu-fichas-icon-cards__cta--button:focus-visible {
background: var(--wp--preset--color--primary-hover);
color: #ffffff;
transform: translateY(-1px);
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__cta--link,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__cta--link {
color: #ffffff;
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__cta--button,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__cta--button {
background: #ffffff;
color: var(--wp--preset--color--navy);
}
.vidaytu-fichas-icon-cards.is-card-navy .vidaytu-fichas-icon-cards__cta--button:hover,
.vidaytu-fichas-icon-cards.is-card-primary .vidaytu-fichas-icon-cards__cta--button:hover {
background: rgba(255, 255, 255, 0.92);
color: var(--wp--preset--color--navy);
}
.vidaytu-fichas-icon-cards__cta:focus-visible {
outline: 3px solid var(--wp--preset--color--accent);
outline-offset: 3px;
border-radius: var(--wp--custom--radius--sm);
} @media (max-width: 1024px) {
.vidaytu-fichas-icon-cards.is-cols-3 .vidaytu-fichas-icon-cards__grid,
.vidaytu-fichas-icon-cards.is-cols-4 .vidaytu-fichas-icon-cards__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
} @media (max-width: 640px) {
.vidaytu-fichas-icon-cards__grid,
.vidaytu-fichas-icon-cards.is-cols-2 .vidaytu-fichas-icon-cards__grid,
.vidaytu-fichas-icon-cards.is-cols-3 .vidaytu-fichas-icon-cards__grid,
.vidaytu-fichas-icon-cards.is-cols-4 .vidaytu-fichas-icon-cards__grid {
grid-template-columns: 1fr;
}
.vidaytu-fichas-icon-cards__heading {
font-size: var(--wp--preset--font-size--2xl);
}
}