/* NAV PILL (enlaces de navegación) */
.nav-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: var(--space-8);
border-radius: var(--radius-sm);
font-family: var(--font-family-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
letter-spacing: var(--letter-spacing-normal);
color: var(--neutral-800);
background-color: transparent;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
}
.nav-pill:hover {
background-color: var(--neutral-200);
}
.nav-pill:active {
transform: scale(0.97);
}
.nav-pill:focus-visible {
outline: 2px solid var(--neutral-900);
outline-offset: 2px;
}
.nav-pill[aria-current="page"] {
background-color: var(--neutral-200);
font-weight: var(--font-weight-medium);
}
/* BOTÓN CTA */
.btn-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: var(--space-8) var(--space-12);
border-radius: var(--radius-pill);
font-family: var(--font-family-sans);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--accent-primary-fg);
background-color: var(--accent-primary);
box-shadow: var(--shadow-cta);
transition:
background-color var(--transition-fast),
box-shadow var(--transition-base),
transform var(--transition-fast);
white-space: nowrap;
}
.btn-cta:hover {
background-color: color-mix(in srgb, var(--accent-primary) 88%, black);
box-shadow: var(--shadow-cta-hover);
}
.btn-cta:active {
transform: scale(0.97);
box-shadow: var(--shadow-cta-active);
}
.btn-cta:focus-visible {
outline: 2px solid var(--accent-primary);
outline-offset: 3px;
}
/* CTA persistente sólo en mobile, vive a nivel para que
el backdrop-filter del navbar (trampa de containing-block) no
lo ancle al navbar. Se muestra sólo a <720px. */
.btn-cta--floating {
display: none;
}
.btn-cta__dot {
width: 6px;
height: 6px;
border-radius: var(--radius-pill);
background-color: var(--accent-primary-fg);
flex-shrink: 0;
animation: btn-cta-dot-pulse 2s ease-in-out infinite;
}
/* Pulso continuo y sutil del punto del CTA flotante.
transform + opacity son amigables con la GPU y no provocan reflow. */
@keyframes btn-cta-dot-pulse {
0%,
100% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.35);
opacity: 0.7;
}
}
/* Respeta a los usuarios que prefieren menos movimiento. */
@media (prefers-reduced-motion: reduce) {
.btn-cta__dot {
animation: none;
}
}
/* ============================================
BOTÓN PRIMARIO (pill oscuro grande — CTA del hero)
============================================ */
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: var(--space-12);
border-radius: var(--radius-pill);
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.04em;
color: var(--neutral-100);
background-color: var(--neutral-900);
transition:
background-color var(--transition-fast),
transform var(--transition-fast);
white-space: nowrap;
}
.btn-primary:hover {
background-color: color-mix(in srgb, var(--neutral-900) 85%, white);
}
.btn-primary:active {
transform: scale(0.97);
}
.btn-primary:focus-visible {
outline: 2px solid var(--neutral-900);
outline-offset: 3px;
}
.btn-primary--block {
width: 100%;
}
/* ============================================
BOTÓN OUTLINE (pill transparente — CTA de sobre mí)
============================================ */
.btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: var(--space-12);
border-radius: var(--radius-pill);
border: 1px solid var(--brand-dark);
background-color: transparent;
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.04em;
color: var(--brand-dark);
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
white-space: nowrap;
}
.btn-outline:hover {
background-color: var(--brand-dark);
color: var(--neutral-100);
}
.btn-outline:active {
transform: scale(0.97);
}
.btn-outline:focus-visible {
outline: 2px solid var(--brand-dark);
outline-offset: 3px;
}
.btn-outline--block {
width: 100%;
}
/* ============================================
BOTÓN CREMA (pill crema — card relleno de modalidades)
============================================ */
.btn-cream {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: var(--space-12);
border-radius: var(--radius-pill);
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.04em;
color: var(--neutral-900);
background-color: var(--brand-cream);
transition:
background-color var(--transition-fast),
transform var(--transition-fast);
white-space: nowrap;
}
.btn-cream:hover {
background-color: color-mix(in srgb, var(--brand-cream) 88%, black);
}
.btn-cream:active {
transform: scale(0.97);
}
.btn-cream:focus-visible {
outline: 2px solid var(--brand-cream);
outline-offset: 3px;
}
.btn-cream--block {
width: 100%;
}
/* ============================================
FEATURE ITEM (icono + etiqueta, usado en listas)
============================================ */
.feature-item {
display: flex;
align-items: center;
gap: var(--space-4);
}
.feature-item__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--accent-primary);
}
.feature-item__text {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
letter-spacing: 0.044em;
color: var(--neutral-800);
}
/* ============================================
CARD DE MODALIDADES
- Card reutilizable para los bloques de modalidad
- Dos variantes: filled (verde oscuro) / outline (blanca)
============================================ */
.modes-card {
display: flex;
flex-direction: column;
gap: var(--space-32);
padding: var(--space-24);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
width: 100%;
}
.modes-card--filled {
background-color: var(--brand-logo);
color: var(--brand-cream);
}
.modes-card--outline {
background-color: var(--neutral-100);
border: 1px solid var(--brand-dark);
color: var(--neutral-700);
}
.modes-card__content {
display: flex;
flex-direction: column;
gap: var(--space-24);
}
.modes-card__title {
/* 26px es específico de los títulos de card — se mantiene literal. */
font-size: 22px;
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.031em;
text-align: center;
}
.modes-card--outline .modes-card__title {
color: var(--neutral-800);
}
.modes-card__description {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: 1.5;
letter-spacing: 0.05em;
}
.modes-card__features {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
/* Dentro de las cards, los puntos de feature heredan el color
del texto de la card en lugar del --accent-primary por defecto,
así se acompasan con el contexto cromático de la card. */
.modes-card__features .feature-item__icon {
color: currentColor;
}
.modes-card__features .feature-item__text {
font-size: var(--font-size-md);
color: inherit;
}
.modes-card__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-16);
}
.modes-card__phone {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-normal);
text-align: center;
}
/* ============================================
CARD DE RECURSO
- Card reutilizable para materiales descargables
- Área de imagen (placeholder listo para un futuro ![]()
)
- Cuerpo con título/descripción + enlace de descarga
============================================ */
.resource-card {
display: flex;
flex-direction: column;
gap: var(--space-24);
padding: 0 0 var(--space-40);
background-color: var(--brand-cream-light);
border: 1px solid #e0e0e0;
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
overflow: hidden;
}
.resource-card__media {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 347 / 213;
background-color: var(--neutral-400);
border-radius: var(--radius-sm) var(--radius-sm) 0 0;
overflow: hidden;
}
.resource-card__media-placeholder {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
line-height: 1.555;
color: var(--neutral-800);
}
/* Estilado listo para un futuro ![]()
.
El aspect-ratio del contenedor evita el layout shift cuando la
imagen termina de cargar. */
.resource-card__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.resource-card__body {
display: flex;
flex-direction: column;
gap: var(--space-40);
padding: 0 var(--space-16);
}
.resource-card__text {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.resource-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
line-height: 1.555;
color: var(--neutral-800);
}
.resource-card__description {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
letter-spacing: var(--letter-spacing-normal);
color: var(--neutral-700);
}
/* ============================================
ENLACE DE DESCARGA (texto + icono al final, ancho completo)
- Visualmente un enlace de texto, no un botón pill
============================================ */
.download-link {
display: flex;
align-items: center;
gap: var(--space-8);
width: 100%;
color: var(--brand-logo);
transition:
opacity var(--transition-fast),
transform var(--transition-fast);
}
.download-link__text {
font-family: var(--font-family-sans);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.05em;
}
.download-link__icon {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.download-link:hover {
opacity: 0.75;
}
.download-link:active {
transform: scale(0.97);
}
.download-link:focus-visible {
outline: 2px solid var(--brand-logo);
outline-offset: 4px;
border-radius: var(--radius-sm);
}
/* ============================================
CARD DE TESTIMONIO
- Card reutilizable de reseña con encabezado (nombre + estrellas)
- Fondo cream-light, sombra teal (Figma)
============================================ */
.testimonial-card {
display: flex;
flex-direction: column;
gap: var(--space-32);
padding: var(--space-24) var(--space-16);
background-color: var(--brand-cream-light);
border: 1px solid var(--brand-cream-light);
border-radius: var(--radius-md);
box-shadow: var(--shadow-testimonial);
}
.testimonial-card__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-16);
}
.testimonial-card__name {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
line-height: 1.555;
color: var(--neutral-900);
}
.testimonial-card__rating {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--brand-rating);
flex-shrink: 0;
}
.testimonial-card__star {
width: 16px;
height: 16px;
flex-shrink: 0;
}
.testimonial-card__text {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--neutral-700);
white-space: pre-line;
}
/* ============================================
INFO CARD
- Card compacto con icono + título + descripción
- Usado en la sección del CTA final para exponer info de contacto
============================================ */
.info-card {
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-16);
padding: var(--space-24);
background-color: var(--neutral-100);
border: 1px solid var(--brand-cream-light);
border-radius: var(--radius-sm);
box-shadow: var(--shadow-card);
}
.info-card__header {
display: flex;
align-items: center;
gap: var(--space-8);
}
.info-card__icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--neutral-800);
}
.info-card__title {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
letter-spacing: 0.044em;
color: var(--neutral-800);
}
.info-card__description {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: 1.5;
letter-spacing: 0.05em;
color: var(--neutral-700);
}
/* ============================================
DIVIDER (separador de sección)
- Centrado horizontalmente, máx 1120 (Figma)
- El ancho respeta el padding lateral de cada breakpoint
- Reutilizable:
============================================ */
.divider {
width: calc(100% - 2 * var(--section-pad-x-mobile));
max-width: var(--container-content);
margin: var(--space-128) auto;
height: 0;
border: 0;
border-top: 1px solid var(--neutral-400);
}
/* ============================================
STAT (número + etiqueta)
============================================ */
.stat__number {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
letter-spacing: var(--letter-spacing-tight);
color: var(--accent-primary);
}
.stat__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-regular);
line-height: var(--line-height-relaxed);
letter-spacing: var(--letter-spacing-normal);
color: var(--neutral-700);
}
/* ============================================
ANIMACIONES DE REVELADO AL SCROLL
Sistema minimalista premium de fade-up. Los elementos
optan vía .reveal; el JS agrega .is-visible al intersectar.
Una vez completada la animación, el JS quita las clases
.reveal para que no ralenticen luego las transiciones de
hover/press de los botones.
============================================ */
.reveal {
opacity: 0;
transform: translateY(20px);
transition:
opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
/* Variante imagen — revelado más suave: leve scale, sin translate. */
.reveal.reveal--image {
transform: scale(0.98);
}
/* Variante divisor — crecimiento horizontal, sutil. */
.reveal.reveal--divider {
transform: scaleX(0.85);
transform-origin: center;
}
/* CTA Final — más lento para darle más presencia. */
.reveal.reveal--cta {
transition-duration: 900ms;
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
/* Escalonado de los hijos directos de .reveal-group (hasta 4). */
.reveal-group > .reveal:nth-child(1) { transition-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { transition-delay: 80ms; }
.reveal-group > .reveal:nth-child(3) { transition-delay: 160ms; }
.reveal-group > .reveal:nth-child(4) { transition-delay: 240ms; }
@media (prefers-reduced-motion: reduce) {
.reveal {
opacity: 1;
transform: none;
transition: none;
}
}
/* Las resource cards viven en un scroller horizontal por debajo
de desktop. Las cards 2 y 3 sólo asoman ~40px, bastante por
debajo del umbral de intersección de 0.15, por lo que el observer
no se disparaba y quedaban invisibles — el usuario no se
enteraba de que había más cards para deslizar. Las dejamos
siempre visibles en mobile/tablet; el reveal sigue activándose
en ≥1024px donde forman una grilla de 3 columnas. */
@media (max-width: 1023.98px) {
.resources__cards .resource-card.reveal,
.testimonials__cards .testimonial-card.reveal {
opacity: 1;
transform: none;
}
}