/* ============================================= ARAGÓN TE ESPERA – Custom CSS ============================================= */ /* Base */ body { font-family: "Plus Jakarta Sans", sans-serif; color: #2F3B4A; background-color: white; overflow-x: hidden; } /* ---- Tipografías ---- */ .titulo-hero, .titulo-1, .titulo-2, .titulo-3, .titulo-4 { font-family: "Playfair Display", serif; font-weight: 700; margin-bottom: 0.5em; line-height: 1.2em; max-width: 850px; color: #001630; text-wrap: balance; } .titulo-hero { font-size: clamp(42px, 5vw, 60px); } .interior .titulo-hero { margin-bottom: 0.2em; } .titulo-1 { font-size: clamp(34px, 4vw, 48px); } .titulo-2 { font-size: clamp(28px, 3vw, 40px); } .titulo-3 { font-size: clamp(22px, 2.5vw, 27px); } .titulo-4 { font-size: clamp(18px, 2vw, 21px); } /* Divisor rojo tras títulos de cabecera y de sección */ .interior-hero .titulo-hero::after, .interior main .titulo-2::after, .interior main .titulo-3::after, body:not(.interior) main .titulo-2::after { content: ""; display: block; width: 60px; height: 4px; background-color: #e73739; margin-top: 20px; margin-bottom: 10px; } /* Centrar el divisor bajo títulos centrados (incluida la cabecera) */ .interior-hero .titulo-hero::after, .interior main .titulo-2.text-center::after, .interior main .titulo-3.text-center::after, body:not(.interior) main .titulo-2.text-center::after { margin-left: auto; margin-right: auto; } .texto-base { font-size: 16px; line-height: 1.8em; max-width: 700px; } .texto-subtitulo { text-wrap: pretty; } @media (min-width: 479px) { .texto-subtitulo { text-wrap: balance; } } /* ---- Imágenes responsive ---- */ main img { max-height: 250px; } @media (min-width: 479px) { main img { max-height: 350px; } } @media (min-width: 768px) { main img { max-height: 500px; } } @media (min-width: 992px) { main img { max-height: none; } } /* ---- Scroll indicator ---- */ .scroll-wheel { width: 2px; height: 8px; background: #fff; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px; animation: scrollWheel 1.5s infinite; } @keyframes scrollWheel { 0% { opacity: 1; top: 8px; } 100% { opacity: 0; top: 24px; } } /* ---- Anchor offset for fixed header ---- */ :target { scroll-margin-top: 120px; } /* ---- Estado inicial de las animaciones de entrada ---- Sin esto, el navegador pinta los elementos visibles, GSAP los pone a opacity 0 y luego los anima: se ve un parpadeo al cargar. La clase `js-anim` la pone js/config.js desde el y la retira js/script.js en cuanto GSAP ha fijado el opacity en línea de cada elemento (con un temporizador de seguridad en config.js por si GSAP no llegara a cargar). Solo opacity, no transform: el desplazamiento lo aplica GSAP cuando el elemento ya es invisible, así que no se percibe ningún salto. */ .js-anim .fade-up, .js-anim .fade-in { opacity: 0; } /* ---- Promoción a capa de composición del hero y el footer fijos ---- A partir de 768px el hero y el footer son `position: fixed` a pantalla completa con imagen de fondo. Sin promocionar, el navegador los REPINTA en cada frame de scroll; con capa propia, el compositor solo los desplaza. `translateZ(0)` fuerza la promoción. Acotado a >=768px a propósito: por debajo ambos van en flujo (ver el bloque siguiente, que además hace `transform: none !important` en el footer). Verificado antes de aplicarlo: ni #hero-section ni #footer-section tienen descendientes `position: fixed` o `sticky`. Importa porque un `transform` crea un nuevo bloque contenedor y los habría dejado anclados al elemento en lugar de al viewport. El header y el menú flotante son hijos de , no de estos dos, así que no se ven afectados. Si algún día se mete un elemento fijo dentro del hero o del footer, hay que revisar esta regla. */ @media (min-width: 768px) { #hero-section, #footer-section { transform: translateZ(0); backface-visibility: hidden; } } /* En móvil el footer NO va fijo/parallax (se cortaba al ser más alto que la pantalla): pasa a estar en flujo y visible. En tablet/desktop se mantiene el comportamiento parallax actual. */ @media (max-width: 767px) { #footer-section { position: relative !important; z-index: 30 !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important; } /* Home: el hero deja de ser fijo (parallax) y va en flujo, para hacer scroll normal */ #hero-section { position: relative !important; } #main-content { margin-top: 0 !important; margin-bottom: 0 !important; } /* Footer: 1 columna, con el icono a la izquierda y (etiqueta / valor) a la derecha */ #footer-contact { grid-template-columns: 1fr !important; } #footer-contact > a { display: grid; grid-template-columns: 50px 1fr; column-gap: 15px; align-items: center; } #footer-contact > a > div { grid-row: 1 / span 2; margin-bottom: 0 !important; } #footer-contact > a > span { min-width: 0; overflow-wrap: anywhere; } /* Todos los valores (span inferior) al mismo tamaño que el correo (14px) en móvil */ #footer-contact > a > span:last-child { font-size: 14px !important; } } /* ---- Estructura ---- */ .px-section { padding-left: 20px; padding-right: 20px; } @media (min-width: 479px) { .px-section { padding-left: 30px; padding-right: 30px; } } .py-section { padding-top: 80px; padding-bottom: 80px; } @media (min-width: 992px) { .py-section { padding-top: 120px; padding-bottom: 120px; } } .container-boxed { max-width: 1400px; margin-left: auto; margin-right: auto; width: 100%; } .gap-responsive, .gap-responsive-2col { gap: 20px; } @media (min-width: 479px) { .gap-responsive, .gap-responsive-2col { gap: 30px; } } @media (min-width: 992px) { .gap-responsive { gap: 50px; } .gap-responsive-2col { gap: 90px; } } /* ---- Botones ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 50em; font-weight: 700; font-size: 16px; padding: 12px 25px; transition: all 0.3s; width: max-content; cursor: pointer; text-decoration: none; } .btn-filled { background-color: #174383; color: white; } .btn-filled:hover { background-color: #0F3163; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: translateY(-4px); } .btn-outline { border: 1px solid #174383; color: #174383; background-color: transparent; } .btn-outline:hover { background-color: #174383; color: white; } .block-text-inner .titulo-2, .block-text-inner .titulo-3 { margin-bottom: 0; } .block-text-inner > .flex.flex-col { width: 100%; } .block-text-inner .btn { margin-top: 10px; } /* ---- Formularios ---- */ .form-field { display: block; width: 100%; border: 1px solid #D8DEE6; border-radius: 7px; padding: 14px 18px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; color: #001630; background-color: #ffffff; transition: border-color 0.2s; } .form-field::placeholder { color: #8A94A3; } .form-field:focus { outline: none; border-color: #174383; } textarea.form-field { resize: vertical; min-height: 130px; } /* ---- Header (fondo blanco siempre) ---- */ header { transition: all 0.4s; background-color: #ffffff; box-shadow: 0 1px 3px rgba(0,22,48,0.08); } /* Topbar (fila superior discreta, gris claro) */ .aa-topbar { background-color: #EEF1F4; border-bottom: 1px solid #E3E8EE; } /* Por debajo de 1450px: se ocultan la topbar, el menú horizontal y el botón Contacto, y aparecen la hamburguesa y el menú flotante inferior (como en responsive). */ @media (max-width: 1449px) { .aa-topbar { display: none !important; } #main-header nav { display: none !important; } .aa-header-bar a.btn-filled { display: none !important; } #mobile-toggle { display: inline-flex !important; } #mobile-menu { display: flex !important; } /* Hueco inferior para que el menú flotante no tape los enlaces legales del footer */ #footer-section > div { padding-bottom: 110px !important; } } /* Fila del menú: asume el padding que antes tenía el header, para que la topbar quede pegada arriba */ .aa-header-bar { padding-top: 14px; padding-bottom: 14px; transition: all 0.4s; } header.scrolled .aa-header-bar { padding-top: 8px; padding-bottom: 8px; } header.scrolled { box-shadow: 0 6px 18px rgba(0,22,48,0.12); } /* En páginas interiores el header carga en flujo (la cabecera va debajo) pero permanece sticky arriba al hacer scroll — ya no fixed/absoluto superpuesto */ body.interior header { position: sticky; top: 0; } header .nav-link { color: #001630; } header .nav-link:hover { color: #174383; } header .logo-img { filter: none; } /* Menú desplegable Servicios */ .nav-dropdown-panel { box-shadow: 0 12px 30px rgba(0,22,48,0.15); } /* ---- Bottom nav de contacto (menú flotante, solo móvil) ---- */ #aa-bottomnav { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 95; } @media (min-width: 1450px) { #aa-bottomnav { display: none; } } .aa-bn-bar { display: flex; align-items: stretch; background: #ffffff; border: 1px solid #E3E8EE; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,22,48,0.20); padding: 5px; } .aa-bn-btn { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 8px 2px; background: none; border: 0; border-radius: 12px; cursor: pointer; color: #3A4654; font-family: "Plus Jakarta Sans", sans-serif; font-size: 10px; font-weight: 500; line-height: 1.1; -webkit-tap-highlight-color: transparent; transition: color 0.2s, background-color 0.2s; } .aa-bn-btn svg { width: 22px; height: 22px; } .aa-bn-btn > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aa-bn-btn.active { color: var(--color-primary, #174383); background: #EEF3FA; } .aa-bn-sheet { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); background: #ffffff; border: 1px solid #E3E8EE; border-radius: 16px; box-shadow: 0 12px 34px rgba(0,22,48,0.22); padding: 16px; opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } #aa-bottomnav.aa-bn-open .aa-bn-sheet { opacity: 1; transform: translateY(0); pointer-events: auto; } .aa-bn-sheet-label { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 14px; color: #001630; text-align: center; margin-bottom: 12px; } .aa-bn-action { display: flex; align-items: center; justify-content: center; background: var(--color-primary, #174383); color: #ffffff; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 15px; padding: 13px 18px; border-radius: 50em; text-decoration: none; transition: background-color 0.2s; } .aa-bn-action:active, .aa-bn-action:hover { background: var(--color-primary-hover, #0F3163); } /* ---- Lenis Smooth Scroll ---- */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* ---- Cabecera interior ---- */ .interior-hero { padding-top: 50px; padding-bottom: 40px; } @media (min-width: 479px) { .interior-hero { padding-top: 55px; padding-bottom: 50px; } } @media (min-width: 768px) { .interior-hero { padding-top: 65px; padding-bottom: 60px; } } @media (min-width: 992px) { .interior-hero { padding-top: 80px; padding-bottom: 70px; } } /* ---- Bloques full-width (texto + imagen) ---- */ .block-full { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 100%; gap: 0; } .block-full .block-text { display: flex; justify-content: center; align-items: center; padding: 50px 0; } .block-full .block-text-inner { width: 100%; max-width: 600px; padding: 0 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .block-full .block-image { height: 250px; background-size: cover; background-position: center; background-repeat: no-repeat; } @media (min-width: 479px) { .block-full .block-image { height: 350px; } } @media (min-width: 768px) { .block-full .block-image { height: 500px; } } @media (min-width: 992px) { .block-full { grid-template-columns: 1fr 1fr; } .block-full .block-text { padding: 120px 0; } .block-full .block-image { height: auto; min-height: 600px; } } /* ---- Acordeones ---- */ @media (min-width: 992px) { .interior .block-text:has(> .flex.flex-col > details) { padding-top: 130px; } } details > summary { list-style: none; } details > summary::-webkit-details-marker { display: none; } /* ---- Legal pages ---- */ .legal-content { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; line-height: 1.8em; color: #2F3B4A; } .legal-content h2 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 18px; color: #001630; margin-top: 2.5em; margin-bottom: 0.8em; } .legal-content h3 { font-family: "Plus Jakarta Sans", sans-serif; font-weight: 700; font-size: 16px; color: #001630; margin-top: 2em; margin-bottom: 0.5em; } .legal-content p { margin-bottom: 1em; } .legal-content ul { list-style: none; padding: 0; margin-bottom: 1.5em; } .legal-content ul li { padding: 4px 0; } .legal-content table { width: 100%; border-collapse: collapse; margin: 1.5em 0; } .legal-content table td { padding: 12px 15px; border-bottom: 1px solid #e5e7eb; vertical-align: top; font-size: 15px; } .legal-content table tr:first-child td { border-top: 1px solid #e5e7eb; } .legal-content table td:first-child { font-weight: 700; color: #001630; min-width: 150px; width: 200px; } /* Tabla de cookies declaradas (política de cookies): 5 columnas, con thead. Los estilos de arriba están pensados para tablas de 2 columnas (clave/valor), con la primera fija a 200px — aquí hay que soltarla. */ .legal-content table.cookie-table td:first-child, .legal-content table.cookie-table th:first-child { width: auto; min-width: 0; } .legal-content table.cookie-table th { padding: 12px 15px; border-bottom: 2px solid var(--color-primary, #174383); text-align: left; vertical-align: bottom; font-size: 14px; font-weight: 700; color: #001630; white-space: nowrap; } .legal-content table.cookie-table td { font-size: 14px; } .legal-content table.cookie-table code { font-size: 13px; word-break: break-all; } .legal-content a { color: #174383; text-decoration: underline; } .legal-content a:hover { color: #0F3163; } /* ---- Legal pages: centrar contenido ---- */ .legal-page-wrap { display: flex; justify-content: center; } /* ---- Blog/Noticias archive grid ---- */ /* ---- Blog Post Content (WYSIWYG) ---- */ .post-content { font-family: "Plus Jakarta Sans", sans-serif; font-size: 16px; line-height: 1.8em; color: #2F3B4A; } .post-content h2 { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(22px, 2.5vw, 27px); line-height: 1.2em; color: #001630; margin-top: 2em; margin-bottom: 0.5em; } .post-content h3 { font-family: "Playfair Display", serif; font-weight: 700; font-size: clamp(18px, 2vw, 21px); line-height: 1.2em; color: #001630; margin-top: 1.5em; margin-bottom: 0.5em; } .post-content p { margin-bottom: 1.2em; max-width: 700px; } .post-content img { width: 100%; height: auto; border-radius: 7px; margin: 1.5em 0; } .post-content ul, .post-content ol { padding-left: 1.5em; margin-bottom: 1.2em; } .post-content li { margin-bottom: 0.5em; } .post-content blockquote { border-left: 3px solid #174383; padding-left: 1.2em; margin: 1.5em 0; font-style: italic; color: #001630; } .post-content a { color: #174383; text-decoration: underline; } .post-content a:hover { color: #0F3163; }