/* Layout blocks shared by several page types: sections, process steps, tables, help search,
guide cards, legal text and contact cards. Page-specific styles live in parts/*.css. */
/* ---- Sections ------------------------------------------------------------------------ */
.section {
padding-top: var(--space-16);
padding-bottom: var(--space-16);
}
.section-title-wrap {
text-align: center;
max-width: 720px;
margin-left: auto;
margin-right: auto;
margin-bottom: var(--space-12);
}
.section-eyebrow {
display: inline-block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
color: var(--color-teal-text);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--space-2);
}
/* ---- Process steps ------------------------------------------------------------------- */
.process-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 640px) {
.process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.process-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.process-card {
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
display: flex;
flex-direction: column;
box-shadow: var(--shadow-sm);
}
.process-step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-ink);
color: var(--color-teal-bright);
font-family: var(--font-family-display);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
.process-card-img {
width: 100%;
height: 140px;
object-fit: cover;
border-radius: var(--radius-md);
margin-bottom: var(--space-4);
}
/* ---- Tables -------------------------------------------------------------------------- */
/* ---- Help search --------------------------------------------------------------------- */
.help-search-input {
width: 100%;
min-height: 56px;
padding: var(--space-3) var(--space-5) var(--space-3) 52px;
font-size: var(--font-size-base);
border: 2px solid var(--color-border-strong);
border-radius: var(--radius-xl);
outline: none;
background-color: var(--color-paper);
color: var(--color-text-main);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.help-search-input:focus {
border-color: var(--color-teal-text);
box-shadow: 0 0 0 3px var(--color-cyan-tint);
}
.help-search-icon {
position: absolute;
left: var(--space-5);
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
color: var(--color-text-muted);
}
.help-results-container {
margin-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.help-result-card {
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
text-decoration: none;
display: block;
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.help-result-card:hover {
border-color: var(--color-teal-border);
box-shadow: var(--shadow-sm);
}
.help-result-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--color-ink);
margin-bottom: var(--space-1);
}
.help-result-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: 0;
}
/* ---- Guides -------------------------------------------------------------------------- */
.editorial-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 640px) {
.editorial-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
.editorial-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.guide-card {
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
box-shadow: var(--shadow-sm);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.guide-card:hover {
box-shadow: var(--shadow-lg);
border-color: var(--color-teal-border);
}
.guide-card-body {
padding: var(--space-5);
display: flex;
flex-direction: column;
flex: 1;
}
.guide-card-tag {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
color: var(--color-teal-text);
margin-bottom: var(--space-2);
}
.guide-card-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-ink);
margin-bottom: var(--space-2);
line-height: 1.3;
}
.guide-card-desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
flex: 1;
}
/* ---- Legal and information pages ----------------------------------------------------- */
.legal-content {
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
padding: var(--space-8);
margin-top: var(--space-6);
margin-bottom: var(--space-12);
box-shadow: var(--shadow-sm);
}
@media (min-width: 768px) {
.legal-content {
padding: var(--space-12);
}
}
.legal-content h2 {
margin-top: var(--space-8);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border-light);
}
.legal-content h3 {
margin-top: var(--space-6);
}
.legal-highlight-box {
background-color: var(--color-sand);
border: 1px solid var(--color-border-light);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
margin: var(--space-6) 0;
}
/* ---- Contact cards ------------------------------------------------------------------- */
.contact-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
margin: var(--space-8) 0;
}
@media (min-width: 768px) {
.contact-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.contact-card {
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
text-align: center;
box-shadow: var(--shadow-sm);
}
.contact-card.text-left { text-align: left; }
.contact-card-icon {
width: 48px;
height: 48px;
margin: 0 auto var(--space-4) auto;
color: var(--color-teal-border);
}
.contact-card-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-bold);
color: var(--color-ink);
margin-bottom: var(--space-2);
}
.contact-card-val {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-black);
color: var(--color-ink);
margin-bottom: var(--space-2);
display: block;
}
/* ==========================================================================
Brand overrides: header, navigation, buttons, footer, arc device
========================================================================== */
/* ---- Header ------------------------------------------------------------ */
.site-header {
background-color: var(--color-ink);
border-bottom: 1px solid var(--color-border-dark);
box-shadow: none;
}
.brand-logo-img,
.site-header .brand-link img {
height: var(--logo-height);
width: auto;
}
@media (max-width: 379px) {
:root { --logo-height: 34px; }
}
.nav-link {
color: var(--color-on-dark);
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
color: var(--color-teal-bright);
}
.nav-link[aria-current="page"]::after {
height: 2px;
border-radius: 0;
background-color: var(--color-teal-bright);
}
.btn-mobile-menu {
border-color: var(--color-border-dark);
}
.btn-mobile-menu:hover {
border-color: var(--color-on-dark-2);
}
/* ---- Mobile drawer ------------------------------------------------------- */
.mobile-drawer {
background-color: var(--color-ink);
box-shadow: none;
border-left: 1px solid var(--color-border-dark);
}
.drawer-header .brand-link img {
height: 34px;
width: auto;
}
.drawer-backdrop {
background: rgba(12, 27, 51, 0.72);
}
.drawer-nav-link {
font-family: var(--font-family-display);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
}
.drawer-nav-link:hover,
.drawer-nav-link:focus-visible {
color: var(--color-teal-bright);
}
.drawer-phone,
.drawer-phone a {
color: var(--color-on-dark-2);
}
/* ---- Buttons: flat fills --------------------------------------------------- */
.btn {
font-family: var(--font-family-sans);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
border-radius: var(--radius-md);
transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.btn-primary {
background: var(--color-teal-bright);
color: var(--color-ink);
border-color: var(--color-teal-bright);
box-shadow: none;
}
.btn-primary:hover {
background: var(--color-teal-hover);
border-color: var(--color-teal-hover);
color: var(--color-ink);
box-shadow: none;
transform: none;
}
.btn-primary:active {
background: #1FAA93;
border-color: #1FAA93;
}
.btn:disabled,
.btn[aria-disabled="true"] {
background: #DCE1E7;
border-color: #DCE1E7;
color: var(--color-text-secondary);
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.btn-secondary {
background-color: transparent;
color: var(--color-on-dark);
border-color: var(--color-on-dark-2);
}
.btn-secondary:hover {
background-color: var(--color-ink-2);
color: var(--color-on-dark);
border-color: var(--color-on-dark);
}
.btn-outline {
border-width: 1.5px;
color: var(--color-ink);
border-color: var(--color-ink);
}
.btn-outline:hover {
background-color: var(--color-ink);
color: var(--color-on-dark);
}
.btn-plain {
background: var(--color-paper);
border-color: var(--color-border-strong);
color: var(--color-ink);
}
.btn-plain:hover {
background: var(--color-sand-2);
}
/* ---- Badges ---------------------------------------------------------------- */
.badge {
font-family: var(--font-family-sans);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.02em;
text-transform: none;
font-size: var(--font-size-sm);
padding: 3px 10px;
}
.badge-promo {
background-color: var(--color-teal-tint);
color: var(--color-teal-text);
border: 1px solid #A8E3D8;
}
/* ---- Cards, tables, numbers ------------------------------------------------ */
.calc-card {
box-shadow: var(--shadow-lg);
border-color: var(--color-border-light);
}
.calc-breakdown-row.total-row {
font-family: var(--font-family-display);
font-weight: var(--font-weight-semibold);
}
.data-table th {
background-color: var(--color-sand-2);
color: var(--color-ink);
font-weight: var(--font-weight-semibold);
}
.data-table tr:hover td {
background-color: var(--color-sand);
}
.process-step-num {
font-family: var(--font-family-display);
font-weight: var(--font-weight-bold);
background: var(--color-ink);
color: var(--color-teal-bright);
}
.help-search-input {
border-color: var(--color-border-strong);
box-shadow: none;
}
.help-search-input:focus {
border-color: var(--color-teal-text);
box-shadow: 0 0 0 3px var(--color-cyan-tint);
}
/* ---- Footer ---------------------------------------------------------------- */
.site-footer {
background-color: var(--color-ink);
color: var(--color-on-dark-2);
border-top: 0;
}
.footer-logo img {
height: 36px;
width: auto;
}
.footer-links a,
.footer-about,
.footer-contact,
.footer-contact a,
.footer-corporate,
.footer-example,
.footer-bottom a {
color: var(--color-on-dark-2);
}
.footer-links a:hover,
.footer-links a:focus-visible,
.footer-contact a:hover,
.footer-bottom a:hover {
color: var(--color-teal-bright);
}
.footer-corporate {
border-top-color: var(--color-border-dark);
}
/* ---- Brand accent: «arco del día» ------------------------------------------ */
/* Decorative; always aria-hidden. Colour follows currentColor.
*/
.brand-arc {
display: block;
width: 72px;
height: 15px;
margin-bottom: var(--space-3);
color: var(--color-teal-text);
background-color: currentColor;
-webkit-mask: url(/assets/brand/logo/arc.svg) left bottom / contain no-repeat;
mask: url(/assets/brand/logo/arc.svg) left bottom / contain no-repeat;
}
.brand-arc--center { margin-left: auto; margin-right: auto; -webkit-mask-position: center bottom; mask-position: center bottom; }
.section-dark .brand-arc,
.on-dark .brand-arc { color: var(--color-teal-bright); }
.brand-arc--club { color: var(--color-amber-text); }
.section-dark .brand-arc--club,
.on-dark .brand-arc--club { color: var(--color-amber); }
/* Eyebrows on light keep the teal text colour (4.7:1 on sand) */
.section-eyebrow {
letter-spacing: 0.06em;
}
/* ==========================================================================
Club MyLoan24 pages
========================================================================== */
.club-lead {
font-size: var(--font-size-md);
color: var(--color-text-main);
}
.club-center {
justify-content: center;
}
.club-nowrap {
white-space: nowrap;
}
/* Overview: first screen */
.club-hero {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
margin-bottom: var(--space-12);
}
.club-hero-text > * + * {
margin-top: var(--space-4);
}
.club-hero-art img {
display: block;
width: 100%;
max-width: 480px;
height: auto;
aspect-ratio: 4 / 3;
margin: 0 auto;
}
@media (min-width: 900px) {
.club-hero {
grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}
}
.club-block {
margin-bottom: var(--space-12);
}
.club-block > h2 {
margin-bottom: var(--space-4);
}
.club-block > p {
max-width: 72ch;
margin-bottom: var(--space-4);
}
/* Participation steps */
.club-steps {
list-style: none;
counter-reset: club-step;
display: grid;
gap: var(--space-4);
max-width: 72ch;
padding: 0;
}
.club-steps li {
counter-increment: club-step;
position: relative;
min-height: 1.75rem;
padding-left: 2.75rem;
color: var(--color-text-main);
}
.club-steps li::before {
content: counter(club-step);
position: absolute;
left: 0;
top: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--radius-full);
background: var(--color-ink);
color: var(--color-on-dark);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
line-height: 1.75rem;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Level cards */
.club-tiers {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
}
@media (min-width: 768px) {
.club-tiers {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.club-tier {
display: flex;
flex-direction: column;
gap: var(--space-3);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.club-tier--inicio { --club-tier-color: var(--color-text-muted); }
.club-tier--contigo { --club-tier-color: var(--color-teal-text); }
.club-tier--confianza { --club-tier-color: var(--color-amber-text); }
.club-tier-head {
display: flex;
align-items: center;
gap: var(--space-3);
}
.club-tier-head img {
flex-shrink: 0;
}
.club-tier-head h3 {
font-size: var(--font-size-xl);
}
.club-tier-kicker {
display: block;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
letter-spacing: 0;
}
.club-tier-rule,
.club-tier-example {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.club-tier-value {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--space-2);
color: var(--club-tier-color);
}
.club-tier-num {
font-family: var(--font-family-display);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
line-height: 1.1;
font-variant-numeric: tabular-nums;
}
.club-tier-unit {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.club-tier-limit {
display: flex;
gap: var(--space-2);
margin-top: auto;
padding-top: var(--space-3);
border-top: 1px solid var(--color-border-light);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.club-tier-limit .icon {
flex-shrink: 0;
margin-top: 0.15em;
}
/* What the programme does not include */
.club-no-list {
list-style: none;
padding: 0;
max-width: 72ch;
margin-bottom: var(--space-4);
}
.club-no-list li {
position: relative;
padding-left: 1.75rem;
margin-bottom: var(--space-3);
color: var(--color-text-secondary);
}
.club-no-list li::before {
content: "";
position: absolute;
left: 0.2rem;
top: 0.7em;
width: 0.9rem;
height: 2px;
background: var(--color-error);
}
.club-contacts {
margin: var(--space-6) 0 var(--space-4);
}
.club-cta {
padding: var(--space-8);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.club-cta > p {
margin-bottom: var(--space-2);
}
/* Tables: on phones every row becomes a block with labelled cells */
.club-table-wrap {
margin: var(--space-6) 0;
}
.club-stack {
border: 1px solid var(--color-border-light);
}
.club-stack caption {
caption-side: top;
text-align: left;
font-weight: var(--font-weight-semibold);
color: var(--color-text-main);
padding: 0 0 var(--space-3);
}
.club-stack th[scope="row"] {
background: var(--color-sand-2);
color: var(--color-text-main);
vertical-align: top;
}
.club-stack td {
vertical-align: top;
}
.club-stack--num td,
.club-stack .num {
font-variant-numeric: tabular-nums;
}
.club-th-tier {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.club-cell-note {
display: block;
margin-top: var(--space-1);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
@media (max-width: 719px) {
.club-stack,
.club-stack tbody,
.club-stack tr,
.club-stack th,
.club-stack td {
display: block;
width: 100%;
}
.club-stack {
border: 0;
}
.club-stack caption {
display: block;
}
.club-stack thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.club-stack tr {
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
margin-bottom: var(--space-3);
overflow: hidden;
}
.club-stack th[scope="row"] {
border-bottom: 1px solid var(--color-border-light);
}
.club-stack td {
display: grid;
grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--color-border-subtle);
}
.club-stack tr td:last-child {
border-bottom: 0;
}
.club-stack td::before {
content: attr(data-label);
font-weight: var(--font-weight-semibold);
color: var(--color-text-main);
}
.data-table.club-stack tr:hover td {
background: transparent;
}
}
/* Rules document */
.club-doc-head {
max-width: 820px;
margin: 0 auto var(--space-6);
}
.club-doc-head > * + * {
margin-top: var(--space-4);
}
.club-doc-meta {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2) var(--space-6);
padding: var(--space-5);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
}
@media (min-width: 640px) {
.club-doc-meta {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.club-doc-meta dt {
font-weight: var(--font-weight-semibold);
color: var(--color-text-muted);
}
.club-doc-meta dd {
color: var(--color-text-main);
}
.club-print-btn[hidden] {
display: none;
}
.club-rules {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.club-toc {
padding: var(--space-4);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
margin-bottom: var(--space-8);
}
.club-toc-title {
font-weight: var(--font-weight-bold);
color: var(--color-text-main);
margin-bottom: var(--space-3);
}
.club-toc ol {
padding-left: 1.5rem;
display: grid;
gap: var(--space-2);
}
@media (min-width: 768px) {
.club-toc {
padding: var(--space-5) var(--space-6);
}
.club-toc ol {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-8);
}
}
.club-rules-section {
scroll-margin-top: calc(var(--header-height, 76px) + var(--space-4));
}
.club-rules-section p,
.club-rules-section ul {
margin-top: var(--space-3);
}
.club-rules-section ul {
padding-left: 1.5rem;
}
.club-rules-section li + li {
margin-top: var(--space-2);
}
.club-formula {
padding: var(--space-4) var(--space-5);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
background: var(--color-teal-tint);
font-weight: var(--font-weight-semibold);
color: var(--color-text-main);
}
.club-contact-list {
list-style: none;
padding-left: 0 !important;
}
.club-contact-list li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
}
.club-contact-list .icon {
flex-shrink: 0;
margin-top: 0.2em;
}
.club-contact-list a,
.club-rules-section a {
overflow-wrap: anywhere;
}
.club-doc-foot {
margin-top: var(--space-8);
padding-top: var(--space-4);
border-top: 1px solid var(--color-border-light);
}
/* FAQ */
.club-ask {
margin-top: var(--space-8);
}
.club-ask h2 {
font-size: var(--font-size-xl);
margin-bottom: var(--space-2);
}
.club-ask p {
margin-bottom: var(--space-4);
}
.accordion-panel p + p {
margin-top: var(--space-3);
}
.club-example {
scroll-margin-top: calc(var(--header-height, 76px) + var(--space-4));
}
@media print {
.club-hero-art,
.club-contacts {
display: none !important;
}
.club-doc-meta {
border: 1pt solid #CCCCCC !important;
}
.club-rules-section {
page-break-inside: auto;
}
.club-rules-section h2 {
page-break-after: avoid;
}
.club-stack tr {
page-break-inside: avoid;
}
}
/* ==========================================================================
Home and product pages
========================================================================== */
/* --------------------------------------------------------------------------
Shared blocks
-------------------------------------------------------------------------- */
.core-home,
.core-page {
--core-sand: var(--color-sand, #F7F3EC);
--core-ink: var(--color-brand-dark, #0C1B33);
--core-teal: var(--color-cyan-dark, #087A6C);
--core-teal-bright: var(--color-cyan-glow, #2ED3B7);
--core-line: var(--color-border-light, #E2E8F0);
overflow-x: clip;
}
.core-home .btn-sm,
.core-page .btn-sm { min-height: 44px; }
.core-section {
padding-top: var(--space-12);
padding-bottom: var(--space-12);
}
@media (min-width: 768px) {
.core-section { padding-top: var(--space-16); padding-bottom: var(--space-16); }
}
.core-section--paper { background: #FFFFFF; }
.core-section--sand { background: var(--core-sand); }
.core-section--dark { background: var(--core-ink); color: #FFFFFF; }
.core-section--dark h2,
.core-section--dark h3 { color: #FFFFFF; }
.core-section--dark p { color: #CBD5E1; }
.core-section--dark a:not(.btn) { color: var(--core-teal-bright); }
.core-section--dark .section-eyebrow { color: var(--color-amber, #E0A21B); }
.core-head { max-width: 720px; margin-bottom: var(--space-8); }
.core-head p { font-size: var(--font-size-base); margin-bottom: 0; }
.core-links {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-6);
}
/* Tables used on these pages: fit a 320 px screen without scrolling */
.core-table caption {
caption-side: top;
text-align: left;
padding: var(--space-3) var(--space-4);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--core-ink);
background: #FFFFFF;
}
.core-table th[scope="row"] { font-weight: var(--font-weight-semibold); color: var(--core-ink); background: transparent; }
.core-table tbody th[scope="row"] { background: transparent; }
.core-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.core-table td small { display: block; font-size: var(--font-size-xs); color: var(--color-text-muted); font-weight: 400; }
.core-table tbody th.num { text-align: left; }
.core-table tfoot th,
.core-table tfoot th[scope="row"],
.core-table tfoot td { background: var(--core-sand); font-weight: var(--font-weight-bold); color: var(--core-ink); border-bottom: 0; }
.core-table thead .num { white-space: normal; hyphens: auto; }
@media (max-width: 520px) {
.core-table { font-size: 13px; }
.core-table th,
.core-table td { padding: 10px 6px; }
.core-table caption { padding: var(--space-3) var(--space-2); }
.core-table thead th { font-size: 12px; line-height: 1.3; }
}
@media (max-width: 359px) {
.core-table { font-size: 12px; }
.core-table th,
.core-table td { padding: 8px 4px; }
.core-table td small { font-size: 11px; }
}
.note-box {
background: var(--core-sand);
border: 1px solid var(--core-line);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
margin: var(--space-5) 0;
font-size: var(--font-size-sm);
color: var(--color-text-main);
}
.apply-block {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--space-3);
margin-top: var(--space-6);
}
.apply-note {
display: flex;
gap: var(--space-2);
max-width: 62ch;
margin: 0;
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--color-text-secondary);
}
.apply-note .icon { margin-top: 2px; color: var(--core-teal); }
@media (max-width: 479px) {
.apply-block .btn { width: 100%; }
}
.key-facts {
list-style: none;
padding: 0;
margin: var(--space-6) 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
}
.key-facts li {
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--space-3) var(--space-4);
background: #FFFFFF;
border: 1px solid var(--core-line);
border-radius: var(--radius-md);
}
.key-facts-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }
.key-facts-value {
font-weight: var(--font-weight-bold);
color: var(--core-ink);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.plain-steps { padding-left: var(--space-6); }
.plain-steps li { margin-bottom: var(--space-3); padding-left: var(--space-1); }
.link-rows { list-style: none; padding: 0; margin: var(--space-4) 0; }
.link-rows li { margin: 0; border-bottom: 1px solid var(--core-line); }
.link-rows li:last-child { border-bottom: 0; }
.link-rows a {
display: flex;
align-items: center;
min-height: 48px;
padding: var(--space-2) 0;
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
.link-rows a::after {
content: "";
flex-shrink: 0;
width: 18px;
height: 18px;
margin-left: auto;
padding-left: var(--space-2);
background-color: currentColor;
-webkit-mask: url(/assets/brand/icons/arrow-right.svg) center / contain no-repeat;
mask: url(/assets/brand/icons/arrow-right.svg) center / contain no-repeat;
}
.link-rows a:hover { text-decoration: underline; }
.contact-rows { list-style: none; padding: 0; margin: var(--space-4) 0; }
.contact-rows li {
display: flex;
flex-wrap: wrap;
align-items: center;
column-gap: var(--space-3);
min-height: 48px;
margin: 0;
padding: var(--space-2) 0;
border-bottom: 1px solid var(--core-line);
color: var(--color-text-secondary);
}
.contact-rows li:last-child { border-bottom: 0; }
.contact-rows .icon { flex: 0 0 24px; color: var(--core-teal); }
.contact-rows li > span:nth-child(2) { flex: 1 1 calc(100% - 40px); font-size: var(--font-size-sm); }
.contact-rows a {
display: inline-flex;
align-items: center;
min-height: 44px;
margin-left: 36px;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-md);
color: var(--core-ink);
font-variant-numeric: tabular-nums;
overflow-wrap: anywhere;
}
.contact-rows .copy-email { min-height: 44px; padding: 0 var(--space-3); margin-left: var(--space-2); }
@media (min-width: 520px) {
.contact-rows li > span:nth-child(2) { flex: 0 0 130px; }
.contact-rows a { margin-left: 0; }
}
/* Accordion questions are h3 for the outline; keep the component look */
.accordion-heading { margin: 0; font-size: inherit; line-height: inherit; letter-spacing: 0; }
.core-faq .accordion-trigger { min-height: 56px; gap: var(--space-3); }
.core-faq .accordion-panel p { margin-bottom: var(--space-3); }
.core-faq .accordion-panel p:last-child { margin-bottom: 0; }
/* --------------------------------------------------------------------------
Home: first screen
-------------------------------------------------------------------------- */
.home-hero {
background: var(--core-ink);
color: #FFFFFF;
padding-top: var(--space-6);
padding-bottom: var(--space-12);
}
.home-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "text" "calc" "art";
gap: var(--space-6);
}
.home-hero-text { grid-area: text; min-width: 0; }
.home-hero-calc { grid-area: calc; min-width: 0; scroll-margin-top: calc(var(--header-height) + 12px); }
.home-hero-art { grid-area: art; }
.home-hero h1 {
color: #FFFFFF;
margin-bottom: var(--space-3);
font-size: clamp(1.625rem, 1.2rem + 1.9vw, 2.625rem);
font-weight: var(--font-weight-black, 900);
line-height: 1.12;
text-wrap: balance;
}
.home-hero-lead {
max-width: 56ch;
margin-bottom: var(--space-4);
font-size: var(--font-size-base);
line-height: 1.55;
color: #CBD5E1;
}
.hero-facts-caption {
margin-bottom: var(--space-2);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: #A3B1C6;
}
.hero-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-3);
max-width: 520px;
margin-bottom: var(--space-5);
}
.hero-fact {
min-width: 0;
padding: var(--space-3);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.04);
}
.hero-fact p { margin: 0; line-height: 1.35; }
.hero-fact-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #FFFFFF !important; }
.hero-fact-range { font-size: var(--font-size-xs); color: #CBD5E1 !important; margin-bottom: var(--space-2) !important; }
.hero-fact dl { margin: 0; display: grid; gap: 2px; }
.hero-fact dl div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
column-gap: var(--space-2);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.hero-fact dt { color: #A3B1C6; }
.hero-fact dd { margin: 0; font-weight: var(--font-weight-bold); color: #FFFFFF; font-variant-numeric: tabular-nums; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 479px) {
.home-hero-actions .btn { width: 100%; min-height: 48px; padding: var(--space-3) var(--space-5); font-size: var(--font-size-base); }
.hero-fact { padding: var(--space-2) var(--space-3); }
.hero-fact dl div { font-size: 13px; }
}
.home-hero-art picture,
.home-hero-art img {
display: block;
width: 100%;
max-width: 360px;
height: auto;
margin: 0 auto;
}
@media (min-width: 768px) {
.home-hero-art picture,
.home-hero-art img { max-width: 520px; }
}
@media (min-width: 992px) {
.home-hero { padding-top: var(--space-12); padding-bottom: var(--space-16); }
.home-hero-grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
grid-template-areas: "text calc" "art calc";
grid-template-rows: auto 1fr;
column-gap: var(--space-12);
row-gap: var(--space-8);
align-items: start;
}
.home-hero-art picture,
.home-hero-art img { margin: 0; }
.home-hero-calc .calc-card { margin-right: 0; }
}
/* --------------------------------------------------------------------------
Home: price breakdown
-------------------------------------------------------------------------- */
.price-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
.price-layout .table-responsive { margin: 0; }
.price-table .price-total th,
.price-table .price-total td {
font-weight: var(--font-weight-bold);
color: var(--core-ink);
border-top: 1px solid var(--core-ink);
}
@media (min-width: 992px) {
.price-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); }
}
.price-visual-title { font-weight: var(--font-weight-bold); color: var(--core-ink); margin-bottom: var(--space-3); }
.price-bars { display: grid; gap: var(--space-3); margin-bottom: var(--space-3); }
.price-bar-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label total" "track track";
column-gap: var(--space-3);
row-gap: var(--space-1);
align-items: center;
font-size: var(--font-size-sm);
}
.price-bar-label { grid-area: label; color: var(--color-text-secondary); }
.price-bar-total { grid-area: total; font-weight: var(--font-weight-bold); color: var(--core-ink); font-variant-numeric: tabular-nums; }
.price-bar-track { grid-area: track; display: block; }
.price-bar { display: flex; height: 22px; border-radius: 4px; overflow: hidden; min-width: 8px; }
.price-seg { display: block; flex-basis: 0; min-width: 0; }
.price-seg--capital { background: var(--core-ink); }
.price-seg--interest { background: var(--color-amber, #E0A21B); }
.price-legend {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-bottom: var(--space-4);
}
.price-legend li { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.price-dot { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.price-dot--capital { background: var(--core-ink); }
.price-dot--interest { background: var(--color-amber, #E0A21B); }
.price-rep { margin-top: var(--space-6); max-width: 90ch; }
/* --------------------------------------------------------------------------
Home: requirements, process, term comparison
-------------------------------------------------------------------------- */
.req-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (min-width: 640px) { .req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .req-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } }
.req-item {
display: flex;
gap: var(--space-4);
align-items: flex-start;
margin: 0;
padding: var(--space-4) var(--space-5);
background: #FFFFFF;
border-radius: var(--radius-md);
}
.req-icon {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--core-sand);
color: var(--core-teal);
}
.req-icon .icon { width: 22px; height: 22px; }
.req-item h3 { font-size: var(--font-size-base); margin-bottom: var(--space-1); letter-spacing: 0; }
.req-item p { font-size: var(--font-size-sm); margin: 0; line-height: 1.5; }
.steps {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
}
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); } }
.step { position: relative; margin: 0; }
.step img {
width: 100%;
height: auto;
aspect-ratio: 8 / 5;
object-fit: contain;
border-radius: var(--radius-md);
background: var(--core-sand);
margin-bottom: var(--space-4);
}
.step-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--core-ink);
color: var(--core-teal-bright);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
margin-bottom: var(--space-3);
position: relative;
z-index: 1;
}
@media (min-width: 1024px) {
.step:not(:last-child)::after {
content: "";
position: absolute;
top: 15px;
left: 44px;
right: calc(-1 * var(--space-6) + 4px);
height: 2px;
background: var(--core-line);
}
}
.step h3 { font-size: var(--font-size-md); margin-bottom: var(--space-2); letter-spacing: 0; }
.step p { font-size: var(--font-size-sm); margin: 0; }
.home-terms .term-compare h2 { margin-bottom: var(--space-2); }
/* --------------------------------------------------------------------------
Club MyLoan24 teaser (home) and level list (home, /clientes-habituales/)
-------------------------------------------------------------------------- */
.club-teaser {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-10);
align-items: start;
}
@media (min-width: 992px) { .club-teaser { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-12); } }
.club-teaser .club-example {
padding: var(--space-3) var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.06);
border-radius: var(--radius-md);
color: #E2E8F0 !important;
}
.club-levels {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--space-3);
}
.club-level {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: var(--space-4);
align-items: start;
margin: 0;
padding: var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.03);
}
.club-level img { width: 56px; height: 56px; }
.club-level h3 { font-size: var(--font-size-md); margin-bottom: var(--space-1); letter-spacing: 0; }
.club-level p { margin: 0; font-size: var(--font-size-sm); line-height: 1.5; }
.club-level-benefit { font-weight: var(--font-weight-bold); color: var(--color-amber, #E0A21B) !important; margin-top: var(--space-1) !important; }
.club-levels--light .club-level { border-color: var(--core-line); background: #FFFFFF; }
.club-levels--light .club-level h3 { color: var(--core-ink); }
.club-levels--light .club-level-req { color: var(--color-text-secondary); }
.club-levels--light .club-level-benefit { color: var(--color-amber-text, #9A6700) !important; }
@media (min-width: 768px) {
.club-levels--light { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.club-levels--light .club-level { grid-template-columns: minmax(0, 1fr); }
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: center;
}
.split-art { width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
@media (min-width: 992px) {
.split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-12); }
.split--art-first { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
}
@media (max-width: 991px) {
.split--art-first .split-art { order: 2; }
.split-art { max-width: 300px; }
}
.about-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
}
@media (min-width: 992px) { .about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: var(--space-12); } }
.company-dl { margin: var(--space-5) 0 0; border-top: 1px solid var(--core-line); }
.company-dl div {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 2px;
padding: var(--space-3) 0;
border-bottom: 1px solid var(--core-line);
}
@media (min-width: 560px) { .company-dl div { grid-template-columns: 160px minmax(0, 1fr); gap: var(--space-4); } }
.company-dl dt { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.company-dl dd { margin: 0; color: var(--color-text-main); font-weight: var(--font-weight-semibold); overflow-wrap: anywhere; }
.method-card {
background: #FFFFFF;
border: 1px solid var(--core-line);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.method-card img { width: 100%; max-width: 260px; height: auto; margin-bottom: var(--space-4); }
.method-card h2 { font-size: var(--font-size-xl); }
.method-list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.method-list li { margin: 0; padding: var(--space-2) 0; font-size: var(--font-size-sm); border-bottom: 1px dashed var(--core-line); }
.method-list li:last-child { border-bottom: 0; }
.method-list strong { color: var(--core-ink); }
.difficulty-card {
margin-top: var(--space-6);
padding: var(--space-5);
background: var(--core-sand);
border: 1px solid var(--core-line);
border-radius: var(--radius-md);
}
.difficulty-card h3 { display: flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-md); letter-spacing: 0; }
.difficulty-card h3 .icon { color: var(--color-amber-text, #9A6700); }
.difficulty-card p { font-size: var(--font-size-sm); }
/* Guides with covers */
.core-guides { list-style: none; padding: 0; margin: 0; }
.core-guides li { margin: 0; display: flex; }
.core-guide { width: 100%; }
.core-guide-cover {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
background: var(--core-sand);
}
.core-guide .guide-card-title { font-size: var(--font-size-md); letter-spacing: 0; }
.core-guide .guide-card-tag,
.core-guide .guide-card-desc { display: block; }
.core-guide .guide-card-body { display: flex; flex-direction: column; }
/* --------------------------------------------------------------------------
Inner pages: intro + calculator, body, related links
-------------------------------------------------------------------------- */
.core-page { padding-bottom: var(--space-12); }
.page-top {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
padding-top: var(--space-2);
padding-bottom: var(--space-10);
}
@media (min-width: 992px) {
.page-top { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); column-gap: var(--space-12); align-items: start; }
.page-top--center { grid-template-columns: minmax(0, 1fr); }
}
.page-top h1 { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }
.page-top--center .page-top-text { max-width: 760px; }
.page-top--center { padding-bottom: var(--space-6); }
.page-lead { font-size: var(--font-size-md); max-width: 62ch; }
.page-top-calc { min-width: 0; scroll-margin-top: calc(var(--header-height) + 12px); }
.page-top-calc .calc-card { margin-right: 0; }
.page-top-aside {
padding: var(--space-6);
background: #FFFFFF;
border: 1px solid var(--core-line);
border-radius: var(--radius-lg);
}
.aside-title { font-size: var(--font-size-lg); letter-spacing: 0; }
.page-top-aside .apply-block { margin-top: var(--space-4); }
.promo-status {
display: flex;
gap: var(--space-2);
align-items: flex-start;
padding: var(--space-3) var(--space-4);
background: var(--core-sand);
border: 1px solid var(--core-line);
border-radius: var(--radius-md);
color: var(--color-text-main);
font-size: var(--font-size-sm);
}
.promo-status .icon { margin-top: 2px; color: var(--core-teal); }
.page-body > .page-section,
.page-body > .related { max-width: 880px; }
.page-section { padding-top: var(--space-10); scroll-margin-top: calc(var(--header-height) + 12px); }
.page-section h2 { margin-bottom: var(--space-4); }
.page-section h3 { font-size: var(--font-size-lg); margin-top: var(--space-6); letter-spacing: 0; }
.page-section .table-responsive { margin: var(--space-4) 0; }
.field-dl { margin: 0; border-top: 1px solid var(--core-line); }
.field-dl div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--core-line); }
@media (min-width: 640px) { .field-dl div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--space-4); } }
.field-dl dt { font-weight: var(--font-weight-bold); color: var(--core-ink); }
.field-dl dd { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); line-height: 1.6; }
.fit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 720px) { .fit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fit-card { padding: var(--space-5); background: #FFFFFF; border: 1px solid var(--core-line); border-radius: var(--radius-md); }
.fit-card--no { background: var(--core-sand); }
.fit-card h3 { display: flex; align-items: center; gap: var(--space-2); margin-top: 0; font-size: var(--font-size-md); }
.fit-card h3 .icon { color: var(--core-teal); }
.fit-card--no h3 .icon { color: var(--color-amber-text, #9A6700); }
.fit-card ul { margin-bottom: 0; padding-left: var(--space-5); }
.fit-card li { font-size: var(--font-size-sm); }
.related { padding-top: var(--space-12); }
.related-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-3);
}
@media (min-width: 640px) { .related-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.related-list li { margin: 0; display: flex; }
.related-list a {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
width: 100%;
min-height: 64px;
padding: var(--space-3) var(--space-4);
background: #FFFFFF;
border: 1px solid var(--core-line);
border-radius: var(--radius-md);
color: var(--core-ink);
font-weight: var(--font-weight-bold);
text-decoration: none;
}
.related-list a span { font-weight: 400; font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.related-list a:hover { border-color: var(--core-teal); }
.related-list a:hover span { text-decoration: none; }
/* /calcular-prestamo/ */
.sim-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-8);
padding-bottom: var(--space-12);
align-items: start;
}
@media (min-width: 992px) { .sim-layout { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--space-12); } }
.sim-calc { min-width: 0; }
.sim-calc .calc-card { margin-left: 0; }
.sim-help h2 { font-size: var(--font-size-xl); }
/* /clientes-habituales/ */
.task-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 768px) { .task-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); } }
.task-card {
padding: var(--space-6);
background: #FFFFFF;
border: 1px solid var(--core-line);
border-radius: var(--radius-lg);
}
.task-card h2 { font-size: var(--font-size-xl); letter-spacing: 0; }
.task-card .link-rows { margin-bottom: 0; }
.task-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-bottom: var(--space-3);
border-radius: 50%;
background: var(--core-sand);
color: var(--core-teal);
}
.status-note {
display: flex;
gap: var(--space-2);
align-items: flex-start;
margin: var(--space-6) 0 0;
padding: var(--space-3) var(--space-4);
background: var(--core-sand);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--color-text-main);
}
.status-note .icon { margin-top: 2px; color: var(--core-teal); }
/* Printing the calculator keeps only the calculation */
@media print {
.home-hero-art,
.core-links,
.apply-block,
.related,
.split-art { display: none !important; }
}
/* ==========================================================================
Help centre and guides
========================================================================== */
/* ---- Shared text helpers ------------------------------------------------- */
.help-url {
font-family: var(--font-family-mono);
font-size: 0.92em;
color: var(--color-ink);
overflow-wrap: anywhere;
}
.mailto-note {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.help-eyebrow,
.guide-eyebrow {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-teal-text);
margin-bottom: var(--space-2);
}
.help-eyebrow a {
color: inherit;
text-decoration: none;
}
.help-eyebrow a:hover { text-decoration: underline; }
/* ---- Search (/ayuda/) ----------------------------------------------------- */
.help-search {
max-width: 720px;
margin: 0 auto var(--space-10);
}
.help-search[hidden],
.help-search-reset[hidden] { display: none; }
.help-search-label {
display: block;
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
margin-bottom: var(--space-2);
}
.help-search-field {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.help-search-field .help-search-input {
flex: 1 1 240px;
min-width: 0;
min-height: 52px;
padding: var(--space-3) var(--space-4) var(--space-3) 48px;
font: inherit;
font-size: var(--font-size-base);
color: var(--color-text-main);
background: var(--color-paper);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
box-shadow: none;
}
.help-search-field .help-search-input:focus,
.help-search-field .help-search-input:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
border-color: var(--color-ink);
box-shadow: none;
}
.help-search-field .help-search-icon {
position: absolute;
left: 16px;
top: 26px;
transform: translateY(-50%);
width: 20px;
height: 20px;
color: var(--color-text-muted);
pointer-events: none;
}
/* The visible «Borrar búsqueda» button replaces the browser's own clear icon. */
.help-search-field .help-search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.help-search-reset { min-height: 44px; }
.help-search-hint {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin: var(--space-2) 0 0;
}
.help-search-status {
min-height: 1.5em;
margin: var(--space-3) 0 0;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
}
.help-results-container { margin-top: var(--space-3); }
.help-results-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-3);
}
.help-results-list .help-result-card {
display: block;
padding: var(--space-4) var(--space-5);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
text-decoration: none;
transition: border-color var(--transition-fast);
}
.help-results-list .help-result-card:hover {
border-color: var(--color-teal-text);
transform: none;
box-shadow: none;
}
.help-results-list .help-result-card:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
.help-result-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-1);
}
.help-result-meta .help-result-type { margin-bottom: 0; }
.help-result-cat {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.help-results-list .help-result-title {
display: block;
font-weight: var(--font-weight-bold);
color: var(--color-ink);
margin-bottom: var(--space-1);
}
.help-results-list .help-result-card:hover .help-result-title { color: var(--color-teal-text); }
.help-results-list .help-result-desc {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.help-suggestions {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-2);
}
.help-suggestion {
min-height: 44px;
padding: 0 var(--space-4);
font: inherit;
font-size: var(--font-size-sm);
color: var(--color-teal-text);
background: var(--color-paper);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-full);
cursor: pointer;
}
.help-suggestion:hover { border-color: var(--color-teal-text); }
.help-suggestion:focus-visible {
outline: 3px solid var(--color-focus);
outline-offset: 2px;
}
/* ---- Help centre layout --------------------------------------------------- */
#helpDefaultList > section { margin-bottom: var(--space-12); }
.help-hub h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); }
.help-popular-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: var(--space-3);
}
.help-popular-list a {
display: flex;
align-items: center;
min-height: 56px;
height: 100%;
padding: var(--space-3) var(--space-4);
color: var(--color-ink);
font-weight: var(--font-weight-semibold);
text-decoration: none;
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
}
.help-popular-list a:hover {
color: var(--color-teal-text);
border-color: var(--color-teal-text);
}
.help-cat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: var(--space-6);
}
.help-cat {
padding: var(--space-6);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.help-cat .icon-lg {
color: var(--color-teal-text);
margin-bottom: var(--space-3);
}
.help-cat h3 { font-size: 1.1875rem; }
.help-cat-desc { font-size: var(--font-size-sm); }
.help-cat-list {
list-style: none;
margin: 0 0 var(--space-4);
padding: 0;
}
.help-cat-list li { border-top: 1px solid var(--color-border-light); }
.help-cat-list a {
display: block;
padding: var(--space-3) 0;
font-weight: var(--font-weight-medium);
}
.help-cat-pages-label {
margin: 0 0 var(--space-1);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.help-cat-pages {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 0 var(--space-4);
font-size: var(--font-size-sm);
}
.help-cat-pages a {
display: inline-block;
padding: var(--space-1) 0;
}
.help-guides-list {
columns: 2 280px;
column-gap: var(--space-8);
padding-left: 1.2em;
margin-bottom: var(--space-4);
}
.help-guides-list li {
break-inside: avoid;
margin-bottom: var(--space-2);
}
.help-contact {
padding: var(--space-8) var(--space-6);
background: var(--color-sand-2);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.help-channel-list {
list-style: none;
margin: 0 0 var(--space-3);
padding: 0;
display: grid;
gap: var(--space-2);
}
.help-channel-list li {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
color: var(--color-text-main);
}
.help-channel-list a { font-weight: var(--font-weight-semibold); }
/* ---- Help article (/ayuda//) ---------------------------------------- */
.help-article-title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
.help-answer {
margin: var(--space-6) 0 var(--space-10);
padding: var(--space-5) var(--space-6);
font-size: var(--font-size-md);
color: var(--color-text-main);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.help-article-body > section { margin-bottom: var(--space-10); }
.help-article-body h2 {
font-size: clamp(1.25rem, 2.4vw, 1.625rem);
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.help-article-body h3 {
font-size: 1.125rem;
margin-top: var(--space-6);
}
.help-article-body li {
color: var(--color-text-main);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-2);
}
.help-steps,
.help-fallback ul,
.help-article-body section > ul { padding-left: 1.4em; }
.help-channel {
padding: var(--space-6);
background: var(--color-sand-2);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.help-channel-hours {
font-size: var(--font-size-sm);
}
.help-channel > :last-child { margin-bottom: 0; }
.help-article-body .help-related ul {
list-style: none;
padding: 0;
margin: 0;
}
.help-related li { border-top: 1px solid var(--color-border-light); margin: 0; }
.help-related li:last-child { border-bottom: 1px solid var(--color-border-light); }
.help-related a {
display: block;
padding: var(--space-3) 0;
font-weight: var(--font-weight-medium);
}
.help-source li,
.help-source p {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.help-article-nav {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-6);
border-top: 1px solid var(--color-border-light);
}
/* ---- Guide (/guias//) ----------------------------------------------- */
.guide-cover {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1200 / 675;
margin-bottom: var(--space-6);
background: var(--color-sand-2);
border-radius: var(--radius-lg);
}
.guide-title { font-size: clamp(1.75rem, 4vw, 2.625rem); }
.guide-summary {
margin: var(--space-6) 0;
padding: var(--space-5) var(--space-6);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.guide-summary h2,
.guide-toc h2 {
font-size: var(--font-size-md);
margin-bottom: var(--space-2);
}
.guide-summary p {
margin: 0;
font-size: var(--font-size-md);
color: var(--color-text-main);
}
.guide-toc {
margin-bottom: var(--space-10);
padding: var(--space-5) var(--space-6);
background: var(--color-sand-2);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
}
.guide-toc ol {
margin: 0;
padding-left: 1.4em;
}
/* Block, not inline-block: with a wrapped heading the list number stays on the first line. */
.guide-toc a {
display: block;
padding: var(--space-1) 0;
}
.guide-section { margin-bottom: var(--space-10); }
.guide-section h2 {
font-size: clamp(1.375rem, 2.6vw, 1.75rem);
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
.guide-section ul,
.guide-section ol { padding-left: 1.4em; }
.guide-section li {
color: var(--color-text-main);
line-height: var(--line-height-relaxed);
margin-bottom: var(--space-2);
}
.guide-formula {
padding: var(--space-3) var(--space-4);
font-family: var(--font-family-mono);
font-size: 0.95em;
color: var(--color-ink);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
overflow-wrap: anywhere;
}
.guide-terms { margin: 0; }
.guide-terms > div {
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border-light);
}
.guide-terms dt {
font-weight: var(--font-weight-bold);
color: var(--color-ink);
}
.guide-terms dd {
margin: 0;
color: var(--color-text-secondary);
}
.guide-quote {
margin: var(--space-4) 0;
padding: var(--space-5);
background: var(--color-paper);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
}
.guide-quote p {
margin: 0;
color: var(--color-text-main);
}
.guide-quote em {
font-style: normal;
padding: 0 4px;
background: var(--color-teal-tint);
border-radius: 4px;
}
.guide code {
font-size: 0.9em;
overflow-wrap: anywhere;
}
.guide .data-table th[scope="row"] code { font-weight: var(--font-weight-normal); }
.guide-sources a { overflow-wrap: anywhere; }
.guide-review {
margin: var(--space-8) 0 var(--space-1);
font-weight: var(--font-weight-semibold);
color: var(--color-ink);
}
.guide-review-note {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.guide-tool {
margin: var(--space-8) 0;
padding: var(--space-6);
background: var(--color-ink);
border-radius: var(--radius-lg);
}
.guide-tool h2 {
font-size: var(--font-size-lg);
color: var(--color-on-dark);
}
.guide-tool p { color: var(--color-on-dark-2); }
.guide-tool a:focus-visible {
outline: 3px solid var(--color-focus-on-dark);
outline-offset: 2px;
}
.guide-back { margin-top: var(--space-6); }
/* ---- Guides catalogue (/guias/) -------------------------------------------- */
.guides-group { margin-bottom: var(--space-12); }
.guides-group h2 { font-size: clamp(1.375rem, 2.6vw, 1.875rem); }
.guides-grid {
list-style: none;
margin: 0;
padding: 0;
}
.guides-grid > li { display: flex; }
.guides-catalog .guide-card {
width: 100%;
box-shadow: none;
}
.guides-catalog .guide-card:hover {
transform: none;
box-shadow: none;
border-color: var(--color-teal-text);
}
.guide-card-cover {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1200 / 675;
background: var(--color-sand-2);
}
.guides-catalog .guide-card-body { display: flex; }
.guides-catalog .guide-card-title {
font-size: var(--font-size-md);
margin-bottom: var(--space-2);
}
.guides-catalog .guide-card:hover .guide-card-title { color: var(--color-teal-text); }
.guides-catalog .guide-card-desc { display: block; }
.guides-method { margin-top: var(--space-4); }
.guides-method h2 { font-size: var(--font-size-lg); }
/* ---- Tables in articles and guides ----------------------------------------- */
.help-table td.num { white-space: nowrap; }
.help-table th[scope="row"] {
background: var(--color-sand-2);
font-weight: var(--font-weight-semibold);
}
/* On phones each row is a card: column name on the left, value on the right. */
@media screen and (max-width: 600px) {
.help-table-wrap { overflow: visible; }
.help-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.help-table,
.help-table tbody,
.help-table tr,
.help-table th[scope="row"],
.help-table td,
.help-table caption { display: block; }
.help-table tr {
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border-light);
}
.help-table tr:last-child { border-bottom: 0; }
.help-table th[scope="row"] {
padding: var(--space-2) var(--space-4);
border-bottom: 0;
}
.help-table td {
display: flex;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-2) var(--space-4);
border: 0;
text-align: right;
}
.help-table td::before {
content: attr(data-label);
flex: 0 0 42%;
color: var(--color-text-secondary);
text-align: left;
}
.help-table td.num { white-space: normal; }
/* Text cells: label above the value, both aligned left. */
.help-table td:not(.num) {
flex-direction: column;
gap: 2px;
text-align: left;
}
.help-table td:not(.num)::before {
flex: none;
font-size: var(--font-size-sm);
}
}
/* Article and guide pages start closer to the breadcrumbs than landing sections. */
.help-article.section,
.guide.section { padding-top: var(--space-6); }
/* ---- Print ---------------------------------------------------------------- */
@media print {
.help-search,
.guide-toc,
.guide-tool,
.help-article-nav,
.guide-back { display: none !important; }
.guide-cover { max-height: 6cm; object-fit: contain; }
}
/* ==========================================================================
Legal and company pages
========================================================================== */
.legal-page { padding-top: var(--space-8); }
.legal-header { max-width: 820px; margin-bottom: var(--space-8); }
.legal-header h1 { margin-bottom: var(--space-3); overflow-wrap: break-word; }
.legal-lead { font-size: var(--font-size-md); color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.legal-meta {
list-style: none;
padding: 0;
margin: 0 0 var(--space-4);
display: flex;
flex-wrap: wrap;
gap: var(--space-1) var(--space-6);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.legal-meta li { margin: 0; }
.legal-meta strong { color: var(--color-text-main); }
/* .btn sets display, which would override the hidden attribute until site.js removes it */
[data-action="print-page"][hidden] { display: none; }
/* Layout with a table of contents */
.legal-layout {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-6);
align-items: start;
}
.legal-single { max-width: 880px; }
.legal-toc {
background: #FFFFFF;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
padding: var(--space-5);
font-size: var(--font-size-sm);
}
.legal-toc-title {
font-size: var(--font-size-base);
margin: 0 0 var(--space-3);
letter-spacing: 0;
}
.legal-toc ol { margin: 0; padding-left: 1.4em; }
.legal-toc li { margin-bottom: var(--space-2); }
.legal-toc li:last-child { margin-bottom: 0; }
.legal-toc a { color: var(--color-text-main); }
.legal-toc a:hover { color: var(--color-cyan-dark); }
@media (min-width: 1024px) {
.legal-layout { grid-template-columns: 250px minmax(0, 1fr); gap: var(--space-8); }
.legal-toc {
position: sticky;
top: calc(var(--header-height) + var(--space-4));
max-height: calc(100vh - var(--header-height) - var(--space-8));
overflow-y: auto;
}
}
/* Document body (reuses .legal-content from pages.css) */
.legal-body { margin-top: 0; margin-bottom: var(--space-8); overflow-wrap: break-word; }
.legal-section { scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.legal-body > .legal-section:first-child > h2 { margin-top: 0; }
.legal-body h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.legal-body h3 { font-size: var(--font-size-md); margin-top: 0; }
.legal-body li > ul { margin-top: var(--space-2); }
.legal-body code {
font-family: var(--font-family-mono);
font-size: 0.9em;
background: var(--color-border-subtle);
border-radius: var(--radius-sm);
padding: 0.1em 0.35em;
overflow-wrap: anywhere;
}
.legal-note { font-size: var(--font-size-sm); color: var(--color-text-muted); }
.legal-callout {
background: var(--color-teal-tint, var(--color-brand-surface-light));
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-4) var(--space-5);
color: var(--color-text-main);
}
.legal-cta { margin-bottom: var(--space-12); }
/* Contact lists with icons */
.legal-contact-list { list-style: none; padding: 0; }
.legal-contact-list li {
display: flex;
gap: var(--space-3);
align-items: flex-start;
overflow-wrap: anywhere;
}
.legal-contact-list .icon { margin-top: 0.3em; color: var(--color-cyan-dark); }
.legal-contact-list li > span:not(.icon) { flex: 1 1 0; min-width: 0; }
/* Label line above each address or number */
.legal-contact-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
/* Narrow phones: less nested padding so text keeps a readable measure */
@media (max-width: 599px) {
.legal-body { padding: var(--space-5) var(--space-4); }
.legal-card, .legal-address, .legal-template { padding: var(--space-4); }
.legal-contact-grid .contact-card { padding: var(--space-4); }
}
/* Contact page: phone / WhatsApp cards and addresses */
.legal-contact-grid { margin: var(--space-4) 0 0; }
@media (min-width: 768px) {
.legal-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.legal-contact-grid .contact-card-icon { width: auto; height: auto; margin: 0 0 var(--space-3); color: var(--color-cyan-dark); }
.legal-contact-grid .contact-card-icon .icon { width: 28px; height: 28px; }
.legal-contact-grid .contact-card-val { font-size: var(--font-size-lg); text-decoration: none; overflow-wrap: anywhere; }
.legal-contact-grid .contact-card-val:hover { text-decoration: underline; }
.legal-address-grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 640px) {
.legal-address-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.legal-address {
background: var(--color-brand-surface-light);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-5);
}
/* Processing cards in the privacy policy */
.legal-card {
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
padding: var(--space-5);
margin-bottom: var(--space-4);
}
.legal-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.legal-dl dt { font-weight: var(--font-weight-bold); color: var(--color-text-main); font-size: var(--font-size-sm); }
.legal-dl dd { margin: 0 0 var(--space-3); color: var(--color-text-secondary); }
.legal-section > .legal-dl { margin-bottom: var(--space-4); }
@media (min-width: 640px) {
.legal-dl { grid-template-columns: 9.5rem minmax(0, 1fr); }
.legal-dl dd { margin-bottom: var(--space-2); }
}
/* Model letters (desistimiento, derechos) */
.legal-template {
border: 1px dashed var(--color-border-strong, var(--color-text-muted));
border-radius: var(--radius-md);
padding: var(--space-5);
background: var(--color-brand-surface-light);
margin-bottom: var(--space-4);
}
.legal-template p { color: var(--color-text-main); }
.legal-template p:last-child { margin-bottom: 0; }
/* Formulas */
.legal-formulas { font-variant-numeric: tabular-nums; }
.legal-formulas sup, .legal-table sup { font-size: 0.75em; }
/* Tables: caption, row headers, numbers */
.legal-table-wrap { margin: var(--space-4) 0 var(--space-6); }
.legal-table caption {
caption-side: top;
text-align: left;
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
padding: var(--space-4) var(--space-4) var(--space-2);
}
.legal-table td { font-variant-numeric: tabular-nums; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.legal-table tbody th { background: transparent; font-weight: var(--font-weight-bold); vertical-align: top; }
.legal-kv tbody th[scope="row"] { width: 38%; }
.legal-table-group th {
background: var(--color-brand-surface-light) !important;
color: var(--color-brand-dark);
font-size: var(--font-size-sm);
}
.legal-table tr:hover td { background-color: transparent; }
/* Tables that become labelled blocks on narrow screens */
@media (max-width: 719px) {
.stack-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.stack-table, .stack-table tbody, .stack-table tr, .stack-table th, .stack-table td { display: block; width: 100%; }
.stack-table caption { display: block; }
.stack-table tr { border-top: 1px solid var(--color-border-light); padding: var(--space-3) 0; }
.stack-table tbody th { border-bottom: 0; padding: var(--space-2) var(--space-4); }
.stack-table td {
display: grid;
grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
gap: var(--space-3);
border-bottom: 0;
padding: var(--space-1) var(--space-4);
}
.stack-table td::before {
content: attr(data-label);
font-weight: var(--font-weight-semibold);
color: var(--color-text-main);
}
.legal-kv tbody th[scope="row"] { width: auto; }
}
/* Two-column tables: label above value on small phones */
@media (max-width: 479px) {
.legal-kv thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.legal-kv, .legal-kv tbody, .legal-kv tr, .legal-kv th, .legal-kv td { display: block; width: 100%; }
.legal-kv caption { display: block; }
.legal-kv tbody th[scope="row"] { border-bottom: 0; padding: var(--space-3) var(--space-4) 0; }
.legal-kv td { padding: var(--space-1) var(--space-4) var(--space-3); }
}
/* Document list on /datos-legales/ */
.legal-doc-links { columns: 2 16rem; column-gap: var(--space-8); }
.legal-doc-links li { break-inside: avoid; }
/* 404 */
.not-found { max-width: 720px; margin: 0 auto; text-align: center; }
.not-found-img { width: 100%; max-width: 420px; height: auto; margin: 0 auto var(--space-8); }
.not-found-actions { justify-content: center; margin-bottom: var(--space-10); }
.not-found-nav h2 { font-size: var(--font-size-lg); }
.not-found-links {
list-style: none;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
gap: var(--space-3);
text-align: left;
}
.not-found-links li { margin: 0; }
.not-found-links a {
display: block;
min-height: 48px;
padding: var(--space-3) var(--space-4);
background: #FFFFFF;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
color: var(--color-text-main);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}
.not-found-links a:hover { border-color: var(--color-cyan-dark); color: var(--color-cyan-dark); }
/* Print: the document only */
@media print {
.legal-toc, [data-action="print-page"], .legal-cta, .copy-email { display: none !important; }
.legal-layout { display: block; }
.legal-body { border: 0; box-shadow: none; padding: 0; }
.legal-section { break-inside: auto; }
.legal-table-wrap { overflow: visible; border: 0; }
.legal-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}
/* ==========================================================================
Service pages: process, costs, repayment, payment difficulties
========================================================================== */
.svc-page {
padding-top: var(--space-10);
}
.svc-page .section-title-wrap {
margin-bottom: var(--space-8);
}
/* Long text boxes lose too much width to padding on small phones */
@media (max-width: 479px) {
.svc-page .legal-content {
padding: var(--space-5) var(--space-4);
border-radius: var(--radius-lg);
}
}
.svc-page .legal-content > h2:first-child {
margin-top: 0;
}
.svc-section-title {
margin-bottom: var(--space-6);
}
/* Version line under the H1 of /coste-del-prestamo/ */
.svc-version {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-1) var(--space-3);
margin-top: var(--space-4);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
background: var(--color-brand-white, #FFFFFF);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
/* In-page table of contents */
.svc-toc {
max-width: 880px;
margin: 0 auto;
}
.svc-toc ol {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-2);
list-style: none;
margin: 0;
padding: 0;
}
.svc-toc a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-full);
background: var(--color-brand-white, #FFFFFF);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-brand-dark);
text-decoration: none;
}
.svc-toc a:hover {
border-color: var(--color-cyan-dark);
}
.svc-page [id] {
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
/* Process steps on /pasos-del-prestamo/ (reuses .process-grid and .process-card) */
.svc-steps {
list-style: none;
margin: 0 0 var(--space-8);
padding: 0;
}
.svc-steps .process-card:hover {
transform: none;
}
.svc-steps .process-card-img {
height: auto;
aspect-ratio: 320 / 220;
object-fit: contain;
background: var(--color-brand-surface-light);
}
.svc-step-where {
margin: 0 0 var(--space-1);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
.svc-step-title {
margin: 0 0 var(--space-2);
font-size: var(--font-size-lg);
}
.svc-steps .process-card p:last-child {
margin-bottom: 0;
}
/* Numbered procedures inside text boxes */
.svc-numbered {
counter-reset: svc-step;
list-style: none;
padding-left: 0;
}
.svc-numbered > li {
counter-increment: svc-step;
position: relative;
padding-left: 44px;
margin-bottom: var(--space-4);
}
.svc-numbered > li::before {
content: counter(svc-step);
position: absolute;
left: 0;
top: 0;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-brand-dark);
color: var(--color-brand-white, #FFFFFF);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
line-height: 30px;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* Tables: a scrolling wrapper for the cost grid, stacked cards for text-heavy tables */
.svc-table-title {
margin: var(--space-6) 0 0;
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
}
.svc-page .table-scroll-hint {
margin-top: var(--space-1);
}
.svc-scroll {
margin-top: var(--space-2);
}
.svc-matrix {
min-width: 520px;
}
.svc-matrix th[scope="row"] {
position: sticky;
left: 0;
z-index: 1;
background: var(--color-brand-surface-light);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.svc-matrix td {
white-space: nowrap;
}
.svc-cell-total {
display: block;
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
font-variant-numeric: tabular-nums;
}
.svc-cell-tae {
display: block;
margin-top: 2px;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.svc-table {
margin: var(--space-6) 0;
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
background: var(--color-brand-white, #FFFFFF);
overflow: hidden;
}
.svc-stack th[scope="row"] {
color: var(--color-brand-dark);
}
.svc-stack td.num {
white-space: nowrap;
}
.svc-row-total th,
.svc-row-total td {
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
background: var(--color-brand-surface-light);
}
@media (max-width: 639px) {
.svc-stack,
.svc-stack tbody,
.svc-stack tr,
.svc-stack th,
.svc-stack td {
display: block;
width: 100%;
}
.svc-stack caption {
display: block;
padding: var(--space-3) var(--space-4) var(--space-2);
}
.svc-stack thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.svc-stack tr {
padding: var(--space-3) var(--space-4);
border-top: 1px solid var(--color-border-light);
}
.svc-stack th[scope="row"] {
padding: 0 0 var(--space-2);
border: 0;
background: transparent;
font-size: var(--font-size-base);
}
.svc-stack td {
display: grid;
grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-1) 0;
border: 0;
}
.svc-stack td::before {
content: attr(data-label);
font-weight: var(--font-weight-semibold);
color: var(--color-text-secondary);
}
.svc-stack td.num {
white-space: normal;
}
.svc-stack tr:hover td {
background: transparent;
}
.svc-stack td.svc-empty {
display: none;
}
}
/* Key facts on /coste-del-prestamo/ */
.svc-facts {
display: grid;
gap: var(--space-3);
margin: var(--space-6) 0;
}
.svc-facts > div {
display: grid;
gap: var(--space-1);
padding: var(--space-4);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
background: var(--color-brand-surface-light);
}
@media (min-width: 768px) {
.svc-facts > div {
grid-template-columns: 200px minmax(0, 1fr);
gap: var(--space-4);
}
}
.svc-facts dt {
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
}
.svc-facts dd {
margin: 0;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.svc-actions {
margin: var(--space-6) 0 var(--space-2);
}
/* Payment methods on /formas-de-pago/ */
.svc-methods {
display: grid;
gap: var(--space-4);
margin: var(--space-6) 0;
}
@media (min-width: 768px) {
.svc-methods {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.svc-method {
padding: var(--space-5);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-lg);
background: var(--color-brand-white, #FFFFFF);
}
.svc-method h3 {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: 0;
}
.svc-method p:last-child {
margin-bottom: 0;
}
.svc-pay-data {
display: grid;
grid-template-columns: minmax(0, auto) minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
margin: 0 0 var(--space-4);
}
.svc-pay-data dt {
font-weight: var(--font-weight-bold);
color: var(--color-brand-dark);
}
.svc-pay-data dd {
margin: 0;
}
@media (max-width: 379px) {
.svc-pay-data {
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
.svc-pay-data dd {
margin-bottom: var(--space-2);
}
}
.svc-warning {
border-left-color: var(--color-amber-dark, #9A6700);
}
.svc-warning p + p {
margin-top: var(--space-2);
}
.svc-accordion-heading {
margin: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
border: 0;
padding: 0;
}
/* Contact block (main action on repayment, early repayment, difficulties and documentation) */
.svc-panel,
.svc-next {
margin: var(--space-8) 0;
padding: var(--space-6);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-xl);
background: var(--color-brand-surface-light);
}
@media (min-width: 768px) {
.svc-panel,
.svc-next {
padding: var(--space-8) var(--space-10);
}
}
.svc-panel h2,
.svc-next h2 {
margin-top: 0;
margin-bottom: var(--space-2);
}
.svc-panel > p,
.svc-next > p {
color: var(--color-text-secondary);
}
.svc-contact-list {
display: grid;
gap: var(--space-3);
list-style: none;
margin: var(--space-4) 0;
padding: 0;
}
@media (min-width: 900px) {
.svc-contact-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.svc-contact-list li {
display: flex;
align-items: center;
gap: var(--space-3);
min-height: 48px;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--color-border-light);
border-radius: var(--radius-md);
background: var(--color-brand-white, #FFFFFF);
overflow-wrap: anywhere;
}
.svc-contact-list .icon {
flex-shrink: 0;
}
.svc-contact-list a {
font-weight: var(--font-weight-semibold);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 479px) {
.svc-panel,
.svc-next {
padding: var(--space-5) var(--space-4);
}
}
.svc-panel-note {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.svc-panel .actions-row,
.svc-next .actions-row {
margin-top: var(--space-4);
}
.svc-panel .actions-row + .svc-panel-note {
margin-top: var(--space-3);
}
.svc-panel > :last-child {
margin-bottom: 0;
}
/* ==========================================================================
Home and product pages: SEO pass
========================================================================== */
/* ---- Secondary links: a plain link instead of a second or third button ---------------- */
.core-more {
display: flex;
flex-wrap: wrap;
column-gap: var(--space-6);
margin: var(--space-4) 0 0;
}
.core-links + .core-more { margin-top: var(--space-2); }
.core-more a {
display: inline-flex;
align-items: center;
gap: 6px;
min-height: 44px;
font-weight: var(--font-weight-semibold);
}
.core-more a::after,
.product-card h3 a::after {
content: "";
flex: none;
width: 16px;
height: 16px;
background-color: currentColor;
-webkit-mask: url(/assets/brand/icons/arrow-right.svg) center / contain no-repeat;
mask: url(/assets/brand/icons/arrow-right.svg) center / contain no-repeat;
}
.core-section--dark .core-more a { color: var(--color-teal-bright); }
.core-section--dark .core-more a:hover { color: var(--color-on-dark); }
/* ---- Home: first screen ------------------------------------------------------------- */
.home-hero .notice {
max-width: 520px;
margin: 0 0 var(--space-5);
padding: var(--space-3);
background: rgba(255, 255, 255, 0.06);
border-color: rgba(255, 255, 255, 0.18);
color: var(--color-on-dark-2);
font-size: var(--font-size-sm);
line-height: 1.5;
}
.home-hero-actions { align-items: center; column-gap: var(--space-6); }
.home-hero-link {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--color-teal-bright);
font-weight: var(--font-weight-semibold);
}
.home-hero-link:hover { color: var(--color-on-dark); }
.hero-facts-caption,
.hero-fact-range { font-size: var(--font-size-sm); }
/* ---- Home: the two products and the task links -------------------------------------- */
.product-cards {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-4);
}
@media (min-width: 768px) {
.product-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }
}
.product-card {
margin: 0;
padding: var(--space-5);
background: var(--color-paper);
border: 1px solid var(--core-line);
border-radius: var(--radius-lg);
}
.product-card h3 { margin: 0; font-size: var(--font-size-lg); letter-spacing: 0; }
.product-card h3 a {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 44px;
color: var(--core-ink);
text-decoration: none;
}
.product-card h3 a:hover { color: var(--core-teal); text-decoration: underline; }
.product-card-range {
margin-bottom: var(--space-2);
font-weight: var(--font-weight-bold);
color: var(--core-teal);
font-variant-numeric: tabular-nums;
}
.product-card p:last-child { margin-bottom: 0; font-size: var(--font-size-sm); }
.home-tasks-title { margin: var(--space-8) 0 0; font-size: var(--font-size-md); letter-spacing: 0; }
.home-tasks { margin-bottom: 0; }
@media (min-width: 768px) {
.home-tasks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-8); }
.home-tasks li:nth-last-child(-n + 2) { border-bottom: 0; }
}
/* ---- Home on phones: shorter page ---------------------------------------------------- */
@media (max-width: 639px) {
.core-home .core-section { padding-top: var(--space-10); padding-bottom: var(--space-10); }
.core-home .core-head { margin-bottom: var(--space-6); }
/* Step number and illustration side by side, the illustration at most 96 px high. */
.steps { gap: var(--space-6); }
.step-num { vertical-align: top; }
.step img {
display: inline-block;
width: auto;
max-width: calc(100% - 48px);
height: 96px;
margin: 0 0 var(--space-3) var(--space-3);
vertical-align: top;
}
.core-home .split-art { width: auto; max-width: 100%; max-height: 140px; }
.core-home .method-card img { width: auto; max-height: 96px; }
/* Guide cards: small cover next to the text instead of a full-width cover. */
.core-guides .core-guide {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: start;
}
.core-guides .core-guide-cover {
width: 112px;
margin: var(--space-4) 0 var(--space-4) var(--space-4);
border-radius: var(--radius-sm);
}
.core-guides .guide-card-body { padding: var(--space-4); }
.core-guides .guide-card-desc { margin-bottom: 0; }
}
/* ---- Product pages: first screen ------------------------------------------------------ */
.page-top-text .notice { margin: 0 0 var(--space-4); font-size: var(--font-size-sm); line-height: 1.5; }
.page-top-text .key-facts { margin-bottom: var(--space-4); }
.page-top-jump { margin-bottom: var(--space-4); }
.key-facts-label { font-size: var(--font-size-sm); }
@media (max-width: 479px) {
.page-top-jump .btn { width: 100%; }
}
/* Next to the text the calculator is already on screen. */
@media (min-width: 992px) {
.page-top-jump { display: none; }
}
.page-body > .page-section > .notice + .apply-block { margin-top: var(--space-4); }
/* /calcular-prestamo/ */
.sim-scenarios th[scope="row"] { white-space: nowrap; }
/* ---- Calculator texts: no caption under 14 px ---------------------------------------- */
.calc-hint,
.calc-segment-note,
.calc-legal-pill,
.inst-summary dt,
.instalment-schedule .text-xs,
.loyalty-example-notes { font-size: var(--font-size-sm); }
/* Client type: the three options in one row, sized to their labels. */
.calc-card .calc-segments > .calc-segment-options {
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: auto;
}
/* At 360 px the labels fit on one line with a slimmer card padding; at 320 px they wrap. */
@media (max-width: 479px) {
.calc-card { padding: var(--space-5) var(--space-4); }
.calc-card .calc-segments > .calc-segment-options .calc-segment > span { padding-left: 4px; padding-right: 4px; }
}
/* In partner mode the line on where the button leads sits above it. */
.calc-actions > .calc-cta-note:first-child { margin-bottom: var(--space-1); }
/* The hero illustration follows the calculator on phones; keep it from taking a whole screen. */
@media (max-width: 639px) {
.home-hero-art picture,
.home-hero-art img { width: auto; max-width: 100%; max-height: 220px; }
}
/* ==========================================================================
Help centre and guides: SEO pass
========================================================================== */
/* /ayuda/ «Preguntas frecuentes»: plain links, so they carry an arrow instead of looking like
closed accordion rows. */
.help-popular-list a {
justify-content: space-between;
gap: var(--space-3);
}
.help-popular-list a .icon {
color: var(--color-teal-text);
}
.help-popular-list a:hover > span:first-child,
.help-popular-list a:focus-visible > span:first-child {
text-decoration: underline;
text-underline-offset: 3px;
}
/* Partner-mode and Club notices right under the direct answer / the guide summary. */
.help-notice {
margin: calc(var(--space-6) * -1) 0 var(--space-10);
}
.guide-notice {
margin: 0 0 var(--space-6);
}
.help-notice .notice,
.guide-notice .notice {
margin: 0;
}
.help-notice .notice p,
.guide-notice .notice p {
margin: 0;
}
/* «Más sobre este tema»: related questions, the guide and the main page on the same topic. */
.help-related li,
.guide-related li {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--space-3);
}
.help-related li > a,
.guide-related li > a {
flex: 1 1 auto;
min-width: 0;
}
.guide-related ul {
list-style: none;
margin: 0;
padding: 0;
}
.guide-related li {
margin: 0;
border-top: 1px solid var(--color-border-light);
}
.guide-related li:last-child {
border-bottom: 1px solid var(--color-border-light);
}
.guide-related a {
display: block;
padding: var(--space-3) 0;
font-weight: var(--font-weight-medium);
}
.related-kind {
flex: none;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
/* ==========================================================================
Legal and company pages: SEO pass
========================================================================== */
.legal-header .notice { margin: 0 0 var(--space-4); }
.legal-section .notice { margin: 0 0 var(--space-4); }
.legal-page .notice > p:last-child { margin-bottom: 0; }
.legal-changelog {
list-style: none;
padding: 0;
margin: 0;
font-variant-numeric: tabular-nums;
}
.legal-changelog li {
padding: var(--space-3) 0;
border-top: 1px solid var(--color-border-light);
}
.legal-changelog li:last-child { border-bottom: 1px solid var(--color-border-light); }
/* ==========================================================================
Service pages: SEO pass
========================================================================== */
/* Several lines of centred text are hard to follow on a phone; the lead above stays centred. */
.svc-page .section-title-wrap .notice {
margin-top: var(--space-4);
margin-bottom: 0;
text-align: left;
}
/* «¿Tu préstamo es de otra entidad?» block between the lead and the content. */
.svc-page > .other-entity {
max-width: 720px;
margin: 0 auto var(--space-6);
background: var(--color-paper);
color: var(--color-text-main);
}
.svc-page > .other-entity p {
margin: 0;
}