/* ============================================================
COMPONENTS — Buttons · Cards · Nav · Accordion · Badges · FAB
============================================================ */
/* ---- Buttons ---- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s1);
padding: 14px 28px;
min-height: var(--touch-min); /* WCAG 2.5.5 + Material — 48px mín tactil */
border-radius: var(--r-full);
font-size: 1rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
transition:
background var(--t-base),
box-shadow var(--t-base),
transform var(--t-fast),
color var(--t-base);
cursor: pointer;
border: 2px solid transparent;
text-decoration: none;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
background: var(--c-lime);
color: var(--c-text);
box-shadow: 0 4px 16px rgba(149,197,0,.30);
}
.btn-primary:hover {
background: var(--c-lime-dark);
color: var(--c-white);
box-shadow: 0 6px 22px rgba(149,197,0,.42);
transform: translateY(-2px);
}
.btn-outline {
background: transparent;
border-color: var(--c-purple);
color: var(--c-purple);
}
.btn-outline:hover {
background: var(--c-purple);
color: var(--c-white);
transform: translateY(-2px);
}
.btn-outline-white {
background: transparent;
border-color: var(--c-white);
color: var(--c-white);
}
.btn-outline-white:hover {
background: var(--c-white);
color: var(--c-purple);
transform: translateY(-2px);
}
.btn-outline-purple {
background: transparent;
border: 2px solid var(--c-purple);
color: var(--c-purple);
}
.btn-outline-purple:hover {
background: var(--c-purple);
color: var(--c-white);
transform: translateY(-2px);
}
.btn-whatsapp {
background: var(--c-whatsapp);
color: var(--c-white);
box-shadow: 0 4px 16px rgba(37,211,102,.32);
}
.btn-whatsapp:hover {
background: var(--c-whatsapp-dk);
box-shadow: 0 6px 22px rgba(37,211,102,.44);
transform: translateY(-2px);
}
.btn-purple {
background: var(--c-purple);
color: var(--c-white);
box-shadow: 0 4px 16px rgba(138, 58, 142, 0.28);
font-weight: 600;
}
.btn-purple:hover {
background: var(--c-purple-dark);
box-shadow: 0 6px 22px rgba(138, 58, 142, 0.42);
transform: translateY(-2px);
}
.btn-lg {
padding: 18px 40px;
font-size: 1.125rem;
}
.btn-sm {
padding: 13px 26px;
font-size: 0.875rem;
}
.btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
/* ---- WhatsApp Floating Button ---- */
.whatsapp-fab {
position: fixed;
bottom: 24px;
right: 24px;
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--c-whatsapp);
color: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 20px rgba(37,211,102,.50);
z-index: 1000;
transition: transform var(--t-base), box-shadow var(--t-base);
text-decoration: none;
flex-shrink: 0;
}
.whatsapp-fab:hover {
transform: scale(1.1) translateY(-2px);
box-shadow: 0 8px 28px rgba(37,211,102,.60);
}
.whatsapp-fab svg {
width: 32px;
height: 32px;
fill: currentColor;
}
/* ---- Navigation ---- */
.site-nav {
position: sticky;
top: 0;
z-index: 900;
background: transparent;
box-shadow: none;
border-radius: 0 0 var(--r-lg) var(--r-lg);
transition:
background 0.35s ease,
box-shadow 0.35s ease,
border-radius 0.35s ease;
}
.site-nav.is-scrolled {
background: rgba(255, 255, 255, 0.55);
-webkit-backdrop-filter: blur(22px) saturate(180%);
backdrop-filter: blur(22px) saturate(180%);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.55) inset,
0 -1px 0 rgba(138, 58, 142, 0.08) inset,
0 8px 28px rgba(63, 29, 107, 0.10);
}
.nav-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 96px;
max-width: var(--max-w);
margin: 0 auto;
padding: 0 var(--gutter);
}
.nav-logo {
display: inline-flex;
align-items: center;
line-height: 1;
}
.nav-logo img {
height: 80px;
width: auto;
display: block;
}
.footer-brand .nav-logo img {
height: 52px;
}
.nav-drawer-logo img {
height: 46px;
width: auto;
display: block;
}
.nav-links {
display: none;
align-items: center;
gap: var(--s4);
}
.nav-links a {
font-weight: 600;
font-size: 0.9375rem;
color: var(--c-text);
transition: color var(--t-base);
padding: 4px 0;
border-bottom: 2px solid transparent;
}
.nav-links a:hover {
color: var(--c-purple);
border-bottom-color: var(--c-lime);
}
/* Nav CTA — higher specificity to beat .nav-links a rules */
.nav-links a.btn-primary {
color: var(--c-white);
padding: 13px 26px;
gap: 10px;
border-bottom: none;
line-height: 1;
}
.nav-links a.btn-primary svg {
color: var(--c-white);
fill: currentColor;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.nav-links a.btn-primary:hover {
color: var(--c-white);
border-bottom-color: transparent;
}
.nav-hamburger {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-purple);
border-radius: var(--r-md);
transition: background var(--t-fast);
}
.nav-hamburger:hover { background: var(--c-bg-soft); }
@media (min-width: 768px) {
.nav-links { display: flex; }
.nav-hamburger { display: none; }
}
/* Mobile drawer */
.nav-drawer {
position: fixed;
inset: 0;
background: var(--c-white);
z-index: 950;
display: flex;
flex-direction: column;
padding: var(--s4);
transform: translateX(100%);
transition: transform var(--t-slow);
visibility: hidden;
}
.nav-drawer.is-open {
transform: none;
visibility: visible;
}
.nav-drawer-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--s6);
}
.nav-drawer-logo {
font-size: 1.375rem;
font-weight: 700;
color: var(--c-purple);
}
.nav-drawer-logo span { color: var(--c-lime); }
.nav-drawer-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-text-muted);
border-radius: var(--r-md);
}
.nav-drawer-links {
display: flex;
flex-direction: column;
gap: 0;
flex: 1;
}
.nav-drawer-links a {
font-size: 1.375rem;
font-weight: 700;
color: var(--c-text);
padding: var(--s3) 0;
border-bottom: 1px solid var(--c-bg-soft);
transition: color var(--t-base);
}
.nav-drawer-links a:hover { color: var(--c-purple); }
.nav-drawer-cta {
margin-top: var(--s5);
}
/* ---- Desktop dropdown menus ---- */
.nav-item {
position: relative;
}
.nav-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: inherit;
font-weight: 600;
font-size: 0.9375rem;
color: var(--c-text);
background: none;
border: none;
cursor: pointer;
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: color var(--t-base), border-color var(--t-base);
line-height: 1;
}
.nav-trigger:hover,
.nav-item.is-open .nav-trigger {
color: var(--c-purple);
border-bottom-color: var(--c-lime);
}
.nav-caret {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.nav-item.is-open .nav-caret {
transform: rotate(180deg);
}
.nav-dropdown {
position: absolute;
top: calc(100% + 4px); /* gap chico para que el hover no se pierda al cruzar */
left: 50%;
min-width: 248px;
background: var(--c-purple);
border-radius: 16px;
box-shadow:
0 8px 16px rgba(0, 0, 0, 0.08),
0 16px 48px rgba(138, 58, 142, 0.28);
border: 0;
padding: 8px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-50%) translateY(-6px);
transition:
opacity 0.18s ease,
transform 0.18s ease,
visibility 0.18s ease;
z-index: 100;
}
/* Bridge invisible para que el cursor pueda viajar del trigger al dropdown
sin perder el hover (cubre el gap de 4px) */
.nav-dropdown::before {
content: "";
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
/* HOVER: desplegar automáticamente al pasar el cursor (sin click) */
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown,
.nav-item.is-open .nav-dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.nav-item:hover .nav-caret,
.nav-item:focus-within .nav-caret,
.nav-item.is-open .nav-caret {
transform: rotate(180deg);
}
.nav-dropdown a {
display: block;
padding: 10px 14px;
font-size: 0.875rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.88);
border-radius: 10px;
border-bottom: none;
white-space: nowrap;
transition: color var(--t-fast), background var(--t-fast);
}
.nav-dropdown a:hover {
color: var(--c-white);
background: rgba(255, 255, 255, 0.12);
border-bottom-color: transparent;
}
/* ---- Mobile drawer accordion groups ---- */
.drawer-group {
border-bottom: 1px solid var(--c-bg-soft);
}
/* Remove the double border that .nav-drawer-links li inherits */
.nav-drawer-links .drawer-group > a,
.nav-drawer-links li.drawer-group {
border-bottom: none;
}
.drawer-group-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
font-family: inherit;
font-size: 1.375rem;
font-weight: 700;
color: var(--c-text);
background: none;
border: none;
cursor: pointer;
padding: var(--s3) 0;
text-align: left;
transition: color var(--t-base);
}
.drawer-group-trigger:hover,
.drawer-group-trigger.is-open {
color: var(--c-purple);
}
.drawer-group-trigger .nav-caret {
transition: transform 0.2s ease;
flex-shrink: 0;
}
.drawer-group-trigger.is-open .nav-caret {
transform: rotate(180deg);
}
.drawer-group-links {
display: none;
flex-direction: column;
padding: 0 0 var(--s2) var(--s2);
list-style: none;
}
.drawer-group-links.is-open {
display: flex;
}
.drawer-group-links a {
font-size: 1rem;
font-weight: 600;
color: var(--c-text-muted);
padding: 10px 0;
border-bottom: 1px solid rgba(138, 58, 142, 0.07);
transition: color var(--t-base);
}
.drawer-group-links li:last-child a {
border-bottom: none;
}
.drawer-group-links a:hover {
color: var(--c-purple);
}
/* ---- Cards ---- */
.card {
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s4);
box-shadow: var(--shadow-md);
}
/* Benefit card */
.benefit-card {
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s5);
box-shadow: var(--shadow-sm);
text-align: center;
transition: transform var(--t-base), box-shadow var(--t-base);
border: 1px solid rgba(138,58,142,.06);
}
.benefit-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
/* ---- Benefits list (row layout) ---- */
.benefits-list {
max-width: 720px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.benefit-item {
padding: 24px 0;
border-bottom: 1px solid rgba(138, 58, 142, 0.08);
}
.benefit-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.benefit-item-title {
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.4;
margin-bottom: 6px;
}
.benefit-item-desc {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
}
.benefits-cta {
margin-top: var(--s6);
display: flex;
justify-content: center;
}
/* ============================================================
Benefits — Two-column sticky redesign
============================================================ */
.benef-section {
position: relative;
overflow: visible;
background: #f5f0fb;
padding-top: clamp(72px, 8vw, 110px);
padding-bottom: clamp(120px, 14vw, 220px);
}
.benef-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
display: grid;
grid-template-columns: minmax(320px, 0.85fr) minmax(560px, 1.15fr);
gap: clamp(48px, 6vw, 88px);
align-items: start;
overflow: visible;
}
/* ---- Left: sticky text block ---- */
.benef-left {
position: sticky;
top: 120px;
align-self: start;
height: fit-content;
z-index: 2;
display: flex;
flex-direction: column;
gap: var(--s3);
}
.benef-headline {
font-family: inherit;
font-size: clamp(1.875rem, 3.5vw, 3rem);
font-weight: 700;
color: #151226;
line-height: 1.18;
margin-top: var(--s2);
}
.benef-hl {
color: var(--c-purple);
}
.benef-sub {
font-family: inherit;
font-size: 1.0625rem;
font-weight: 400;
color: var(--c-text-muted);
line-height: 1.65;
max-width: 380px;
}
.benef-cta {
align-self: flex-start;
margin-top: var(--s1);
}
/* ---- Right: stacked-card scroll column ---- */
.benef-right {
position: relative;
display: flex;
flex-direction: column;
gap: 24px;
padding-bottom: 160px;
overflow: visible;
}
/* Sticky wrapper — no visuals, no transform, no overflow */
.benef-card {
position: sticky;
top: var(--sticky-top, 120px);
z-index: var(--card-z, 1);
}
/* nth-child sticky offsets: 18px steps keep cards readable */
.benef-card:nth-child(1) { --sticky-top: 120px; --card-z: 1; }
.benef-card:nth-child(2) { --sticky-top: 138px; --card-z: 2; }
.benef-card:nth-child(3) { --sticky-top: 156px; --card-z: 3; }
.benef-card:nth-child(4) { --sticky-top: 174px; --card-z: 4; }
.benef-card:nth-child(5) { --sticky-top: 192px; --card-z: 5; }
.benef-card:nth-child(6) { --sticky-top: 210px; --card-z: 6; }
.benef-card:nth-child(7) { --sticky-top: 228px; --card-z: 7; }
/* Inner carries all visuals — hover is safe here (no stacking-context conflict) */
.benef-card-inner {
display: grid;
grid-template-columns: auto 1px minmax(0, 1fr);
gap: 24px;
align-items: center;
background: #ffffff;
border-radius: 28px;
border: 1px solid rgba(138, 58, 142, 0.12);
box-shadow: 0 12px 32px rgba(30, 20, 40, 0.08);
padding: 18px 28px 18px 18px;
transition: box-shadow 220ms ease, border-color 220ms ease;
}
.benef-card:hover .benef-card-inner {
box-shadow: 0 18px 44px rgba(30, 20, 40, 0.12);
border-color: rgba(138, 58, 142, 0.22);
}
.benef-card-img {
width: fit-content;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0;
border-radius: 16px;
/* Sin fondo lavanda: la imagen se integra al card blanco sin corte visible */
background: transparent;
overflow: hidden;
flex-shrink: 0;
}
.benef-card-img img {
width: 100%;
height: auto;
max-width: 150px;
max-height: 104px;
object-fit: contain;
display: block;
mix-blend-mode: multiply;
}
.benef-card-divider {
width: 1px;
height: 84px;
background: rgba(138, 58, 142, 0.16);
align-self: center;
}
.benef-card-body {
min-width: 0;
}
.benef-card-title {
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.4;
margin-bottom: 6px;
}
.benef-card-desc {
font-family: inherit;
font-size: 0.9375rem;
font-weight: 400;
color: var(--c-text-muted);
line-height: 1.45;
}
/* ---- Tablet (≤ 1100px) ---- */
@media (max-width: 1100px) {
.benef-card-img img {
max-width: 130px;
max-height: 92px;
}
}
/* ---- Mobile (≤ 900px) — single column, sticky disabled ---- */
@media (max-width: 900px) {
.benef-inner {
grid-template-columns: 1fr;
}
.benef-left {
position: relative;
top: auto;
}
.benef-right {
gap: 16px;
padding-bottom: 0;
}
.benef-card {
position: static;
top: auto;
}
.benef-section {
padding-bottom: 80px;
}
.benef-sub {
max-width: 100%;
}
.benef-cta {
align-self: center;
width: 100%;
justify-content: center;
}
.benef-card:hover .benef-card-inner {
box-shadow: 0 12px 32px rgba(30, 20, 40, 0.08);
border-color: rgba(138, 58, 142, 0.12);
}
}
/* ---- Small mobile (≤ 540px) — img izq + texto der (horizontal compacto) ---- */
@media (max-width: 540px) {
.benef-card-inner {
/* Mantenemos horizontal: imagen pequeña a la izq, texto al der */
grid-template-columns: 96px 1px minmax(0, 1fr);
gap: 14px;
padding: 16px 18px;
align-items: center;
}
.benef-card-img {
width: 96px;
height: 96px;
padding: 0;
align-items: center;
justify-content: center;
}
.benef-card-img img {
max-width: 96px;
max-height: 96px;
object-fit: contain;
}
.benef-card-divider {
height: 60px;
align-self: center;
}
.benef-card-title { font-size: 0.95rem; margin-bottom: 4px; }
.benef-card-desc { font-size: 0.875rem; line-height: 1.4; }
}
/* Viewports muy chicos (<360px) — sin divisor, gap más compacto */
@media (max-width: 360px) {
.benef-card-inner {
grid-template-columns: 80px minmax(0, 1fr);
gap: 12px;
padding: 14px;
}
.benef-card-img,
.benef-card-img img { width: 80px; height: 80px; max-width: 80px; max-height: 80px; }
.benef-card-divider { display: none; }
}
/* ---- */
.benefit-icon {
width: 72px;
height: 72px;
background: var(--c-bg-soft);
border-radius: var(--r-lg);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s3);
}
.benefit-icon svg {
width: 36px;
height: 36px;
color: var(--c-purple);
stroke: currentColor;
fill: none;
}
/* Step card */
.step-card {
text-align: center;
position: relative;
}
.step-icon-wrap {
width: 80px;
height: 80px;
background: var(--c-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--s3);
box-shadow: var(--shadow-md);
position: relative;
z-index: 1;
}
.step-number-badge {
position: absolute;
top: -4px;
right: -4px;
width: 26px;
height: 26px;
background: var(--c-purple);
color: var(--c-white);
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--c-white);
}
.step-icon-wrap svg {
width: 36px;
height: 36px;
color: var(--c-purple);
stroke: currentColor;
fill: none;
}
/* Testimonial card */
/* ============================================================
Testimonials — Portrait focus slider
============================================================ */
.testi-slider {
position: relative;
overflow: hidden;
padding: 48px 0 56px;
user-select: none;
}
.testi-track {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(16px, 3vw, 28px);
}
/* ---- Portrait card ---- */
.testi-portrait {
flex-shrink: 0;
width: clamp(180px, 20vw, 260px);
aspect-ratio: 3 / 4;
border-radius: 32px;
overflow: hidden;
cursor: pointer;
background: #F5F1F7;
position: relative;
transform: scale(0.92);
opacity: 0.72;
z-index: 1;
transition:
transform 420ms cubic-bezier(0.34, 1.3, 0.64, 1),
opacity 400ms ease,
background-color 400ms ease,
box-shadow 400ms ease;
}
.testi-portrait:focus-visible {
outline: 3px solid var(--c-purple);
outline-offset: 4px;
}
.testi-portrait.active {
transform: scale(1.08);
opacity: 1;
z-index: 5;
background: #95C700;
box-shadow: 0 24px 60px rgba(149, 199, 0, 0.28);
}
.testi-portrait img {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(6%);
height: 115%;
width: auto;
max-width: none;
pointer-events: none;
display: block;
}
/* ---- Nav arrows ---- */
.testi-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-white);
border: 1px solid rgba(138, 58, 142, 0.15);
box-shadow: 0 4px 16px rgba(30, 20, 40, 0.10);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--c-purple);
transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.testi-nav:hover {
background: var(--c-purple);
color: var(--c-white);
border-color: var(--c-purple);
}
.testi-nav--prev { left: clamp(8px, 3vw, 40px); }
.testi-nav--next { right: clamp(8px, 3vw, 40px); }
/* ---- Dots ---- */
.testi-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.testi-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(138, 58, 142, 0.20);
border: none;
padding: 0;
cursor: pointer;
transition: background 200ms ease, transform 200ms ease;
}
.testi-dot.active {
background: var(--c-purple);
transform: scale(1.35);
}
/* ---- Name + quote above carousel ---- */
.testi-text {
margin-bottom: var(--s5);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
text-align: center;
transition: opacity 220ms ease;
}
.testi-text.is-fading {
opacity: 0;
}
.testi-name {
font-family: inherit;
font-size: 1.125rem;
font-weight: 700;
color: var(--c-purple);
margin: 0;
}
.testi-quote {
font-family: inherit;
font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
font-weight: 400;
line-height: 1.68;
color: var(--c-text);
font-style: italic;
max-width: 620px;
margin: 0;
}
/* ---- Play button overlay inside active portrait ---- */
.testi-play-overlay {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 320ms ease;
line-height: 0;
text-decoration: none;
}
.testi-portrait.active .testi-play-overlay {
opacity: 1;
pointer-events: auto;
}
.testi-play-overlay .testimonial-play-btn {
width: 46px;
height: 46px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}
/* ---- Tooltip above play button ---- */
.testi-tooltip {
position: absolute;
bottom: calc(100% + 10px);
left: 50%;
transform: translateX(-50%) translateY(4px);
white-space: nowrap;
background: #8a3a8e;
color: #fff;
font-family: inherit;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
padding: 6px 13px;
border-radius: 999px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.24);
pointer-events: none;
opacity: 0;
transition: opacity 200ms ease, transform 200ms ease;
z-index: 3;
}
.testi-tooltip::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: #8a3a8e;
}
.testi-play-overlay:hover .testi-tooltip,
.testi-play-overlay:focus .testi-tooltip {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/* ---- CTA below carousel ---- */
.testi-cta {
display: flex;
justify-content: center;
margin-top: var(--s4);
}
.testi-microcopy {
text-align: center;
font-family: inherit;
font-size: 0.9375rem;
color: var(--c-text-muted);
max-width: 600px;
margin: var(--s2) auto 0;
line-height: 1.55;
}
/* Mobile: reducir espacio entre CTA "Quiero mi crédito" + microcopy + sección Encuéntranos */
@media (max-width: 767px) {
.testimonials-section { padding-bottom: var(--s5) !important; }
.testi-cta { margin-top: var(--s3); }
.testi-microcopy { margin-top: var(--s2); font-size: 0.875rem; }
.location-section { padding-top: var(--s5) !important; }
}
@media (max-width: 640px) {
.testi-portrait {
width: clamp(130px, 38vw, 190px);
}
.testi-nav {
width: 36px;
height: 36px;
}
.testi-cta .btn {
min-width: 240px;
}
}
/* ============================================================
Location — split text + map
============================================================ */
.location-section {
background: var(--c-white);
}
.location-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
gap: clamp(48px, 6vw, 96px);
align-items: center;
}
.location-copy {
display: flex;
flex-direction: column;
gap: var(--s3);
}
.location-headline {
font-family: inherit;
font-size: clamp(1.875rem, 3.5vw, 2.75rem);
font-weight: 700;
color: #151226;
line-height: 1.2;
margin-top: var(--s2);
}
.location-body {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.location-body p {
font-family: inherit;
font-size: 1.0625rem;
font-weight: 400;
color: var(--c-text-muted);
line-height: 1.65;
margin: 0;
}
.location-map-container {
position: relative;
border-radius: 24px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
transition: transform 320ms ease, box-shadow 320ms ease;
}
.location-map-container:hover {
transform: scale(1.02);
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.12);
}
.location-map-container iframe {
width: 100%;
/* taller than visible area so translateY hides the My Maps header */
height: calc(480px + 72px);
border: 0;
display: block;
transform: translateY(-72px);
}
.location-map-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(138, 58, 142, 0.15) 0%, transparent 55%);
pointer-events: none;
z-index: 1;
}
.location-map-btn {
position: absolute;
bottom: 16px;
right: 16px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 18px;
background: var(--c-white);
border-radius: 999px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--c-text);
text-decoration: none;
transition: box-shadow 200ms ease, transform 200ms ease;
}
.location-map-btn:hover {
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
transform: translateY(-1px);
}
.location-map-btn svg {
color: var(--c-purple);
flex-shrink: 0;
}
@media (max-width: 900px) {
.location-grid {
grid-template-columns: 1fr;
}
.location-map-container iframe {
height: calc(320px + 72px);
/* translateY(-72px) inherited from base rule — no change needed */
}
.location-map-container:hover {
transform: none;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}
}
/* ---- */
.testimonial-video-cta {
display: flex;
align-items: center;
gap: 12px;
margin-top: var(--s4);
padding-top: var(--s3);
border-top: 1px solid rgba(138, 58, 142, 0.1);
text-decoration: none;
color: var(--c-text);
transition: color 200ms ease;
}
.testimonial-video-cta:hover {
color: var(--c-purple);
}
.testimonial-play-btn {
position: relative;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--c-lime);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #fff;
}
.testimonial-play-btn svg {
position: relative;
z-index: 1;
margin-left: 2px; /* optical center for play triangle */
color: #fff;
}
.testimonial-play-ripple {
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--c-lime);
opacity: 0.45;
animation: play-ripple 1.9s ease-out infinite;
}
@keyframes play-ripple {
0% { transform: scale(1); opacity: 0.45; }
100% { transform: scale(2.1); opacity: 0; }
}
.testimonial-video-label {
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
letter-spacing: 0.01em;
}
/* ---- Stat item ---- */
.stat-item {
text-align: center;
padding: var(--s3);
}
.stat-number {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--c-lime);
line-height: 1;
display: block;
}
.stat-label {
font-size: 0.95rem;
color: #ffffff;
margin-top: 8px;
display: block;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
/* ---- Badge ---- */
.badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--r-full);
font-size: 0.8125rem;
font-weight: 700;
line-height: 1;
}
.badge-purple {
background: rgba(138,58,142,.1);
color: var(--c-purple);
}
.badge-lime {
background: rgba(149,197,0,.13);
color: #4e7500;
}
.badge-white {
background: rgba(255,255,255,.18);
border: 1px solid rgba(255,255,255,.3);
color: var(--c-white);
}
.badge svg {
width: 14px;
height: 14px;
stroke: currentColor;
fill: none;
}
/* ---- Trust badges row ---- */
.trust-row {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
}
/* ---- Accordion (FAQ) ---- */
.accordion-item {
border-bottom: 1px solid rgba(138,58,142,.12);
}
.accordion-trigger {
width: 100%;
padding: var(--s3) 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
font-size: 1rem;
font-weight: 600;
text-align: left;
color: var(--c-text);
transition: color var(--t-base);
}
.accordion-trigger:hover { color: var(--c-purple); }
.accordion-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
color: var(--c-purple);
transition: transform var(--t-base);
}
.accordion-trigger[aria-expanded="true"] .accordion-icon {
transform: rotate(180deg);
}
.accordion-panel {
overflow: hidden;
max-height: 0;
transition: max-height 0.35s ease;
}
.accordion-panel.is-open {
max-height: 600px;
}
.accordion-panel p {
padding-bottom: var(--s3);
color: var(--c-text-muted);
line-height: 1.75;
}
/* ---- Hero slider dots ---- */
.slider-dots {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
padding-top: var(--s4);
}
.slider-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(138,58,142,.2);
border: none;
padding: 0;
transition: background var(--t-base), transform var(--t-base);
cursor: pointer;
}
.slider-dot.is-active {
background: var(--c-purple);
transform: scale(1.5);
}
/* ---- Section header ---- */
.section-eyebrow {
display: block;
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--c-purple);
margin-bottom: var(--s2);
}
/* ---- Divider ---- */
.divider {
width: 48px;
height: 4px;
border-radius: var(--r-full);
background: linear-gradient(to right, var(--c-purple), var(--c-lime));
margin: var(--s2) auto 0;
}
/* ============================================================
Clientas components
(#referidos · #educacion-financiera · #app-podemos)
============================================================ */
/* ---- Visual slot placeholders (unified system) ---- */
.visual-slot {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 220px;
padding: var(--s5);
border: 2px dashed rgba(138, 58, 142, 0.22);
border-radius: var(--r-xl);
background: rgba(138, 58, 142, 0.04);
color: var(--c-text-muted);
font-size: 0.875rem;
font-style: italic;
text-align: center;
}
.visual-slot--photo {
border-color: rgba(138, 58, 142, 0.22);
background: rgba(138, 58, 142, 0.04);
}
.visual-slot--video {
border-color: rgba(149, 197, 0, 0.30);
background: rgba(149, 197, 0, 0.04);
}
.visual-slot--illustration {
border-color: rgba(138, 58, 142, 0.16);
background: rgba(138, 58, 142, 0.02);
min-height: 180px;
}
/* Tall slot for phone mockup */
.app-phone-slot {
min-height: 380px;
}
/* Compact slot used inside article cards */
.article-card-thumb {
min-height: 100px;
padding: var(--s3);
border-radius: var(--r-lg);
}
/* ---- Referidos: safe card (purple hero block style) ---- */
.ref-safe-card {
margin-top: var(--s8);
background: linear-gradient(135deg, #5B2D8F 0%, #3F1D6B 55%, #2E1450 100%);
border-radius: var(--r-xl);
box-shadow: 0 20px 60px -20px rgba(63, 29, 107, 0.45);
padding: clamp(28px, 5vw, 56px);
display: grid;
grid-template-columns: 1fr;
gap: clamp(28px, 4vw, 48px);
align-items: stretch;
position: relative;
overflow: hidden;
}
@media (min-width: 768px) {
.ref-safe-card {
grid-template-columns: 1.15fr 0.85fr;
}
}
.ref-safe-content {
display: flex;
flex-direction: column;
gap: var(--s3);
position: relative;
z-index: 2;
}
.ref-safe-track {
display: flex;
gap: 8px;
margin-bottom: var(--s2);
}
.ref-safe-bar {
flex: 1;
height: 3px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
}
.ref-safe-bar.is-active {
background: rgba(255, 255, 255, 0.95);
}
.ref-safe-eyebrow {
margin: 0;
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.7);
}
.ref-safe-title {
margin: 0;
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 800;
color: var(--c-white);
line-height: 1.2;
max-width: 22ch;
}
.ref-safe-list {
list-style: none;
padding: 0;
margin: var(--s2) 0 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.ref-safe-list li {
display: flex;
align-items: flex-start;
gap: var(--s2);
font-size: 0.9375rem;
font-weight: 500;
color: rgba(255, 255, 255, 0.92);
line-height: 1.55;
}
.ref-safe-list li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-lime);
flex-shrink: 0;
margin-top: 7px;
box-shadow: 0 0 0 4px rgba(199, 224, 74, 0.18);
}
.ref-safe-microcopy {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.78);
font-style: italic;
margin: var(--s2) 0 0;
padding: var(--s3) var(--s4);
background: rgba(255, 255, 255, 0.08);
border-left: 3px solid var(--c-lime);
border-radius: 0 var(--r-md) var(--r-md) 0;
backdrop-filter: blur(6px);
}
.ref-safe-media {
position: relative;
border-radius: var(--r-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.55);
}
.ref-safe-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
@media (min-width: 768px) {
.ref-safe-media {
aspect-ratio: auto;
height: 100%;
min-height: 100%;
}
}
/* ---- Referidos: reward card ---- */
.ref-reward-card {
background: linear-gradient(135deg, var(--c-lime-dark), var(--c-lime));
border-radius: var(--r-xl);
padding: clamp(28px, 4vw, 44px);
color: #fff;
box-shadow: 0 8px 28px rgba(149, 197, 0, 0.26);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.ref-reward-highlight {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
font-weight: 800;
line-height: 1.35;
}
.ref-reward-card p:not(.ref-reward-highlight) {
font-size: 0.9375rem;
line-height: 1.6;
opacity: 0.9;
}
/* ---- Referidos: steps microcopy ---- */
.ref-steps-microcopy {
text-align: center;
font-size: 0.875rem;
color: var(--c-text-muted);
font-style: italic;
margin-top: var(--s5);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* ---- Referidos: quote card ---- */
.ref-quote-card {
margin-top: var(--s8);
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.12);
box-shadow: var(--shadow-sm);
padding: clamp(28px, 4vw, 44px);
text-align: center;
}
.ref-quote-card blockquote {
font-size: clamp(1.0625rem, 2vw, 1.25rem);
font-weight: 600;
color: var(--c-purple);
font-style: italic;
line-height: 1.6;
position: relative;
padding: 0 var(--s3);
}
.ref-quote-card blockquote::before {
content: '"';
font-size: 4rem;
color: var(--c-lime);
line-height: 0;
position: absolute;
top: 20px;
left: -8px;
font-style: normal;
}
/* ---- Educación Financiera: tip cards (purple hero style) ---- */
.tip-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--s3);
background: linear-gradient(135deg, #5B2D8F 0%, #3F1D6B 60%, #2E1450 100%);
border-radius: var(--r-xl);
box-shadow: 0 12px 36px -16px rgba(63, 29, 107, 0.55);
padding: var(--s5);
min-height: 200px;
overflow: hidden;
transition: transform var(--t-base), box-shadow var(--t-base);
}
.tip-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 100% 0%, rgba(255,255,255,0.10) 0%, transparent 50%);
pointer-events: none;
}
.tip-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 44px -16px rgba(63, 29, 107, 0.70);
}
.tip-card-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.22);
color: var(--c-white);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.02em;
border-radius: 50%;
backdrop-filter: blur(8px);
position: relative;
z-index: 2;
}
.tip-card-title {
margin: 0;
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-white);
line-height: 1.35;
max-width: 22ch;
position: relative;
z-index: 2;
}
.tip-card-icon {
position: absolute;
right: -10px;
bottom: -10px;
width: 96px;
height: 96px;
color: var(--c-lime);
opacity: 0.55;
pointer-events: none;
}
/* ---- Educación Financiera: article cards ---- */
.article-card {
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.10);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base);
cursor: pointer;
}
.article-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.article-card-body {
padding: var(--s4);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
}
.article-card-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.45;
}
.article-card-link {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-purple);
white-space: nowrap;
flex-shrink: 0;
}
/* ---- App Podemos: benefit list ---- */
.app-benefit-list {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s3);
margin-top: var(--s2);
}
.app-benefit-list li {
display: flex;
align-items: center;
gap: var(--s3);
font-size: 0.9375rem;
font-weight: 600;
color: var(--c-text);
line-height: 1.5;
}
.app-benefit-list li::before {
content: '';
width: 22px;
height: 22px;
border-radius: 50%;
background: var(--c-purple);
flex-shrink: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 22 22' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='11' fill='%238a3a8e'/%3E%3Cpolyline points='5,11 9,15 17,7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: cover;
}
/* ---- Section eyebrow variants (dark backgrounds) ---- */
.section-eyebrow--light {
color: rgba(255, 255, 255, 0.72);
}
.section-eyebrow--lime {
color: var(--c-lime);
}
/* ---- Image placeholder ---- */
.img-ph {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--s2);
min-height: 200px;
padding: var(--s5);
border: 2px dashed rgba(138, 58, 142, 0.25);
border-radius: var(--r-xl);
background: rgba(138, 58, 142, 0.04);
color: var(--c-text-muted);
font-size: 0.875rem;
font-style: italic;
text-align: center;
}
.img-ph--light {
border-color: rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.62);
}
.img-ph--dark {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.52);
}
/* ---- Requirement cards (#requisitos) ---- */
.req-card {
display: flex;
align-items: flex-start;
gap: var(--s3);
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.10);
box-shadow: var(--shadow-sm);
padding: var(--s4);
transition: box-shadow var(--t-base), border-color var(--t-base);
}
.req-card:hover {
box-shadow: var(--shadow-md);
border-color: rgba(138, 58, 142, 0.22);
}
.req-card-icon {
flex-shrink: 0;
line-height: 0;
margin-top: 2px;
}
.req-card-title {
font-weight: 700;
font-size: 0.9375rem;
color: var(--c-text);
line-height: 1.4;
}
.req-card-desc {
font-size: 0.875rem;
color: var(--c-text-muted);
margin-top: 4px;
line-height: 1.5;
}
/* ---- Step cards (#obten-tu-credito, #cambia-tu-grupo) ---- */
.credito-step {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--s3);
padding: var(--s5) var(--s4);
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.10);
box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
.credito-step {
align-items: center;
text-align: center;
padding: var(--s6) var(--s4);
background: transparent;
border: none;
box-shadow: none;
position: relative;
z-index: 1;
}
}
.credito-step-num {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--c-purple);
color: #fff;
font-size: 1.0625rem;
font-weight: 800;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 4px 16px rgba(138, 58, 142, 0.30);
position: relative;
z-index: 1;
}
.cambio-step-num {
background: linear-gradient(135deg, #111827, #1e2d44);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
}
.credito-step h4 {
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.4;
}
.credito-step p {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.6;
}
/* ---- Documentation list ---- */
.credito-docs-label {
font-size: 0.8125rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--c-purple);
}
.credito-doc-list {
display: flex;
flex-direction: column;
gap: var(--s2);
list-style: none;
padding: 0;
}
.credito-doc-list li {
display: flex;
align-items: center;
gap: var(--s2);
font-size: 0.9375rem;
font-weight: 600;
color: var(--c-text);
padding: 10px 14px;
background: #fff;
border-radius: var(--r-lg);
border: 1px solid rgba(138, 58, 142, 0.10);
}
.credito-doc-list li::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-lime);
flex-shrink: 0;
}
/* ---- Benefit highlight card (green) ---- */
.credito-benefit-card {
background: linear-gradient(135deg, var(--c-lime-dark), var(--c-lime));
border-radius: var(--r-xl);
padding: var(--s5);
color: #fff;
box-shadow: 0 8px 28px rgba(149, 197, 0, 0.26);
}
.credito-benefit-label {
font-size: 1.0625rem;
font-weight: 800;
line-height: 1.3;
margin-bottom: var(--s3);
}
.credito-benefit-card ul {
list-style: none;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.credito-benefit-card li {
display: flex;
align-items: center;
gap: var(--s2);
font-size: 0.9375rem;
font-weight: 600;
}
.credito-benefit-card li::before {
content: '';
width: 18px;
height: 18px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
flex-shrink: 0;
}
/* ---- Microcopy blocks ---- */
.credito-microcopy {
font-size: 0.875rem;
color: var(--c-text-muted);
line-height: 1.65;
padding: var(--s3) var(--s4);
background: rgba(138, 58, 142, 0.05);
border-left: 3px solid var(--c-purple-light);
border-radius: 0 var(--r-md) var(--r-md) 0;
}
.cambio-microcopy {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.85);
font-style: italic;
max-width: 520px;
}
/* ---- Cambio benefit comparison cards ---- */
.cambio-ben-card {
display: flex;
flex-direction: column;
gap: var(--s2);
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.10);
box-shadow: var(--shadow-sm);
padding: var(--s5);
transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.cambio-ben-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
border-color: rgba(138, 58, 142, 0.22);
}
.cambio-ben-title {
font-size: 1rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.4;
}
.cambio-ben-card p:not(.cambio-ben-title) {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.6;
}
/* ---- Overlay backdrop for drawer ---- */
.nav-backdrop {
position: fixed;
inset: 0;
background: rgba(0,0,0,.4);
z-index: 940;
opacity: 0;
pointer-events: none;
transition: opacity var(--t-slow);
}
.nav-backdrop.is-open {
opacity: 1;
pointer-events: auto;
}
/* ============================================================
HowItWorksJourneyStepper
============================================================ */
.journey-section {
background: var(--c-white);
}
/* ---- Outer container — relative anchor for track ---- */
.journey-stepper {
position: relative;
margin-top: var(--s8);
}
/* ---- Connector track ---- */
.journey-track-wrap {
/* Desktop: horizontal strip connecting icon centers */
position: absolute;
top: 40px; /* vertical center of the 80px icon circles */
left: 12.5%; /* horizontal center of the first column (25% / 2) */
right: 12.5%; /* horizontal center of the last column */
height: 3px;
z-index: 1;
border-radius: 999px;
overflow: hidden;
}
.journey-track-bg {
position: absolute;
inset: 0;
background: rgba(138, 58, 142, 0.1);
border-radius: 999px;
}
.journey-track-fill {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 0%;
background: linear-gradient(to right, #8a3a8e 0%, #95c500 100%);
border-radius: 999px;
transition: width 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.journey-stepper.is-active .journey-track-fill {
width: 100%;
}
/* ---- Steps grid (desktop: 4 columns, gap: 0 for exact track alignment) ---- */
.journey-steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
}
/* ---- Single step ---- */
.journey-step {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 var(--s2);
position: relative;
z-index: 2;
}
/* ---- Icon circle ---- */
.journey-icon-wrap {
position: relative;
width: 80px;
height: 80px;
background: var(--c-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-md);
margin-bottom: var(--s3);
flex-shrink: 0;
transition:
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.45s ease;
/* SVG color controlled via CSS color property */
color: rgba(138, 58, 142, 0.4);
}
.journey-step.is-active .journey-icon-wrap {
transform: scale(1.08);
box-shadow:
0 4px 28px rgba(138, 58, 142, 0.22),
0 0 0 7px rgba(138, 58, 142, 0.09);
color: var(--c-purple);
}
/* ---- Step number badge ---- */
.journey-step-num {
position: absolute;
top: -4px;
right: -4px;
width: 26px;
height: 26px;
background: rgba(138, 58, 142, 0.13);
color: rgba(138, 58, 142, 0.55);
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid var(--c-white);
transition:
background 0.35s ease,
color 0.35s ease,
transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.journey-step.is-active .journey-step-num {
background: var(--c-purple);
color: var(--c-white);
transform: scale(1.12);
}
/* ---- Sonar pulse rings — double-ring for premium fintech feel ---- */
@keyframes journey-pulse {
0% { transform: scale(1); opacity: 0.55; }
100% { transform: scale(2.5); opacity: 0; }
}
.journey-pulse-ring {
position: absolute;
inset: 0;
border-radius: 50%;
border: 2px solid rgba(138, 58, 142, 0.45);
opacity: 0;
pointer-events: none;
}
.journey-step.is-active .journey-pulse-ring-1 {
animation: journey-pulse 0.55s ease-out forwards;
}
.journey-step.is-active .journey-pulse-ring-2 {
animation: journey-pulse 0.55s ease-out 0.18s forwards;
}
/* ---- Step content — fade + slide-up on activation ---- */
.journey-content {
width: 100%;
}
.journey-step-title {
font-size: clamp(1rem, 1.5vw, 1.125rem);
font-weight: 700;
color: var(--c-text);
line-height: 1.4;
margin-bottom: var(--s1);
opacity: 0;
transform: translateY(12px);
transition:
opacity 0.5s ease,
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.journey-step-desc {
font-size: 0.875rem;
color: var(--c-text-muted);
line-height: 1.65;
opacity: 0;
transform: translateY(8px);
transition:
opacity 0.5s ease 0.1s,
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.journey-step.is-active .journey-step-title,
.journey-step.is-active .journey-step-desc {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
Mobile — vertical timeline (< 768px)
============================================================ */
@media (max-width: 767px) {
/* Track: vertical line on the left, exact position set via JS */
.journey-track-wrap {
left: 39px; /* icon center: icon starts at x=0, is 80px wide, center=40px, minus 1px = 39px */
top: 40px; /* JS overrides this precisely */
right: auto;
width: 3px;
height: calc(100% - 80px); /* JS overrides with exact measurement */
}
.journey-track-fill {
background: linear-gradient(to bottom, #8a3a8e 0%, #95c500 100%);
width: 100%;
height: 0%;
left: 0;
top: 0;
right: 0;
bottom: auto;
transition: height 2.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.journey-stepper.is-active .journey-track-fill {
height: 100%;
}
.journey-steps {
grid-template-columns: 1fr;
gap: var(--s5);
}
.journey-step {
flex-direction: row;
text-align: left;
align-items: flex-start;
gap: var(--s3);
padding: 0;
}
.journey-icon-wrap {
margin-bottom: 0;
}
.journey-content {
padding-top: 10px;
}
.journey-step-title {
margin-bottom: 6px;
}
}
/* ---- Tablet (640–767px): shrink icon slightly if needed ---- */
@media (max-width: 639px) {
.journey-icon-wrap {
width: 68px;
height: 68px;
}
.journey-track-wrap {
left: 33px; /* center of 68px icon */
}
}
/* ============================================================
3-step variant (e.g. traslado-credito-grupal)
============================================================ */
#traslado-stepper .journey-steps {
grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 768px) {
#traslado-stepper .journey-track-wrap {
/* Center of first/last of 3 columns: 100/(3*2) ≈ 16.67% */
left: calc(100% / 6);
right: calc(100% / 6);
}
}
/* ============================================================
Reduced motion overrides
============================================================ */
@media (prefers-reduced-motion: reduce) {
.journey-track-fill {
transition-duration: 0.001ms;
}
.journey-step-title,
.journey-step-desc {
transition: none;
opacity: 1;
transform: none;
}
.journey-icon-wrap,
.journey-step-num {
transition: none;
}
.journey-pulse-ring-1,
.journey-pulse-ring-2 {
display: none;
}
}
/* ============================================================
Crédito Grupal — page components
(.cg-* classes used only in credito-grupal.html)
============================================================ */
.cg-action-card {
display: flex;
flex-direction: column;
gap: var(--s3);
background: #fff;
border-radius: var(--r-xl);
border: 1px solid rgba(138, 58, 142, 0.10);
box-shadow: var(--shadow-md);
padding: clamp(28px, 4vw, 44px);
}
.cg-action-card--accent {
border-left: 4px solid var(--c-lime);
}
.cg-action-card p {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
flex: 1;
}
.cg-legal {
font-size: 0.8rem;
font-style: italic;
color: rgba(255, 255, 255, 0.52);
margin-top: var(--s1);
}
.cg-tag {
display: inline-block;
background: var(--c-lime);
color: #fff;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: .10em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--r-full);
align-self: flex-start;
}
/* ============================================================
Split nav item — label link beside caret-only button
Used for top-level nav items that are also page links
============================================================ */
.nav-item--split {
display: inline-flex;
align-items: center;
}
.nav-label {
font-weight: 600;
font-size: 0.9375rem;
color: var(--c-text);
padding: 4px 0;
border-bottom: 2px solid transparent;
transition: color var(--t-base), border-color var(--t-base);
line-height: 1;
white-space: nowrap;
}
.nav-label:hover,
.nav-item.is-open .nav-label {
color: var(--c-purple);
border-bottom-color: var(--c-lime);
}
.nav-item--split .nav-trigger {
padding-left: 2px;
}
/* ============================================================
Beneficios page — component classes
============================================================ */
/* ---- Benefit cards (internal page, distinct from Home .benef-card) ---- */
.benef-main-card {
background: #fff;
border: 1px solid rgba(138,58,142,0.10);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
padding: clamp(24px, 3.5vw, 40px);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.benef-main-icon {
display: flex;
align-items: center;
justify-content: center;
width: 52px;
height: 52px;
border-radius: var(--r-lg);
background: rgba(138,58,142,0.08);
color: var(--c-purple);
flex-shrink: 0;
}
.benef-main-title {
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.4;
}
.benef-main-desc {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
}
/* ---- Semana 16 ---- */
.semana16-copy {
display: flex;
flex-direction: column;
}
.semana16-visual {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s2);
}
.semana16-number {
font-size: clamp(5rem, 14vw, 9rem);
font-weight: 700;
color: var(--c-lime);
line-height: 1;
letter-spacing: -0.03em;
}
.semana16-number-label {
font-size: 1.25rem;
font-weight: 600;
color: rgba(255,255,255,0.80);
text-transform: lowercase;
letter-spacing: 0.05em;
margin-top: -0.5rem;
}
.semana16-bullets {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.semana16-bullets li {
display: flex;
align-items: center;
gap: var(--s2);
color: rgba(255,255,255,0.92);
font-size: 0.9375rem;
}
.semana16-bullets li::before {
content: '';
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-lime);
flex-shrink: 0;
}
.semana16-micro {
font-size: 0.8125rem;
color: rgba(255,255,255,0.55);
font-style: italic;
margin-top: var(--s3);
}
/* ---- Talleres ---- */
.taller-bullet-card {
background: #fff;
border-left: 4px solid var(--c-lime);
border-radius: 0 var(--r-lg) var(--r-lg) 0;
padding: var(--s3) var(--s4);
box-shadow: var(--shadow-sm);
}
.taller-bullet-card-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-purple);
margin-bottom: var(--s1);
}
.taller-bullet-card-desc {
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.6;
}
.talleres-micro {
font-size: 0.8125rem;
color: var(--c-text-muted);
font-style: italic;
margin-top: var(--s4);
}
/* ---- Tutorial cards ---- */
.tutorial-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(138,58,142,0.10);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.tutorial-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.tutorial-thumb {
background: rgba(138,58,142,0.08);
display: flex;
align-items: center;
justify-content: center;
height: 120px;
color: var(--c-purple);
}
.tutorial-body {
padding: var(--s3) var(--s4);
display: flex;
flex-direction: column;
gap: var(--s1);
flex: 1;
}
.tutorial-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.4;
}
.tutorial-desc {
font-size: 0.875rem;
color: var(--c-text-muted);
line-height: 1.6;
flex: 1;
}
.tutorial-link {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-purple);
letter-spacing: 0.02em;
margin-top: var(--s2);
}
/* ---- App feature cards ---- */
.app-feature-card {
display: flex;
align-items: flex-start;
gap: var(--s3);
background: #fff;
border-radius: var(--r-lg);
padding: var(--s3) var(--s4);
box-shadow: var(--shadow-sm);
border: 1px solid rgba(138,58,142,0.08);
}
.app-feature-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--r-md);
background: rgba(138,58,142,0.08);
color: var(--c-purple);
flex-shrink: 0;
}
.app-feature-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-text);
margin-bottom: var(--s1);
}
.app-feature-desc {
font-size: 0.875rem;
color: var(--c-text-muted);
line-height: 1.6;
}
.app-micro {
font-size: 0.8125rem;
color: var(--c-text-muted);
font-style: italic;
margin-top: var(--s4);
}
/* ---- Convenio cards (always expanded with media) ---- */
.convenio-card {
background: #fff;
border: 1px solid rgba(138,58,142,0.12);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
display: flex;
flex-direction: column;
}
.convenio-media {
margin: 0;
width: 100%;
aspect-ratio: 16 / 9;
overflow: hidden;
background: rgba(138,58,142,0.06);
}
.convenio-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 600ms var(--ease-out, ease);
}
.convenio-card:hover .convenio-media img {
transform: scale(1.04);
}
.convenio-head {
padding: var(--s4) var(--s5) var(--s2);
}
.convenio-title {
margin: 0;
font-weight: 700;
font-size: 1.0625rem;
color: var(--c-purple);
line-height: 1.25;
}
.convenio-body {
padding: 0 var(--s5) var(--s5);
display: flex;
flex-direction: column;
flex: 1;
}
.convenio-list {
list-style: none;
padding: var(--s3) 0 var(--s4);
margin: 0;
display: flex;
flex-direction: column;
gap: var(--s2);
}
.convenio-list li {
display: flex;
align-items: flex-start;
gap: var(--s2);
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.5;
}
.convenio-list li::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-lime);
flex-shrink: 0;
margin-top: 0.35em;
}
.convenios-micro {
font-size: 0.8125rem;
color: var(--c-text-muted);
font-style: italic;
text-align: center;
margin-top: var(--s5);
max-width: 600px;
margin-inline: auto;
}
/* =============================================
Clientas page — video testimonial cards
============================================= */
.cl-video-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(138, 58, 142, 0.10);
border-radius: var(--r-xl);
box-shadow: var(--shadow-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cl-video-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.cl-video-card-thumb {
background: rgba(149, 197, 0, 0.08);
border-bottom: 2px solid rgba(149, 197, 0, 0.25);
display: flex;
align-items: center;
justify-content: center;
height: 140px;
color: var(--c-lime);
}
.cl-video-card-body {
padding: var(--s3) var(--s4);
display: flex;
flex-direction: column;
gap: var(--s2);
flex: 1;
}
.cl-video-card-name {
font-weight: 700;
font-size: 0.9375rem;
color: var(--c-purple);
}
.cl-video-card-quote {
font-size: 0.875rem;
color: var(--c-text-muted);
line-height: 1.6;
flex: 1;
font-style: italic;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cl-video-card-link {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-purple);
letter-spacing: 0.02em;
margin-top: var(--s2);
}
/* =============================================
Conócenos page components
============================================= */
/* Historia narrative cards */
.hist-narrative-card {
background: var(--c-white);
border-radius: var(--r-xl);
border-left: 4px solid var(--c-lime);
padding: var(--s4);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.hist-card-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--c-lime);
color: var(--c-white);
font-size: 0.75rem;
font-weight: 700;
flex-shrink: 0;
}
.hist-card-title {
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.35;
}
.hist-card-body {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
flex: 1;
}
.hist-card-cta {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-purple);
text-decoration: none;
letter-spacing: 0.02em;
margin-top: var(--s1);
}
.hist-card-cta:hover { color: var(--c-lime); }
/* Cultura: value cards */
.cult-value-card {
background: var(--c-white);
border-radius: var(--r-xl);
border-top: 3px solid var(--c-lime);
padding: var(--s4);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.cult-value-num {
font-size: 0.75rem;
font-weight: 700;
color: var(--c-lime);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.cult-value-title {
font-size: 1rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.4;
}
.cult-value-body {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
}
/* Cultura: La vida en la tribu */
.cult-vida-section {
background: linear-gradient(135deg, #4a1d5c 0%, #8a3a8e 55%, #6b2a72 100%);
padding: clamp(64px, 8vw, 108px) 0;
}
/* Stat highlights — limitado a .cult-vida-section para no pisar
los stats del banner morado (.stats-band) que requieren texto blanco */
.cult-vida-section .stat-row {
display: flex;
flex-wrap: wrap;
gap: var(--s5);
margin-top: var(--s4);
}
.cult-vida-section .stat-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.cult-vida-section .stat-number {
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 800;
color: var(--c-lime);
line-height: 1;
}
.cult-vida-section .stat-label {
font-size: 0.875rem;
color: rgba(255,255,255,0.92);
line-height: 1.4;
}
/* Testimonial pull-quote */
.testi-quote-card {
background: var(--c-white);
border-radius: var(--r-xl);
border-left: 4px solid var(--c-lime);
padding: var(--s4) var(--s5);
box-shadow: var(--shadow-md);
margin-top: var(--s5);
}
.testi-quote-body {
font-size: 1rem;
color: var(--c-text-muted);
line-height: 1.7;
font-style: italic;
margin-bottom: var(--s2);
}
.testi-quote-attr {
font-size: 0.875rem;
font-weight: 700;
color: var(--c-purple);
}
/* Executive profile cards */
.dir-card {
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s4);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.dir-card-photo {
min-height: 180px;
border-radius: var(--r-lg);
}
.dir-card-name {
font-size: 1.0625rem;
font-weight: 800;
color: var(--c-purple);
line-height: 1.3;
margin-bottom: 2px;
}
.dir-card-role {
font-size: 0.75rem;
font-weight: 700;
color: var(--c-lime);
letter-spacing: 0.08em;
text-transform: uppercase;
}
.dir-card-quote {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.6;
font-style: italic;
}
.dir-details {
border-top: 1px solid rgba(138, 58, 142, 0.10);
padding-top: var(--s2);
margin-top: auto;
}
.dir-details > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
gap: var(--s1);
font-size: 0.875rem;
font-weight: 700;
color: var(--c-purple);
user-select: none;
}
.dir-details > summary::-webkit-details-marker { display: none; }
.dir-details > summary::after {
content: '▾';
font-size: 0.75rem;
transition: transform 0.2s;
}
.dir-details[open] > summary::after { transform: rotate(180deg); }
.dir-details-body {
padding-top: var(--s2);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.dir-details-label {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--c-text-muted);
margin-bottom: 2px;
}
.dir-details-text {
font-size: 0.9rem;
color: var(--c-text-muted);
line-height: 1.65;
}
/* Vacantes corporate cards */
.vac-corp-card {
background: var(--c-white);
border-radius: var(--r-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.vac-corp-card > summary {
list-style: none;
cursor: pointer;
padding: var(--s3) var(--s4);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s2);
user-select: none;
}
.vac-corp-card > summary::-webkit-details-marker { display: none; }
.vac-corp-card > summary::after {
content: '▾';
font-size: 0.75rem;
color: var(--c-purple);
flex-shrink: 0;
margin-top: 2px;
transition: transform 0.2s;
}
.vac-corp-card[open] > summary::after { transform: rotate(180deg); }
.vac-corp-card-header {
display: flex;
flex-direction: column;
gap: 4px;
}
.vac-corp-title {
font-size: 0.9375rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.35;
}
.vac-corp-dept {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: var(--c-white);
background: var(--c-lime);
padding: 2px 10px;
border-radius: var(--r-full);
letter-spacing: 0.04em;
width: fit-content;
}
.vac-corp-body {
padding: 0 var(--s4) var(--s4);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.vac-corp-desc {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.65;
}
/* Vacantes operativas */
.vac-op-card {
background: var(--c-white);
border-radius: var(--r-xl);
border-top: 3px solid var(--c-lime);
padding: var(--s5);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.vac-op-title {
font-size: 1.125rem;
font-weight: 800;
color: var(--c-purple);
}
.vac-req-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.vac-req-list li {
display: flex;
gap: var(--s1);
align-items: flex-start;
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.5;
}
.vac-req-list li::before {
content: '';
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-lime);
flex-shrink: 0;
margin-top: 0.4em;
}
.vac-zones-block {
background: #f5fbee;
border-radius: var(--r-lg);
padding: var(--s3) var(--s4);
margin-top: var(--s3);
}
.vac-zones-label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-lime);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--s1);
}
.vac-zones-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
list-style: none;
padding: 0;
margin: 0;
}
.vac-zones-list li {
background: var(--c-white);
border: 1px solid rgba(149, 197, 0, 0.30);
border-radius: var(--r-full);
padding: 4px 12px;
font-size: 0.8125rem;
color: var(--c-text-muted);
}
/* Vacantes sub-section header */
.vac-group {
margin-top: var(--s8);
}
.vac-group:first-child { margin-top: 0; }
.vac-group-title {
font-size: 1.25rem;
font-weight: 800;
color: var(--c-purple);
padding-bottom: var(--s2);
border-bottom: 2px solid rgba(149, 197, 0, 0.35);
margin-bottom: var(--s4);
}
/* =============================================
Atención a Clientes page components
============================================= */
/* Contact channel cards */
.ac-contact-card {
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s4);
box-shadow: var(--shadow-md);
display: flex;
flex-direction: column;
gap: var(--s2);
border: 1px solid rgba(138, 58, 142, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ac-contact-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.ac-contact-card-icon {
width: 48px;
height: 48px;
border-radius: var(--r-md);
background: rgba(138, 58, 142, 0.07);
display: flex;
align-items: center;
justify-content: center;
color: var(--c-purple);
flex-shrink: 0;
}
.ac-contact-card-sub {
font-size: 0.75rem;
font-weight: 700;
color: var(--c-lime);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ac-contact-card-title {
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-purple);
line-height: 1.3;
}
.ac-contact-card-desc {
font-size: 0.9375rem;
color: var(--c-text-muted);
line-height: 1.6;
flex: 1;
}
/* Schedule card */
.ac-schedule-card {
background: #f5fbee;
border-left: 3px solid var(--c-lime);
border-radius: var(--r-lg);
padding: var(--s3) var(--s4);
display: flex;
align-items: center;
gap: var(--s3);
margin-top: var(--s4);
flex-wrap: wrap;
}
.ac-schedule-label {
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-lime);
text-transform: uppercase;
letter-spacing: 0.08em;
flex-shrink: 0;
}
.ac-schedule-text {
font-size: 0.9375rem;
color: var(--c-text-muted);
}
/* Alert / POP notice */
.ac-alert-block {
background: rgba(255, 193, 7, 0.08);
border-left: 3px solid #f59e0b;
border-radius: var(--r-lg);
padding: var(--s3) var(--s4);
margin-top: var(--s4);
display: flex;
gap: var(--s2);
align-items: flex-start;
}
.ac-alert-icon {
flex-shrink: 0;
color: #d97706;
margin-top: 2px;
}
.ac-alert-text {
font-size: 0.9375rem;
color: var(--c-text);
line-height: 1.6;
}
.ac-alert-text strong {
font-weight: 700;
color: #d97706;
}
/* FAQ topic group */
.faq-group {
margin-bottom: var(--s6);
}
.faq-group:last-child { margin-bottom: 0; }
.faq-group-label {
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
color: var(--c-white);
background: var(--c-lime);
padding: 3px 12px;
border-radius: var(--r-full);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: var(--s3);
}
/* ============================================================
Sucursales — component styles
(.suc-* used only in sucursales.html)
============================================================ */
.suc-hours-band {
background: rgba(149, 197, 0, 0.07);
border-top: 1px solid rgba(149, 197, 0, 0.25);
border-bottom: 1px solid rgba(149, 197, 0, 0.25);
padding: var(--s3) 0;
}
.suc-hours-inner {
display: flex;
align-items: center;
justify-content: center;
gap: var(--s2);
flex-wrap: wrap;
text-align: center;
}
.suc-hours-icon {
color: var(--c-purple);
flex-shrink: 0;
display: flex;
}
.suc-hours-text {
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
color: var(--c-text);
margin: 0;
}
.suc-zone-group {
margin-top: var(--s8);
}
.suc-zone-title {
font-family: inherit;
font-size: 0.8125rem;
font-weight: 700;
color: var(--c-purple);
text-transform: uppercase;
letter-spacing: 0.09em;
padding-left: 12px;
border-left: 3px solid var(--c-lime);
margin: 0;
line-height: 1.4;
}
.suc-branch-card {
background: var(--c-white);
border-radius: var(--r-xl);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.05);
padding: var(--s4);
display: flex;
flex-direction: column;
gap: var(--s2);
transition: box-shadow 220ms ease, transform 220ms ease;
}
.suc-branch-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
.suc-branch-name {
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--c-purple);
margin: 0;
}
.suc-branch-address {
font-family: inherit;
font-size: 0.875rem;
line-height: 1.65;
color: var(--c-text-muted);
margin: 0;
flex-grow: 1;
}
.suc-branch-cta {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 0.8125rem;
font-weight: 600;
color: var(--c-purple);
text-decoration: none;
margin-top: var(--s1);
transition: gap 150ms ease, color 150ms ease;
}
.suc-branch-cta:hover {
gap: 8px;
color: var(--c-lime-dark);
}
.suc-branch-cta svg {
flex-shrink: 0;
}
/* ============================================================
Blog — component styles
(.blog-* used only in blog.html)
============================================================ */
/* ---- Article index cards ---- */
.blog-index-card {
display: flex;
flex-direction: column;
gap: var(--s2);
background: var(--c-white);
border-radius: var(--r-xl);
border-top: 3px solid var(--c-lime);
padding: var(--s4);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
text-decoration: none;
transition: box-shadow 220ms ease, transform 220ms ease;
}
.blog-index-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
transform: translateY(-2px);
}
.blog-index-card__num {
font-family: inherit;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--c-lime-dark);
}
.blog-index-card__title {
font-family: inherit;
font-size: 1rem;
font-weight: 700;
color: var(--c-text);
line-height: 1.45;
margin: 0;
flex-grow: 1;
}
.blog-index-card__link {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
color: var(--c-purple);
margin-top: var(--s2);
transition: gap 150ms ease;
}
.blog-index-card:hover .blog-index-card__link {
gap: 8px;
}
/* ---- Article header ---- */
.blog-article-header {
margin-bottom: var(--s4);
}
.blog-article-header .badge {
margin-bottom: var(--s2);
}
/* ---- Article body ---- */
.blog-article-body {
display: flex;
flex-direction: column;
gap: var(--s3);
margin-top: var(--s4);
margin-bottom: var(--s4);
}
/* ---- Steps ---- */
.blog-steps {
display: flex;
flex-direction: column;
gap: var(--s5);
margin-top: var(--s5);
margin-bottom: var(--s5);
}
.blog-step-block {
display: grid;
grid-template-columns: 40px 1fr;
gap: var(--s3);
align-items: start;
}
.blog-step-num {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--c-lime);
color: var(--c-white);
font-family: inherit;
font-size: 1rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.blog-step-content {
display: flex;
flex-direction: column;
gap: var(--s2);
}
.blog-step-title {
font-family: inherit;
font-size: 1.0625rem;
font-weight: 700;
color: var(--c-text);
margin: 0;
}
.blog-step-body {
font-family: inherit;
font-size: 1rem;
line-height: 1.7;
color: var(--c-text-muted);
margin: 0;
}
/* ---- Tip callout ---- */
.blog-tip {
font-family: inherit;
font-size: 0.9375rem;
font-weight: 600;
color: var(--c-text);
line-height: 1.6;
padding: 10px 16px;
border-left: 3px solid var(--c-lime);
background: rgba(149, 197, 0, 0.07);
border-radius: 0 var(--r-md) var(--r-md) 0;
margin: 0;
}
/* ---- List inside steps ---- */
.blog-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.blog-list li {
font-family: inherit;
font-size: 1rem;
line-height: 1.65;
color: var(--c-text-muted);
}
/* ---- Article CTA callout ---- */
.blog-cta-callout {
background: rgba(149, 197, 0, 0.08);
border: 1px solid rgba(149, 197, 0, 0.25);
border-left: 4px solid var(--c-lime);
border-radius: var(--r-lg);
padding: var(--s4);
display: flex;
flex-direction: column;
gap: var(--s3);
margin-top: var(--s6);
margin-bottom: var(--s4);
}
.blog-cta-callout__text {
font-family: inherit;
font-size: 1rem;
line-height: 1.7;
color: var(--c-text);
margin: 0;
}
/* ---- Source link ---- */
.blog-source {
font-family: inherit;
font-size: 0.875rem;
line-height: 1.65;
color: var(--c-text-muted);
margin-top: var(--s4);
padding-top: var(--s4);
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.blog-source a {
color: var(--c-purple);
word-break: break-all;
}
.blog-source a:hover {
color: var(--c-lime-dark);
}
.blog-source__label {
font-weight: 700;
color: var(--c-text);
display: block;
margin-bottom: 4px;
}
/* ============================================================
LEAD FORM — alterno a WhatsApp (mobile-first NSE D/D+)
============================================================ */
.lead-form-section {
padding: var(--s10) 0 var(--s12);
background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-white) 100%);
}
.lead-form-wrap {
display: grid;
grid-template-columns: 1fr;
gap: var(--s6);
align-items: start;
max-width: 1080px;
margin: 0 auto;
}
@media (min-width: 900px) {
.lead-form-wrap { grid-template-columns: 1fr 1fr; gap: var(--s10); align-items: center; }
}
.lead-form-copy h2 { margin-top: var(--s2); margin-bottom: var(--s3); }
.lead-form-copy p { color: var(--c-text-muted); margin-bottom: var(--s4); }
.lead-form-trust {
display: flex;
flex-direction: column;
gap: var(--s2);
padding: 0;
margin: 0;
}
.lead-form-trust li {
position: relative;
padding-left: 28px;
font-weight: 600;
color: var(--c-text);
font-size: 1rem;
line-height: 1.5;
}
.lead-form-trust li::before {
content: "";
position: absolute;
left: 0; top: 4px;
width: 18px; height: 18px;
border-radius: 50%;
background: var(--c-lime);
background-image: url("data:image/svg+xml;utf8,");
background-size: 12px 12px;
background-position: center;
background-repeat: no-repeat;
}
.lead-form {
position: relative;
background: var(--c-white);
border: 1px solid rgba(0,0,0,0.06);
border-radius: var(--r-xl);
padding: var(--s5);
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
gap: var(--s3);
}
.lead-form-field { display: flex; flex-direction: column; gap: 6px; }
.lead-form-field label {
font-weight: 700;
font-size: 0.95rem;
color: var(--c-text);
}
.lead-form-field input,
.lead-form-field select {
font-family: inherit;
font-size: 1rem; /* >=16px para evitar zoom en iOS */
padding: 14px 16px;
border: 2px solid rgba(0,0,0,0.10);
border-radius: var(--r-md);
background: var(--c-white);
color: var(--c-text);
min-height: 48px; /* área táctil mínima */
transition: border-color var(--t-fast), box-shadow var(--t-fast);
width: 100%;
}
.lead-form-field input:focus,
.lead-form-field select:focus {
outline: none;
border-color: var(--c-purple);
box-shadow: 0 0 0 3px rgba(138,58,142,0.18);
}
.lead-form-field input:invalid:not(:placeholder-shown) {
border-color: #d92d20;
}
.lead-form-submit {
margin-top: var(--s2);
width: 100%;
}
.lead-form-legal {
font-size: 0.8rem;
color: var(--c-text-muted);
text-align: center;
margin: 0;
}
.lead-form-legal a {
color: var(--c-purple);
text-decoration: underline;
font-weight: 600;
}
.lead-form-divider {
position: relative;
text-align: center;
margin: var(--s2) 0;
}
.lead-form-divider::before {
content: "";
position: absolute;
top: 50%; left: 0; right: 0;
height: 1px;
background: rgba(0,0,0,0.10);
}
.lead-form-divider span {
position: relative;
background: var(--c-white);
padding: 0 12px;
font-size: 0.85rem;
color: var(--c-text-muted);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lead-form-wa { width: 100%; }
/* ============================================================
Lead form — bloque de agenda (día + horario)
============================================================ */
.lead-form-schedule {
border: 1px solid rgba(138, 58, 142, 0.18);
border-radius: var(--r-md);
padding: var(--s3);
display: flex;
flex-direction: column;
gap: var(--s2);
background: rgba(138, 58, 142, 0.04);
}
.lead-form-schedule legend {
font-weight: 700;
font-size: 0.95rem;
color: var(--c-purple);
padding: 0 6px;
margin-left: -6px;
}
.lead-form-schedule .lead-form-field { margin: 0; }
@media (min-width: 480px) {
.lead-form-schedule {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s2) var(--s3);
}
.lead-form-schedule legend { grid-column: 1 / -1; }
}
/* ============================================================
BRANCH FINDER — selector de alcaldía + datos de sucursal
============================================================ */
.branch-finder {
max-width: 560px;
margin: 0 auto;
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s4);
box-shadow: 0 4px 20px rgba(138,58,142,0.10);
border: 1px solid rgba(0,0,0,0.06);
}
.branch-finder-label {
display: block;
font-weight: 700;
font-size: 0.95rem;
color: var(--c-text);
margin-bottom: var(--s2);
}
.branch-finder-select-wrap {
position: relative;
}
.branch-finder-select {
width: 100%;
font-family: inherit;
font-size: 1rem;
padding: 14px 44px 14px 16px;
border: 2px solid rgba(0,0,0,0.10);
border-radius: var(--r-md);
background: var(--c-white);
color: var(--c-text);
min-height: 48px;
appearance: none;
-webkit-appearance: none;
cursor: pointer;
transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.branch-finder-select:focus {
outline: none;
border-color: var(--c-purple);
box-shadow: 0 0 0 3px rgba(138,58,142,0.18);
}
.branch-finder-chevron {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--c-purple);
pointer-events: none;
}
.branch-result {
margin-top: var(--s3);
padding: var(--s4);
background: var(--c-bg-soft);
border-left: 4px solid var(--c-lime);
border-radius: var(--r-md);
display: flex;
flex-direction: column;
gap: var(--s2);
}
.branch-result-icon {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--c-purple);
color: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.branch-result-info { display: flex; flex-direction: column; gap: 4px; }
.branch-result-name {
font-weight: 700;
font-size: 1.05rem;
color: var(--c-purple);
margin: 0;
}
.branch-result-address {
font-size: 0.9rem;
color: var(--c-text);
margin: 0;
line-height: 1.5;
}
.branch-result-hours {
font-size: 0.82rem;
color: var(--c-text-muted);
margin: 0;
}
.branch-result-actions {
display: flex;
flex-wrap: wrap;
gap: var(--s2);
margin-top: var(--s2);
}
.branch-result-actions .btn { flex: 1 1 auto; min-width: 0; }
.branch-result--empty {
text-align: center;
align-items: center;
}
.branch-result--empty p {
color: var(--c-text);
margin: 0;
}
@media (min-width: 600px) {
.branch-result {
display: grid;
grid-template-columns: 44px 1fr;
gap: var(--s3);
align-items: start;
}
.branch-result-actions {
grid-column: 1 / -1;
}
}
/* Honeypot oculto para Netlify Forms (atrapa bots, invisible para humanos) */
.lead-form-honeypot {
position: absolute !important;
left: -10000px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
/* ============================================================
TESTIMONIOS — cards reales con quote + autor + ciudad + ciclos
============================================================ */
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s4);
max-width: 600px;
margin: 0 auto;
}
@media (min-width: 900px) {
.testimonials-grid {
grid-template-columns: repeat(3, 1fr);
max-width: 100%;
gap: var(--s4);
}
}
.testimonial-card {
background: var(--c-white);
border-radius: var(--r-lg);
padding: 0 0 var(--s4);
box-shadow: 0 4px 16px rgba(138,58,142,0.10);
border: 1px solid rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
gap: var(--s3);
overflow: hidden;
}
/* Card content tras la imagen lleva su propio padding */
.testimonial-card > .testimonial-stars,
.testimonial-card > .testimonial-quote,
.testimonial-card > .testimonial-author {
padding-left: var(--s4);
padding-right: var(--s4);
}
/* Video / poster del testimonio — full width arriba del card */
.testimonial-video {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--c-bg-soft);
margin: 0;
}
.testimonial-video img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 25%;
transition: transform 0.4s ease;
}
.testimonial-video:hover img { transform: scale(1.04); }
.testimonial-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 56px;
height: 56px;
border-radius: 50%;
background: rgba(255,255,255,0.92);
color: var(--c-purple);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
pointer-events: none;
transition: transform 0.3s ease, background 0.3s ease;
}
.testimonial-video:hover .testimonial-play {
background: var(--c-lime);
color: var(--c-white);
transform: translate(-50%, -50%) scale(1.1);
}
.testimonial-play svg { margin-left: 3px; }
.testimonial-stars {
color: #f5b800;
font-size: 1.1rem;
letter-spacing: 2px;
line-height: 1;
}
.testimonial-quote {
font-size: 1rem;
line-height: 1.65;
color: var(--c-text);
margin: 0;
font-style: italic;
position: relative;
padding-left: 14px;
border-left: 3px solid var(--c-lime);
}
.testimonial-author {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
}
.testimonial-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--c-bg-soft);
border: 2px solid var(--c-bg-soft);
}
.testimonial-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.testimonial-name {
font-weight: 700;
font-size: 0.95rem;
color: var(--c-purple);
}
.testimonial-meta {
font-size: 0.82rem;
color: var(--c-text-muted);
line-height: 1.4;
}
/* ============================================================
REDUCE MOTION — gama baja, Save-Data, prefers-reduced-motion
Desactiva animaciones costosas (CountUp, fade-up, pulse rings,
text-revealer, transform en hover) para que el browser no gaste
CPU en gama baja Android.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.fade-up,
.community-reveal {
opacity: 1 !important;
transform: none !important;
}
.journey-pulse-ring-1,
.journey-pulse-ring-2,
.testimonial-play-ripple,
.text-revealer-particle {
display: none !important;
}
}
/* La clase .lite la añade el JS cuando detecta:
- navigator.connection.saveData === true
- navigator.connection.effectiveType === '2g' o 'slow-2g' o '3g'
- navigator.deviceMemory <= 2 GB
- navigator.hardwareConcurrency <= 4 cores */
html.lite *,
html.lite *::before,
html.lite *::after {
animation: none !important;
transition: none !important;
}
html.lite .fade-up,
html.lite .community-reveal {
opacity: 1 !important;
transform: none !important;
}
html.lite .journey-pulse-ring-1,
html.lite .journey-pulse-ring-2,
html.lite .testimonial-play-ripple,
html.lite .text-revealer-particle,
html.lite .text-revealer-particles {
display: none !important;
}
html.lite .stat-divider { height: 60% !important; transition: none !important; }
/* ============================================================
Visual placeholder slots — ocultar en mobile (sólo dev hint)
============================================================ */
/* En mobile el visual-slot vacío deja un hueco morado feo en el hero.
Mientras no haya imagen real, lo ocultamos en mobile y lo mostramos
como hint discreto solo en desktop. */
@media (max-width: 767px) {
.visual-slot,
.visual-slot--photo,
.visual-slot--illustration {
display: none !important;
}
}
@media (min-width: 768px) {
.visual-slot {
opacity: 0.4;
border: 2px dashed rgba(255,255,255,0.4);
}
}
/* ============================================================
Form submit — feedback visual mientras se envía
============================================================ */
.lead-form.is-submitting .lead-form-submit {
opacity: 0.7;
cursor: progress;
pointer-events: none;
}
.lead-form.is-submitting .lead-form-submit::after {
content: " enviando…";
font-weight: 400;
}
.lead-form-error {
display: none;
background: #fef2f2;
border-left: 4px solid #d92d20;
padding: 12px 14px;
border-radius: var(--r-md);
color: #b42318;
font-size: 0.9rem;
line-height: 1.5;
}
.lead-form.has-error .lead-form-error { display: block; }
/* ============================================================
Nav — fix botón "Iniciar solicitud" en viewports <360px
============================================================ */
@media (max-width: 380px) {
.site-nav .btn.btn-primary.btn-sm {
padding: 10px 14px;
font-size: 0.78rem;
}
.site-nav .btn.btn-primary.btn-sm svg {
width: 14px;
height: 14px;
}
.nav-logo img {
height: 60px !important;
}
}
/* ============================================================
FIX OVERFLOW VIEWPORTS MUY CHICOS (320px — gama bajísima)
============================================================ */
@media (max-width: 360px) {
:root { --gutter: 0.75rem; }
/* Reducir tipografía en pantallas estrechas para evitar wrap raro */
.t-body-lg { font-size: 1rem; line-height: 1.6; }
.t-display { font-size: clamp(1.7rem, 8vw, 2.2rem); }
/* Hero trust strip: padding compacto */
.hero-trust-strip {
font-size: 0.72rem;
padding: 8px 10px;
gap: 4px 10px;
}
/* Botones grandes con menos padding lateral */
.btn-lg { padding: 16px 20px; font-size: 1rem; }
.btn { padding: 12px 18px; }
/* Trust row badges: wrap libre */
.trust-row { gap: 6px; }
.badge { font-size: 0.78rem; padding: 6px 10px; }
/* Asegurar que cualquier párrafo con max-width respeta el viewport */
p { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; }
}
/* ============================================================
FIX OVERFLOW HORIZONTAL — wrap defensivo en mobile
Para que ningún botón/elemento empuje el viewport más allá del ancho disponible.
============================================================ */
@media (max-width: 767px) {
/* Permitir wrap natural en cualquier flex-container con CTAs lado a lado */
.cta-actions,
.hero-actions,
.testi-cta,
.cg-action-cards {
flex-wrap: wrap;
width: 100%;
}
/* Botones en mobile — full-width para evitar cortes */
.cta-actions .btn,
.hero-actions .btn {
width: 100%;
justify-content: center;
min-width: 0;
}
/* Si hay 2 botones consecutivos, mantener orden vertical natural */
.cta-actions > .btn + .btn,
.hero-actions > .btn + .btn {
margin-top: 0;
}
/* Texto largo de párrafos legales no debe forzar overflow */
.cg-legal,
.lead-form-legal,
.testi-microcopy {
word-wrap: break-word;
overflow-wrap: break-word;
max-width: 100%;
}
}
/* ============================================================
HERO TRUST STRIP — 16 años · +135k · CONDUSEF
============================================================ */
.hero-trust-strip {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 14px;
margin-top: var(--s3);
padding: 10px 14px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.22);
border-radius: var(--r-lg);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: rgba(255,255,255,0.95);
font-size: 0.85rem;
line-height: 1.3;
/* Sin width: max-content — el bloque se adapta al ancho disponible */
max-width: 100%;
width: auto;
}
@media (min-width: 480px) {
.hero-trust-strip { width: max-content; border-radius: var(--r-full); }
}
.hero-trust-item { white-space: nowrap; }
.hero-trust-item strong { color: var(--c-lime); font-weight: 700; }
.hero-trust-divider {
width: 4px; height: 4px;
border-radius: 50%;
background: rgba(255,255,255,0.5);
flex-shrink: 0;
}
@media (max-width: 480px) {
.hero-trust-strip { font-size: 0.78rem; padding: 8px 12px; }
}
/* ============================================================
THANKS PAGE — gracias.html
============================================================ */
.thanks-section {
padding: var(--s10) 0 var(--s12);
background: linear-gradient(180deg, var(--c-bg-soft) 0%, var(--c-white) 100%);
min-height: 70vh;
display: flex;
align-items: center;
}
.thanks-card {
max-width: 640px;
margin: 0 auto;
text-align: center;
background: var(--c-white);
border-radius: var(--r-xl);
padding: var(--s8) var(--s5);
box-shadow: var(--shadow-lg);
}
.thanks-icon {
width: 96px;
height: 96px;
margin: 0 auto var(--s4);
border-radius: 50%;
background: var(--c-lime);
color: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
animation: pop-in 0.5s ease-out;
}
@keyframes pop-in {
0% { transform: scale(0); opacity: 0; }
60% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.thanks-lead {
color: var(--c-text-muted);
margin-top: var(--s3);
margin-bottom: var(--s5);
}
.thanks-steps {
text-align: left;
background: var(--c-bg-soft);
border-radius: var(--r-md);
padding: var(--s4);
margin: 0 0 var(--s5);
list-style: none;
counter-reset: step-counter;
}
.thanks-steps li {
position: relative;
padding: var(--s2) 0 var(--s2) 44px;
counter-increment: step-counter;
font-size: 0.95rem;
line-height: 1.55;
}
.thanks-steps li + li {
border-top: 1px dashed rgba(0,0,0,0.08);
}
.thanks-steps li::before {
content: counter(step-counter);
position: absolute;
left: 0;
top: var(--s2);
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--c-purple);
color: var(--c-white);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
}
.thanks-actions {
display: flex;
flex-direction: column;
gap: var(--s2);
margin-bottom: var(--s4);
}
.thanks-trust {
font-size: 0.85rem;
color: var(--c-text-muted);
}
.thanks-trust a {
color: var(--c-purple);
text-decoration: underline;
font-weight: 600;
}
@media (min-width: 600px) {
.thanks-actions { flex-direction: row; justify-content: center; }
}
/* ============================================================
FOOTER LEGAL LINKS — touch target fix (WCAG 2.5.5)
============================================================ */
.footer-legal-links a {
display: inline-block;
padding: 8px 4px; /* asegura >24px de altura táctil */
min-height: 32px;
line-height: 1.2;
}
/* ============================================================
FAQ — / nativo
============================================================ */
.faq-item {
background: var(--c-white);
border-radius: var(--r-md);
margin-bottom: var(--s2);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: 0 1px 3px rgba(0,0,0,0.04);
overflow: hidden;
transition: box-shadow var(--t-base);
}
.faq-item[open] {
box-shadow: 0 4px 14px rgba(138,58,142,0.10);
}
.faq-summary {
list-style: none;
cursor: pointer;
padding: 18px 22px;
font-size: 1rem;
font-weight: 600;
color: var(--c-text);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--s3);
min-height: 48px;
transition: color var(--t-fast);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary::marker { content: ""; }
.faq-summary:hover { color: var(--c-purple); }
.faq-chevron {
width: 20px;
height: 20px;
color: var(--c-purple);
flex-shrink: 0;
transition: transform var(--t-base);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-body {
padding: 0 22px 18px;
color: var(--c-text-muted);
font-size: 0.95rem;
line-height: 1.7;
}
.faq-body p { margin: 0; }
/* ============================================================
FOOTER LEGAL — datos regulatorios NSE D/D+
============================================================ */
.footer-legal {
border-top: 1px solid rgba(255,255,255,0.12);
padding: var(--s5) 0 var(--s3);
margin-top: var(--s5);
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255,255,255,0.78);
}
.footer-legal-block {
margin: 0 0 var(--s2);
}
.footer-legal-block strong { color: var(--c-white); }
.footer-legal-block a {
color: var(--c-lime);
text-decoration: underline;
font-weight: 600;
}
.footer-legal-links {
display: flex;
flex-wrap: wrap;
gap: var(--s2) var(--s4);
margin-top: var(--s3);
padding: 0;
}
.footer-legal-links a {
color: rgba(255,255,255,0.85);
font-weight: 600;
font-size: 0.85rem;
}
.footer-legal-links a:hover { color: var(--c-lime); }
/* ============================================================
LEGAL PAGES — aviso-privacidad.html · terminos.html
============================================================ */
.legal-section {
padding: var(--s8) 0 var(--s10);
background: var(--c-white);
}
.legal-container { max-width: 820px; }
.legal-header {
margin-bottom: var(--s6);
padding-bottom: var(--s4);
border-bottom: 2px solid var(--c-bg-soft);
}
.legal-back {
display: inline-block;
font-weight: 600;
font-size: 0.95rem;
color: var(--c-purple);
margin-bottom: var(--s3);
transition: color var(--t-fast);
}
.legal-back:hover { color: var(--c-purple-dark); }
.legal-meta {
margin-top: var(--s2);
color: var(--c-text-muted);
font-size: 0.9rem;
}
.legal-article {
font-size: 1rem;
line-height: 1.75;
color: var(--c-text);
}
.legal-article p {
margin-bottom: var(--s3);
text-align: justify;
}
.legal-article h2 {
font-size: 1.35rem;
font-weight: 700;
color: var(--c-purple);
margin-top: var(--s6);
margin-bottom: var(--s2);
line-height: 1.35;
}
.legal-article a {
color: var(--c-purple);
text-decoration: underline;
font-weight: 600;
word-break: break-word;
}
.legal-article a:hover { color: var(--c-lime-dark); }
.legal-article strong { font-weight: 700; }
.legal-list {
margin: var(--s2) 0 var(--s4) var(--s4);
padding: 0;
}
.legal-list li {
position: relative;
padding-left: 18px;
margin-bottom: var(--s2);
list-style: none;
}
.legal-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.7em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--c-lime);
}
.legal-list--ordered {
counter-reset: legal-counter;
margin-left: var(--s5);
}
.legal-list--ordered li {
padding-left: 32px;
counter-increment: legal-counter;
}
.legal-list--ordered li::before {
content: counter(legal-counter, upper-roman) ".";
background: transparent;
width: auto;
height: auto;
top: 0;
font-weight: 700;
color: var(--c-purple);
font-size: 0.9em;
}
.legal-rule {
border: none;
border-top: 1px solid rgba(0, 0, 0, 0.1);
margin: var(--s6) 0 var(--s4);
}
.legal-signoff {
background: var(--c-bg-soft);
padding: var(--s4);
border-radius: var(--r-md);
font-size: 0.95rem;
line-height: 1.6;
color: var(--c-text);
border-left: 4px solid var(--c-purple);
}
@media (max-width: 600px) {
.legal-article p { text-align: left; }
.legal-list--ordered { margin-left: var(--s3); }
.legal-list--ordered li { padding-left: 26px; }
.legal-article h2 { font-size: 1.2rem; }
}