@font-face { font-family: 'Meridien LT Std'; src: url('../fonts/meridien/MeridienLTStd-Medium.woff2') format('woff2'); font-weight: var(--fw-medium); font-style: normal; font-display: swap; } @font-face { font-family: 'Meridien LT Std'; src: url('../fonts/meridien/MeridienLTStd-Bold.woff2') format('woff2'); font-weight: bold; font-style: normal; font-display: swap; } @font-face { font-family: 'Meridien LT Std'; src: url('../fonts/meridien/MeridienLTStd-BoldItalic.woff2') format('woff2'); font-weight: bold; font-style: italic; font-display: swap; } @font-face { font-family: 'Meridien LT Std'; src: url('../fonts/meridien/MeridienLTStd-MediumItalic.woff2') format('woff2'); font-weight: var(--fw-medium); font-style: italic; font-display: swap; } @font-face { font-family: 'Meridien LT Std'; src: url('../fonts/meridien/MeridienLTStd-Roman.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } :root { /* PRIMARY COLOR */ --pm-primary-900: #A89968; --pm-primary-800: #B0A376; --pm-primary-700: #C2B795; --pm-primary-600: #CBC2A4; --pm-primary-500: #D3CCB3; --pm-primary-400: #DCD6C2; --pm-primary-300: #EEEBE1; --pm-primary-200: #F6F5EF; --pm-primary-100: #FBFAF7; --pm-primary-50: #C8B18B; --pm-primary-10: #ECEBE5; /* SECONDARY COLOR */ --pm-secondary-900: #323232; --pm-secondary-800: #8A8D8F; --pm-secondary-700: #84754E; /* FONTS */ --pm-font-primary: "Agenda", sans-serif; --pm-font-secondary: "Meridien LT Std", sans-serif; /* FONT WEIGHT SCALE Base: Windows / Android / navegadores no-WebKit Los pesos se ajustan por plataforma debajo ↓ */ --fw-thin: 200; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; } /* ─── Safari macOS + iOS ──────────────────────────────────────── @supports (background: -webkit-named-image(i)) es reconocido SOLO por Safari (macOS e iOS). Chrome y Firefox lo ignoran, aunque también corran en macOS. → Un paso más ligero en toda la escala para compensar el rendering más pesado del motor de texto de Apple. ──────────────────────────────────────────────────────────────── */ @supports (background: -webkit-named-image(i)) { :root { --fw-thin: 100; --fw-light: 200; --fw-regular: 300; --fw-medium: 400; --fw-semibold: 500; --fw-bold: 600; } } /* ─── Chrome / Edge en macOS ──────────────────────────────────── Mismo rendering pesado de Apple pero no es Safari. Se detecta vía JS añadiendo .is-mac al (ver main.js). Ajuste más conservador: solo --fw-light y --fw-regular. ──────────────────────────────────────────────────────────────── */ html.is-mac:not(.is-safari) { --fw-light: 300; --fw-regular: 400; } html { scrollbar-gutter: stable; scroll-behavior: smooth; } html, body { margin: 0; padding: 0; box-sizing: border-box; height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--pm-font-primary); color: var(--pm-secondary-900); } /* LINKS GENERALES */ a { color: var(--pm-primary); text-decoration: none; } /* TITULOS */ h1, h2, h3, h4 { font-weight: var(--fw-semibold); margin: 0 0 0.75rem; } /* Buttons */ .btn { font-weight: var(--fw-light); } .btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active { color: var(--pm-secondary-900); background-color: transparent; border-color: transparent; } .btn-primary { background: transparent; color: var(--pm-secondary-900); border: none; border-radius: 0; text-decoration: none; box-shadow: none; transition: opacity .25s ease; } .btn-primary:hover, .btn-primary:focus { color: var(--pm-secondary-900); background-color: #fff; border-color: #fff; border-radius: 0; } .btn-secondary { color: #fff; background-color: transparent; border-color: #fff; border-radius: 0; } .btn-secondary:hover, .btn-secondary:focus{ color: var(--pm-secondary-900); background-color: #fff; border-color: #fff; border-radius: 0; transition: background-color .25s ease; } .btn-border-bottom-black { position: relative; border-bottom: none !important; padding-left: 0; padding-right: 0; width: fit-content; margin: 0; padding-bottom: 0; } .btn-border-bottom-black::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: var(--pm-secondary-900); transform: scaleX(1); transform-origin: left; transition: transform 0.3s ease; } .btn-border-bottom-black:hover::after { transform: scaleX(0); } /* CONTENIDO PRINCIPAL */ .content-area { flex: 1 0 auto; } /* FOOTER */ .site-footer { flex-shrink: 0; font-size: 0.875rem; } .container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { --bs-gutter-x: 4rem; --bs-gutter-y: 0; } /* Media queries */ @media (min-width: 992px) { .container, .container-lg, .container-md, .container-sm { max-width: 992px !important; } } @media (min-width: 1200px) { .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1200px !important; } } @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1400px !important; } } /* OCULTAR EL BADGE DE reCAPTCHA v3 */ /*.grecaptcha-badge {*/ /* visibility: hidden !important;*/ /* opacity: 0 !important;*/ /* display: none !important;*/ /*}*/ /* Class Media Queries Custom Bootstrap */ @media (min-width: 576px) { .px-sm-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-sm-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-sm-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-sm-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-sm-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-sm-5 { padding-left: 3rem !important; padding-right: 3rem !important; } } @media (min-width: 768px) { .px-md-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-md-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-md-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-md-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-md-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-md-5 { padding-left: 3rem !important; padding-right: 3rem !important; } } @media (min-width: 992px) { .px-lg-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-lg-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-lg-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-lg-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-lg-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-lg-5 { padding-left: 3rem !important; padding-right: 3rem !important; } } @media (min-width: 1200px) { .px-xl-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-xl-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-xl-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-xl-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-xl-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-xl-5 { padding-left: 3rem !important; padding-right: 3rem !important; } } @media (min-width: 1400px) { .px-xxl-0 { padding-left: 0 !important; padding-right: 0 !important; } .px-xxl-1 { padding-left: .25rem !important; padding-right: .25rem !important; } .px-xxl-2 { padding-left: .5rem !important; padding-right: .5rem !important; } .px-xxl-3 { padding-left: 1rem !important; padding-right: 1rem !important; } .px-xxl-4 { padding-left: 2rem !important; padding-right: 2rem !important; } .px-xxl-5 { padding-left: 3rem !important; padding-right: 3rem !important; } } /* ========================================================================== PAGE 404 ========================================================================== */ .page-404 { display: flex; min-height: calc(80vh - 134px); margin-top: 134px; background-color: var(--pm-primary-10); } .page-404__content { flex: 0 0 50%; display: flex; flex-direction: column; justify-content: center; padding: 5rem 4rem 5rem 6rem; } .page-404__badge { display: inline-flex; align-items: center; border: 1px solid var(--pm-secondary-900); border-radius: 999px; padding: 0.25rem 0.875rem; font-family: var(--pm-font-primary); font-size: 0.75rem; font-weight: var(--fw-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pm-secondary-900); width: fit-content; margin-bottom: 1rem; } .page-404__number { font-family: var(--pm-font-secondary); font-style: italic; font-weight: var(--fw-light); font-size: clamp(8rem, 14vw, 16rem); line-height: 0.85; color: var(--pm-secondary-900); margin: 0 0 2rem; letter-spacing: -0.02em; } .page-404__title { font-family: var(--pm-font-primary); font-size: clamp(1.5rem, 2.5vw, 2.125rem); font-weight: var(--fw-light); line-height: 1.25; color: var(--pm-secondary-900); margin: 0 0 1.25rem; max-width: 480px; } .page-404__description { font-family: var(--pm-font-primary); font-size: 0.9375rem; font-weight: var(--fw-light); line-height: 1.6; color: var(--pm-secondary-900); margin: 0 0 2.5rem; max-width: 420px; } .page-404__link { display: inline-block; font-family: var(--pm-font-primary); font-size: 0.9375rem; font-weight: var(--fw-regular); color: var(--pm-secondary-900); text-decoration: underline; text-underline-offset: 4px; transition: opacity 0.2s ease; width: fit-content; } .page-404__link:hover { opacity: 0.6; color: var(--pm-secondary-900); } .page-404__media { flex: 0 0 50%; position: relative; overflow: hidden; } .page-404__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } @media (min-width: 992px) { .page-404{ min-height: calc(100vh - 90px); margin-top: 90px; } } @media (max-width: 991.98px) { .page-404 { flex-direction: column; min-height: auto; } .page-404__content { flex: none; padding: 4rem 2rem 3rem; } .page-404__media { flex: none; height: 55vw; min-height: 260px; position: relative; } } @media (max-width: 575.98px) { .page-404__content { padding: 3rem 1.5rem 2.5rem; } .page-404__number { font-size: clamp(6rem, 22vw, 9rem); } }