/* ============================================================ SOVEREIGN EDITORIAL — Design System Juan Marín · Web Personal ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ /* Las fuentes se cargan vía en el de cada página (con preconnect). No usar @import aquí: bloquea el render. */ /* ── Custom Properties ────────────────────────────────────── */ :root { --color-bg: #fdf9f3; --color-surface-low: #f7f3ed; --color-surface: #f1ede7; --color-surface-high: #ebe7e1; --color-primary: #051634; --color-primary-container: #1c2b4a; --color-secondary: #825500; --color-secondary-container: #fcba57; --color-on-surface: #1c1c18; --color-on-surface-variant: #45464e; --color-outline: #75777e; --color-outline-variant: #c5c6cf; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --container-max: 1280px; --margin-desktop: 80px; --margin-mobile: 24px; --gutter: 32px; --section-gap: 72px; --border-subtle: 1px solid rgba(5, 22, 52, 0.12); --border-card: 1px solid rgba(5, 22, 52, 0.15); --border-separator: 1px solid rgba(5, 22, 52, 0.15); } /* ── Reset ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } body { background-color: var(--color-bg); color: var(--color-on-surface); font-family: var(--font-body); font-weight: 400; line-height: 1.6; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ── Typography Scale ─────────────────────────────────────── */ .display-xl { font-family: var(--font-display); font-size: 52px; font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; } .headline-lg { font-family: var(--font-display); font-size: 38px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .headline-md { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.25; } .headline-sm { font-family: var(--font-display); font-size: 22px; font-weight: 500; line-height: 1.35; } .body-lg { font-size: 18px; font-weight: 400; line-height: 1.65; } .body-md { font-size: 16px; font-weight: 400; line-height: 1.65; } .body-sm { font-size: 14px; font-weight: 400; line-height: 1.5; } .label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-secondary); } .overline { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-secondary); display: block; margin-bottom: 12px; } /* ── Layout ───────────────────────────────────────────────── */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); } section { padding: var(--section-gap) 0; } section + section { border-top: var(--border-separator); } /* ── Two-column responsive grid (para reemplazar inline 1fr 1fr) ── */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; } .two-col--start { align-items: start; } @media (max-width: 900px) { .two-col, .two-col--start { grid-template-columns: 1fr; gap: 48px; } } /* ── Buttons ──────────────────────────────────────────────── */ .btn { display: inline-block; font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 14px 32px; border: none; border-radius: 0; cursor: pointer; transition: opacity 0.15s ease, background-color 0.15s ease; text-decoration: none; } .btn-primary { background-color: var(--color-primary); color: #ffffff; } .btn-primary:hover { background-color: var(--color-primary-container); } .btn-cta { background-color: var(--color-secondary-container); color: var(--color-primary); } .btn-cta:hover { opacity: 0.88; } .btn-cta:disabled { opacity: 0.35; cursor: not-allowed; } .btn-ghost { background-color: transparent; color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-ghost:hover { background-color: rgba(5, 22, 52, 0.05); } /* ── Navigation ───────────────────────────────────────────── */ .nav { position: sticky; top: 0; z-index: 100; background-color: var(--color-bg); border-bottom: var(--border-separator); } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); } .nav-hamburger { justify-self: end; } .nav-logo { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-primary); letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .nav-logo__img { width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0; } .nav-links { display: flex; align-items: center; gap: 40px; } .nav-links a { font-size: 14px; font-weight: 500; color: var(--color-on-surface-variant); transition: color 0.15s ease; } .nav-links a:hover, .nav-links a.active { color: var(--color-primary); } .nav-dropdown { position: relative; } .nav-dropdown-trigger { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--color-on-surface-variant); cursor: pointer; background: none; border: none; padding: 0; font-family: var(--font-body); transition: color 0.15s ease; } .nav-dropdown-trigger:hover, .nav-dropdown-trigger.active { color: var(--color-primary); } .nav-dropdown-trigger svg { transition: transform 0.2s ease; } .nav-dropdown-trigger.open svg { transform: rotate(180deg); } .nav-dropdown-menu { display: none; position: absolute; top: calc(100% + 16px); left: 0; background-color: var(--color-bg); border: var(--border-card); min-width: 220px; z-index: 200; } .nav-dropdown-menu.open { display: block; } .nav-dropdown-menu a { display: block; padding: 12px 20px; font-size: 14px; font-weight: 500; color: var(--color-on-surface-variant); border-bottom: var(--border-separator); transition: background-color 0.15s ease, color 0.15s ease; } .nav-dropdown-menu a:last-child { border-bottom: none; } .nav-dropdown-menu a:hover { background-color: var(--color-surface-low); color: var(--color-primary); } .nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; } .nav-hamburger span { display: block; width: 24px; height: 2px; background-color: var(--color-primary); transition: transform 0.2s ease, opacity 0.2s ease; } .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-hamburger.open span:nth-child(2) { opacity: 0; } .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile { display: none; background-color: var(--color-bg); border-top: var(--border-separator); border-bottom: var(--border-separator); } .nav-mobile.open { display: block; } .nav-mobile a, .nav-mobile-dropdown-trigger { display: block; padding: 14px var(--margin-mobile); font-size: 15px; font-weight: 500; color: var(--color-on-surface-variant); border-bottom: var(--border-separator); transition: color 0.15s ease; background: none; border-left: none; border-right: none; border-top: none; width: 100%; text-align: left; font-family: var(--font-body); cursor: pointer; display: flex; align-items: center; justify-content: space-between; } .nav-mobile a.active, .nav-mobile a:hover { color: var(--color-primary); } .nav-mobile-dropdown-trigger svg { transition: transform 0.2s ease; } .nav-mobile-dropdown-trigger.open svg { transform: rotate(180deg); } .nav-mobile-submenu { display: none; background-color: var(--color-surface-low); } .nav-mobile-submenu.open { display: block; } .nav-mobile-submenu a { padding-left: calc(var(--margin-mobile) + 16px); font-size: 14px; } /* ── Footer ───────────────────────────────────────────────── */ .footer { padding: 48px 0; } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); } .footer-brand { font-family: var(--font-display); font-size: 18px; font-weight: 600; } .footer-links { display: flex; align-items: center; gap: 32px; flex-wrap: wrap; } .footer-links a { font-size: 13px; font-weight: 400; transition: color 0.15s ease; } .footer-copyright { font-size: 13px; width: 100%; margin-top: 8px; } /* ── Image Placeholder ────────────────────────────────────── */ .img-placeholder { background-color: var(--color-surface-high); border: 1px solid var(--color-outline-variant); display: flex; align-items: center; justify-content: center; color: var(--color-outline); font-size: 14px; font-family: var(--font-body); width: 100%; } /* ── Cards ────────────────────────────────────────────────── */ .card { border: var(--border-card); padding: 40px; background-color: var(--color-bg); } .card-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); display: block; margin-bottom: 16px; } .card-title { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; } .card-description { font-size: 16px; color: var(--color-on-surface-variant); line-height: 1.6; margin-bottom: 32px; } /* ── Photo Hero (horizontal, with overlay) ────────────────── */ /* ── Hero portrait (home, foto vertical) ─────────────────────── */ .hero-portrait { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 10%; } @media (max-width: 768px) { .hero-portrait { aspect-ratio: 3 / 4; max-height: 460px; } } /* ── Hero Sobre Mí — foto panorámica con título centrado ─────── */ .hero-sobre-mi { position: relative; width: 100%; height: min(680px, 50vw); min-height: 480px; overflow: hidden; background-color: var(--color-primary); } .hero-sobre-mi__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; } .hero-sobre-mi__content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 var(--margin-desktop); background: linear-gradient( to right, rgba(5, 22, 52, 0) 15%, rgba(5, 22, 52, 0.20) 40%, rgba(5, 22, 52, 0.40) 100% ); } .hero-sobre-mi__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary-container); margin-bottom: 24px; } .hero-sobre-mi__title { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 48px); font-weight: 600; line-height: 1.2; color: #ffffff; max-width: 560px; margin: 0; } @media (max-width: 768px) { .hero-sobre-mi { height: auto; min-height: unset; display: flex; flex-direction: column; } .hero-sobre-mi__img { position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; } .hero-sobre-mi__content { position: relative; inset: auto; background: var(--color-primary); padding: 32px var(--margin-mobile); text-align: left; align-items: flex-start; } .hero-sobre-mi__title { font-size: 26px; max-width: 100%; } } .hero-photo { position: relative; width: 100%; height: 560px; overflow: hidden; } .hero-photo__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; } .hero-photo__overlay { position: absolute; inset: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; padding: 40px var(--margin-desktop); } .hero-photo__quote, .hero-photo__label { text-shadow: 0 2px 16px rgba(5, 22, 52, 0.70); } /* ── CTA inline — bloque intermedio compacto con botón ──────── */ .cta-inline-section { background-color: var(--color-surface-low); border-top: 1px solid var(--color-outline-variant); border-bottom: 1px solid var(--color-outline-variant); } .cta-inline { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; } .cta-inline__title { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.25; color: var(--color-primary); margin: 0 0 12px; max-width: 640px; } .cta-inline__sub { font-size: 16px; line-height: 1.55; color: var(--color-on-surface-variant); margin: 0; max-width: 560px; } @media (max-width: 768px) { .cta-inline { grid-template-columns: 1fr; gap: 28px; } .cta-inline__title { font-size: 22px; } } /* ── Program break — foto enmarcada en bloque con fondo ──────── */ .program-break { width: 100%; padding: 0; background-color: var(--color-surface-high); } .program-break__img { display: block; width: calc(100% - 2 * var(--margin-desktop)); max-width: var(--container-max); height: auto; margin: 0 auto; } @media (max-width: 768px) { .program-break__img { width: calc(100% - 2 * var(--margin-mobile)); } } .hero-photo__label { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-secondary-container); margin-top: 0; margin-bottom: 24px; } .hero-photo__quote { font-family: var(--font-display); font-size: 36px; font-weight: 600; line-height: 1.25; color: #ffffff; max-width: 820px; font-style: italic; } @media (max-width: 768px) { .hero-photo { height: 380px; } .hero-photo__overlay { padding: 32px var(--margin-mobile); } .hero-photo__quote { font-size: 22px; } .hero-photo__label { font-size: 11px; margin-bottom: 16px; } } /* ── Fit Grid (Es para ti / No es para ti) ────────────────── */ .fit-grid { display: grid; grid-template-columns: 1fr 1fr; } .fit-card { padding: 48px 40px; } .fit-card--yes { background-color: var(--color-surface-low); border: 1px solid var(--color-outline-variant); border-right: none; } .fit-card--no { background-color: var(--color-surface-high); border: 1px solid var(--color-outline-variant); } .fit-card__title { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--color-primary); margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--color-outline-variant); } .fit-list { display: flex; flex-direction: column; gap: 14px; } .fit-list__item { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: var(--color-on-surface-variant); line-height: 1.55; } .fit-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; } .fit-icon--yes { color: var(--color-secondary); } .fit-icon--no { color: var(--color-on-surface-variant); } @media (max-width: 768px) { .fit-grid { grid-template-columns: 1fr; } .fit-card--yes { border-right: 1px solid var(--color-outline-variant); border-bottom: none; } .fit-card { padding: 36px 24px; } } /* ── Stats Strip ──────────────────────────────────────────── */ .stats-strip { background-color: var(--color-primary-container); padding: 40px 0; } .stats-strip__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--margin-desktop); display: flex; justify-content: center; gap: 80px; } .stat-item { text-align: center; } .stat-item__number { font-family: var(--font-display); font-size: 44px; font-weight: 700; color: #ffffff; line-height: 1; letter-spacing: -0.02em; } .stat-item__label { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-top: 8px; } @media (max-width: 768px) { .stats-strip__inner { gap: 40px; padding: 0 var(--margin-mobile); } .stat-item__number { font-size: 32px; } } /* ── Asymmetric Section ────────────────────────────────────── */ .asym-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .asym-grid__label { position: sticky; top: 96px; } @media (max-width: 768px) { .asym-grid { grid-template-columns: 1fr; gap: 32px; } .asym-grid__label { position: static; } } /* ── Methodology Bento ─────────────────────────────────────── */ .method-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(5,22,52,0.12); border-left: 1px solid rgba(5,22,52,0.12); } .method-block { padding: 48px 40px; border-right: 1px solid rgba(5,22,52,0.12); border-bottom: 1px solid rgba(5,22,52,0.12); transition: background-color 0.35s ease; } .method-block:hover { background-color: var(--color-surface-low); } .method-block__icon { width: 40px; height: 40px; color: var(--color-primary); margin-bottom: 28px; } .method-block__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--color-primary); margin-bottom: 14px; line-height: 1.3; } .method-block__text { font-size: 15px; color: var(--color-on-surface-variant); line-height: 1.65; } @media (max-width: 768px) { .method-grid { grid-template-columns: 1fr; } .method-block { padding: 36px 24px; } } /* ── Numbered Steps ────────────────────────────────────────── */ .steps-list { display: flex; flex-direction: column; gap: 0; } .step-item { display: grid; grid-template-columns: 80px 1fr; gap: 0; padding: 40px 0; border-bottom: 1px solid rgba(255,255,255,0.10); } .step-item:first-child { border-top: 1px solid rgba(255,255,255,0.10); } .step-item__num { font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--color-secondary-container); line-height: 1; opacity: 0.60; } .step-item__body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: #ffffff; margin-bottom: 10px; margin-top: 4px; } .step-item__body p { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.65; } @media (max-width: 768px) { .step-item { grid-template-columns: 56px 1fr; } .step-item__num { font-size: 36px; } } /* ── Testimonial Carousel ──────────────────────────────────── */ .testi-carousel { overflow: hidden; position: relative; } .testi-track { display: flex; transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1); } .testi-slide { min-width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background-color: var(--color-outline-variant); } .testi-card { background-color: var(--color-surface-low); padding: 52px 48px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } .testi-card__quote-mark { font-family: var(--font-display); font-size: 80px; line-height: 0.6; color: var(--color-secondary-container); font-style: normal; display: block; margin-bottom: 8px; } .testi-card__text { font-family: var(--font-display); font-size: 20px; font-style: italic; color: var(--color-primary); line-height: 1.5; flex: 1; } .testi-card__source { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-outline); } .testi-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 40px; } .testi-btn { width: 44px; height: 44px; border: 1px solid var(--color-outline-variant); background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--color-primary); transition: background-color 0.2s, border-color 0.2s; } .testi-btn:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #ffffff; } .testi-btn svg { width: 18px; height: 18px; } .testi-dots { display: flex; gap: 8px; align-items: center; } .testi-dot { width: 6px; height: 6px; background-color: var(--color-outline-variant); border: none; cursor: pointer; transition: background-color 0.2s, transform 0.2s; padding: 0; } .testi-dot.active { background-color: var(--color-primary); transform: scale(1.4); } @media (max-width: 768px) { .testi-slide { grid-template-columns: 1fr; } .testi-card { padding: 36px 24px; } .testi-card__text { font-size: 18px; } } /* ── Program Cards (home) ─────────────────────────────────── */ .program-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } .program-card { display: flex; flex-direction: column; justify-content: space-between; padding: 48px 40px 40px; transition: background-color 0.45s ease; cursor: default; } .program-card--light { background-color: var(--color-surface-low); border: 1px solid var(--color-outline-variant); } .program-card--dark { background-color: var(--color-surface-high); border: 1px solid var(--color-outline-variant); } .program-card:hover { background-color: var(--color-primary); } .program-card__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 32px; } .program-card__number { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-secondary); transition: color 0.45s ease; } .program-card:hover .program-card__number { color: var(--color-secondary-container); } .program-card__type { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-outline); transition: color 0.45s ease; } .program-card:hover .program-card__type { color: rgba(255, 255, 255, 0.50); } .program-card__body { flex: 1; } .program-card__title { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; line-height: 1.25; transition: color 0.45s ease; } .program-card:hover .program-card__title { color: #ffffff; } .program-card__desc { font-size: 16px; color: var(--color-on-surface-variant); line-height: 1.6; margin-bottom: 32px; transition: color 0.45s ease; } .program-card:hover .program-card__desc { color: rgba(255, 255, 255, 0.65); } .program-card__bullets { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 18px; } .program-card__bullets li { position: relative; padding-left: 24px; font-size: 15px; line-height: 1.55; color: var(--color-on-surface-variant); transition: color 0.45s ease; } .program-card__bullets li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 12px; height: 2px; background-color: var(--color-secondary); transition: background-color 0.45s ease; } .program-card__bullets strong { font-weight: 600; color: var(--color-primary); transition: color 0.45s ease; } .program-card:hover .program-card__bullets li { color: rgba(255, 255, 255, 0.88); } .program-card:hover .program-card__bullets li::before { background-color: var(--color-secondary-container); } .program-card:hover .program-card__bullets strong { color: #ffffff; } .program-card .btn-ghost { transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease; } .program-card:hover .btn-ghost { border-color: rgba(255, 255, 255, 0.40); color: #ffffff; } .program-card .btn-ghost:hover, .program-card .btn-ghost:focus-visible, .program-card:hover .btn-ghost:hover, .program-card:hover .btn-ghost:focus-visible { background-color: var(--color-secondary-container); border-color: var(--color-secondary-container); color: var(--color-primary); } @media (max-width: 768px) { .program-grid { grid-template-columns: 1fr; } .program-card { aspect-ratio: auto; min-height: 320px; } } /* ── Quote / Blockquote ───────────────────────────────────── */ .quote-block { border-left: 2px solid var(--color-primary); padding: 8px 0 8px 32px; margin: 40px 0; } .quote-block p { font-family: var(--font-display); font-size: 28px; font-weight: 500; line-height: 1.3; color: var(--color-primary); font-style: italic; } .quote-block cite { display: block; margin-top: 12px; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-outline); font-style: normal; } /* ── Numbered List (Playfair numbers) ─────────────────────── */ .numbered-list { counter-reset: item; } .numbered-list li { display: flex; gap: 24px; padding: 32px 0; border-bottom: var(--border-separator); align-items: flex-start; } .numbered-list li:first-child { border-top: var(--border-separator); } .numbered-list li::before { counter-increment: item; content: counter(item, decimal-leading-zero); font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--color-outline-variant); line-height: 1; flex-shrink: 0; min-width: 60px; } .numbered-list li > div { padding-top: 8px; } .numbered-list li h3 { font-size: 18px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; } .numbered-list li p { font-size: 16px; color: var(--color-on-surface-variant); line-height: 1.6; } /* ── Lead Bullets ─────────────────────────────────────────── */ .lead-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .lead-bullets li { position: relative; padding-left: 32px; font-size: 18px; line-height: 1.6; color: var(--color-on-surface-variant); } .lead-bullets li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 18px; height: 2px; background-color: var(--color-secondary); } .lead-bullets strong { font-weight: 600; color: var(--color-primary); } /* ── Testimonial List ─────────────────────────────────────── */ .testimonial-list { display: grid; gap: 0; } .testimonial-item { padding: 40px 0; border-bottom: var(--border-separator); } .testimonial-item:first-child { border-top: var(--border-separator); } .testimonial-item:last-child { border-bottom: none; } .testimonial-item p { font-family: var(--font-display); font-size: 22px; font-weight: 500; font-style: italic; color: var(--color-primary); line-height: 1.4; margin-bottom: 12px; } .testimonial-item cite { font-size: 13px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-outline); font-style: normal; } /* ── Two-column grid ──────────────────────────────────────── */ .col-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); } .col-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } /* ── Hero ─────────────────────────────────────────────────── */ .hero { padding: var(--section-gap) 0; } .hero-content { max-width: 720px; } .hero-actions { margin-top: 40px; display: flex; gap: 16px; flex-wrap: wrap; } /* ── Section header ───────────────────────────────────────── */ .section-header { margin-bottom: 64px; } .section-header p { margin-top: 20px; max-width: 600px; color: var(--color-on-surface-variant); font-size: 18px; line-height: 1.6; } /* ── CTA Section ──────────────────────────────────────────── */ .cta-section { background-color: var(--color-surface-low); } .cta-section .section-header { margin-bottom: 32px; } /* ── Form ─────────────────────────────────────────────────── */ .form-group { margin-bottom: 32px; } .form-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 10px; } .form-input, .form-select, .form-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--color-outline-variant); padding: 10px 0; font-family: var(--font-body); font-size: 16px; color: var(--color-on-surface); outline: none; border-radius: 0; transition: border-color 0.15s ease; appearance: none; -webkit-appearance: none; } .form-input:focus, .form-select:focus, .form-textarea:focus { border-bottom-color: transparent; border: 1px solid var(--color-primary); padding: 9px 12px; } .form-textarea { resize: vertical; min-height: 100px; } .form-select { cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2375777e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; padding-right: 24px; } .form-note { font-size: 13px; color: var(--color-outline); margin-top: 16px; } /* ── About page narrative ─────────────────────────────────── */ .bio-prose { max-width: 880px; } .bio-prose p { font-size: 18px; color: var(--color-on-surface); line-height: 1.75; margin-bottom: 32px; } .bio-prose p:last-child { margin-bottom: 0; } .bio-prose strong { font-weight: 600; color: var(--color-primary); } .bio-prose em { font-style: italic; color: var(--color-on-surface); } .bio-prose__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-top: 8px; margin-bottom: 14px; } .bio-prose__closing { margin-top: 16px !important; font-size: 19px; color: var(--color-on-surface); } .bio-prose__closing em { font-style: italic; } .narrative-section { margin-bottom: 56px; } .narrative-section h3 { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-secondary); margin-bottom: 16px; } .narrative-section p { font-size: 18px; color: var(--color-on-surface); line-height: 1.7; max-width: 680px; } /* ── Highlighted quote (big) ──────────────────────────────── */ .quote-highlight { background-color: var(--color-surface-low); padding: var(--section-gap) 0; border-top: var(--border-separator); border-bottom: var(--border-separator); } .quote-highlight p { font-family: var(--font-display); font-size: 40px; font-weight: 600; line-height: 1.2; color: var(--color-primary); max-width: 800px; font-style: italic; } /* ── Program hero accent ──────────────────────────────────── */ .hero-program { background-color: var(--color-surface-low); border-bottom: var(--border-separator); } /* ── Who is it for ────────────────────────────────────────── */ .check-list li, .cross-list li { padding: 12px 0; border-bottom: var(--border-separator); font-size: 16px; color: var(--color-on-surface); display: flex; align-items: flex-start; gap: 12px; } .check-list li::before { content: "→"; color: var(--color-primary); font-weight: 600; flex-shrink: 0; } .cross-list li::before { content: "×"; color: var(--color-outline); font-weight: 600; flex-shrink: 0; } /* ── Content page cards ───────────────────────────────────── */ .media-card { border: var(--border-card); overflow: hidden; } .media-card-body { padding: 24px; } .media-card-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 500; color: var(--color-primary); margin-bottom: 8px; } .media-card-body p { font-size: 15px; color: var(--color-on-surface-variant); line-height: 1.5; } /* ── Cookie banner ────────────────────────────────────────── */ .cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; background-color: var(--color-primary); color: #ffffff; padding: 20px var(--margin-desktop); display: flex; align-items: center; justify-content: space-between; gap: 24px; z-index: 999; border-top: 2px solid var(--color-secondary-container); } .cookie-banner p { font-size: 14px; line-height: 1.5; max-width: 700px; } .cookie-banner a { color: var(--color-secondary-container); text-decoration: underline; } .cookie-banner-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .cookie-banner-btn { background-color: var(--color-secondary-container); color: var(--color-primary); border: 1px solid var(--color-secondary-container); padding: 10px 24px; font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; border-radius: 0; white-space: nowrap; flex-shrink: 0; transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .cookie-banner-btn:hover { opacity: 0.88; } /* Rechazar — sin relleno, contorno claro sobre el banner oscuro */ .cookie-banner-btn--ghost { background-color: transparent; color: #ffffff; border-color: rgba(255, 255, 255, 0.40); } .cookie-banner-btn--ghost:hover { opacity: 1; background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.70); } /* ── Utility ──────────────────────────────────────────────── */ .text-primary { color: var(--color-primary); } .text-variant { color: var(--color-on-surface-variant); } .text-outline { color: var(--color-outline); } .mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; } .mb-48 { margin-bottom: 48px; } .mt-32 { margin-top: 32px; } .mt-48 { margin-top: 48px; } .mt-64 { margin-top: 64px; } /* =========================== SECTION VARIANTS =========================== */ /* Sección oscura (navy) */ .section-dark { background-color: var(--color-primary); color: #ffffff; } .section-dark .overline { color: var(--color-secondary-container); border-color: var(--color-secondary-container); } .section-dark .section-header h2, .section-dark h2, .section-dark h3, .section-dark h4 { color: #ffffff; } .section-dark p, .section-dark li { color: rgba(255, 255, 255, 0.72); } .section-dark .quote-block { border-left-color: var(--color-secondary-container); } .section-dark .quote-block p { color: rgba(255, 255, 255, 0.90); } .section-dark .quote-highlight p { color: #ffffff; } .section-dark .quote-highlight::before { color: var(--color-secondary-container); } .section-dark .divider { border-color: rgba(255, 255, 255, 0.12); } .section-dark .numbered-list li::before { color: var(--color-secondary-container); } .section-dark .card { background-color: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.12); } .section-dark .card h3 { color: #ffffff; } .section-dark .card p { color: rgba(255, 255, 255, 0.65); } .section-dark .btn-ghost { border-color: rgba(255, 255, 255, 0.40); color: #ffffff; } .section-dark .btn-ghost:hover { background-color: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.70); } .section-dark .testimonial-item { border-color: rgba(255, 255, 255, 0.12); } .section-dark .testimonial-item p { color: rgba(255, 255, 255, 0.85); } .section-dark .testimonial-item cite { color: rgba(255, 255, 255, 0.50); } /* Sección superficie baja (off-white ligeramente más oscuro) */ .section-surface { background-color: var(--color-surface-low); } .section-surface-high { background-color: var(--color-surface-high); } /* Footer oscuro */ .footer { background-color: var(--color-primary-container); color: #ffffff; border-top: 2px solid var(--color-secondary); } .footer-brand { color: #ffffff; } .footer-links a { color: rgba(255, 255, 255, 0.65); } .footer-links a:hover { color: #ffffff; } .footer-copyright { color: rgba(255, 255, 255, 0.40); } /* ── El Problema — two-column layout ─────────────────────── */ .problema-layout { display: grid; grid-template-columns: 2fr 3fr; gap: 0; align-items: center; } .problema-layout__left { padding-right: 72px; border-right: 1px solid rgba(255, 255, 255, 0.15); } .problema-layout__right { padding-left: 72px; } .problema-layout__right > .quote-block:first-child { margin-top: 0; } /* ── Testimonial Grid (2×2) ──────────────────────────────── */ .testimonial-list--grid { grid-template-columns: 1fr 1fr; } .testimonial-list--grid .testimonial-item { padding: 48px 48px; } .testimonial-list--grid .testimonial-item:first-child { border-top: none; } .testimonial-list--grid .testimonial-item:nth-child(3), .testimonial-list--grid .testimonial-item:nth-child(4) { border-bottom: none; } .testimonial-list--grid .testimonial-item:nth-child(odd) { border-right: var(--border-separator); padding-left: 0; } .testimonial-list--grid .testimonial-item:nth-child(even) { padding-right: 0; } .section-dark .testimonial-list--grid .testimonial-item:nth-child(odd) { border-right-color: rgba(255, 255, 255, 0.12); } /* ── Section header centered variant ─────────────────────── */ .section-header--centered { text-align: center; margin-bottom: 48px; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 768px) { :root { --section-gap: 52px; } .container { padding: 0 var(--margin-mobile); } .display-xl { font-size: 34px; } .headline-lg { font-size: 26px; } .headline-md { font-size: 22px; } .quote-block p { font-size: 20px; } .quote-highlight p { font-size: 24px; } .col-2, .col-3 { grid-template-columns: 1fr; } .nav-inner { padding: 0 var(--margin-mobile); } .nav-links { display: none; } .nav-hamburger { display: flex; } .footer-inner { padding: 0 var(--margin-mobile); flex-direction: column; align-items: flex-start; } .footer-links { gap: 20px; } .cookie-banner { flex-direction: column; align-items: flex-start; padding: 20px var(--margin-mobile); gap: 16px; } .hero { padding: 64px 0; } .section-header { margin-bottom: 40px; } .numbered-list li::before { font-size: 32px; min-width: 44px; } .card { padding: 28px; } .testimonial-item p { font-size: 18px; } .nav-mobile a, .nav-mobile-dropdown-trigger { display: flex; } .testimonial-list--grid { grid-template-columns: 1fr; } .testimonial-list--grid .testimonial-item:nth-child(odd) { border-right: none; padding-left: 0; } .testimonial-list--grid .testimonial-item:nth-child(even) { padding-left: 0; padding-right: 0; } .testimonial-list--grid .testimonial-item:nth-child(3) { border-bottom: var(--border-separator); } .section-dark .testimonial-list--grid .testimonial-item:nth-child(3) { border-bottom-color: rgba(255, 255, 255, 0.12); } } @media (max-width: 900px) { .problema-layout { grid-template-columns: 1fr; } .problema-layout__left { padding-right: 0; border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding-bottom: 48px; } .problema-layout__right { padding-left: 0; } }