/* Developed entirely by staycreative.es 2025 */ /* ========================================================================== 0. HOLATAX DESIGN TOKENS (2026) ========================================================================== */ :root { /* Paleta */ --ht-cream: #FFFBF2; --ht-yellow: #FFE8BA; --ht-yellow-soft: #FFF5E1; --ht-yellow-faint: #FFF0D1; --ht-ink: #353535; --ht-paper: #F7F5F2; --ht-black: #000000; --ht-green: #8FB597; --ht-red: #C23939; /* Tipografía */ --ht-font-display: 'Sentient', Georgia, 'Times New Roman', serif; --ht-font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Layout */ --ht-container: 1062px; /* ancho útil máximo del diseño Figma */ --ht-side-pad: 189px; /* padding lateral en desktop 1440 */ --ht-radius-sm: 10px; --ht-radius-md: 20px; } /* ========================================================================== 1. FONT FACE -------------------------------------------------------------------------- Sentient (display, headings) e Inter (UI, body) se cargan desde Fontshare CDN + Google Fonts en layout/front.blade.php. No hay @font-face local: el archivo Switzer-Variable.woff2 referenciado antes nunca existio en disco (heredado de rosello). ========================================================================== */ /* ========================================================================== 2. BASE / RESET ========================================================================== */ html, body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; font-weight: 400; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #353535; background-color: var(--ht-cream, #FFFBF2); } p { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important; color: #353535; font-weight: 400; font-size: 1rem; } h1, h2, h3, h4, h5, h6 { font-family: 'Sentient', Georgia, 'Times New Roman', serif !important; font-weight: 400; color: #353535; margin-bottom: 0; margin-top: 0; } ul { padding-left: 0; } ul li { list-style-type: none; list-style: none; font-size: 1.1rem; line-height: 1.6; } .post ul li { text-decoration: initial !important; } a { -webkit-transition: ease-in-out, .20s ease-in-out; transition: ease-in-out, .20s ease-in-out; word-wrap: break-word; color: #232324; } a:hover { color: #72706E; } a span { display: inline-block; } small { font-weight: 400 !important; } /* A11y (WCAG 2.4.7 Focus Visible): solo quitamos outline cuando el foco viene del raton (no de teclado). Asi los usuarios de teclado SIEMPRE ven el foco. */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--ht-ink, #353535); outline-offset: 3px; border-radius: 4px; } /* Focus visible sobre fondos oscuros: outline claro */ .bg-dark :focus-visible, .ht-hero :focus-visible, header :focus-visible { outline-color: #FFFBF2; } /* Skip link a11y: oculto hasta recibir foco. Aparece arriba a la izquierda. */ .ht-skip-link { position: absolute; left: -9999px; top: 0; z-index: 10000; padding: 10px 16px; background: var(--ht-ink, #353535); color: var(--ht-paper, #F7F5F2); font-family: var(--ht-font-ui, sans-serif); font-weight: 500; text-decoration: none; border-radius: 0 0 8px 0; } .ht-skip-link:focus, .ht-skip-link:focus-visible { left: 0; outline: 2px solid var(--ht-yellow, #FFE8BA); outline-offset: -2px; } /* Quitar outline al main programaticamente focusado tras skip-link */ main:focus { outline: none; } /* --- Form validation feedback (a11y WCAG 1.4.1 + 3.3.1) ----------------- .custom-alert-box: borde rojo en el campo invalido. NO es la unica senal: tambien se inyecta un con texto descriptivo del error junto al campo. */ .custom-alert-box, [aria-invalid="true"] { border-color: #c23939 !important; background-color: rgba(194, 57, 57, 0.05) !important; box-shadow: 0 0 0 3px rgba(194, 57, 57, 0.10) !important; } .ht-field-error { display: block; margin-top: 6px; font-family: var(--ht-font-ui, sans-serif); font-size: 0.875rem; font-weight: 500; color: #c23939; } .ht-field-error::before { content: "⚠ "; margin-right: 4px; } ::selection { color: white; background-color: #232324; } /* UIkit reset */ .uk-link:hover, a:hover { text-decoration: none; } * + .uk-hr, * + hr { margin-top: 5px; margin-bottom: 15px; } /* ========================================================================== 3. UTILITIES / TOKENS ========================================================================== */ .clear { clear: both; } .transition { -webkit-transition: ease-in-out, .35s ease-in-out; transition: ease-in-out, .35s ease-in-out; } /* Backgrounds */ .bg-white { background-color: #fff !important; } .bg-grey { background-color: #999 !important; } .bg-light { background-color: #F9F5EF !important; } .bg-dark { background-color: #232324 !important; } .bg-primary { background-color: #232324 !important; } /* Colors */ .white { color: #fff !important; } .grey { color: #999 !important; } .light { color: #F9F5EF !important; } .dark { color: #000 !important; } .primary { color: #232324 !important; } /* Backgrounds img */ .bg-img { background-position: center; background-repeat: no-repeat; background-size: cover; } .bg-img-contain { background-position: center; background-repeat: no-repeat; background-size: contain; } .bg-img img { width: 100%; } /* Misc */ .shadow { box-shadow: 0 0px 10px rgba(0,0,0,0.3); } .b-bottom { border-bottom: 1px solid #232324; } .b-top { border-top: 1px solid #232324; } .sans { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.1rem; } .bold { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .container-border { border-top: 1.5px solid #232324; border-bottom: 1.5px solid #232324; } .container-text { max-width: 700px; margin: 0 auto; } .container-feed { width: calc(100% - 10%); padding-left: 10%; } /* Sections */ .section { padding: 5vh; } .section-large { padding: 10vh; } .section-small { padding: 2vw; } /* Overlays */ .overlay { background-color: rgba(30,63,57,0.2); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; transition: ease-in-out .35s ease-in-out; } .overlay-light { background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; transition: ease-in-out .35s ease-in-out; } .overlay-header { position: absolute; top: 0; left: 0; width: 100%; height: 50%; z-index: 0; mix-blend-mode: multiply; background: linear-gradient(to top, transparent 0%, #444 100%); transition: ease-in-out .35s ease-in-out; } .overlay-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 50%; z-index: 0; mix-blend-mode: multiply; background: linear-gradient(to bottom, transparent 0%, #232324 100%); transition: ease-in-out .35s ease-in-out; } /* Ellipsis */ .ellipsys-two { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ellipsys-two p { margin: 0; display: inline; } .ellipsys-three { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ellipsys-three p { margin: 0; display: inline; } .ellipsys-four { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .ellipsys-four p { margin: 0; display: inline; } .two-columns { column-count: 2; column-gap: 40px; column-rule: 1px solid #ccc; } /* Animated borders */ .text-info { position: relative; padding-top: 40px; } .text-info:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: #232324; transition: width 0.8s ease-in-out; z-index: 1; } .text-info.animate-border:before { width: 100%; } hr.dark { border-top: 0; position: relative; height: 1px; display: block; } hr.dark:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: #232324; transition: width 0.8s ease-in-out; } hr.dark.animate-border:before { width: 100%; } /* ========================================================================== 4. UIKIT COMPONENT OVERRIDES ========================================================================== */ /* --- Headings --- */ .uk-heading-xsmall, .uk-heading-xsmall p { font-size: 1.2rem; margin: 0; line-height: 1.3; } .uk-heading-small, .uk-heading-small p { font-size: 1.6rem; margin: 0; line-height: 1.3; } .uk-heading-medium, .uk-heading-medium p { font-size: 2.2rem; margin: 0; line-height: 1.3; } .uk-heading-large, .uk-heading-large p { font-size: 3rem; margin: 0; line-height: 1.3; } .uk-heading-xlarge, .uk-heading-xlarge p { font-size: 4rem; margin: 0; line-height: 1.3; } h2.white p { color: white; } div.white p { color: white; } /* --- Font weight utilities --- */ .uk-font-thin, .uk-font-thin p { font-weight: 100; } .uk-font-extralight, .uk-font-extralight p { font-weight: 200; } .uk-font-light, .uk-font-light p { font-weight: 300; } .uk-font-normal, .uk-font-normal p { font-weight: 400; } .uk-font-medium, .uk-font-medium p { font-weight: 500; } .uk-font-semibold, .uk-font-semibold p { font-weight: 600; } .uk-font-bold, .uk-font-bold p { font-weight: 700; } .uk-font-extrabold, .uk-font-extrabold p { font-weight: 800; } .uk-font-black, .uk-font-black p { font-weight: 900; } /* --- Buttons --- */ button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .uk-button { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.9rem; font-weight: 500; border: 0; line-height: 1.5; text-transform: uppercase; -webkit-appearance: none !important; appearance: none !important; border-radius: 0; transition: ease-in-out .35s ease-in-out; padding: 0.5rem 1rem; width: max-content; } .uk-button-default { background-color: #232324 !important; color: white !important; border: 1px solid #232324; padding: 0.6rem 2rem; position: relative; display: inline-block; border-radius: 50px; } .uk-button-default:hover { background-color: transparent !important; color: #232324 !important; border: 1px solid #232324 !important; } .uk-button-default span { display: inline-block; transition: padding-left .35s ease-in-out; } .uk-button-default:hover span { padding-left: 10px; } .uk-button-primary { background-color: transparent !important; color: #232324 !important; border: 1px solid #232324; padding: 0.6rem 2rem; position: relative; display: inline-block; border-radius: 50px; } .uk-button-primary:hover { background-color: #232324 !important; color: white !important; border: 1px solid #232324 !important; } .uk-button-primary span { display: inline-block; transition: padding-left .35s ease-in-out; } .uk-button-primary:hover span { padding-left: 10px; } .uk-button-light { background-color: white !important; color: #232324 !important; border: 1px solid white; padding: 0.6rem 2rem; position: relative; display: inline-block; border-radius: 50px; } .uk-button-light:hover { background-color: #232324 !important; color: white !important; border: 1px solid #232324 !important; } .uk-button-light span { display: inline-block; transition: padding-left .35s ease-in-out; } .uk-button-light:hover span { padding-left: 10px; } .uk-button-secondary { background-color: transparent !important; color: #232324 !important; border: 0; padding: 0; text-decoration: none; font-size: 0.9rem; text-transform: inherit; } .uk-button-secondary:hover { background-color: transparent !important; color: #D6C6B4 !important; border: 0; padding: 0; } /* --- Notification --- */ .uk-notification { width: 400px; } .uk-notification-top-center { margin-left: -200px; } .uk-notification-message { background-color: white; border: 1px solid #eee; font-size: 1rem; } .uk-notification-message.uk-notification-message-danger { background-color: #f0506e; color: white; } .uk-notification-message.uk-notification-message-danger .uk-close { color: white; } .uk-notification-message.uk-notification-message-primary { background-color: #42d1b5; color: white; } .uk-notification-message.uk-notification-message-primary .uk-close { color: white; } /* --- Breadcrumbs --- */ .uk-breadcrumb li a, .uk-breadcrumb li span { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 0.7rem; text-transform: uppercase; } .uk-breadcrumb > :nth-child(n+2):not(.uk-first-column)::before { content: "·"; margin: -1px 10px 0; vertical-align: middle; } .uk-breadcrumb > :last-child > a:not([href]), .uk-breadcrumb > :last-child > span { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: rgba(0,0,0,0.5); text-underline-offset: 10px; } /* --- SweetAlert --- */ .swal2-title { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } /* --- Borders --- */ .uk-border-rounded { border-radius: 20px; } .uk-border-rounded-small { border-radius: 10px; } .uk-border-rounded.top { border-radius: 10px 10px 0 0; } .uk-border-rounded.right { border-radius: 0 10px 10px 0; } .uk-border-rounded.bottom { border-radius: 0 0 10px 10px; } .uk-border-rounded.left { border-radius: 10px 0 0 10px; } .uk-link { color: #232324; text-decoration: underline; font-weight: 700; } .uk-overlay-primary { position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 1; background: linear-gradient(to bottom, transparent 0%, #000 100%); } .uk-offcanvas-bar { background-color: #232324; } /* ========================================================================== 5. FORMS ========================================================================== */ .form { position: relative; } .form input[type=text], .form input[type=email], .form input[type=password], .form input[type=number], .form input[type=search], .form select, .form textarea { margin-top: 0 !important; padding: 5px 10px; border: 1px solid #232324; background-color: transparent; box-shadow: none; margin-bottom: 6px; color: #000 !important; font-size: 1rem; height: auto; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .form input[type=text]::placeholder, .form input[type=email]::placeholder, .form input[type=number]::placeholder, .form select, .form textarea::placeholder { color: #72706E !important; font-size: 0.8rem !important; } .form input[type=text]:focus, .form input[type=email]:focus, .form input[type=number]:focus, .form textarea:focus, .form select:focus { background-color: transparent !important; color: #000 !important; } .form select { padding-right: 30px; } .form textarea { margin-bottom: 10px; padding: 10px; color: white; } .form p { color: white; } .form .uk-checkbox { border-color: #000 !important; } .form .uk-checkbox:focus, .form .uk-radio:focus { border-color: #000 !important; } .form .uk-checkbox:checked, .form .uk-checkbox:checked:focus { background-color: #232324; } .form .uk-radio-label { font-size: 0.8rem; cursor: pointer; } .form .uk-radio:checked, .form .uk-radio:checked:focus { background-color: #232324; } .form .uk-select:not([multiple]):not([size]) { border: 1px solid #232324; border-radius: 5px; color: #232324 !important; font-size: 1rem !important; margin-bottom: 20px; } .bg-select-white:focus { background-color: white !important; color: white !important; } form, input:focus::placeholder { color: #232324; } /* ========================================================================== 6. ICONS (sprite) ========================================================================== */ .icon { background-image: url('../../front_img/assets-sprite.svg'); display: inline-block; background-size: 1000px 500px; transition: ease-in-out .35s ease-in-out; } .icon.facebook { width: 30px; height: 30px; background-position: 0 0; } .icon.instagram { width: 30px; height: 30px; background-position: -30px 0; } .icon.linkedin { width: 30px; height: 30px; background-position: -150px 0; } /* ========================================================================== 7. HEADER / NAVBAR ========================================================================== */ header { position: relative; z-index: 111 !important; } .uk-navbar-container { position: relative; z-index: 980; } .uk-navbar-container:not(.uk-navbar-transparent) { background-color: transparent !important; } .uk-navbar-container.uk-sticky.uk-active { box-shadow: 0 2px 8px rgb(0 0 0 / 8%); background-color: white !important; z-index: 981; } .bg-transparent .uk-navbar-container.uk-sticky.uk-active .header-logo, .bg-transparent .menu-white-bg .uk-navbar-container .header-logo { filter: invert(); } .uk-navbar-container.uk-sticky.uk-active .uk-button.uk-button-default, .menu-white-bg .uk-navbar-container .uk-button.uk-button-default { color: #000 !important; border-color: #232324; } .uk-navbar-container.uk-sticky.uk-active .uk-button.uk-button-default:hover, .menu-white-bg .uk-navbar-container .uk-button.uk-button-default:hover { color: #232324 !important; background-color: #000 !important; } .uk-navbar-nav > li > a { text-transform: initial; font-size: 1rem; font-weight: 500; color: #232324; } .uk-navbar-nav > li.uk-active > a { color: #D6C6B4; } .uk-navbar-nav > li:hover > a, .uk-navbar-nav > li > a[aria-expanded=true] { color: #D6C6B4; } .uk-navbar-nav > li.uk-inline > a[aria-expanded=true] { color: #232324 !important; } .menu-white-bg .menu-langs > li > a { color: #000 !important; } .bg-transparent .uk-navbar-toggle { color: white; } .bg-transparent .uk-navbar-container.uk-sticky.uk-active .uk-navbar-toggle { color: #232324; } .header-logo { height: 70px; margin-top: 20px; } .uk-navbar-container.uk-sticky.uk-active .header-logo { height: 70px; margin-top: 0px; } /* Variants: bg-light, bg-white */ .bg-light .uk-navbar-container, .bg-white .uk-navbar-container { position: relative; z-index: 980; } .bg-light .uk-navbar-container:not(.uk-navbar-transparent), .bg-white .uk-navbar-container:not(.uk-navbar-transparent) { background-color: transparent !important; } .bg-light .uk-navbar-container.uk-sticky.uk-active, .bg-white .uk-navbar-container.uk-sticky.uk-active { box-shadow: 0 2px 8px rgb(0 0 0 / 8%); background-color: white !important; z-index: 981; } /* No invertir el logo en bg-light/bg-white porque ya es oscuro de origen */ /* Modal cita: estructura general */ #modal-cita .uk-modal-dialog { background-color: #fff; } #modal-cita > .uk-modal-dialog { /* uk-modal-full ya gestiona altura, pero asegúrate de scroll vertical sólo cuando hace falta */ overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Mobile: imagen arriba, formulario debajo, sin solapamientos */ @media (max-width: 959px) { #modal-cita .uk-grid-collapse { align-items: stretch !important; } #modal-cita .modal-cita-img { min-height: 30vh !important; height: 30vh !important; flex: 0 0 auto; } #modal-cita .uk-padding-large { padding: 30px 20px; background-color: #fff; position: relative; z-index: 2; } } /* Desktop ≥960px: la imagen queda fija en la columna izquierda mientras el formulario scrollea */ @media (min-width: 960px) { #modal-cita .uk-grid-collapse { min-height: 100vh; align-items: stretch !important; } #modal-cita .modal-cita-img { position: sticky; top: 0; height: 100vh !important; } #modal-cita .uk-padding-large { background-color: #fff; position: relative; z-index: 2; } } .bg-light .uk-navbar-container.uk-sticky.uk-active .uk-button.uk-button-default, .bg-white .uk-navbar-container.uk-sticky.uk-active .uk-button.uk-button-default { color: #000 !important; border-color: #232324; } .bg-white .uk-navbar-container.uk-sticky.uk-active .uk-button.uk-button-default:hover { color: #232324 !important; background-color: white !important; } .bg-light .uk-navbar-nav > li > a, .bg-white .uk-navbar-nav > li > a { text-transform: initial; font-size: 1rem; font-weight: 500; color: #232324; } .bg-light .uk-navbar-nav > li.uk-active > a, .bg-white .uk-navbar-nav > li.uk-active > a { color: #D6C6B4; } .bg-light .uk-navbar-nav > li:hover > a, .bg-light .uk-navbar-nav > li > a[aria-expanded=true], .bg-white .uk-navbar-nav > li:hover > a, .bg-white .uk-navbar-nav > li > a[aria-expanded=true] { color: #D6C6B4; } .bg-light .menu-white-bg .menu-langs > li > a, .bg-white .menu-white-bg .menu-langs > li > a { color: #000 !important; } .bg-light .uk-navbar-toggle, .bg-white .uk-navbar-toggle { color: #232324; } .bg-light .header-logo, .bg-white .header-logo { height: 50px; margin-top: 0px; } /* Variant: bg-transparent */ .bg-transparent .uk-navbar-nav > li > a { text-transform: initial; font-size: 1rem; font-weight: 500; color: white; } .bg-transparent .uk-navbar-container.uk-sticky.uk-active .uk-navbar-nav > li > a { color: #232324; } /* When dropdown open over transparent navbar */ .bg-transparent.dropdown-open .uk-navbar-left .header-logo { filter: invert(1); position: relative; z-index: 1111; } .bg-transparent.dropdown-open .uk-navbar-nav > li > a { color: #232324 !important; } /* ========================================================================== 8. DROPDOWN / MEGA MENU ========================================================================== */ .uk-drop.uk-open { border-radius: 0; z-index: 1111; } .uk-dropdown { min-width: max-content; } .uk-navbar-dropdown-nav > li { list-style: none !important; } .uk-navbar-dropdown-nav > li::before { display: none !important; } .uk-navbar-dropdown-nav > li > a { font-size: 0.9rem; font-weight: 600; } .uk-navbar-dropdown-nav > li > a:hover { color: #000 !important; } .uk-navbar-dropdown-nav > li > a.uk-active { color: #232324; } /* Mega menu: product categories */ .uk-navbar-dropdown-width-3 { width: 100%; } .uk-navbar-dropdown-width-3:not(.uk-drop-stack) { width: 100% !important; padding-top: 10vh; padding-bottom: 10vh; border-top: 1px solid #232324; border-radius: 0; } .uk-navbar-dropbar { background: #fff !important; padding: 0 !important; box-shadow: 0 5px 12px rgba(0,0,0,.15); top: 0 !important; z-index: -1; } /* Services dropdown (uk-drop) */ .menu-servicios-dropdown { min-width: 220px; background: #fff; padding: 20px; box-shadow: 0 5px 12px rgba(0,0,0,.15); border-radius: 0; } /* Products mega menu structure */ .menu-productos-dropdown { padding: 80px 0 50px 0 !important; } .menu-col-intro { padding-right: 30px; display: flex !important; flex-direction: column; } .menu-rrss { margin-top: 10vh; } .menu-intro-top { flex-grow: 1; padding-top: 10px; } .menu-intro-text { font-size: 0.95rem; color: #888; line-height: 1.5; margin: 0; } .menu-col-cats { padding: 0 40px; } .menu-col-cats .uk-grid div { border-left: 1px solid #232324; } .menu-col-img { display: flex; align-items: center; justify-content: center; padding-left: 20px; } .menu-dynamic-img-wrap { width: 100%; aspect-ratio: 3/4; overflow: hidden; border-radius: 0; } .menu-dynamic-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } /* Dropdown nav items */ .uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a { color: #232324 !important; font-size: 0.9rem !important; font-weight: 400 !important; padding: 8px 0; display: inline-flex; align-items: center; gap: 6px; } .uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a::after { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background-color: #232324; flex-shrink: 0; opacity: 0; transition: opacity 0.2s ease; } .uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a:hover { color: #232324 !important; } .uk-navbar-dropdown .uk-navbar-dropdown-nav > li > a:hover::after { opacity: 1; } .uk-navbar-dropdown .uk-nav-header { padding: 0; margin-bottom: 0; } .uk-navbar-dropdown .uk-nav-header > a { display: flex; align-items: center; gap: 8px; font-size: 1rem; font-weight: 700; color: #232324 !important; text-transform: uppercase; padding: 5px 0; } .uk-navbar-dropdown .uk-nav-header > a:hover { color: #D6C6B4 !important; } .uk-navbar-dropdown .uk-nav-header .nav-header-arrow { flex-shrink: 0; } .uk-navbar-dropdown .uk-nav-header .nav-header-text { flex: 1; } /* Language menu */ .uk-navbar-container.uk-active .menu-langs > li > a { color: #232324; } .menu-langs > li > a { color: white; } .menu-langs .uk-navbar-dropdown-nav > li > a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; } .langs .uk-navbar-dropdown { max-width: max-content !important; width: 40px !important; } .langs .uk-nav { max-width: max-content !important; width: 40px !important; } .langs .uk-nav li > a { max-width: max-content !important; width: 40px !important; } /* ========================================================================== 9. CONTAINER MENU (booking CTA + toggle) ========================================================================== */ #container-menu .menu-langs { padding-right: 20px; } #container-menu .uk-navbar-right { gap: 0; } #container-menu .th-cta-booking { border: 1px solid #fff; padding: 2px 14px; text-transform: uppercase; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1.4rem; color: #fff; border-right: 0; height: 40px; line-height: 1.3; box-sizing: border-box; position: relative; } #container-menu .th-cta-booking:after { content: ""; display: inline-block; height: 30px; width: 1px; background-color: #fff; position: absolute; right: -1px; top: 4px; } #container-menu .th-cta-booking:hover { background-color: #232324; } #container-menu .th-cta-booking:hover:after { display: none; } #container-menu .main-menu-toggle { border: 1px solid #fff; padding: 8px 20px; min-height: auto; border-left: 0; height: 40px; display: block; position: relative; } #container-menu.uk-active .th-cta-booking { color: #232324; border-color: #232324; } #container-menu.uk-active .th-cta-booking:after { background-color: #232324; } #container-menu.uk-active .th-cta-booking:hover { color: #FFF; } #container-menu.uk-active .main-menu-toggle { border-color: #232324; } /* ========================================================================== 10. DATE RANGE PICKER ========================================================================== */ .drp-selected { display: none !important; } .daterangepicker td.in-range { background-color: #D3CBC3; } .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #202020; } .daterangepicker .drp-calendar.right { background-color: white; } .daterangepicker.show-calendar .drp-buttons { background-color: white; } /* ========================================================================== 11. PRELOADER ========================================================================== */ .preloader { position: fixed; z-index: 9999; width: 100%; height: 100%; min-width: 100vw; min-height: 100vh; /* Fallback para iOS Safari - usa viewport real cuando esté disponible */ min-height: 100dvh; opacity: 1; background: #F9F5EF; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; } .preloader img { animation: heartbeat 1.5s ease-out infinite normal; width: 100px; height: 100px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } @keyframes heartbeat { 0% { transform: scale(.95) translate(-50%,-50%); opacity: 0.6; } 15% { transform: scale(1) translate(-50%,-50%); opacity: 1; } 30% { transform: scale(.95) translate(-50%,-50%); opacity: 0.6; } 45% { transform: scale(1) translate(-50%,-50%); opacity: 1; } 80% { transform: scale(.95) translate(-50%,-50%); opacity: 0.6; } 100% { transform: scale(.95) translate(-50%,-50%); opacity: 0.6; } } /* ========================================================================== 12. POPUP ========================================================================== */ .ah-popup-simple .bg-secondary { position: absolute; bottom: 0; right: 10vw; } .ah-popup-simple .hg-icon-annua { width: 40px; margin-bottom: 40px; } /* ========================================================================== 13. HEADER (page hero) ========================================================================== */ .header .overlay, .header-transparent .overlay { background-color: rgba(30,63,57,0.4); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; transition: ease-in-out .35s ease-in-out; } /* Header heading animation (letter-by-letter) */ .header h1.text-animate { overflow: visible; word-break: keep-all; overflow-wrap: normal; } .header h1.text-animate .word { display: inline-block; white-space: nowrap; } .header h1.text-animate .letter { display: inline-block; opacity: 0; transform: translateY(30px); } .header h1.text-animate.is-visible .letter { animation: fadeInUp 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } /* Heading animations (shared) */ .uk-heading-xlarge.text-animate .word, .uk-heading-large.text-animate .word, .uk-heading-medium.text-animate .word, .uk-heading-small.text-animate .word, .uk-heading-xsmall.text-animate .word { display: inline-block; white-space: nowrap; } .uk-heading-xlarge.text-animate .letter, .uk-heading-large.text-animate .letter, .uk-heading-medium.text-animate .letter, .uk-heading-small.text-animate .letter, .uk-heading-xsmall.text-animate .letter { display: inline-block; opacity: 0; transform: translateY(20px); } .uk-heading-xlarge.text-animate.is-visible .letter, .uk-heading-large.text-animate.is-visible .letter, .uk-heading-medium.text-animate.is-visible .letter, .uk-heading-small.text-animate.is-visible .letter, .uk-heading-xsmall.text-animate.is-visible .letter { animation: fadeInUp 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* Mobile: desactivar animación letra-a-letra (rinde mal en móviles) */ @media (max-width: 959px) { .header h1.text-animate .letter, .uk-heading-xlarge.text-animate .letter, .uk-heading-large.text-animate .letter, .uk-heading-medium.text-animate .letter, .uk-heading-small.text-animate .letter, .uk-heading-xsmall.text-animate .letter { opacity: 1 !important; transform: none !important; animation: none !important; animation-delay: 0s !important; } } /* Respetar la preferencia del usuario de menos animaciones */ @media (prefers-reduced-motion: reduce) { .header h1.text-animate .letter, .uk-heading-xlarge.text-animate .letter, .uk-heading-large.text-animate .letter, .uk-heading-medium.text-animate .letter, .uk-heading-small.text-animate .letter, .uk-heading-xsmall.text-animate .letter { opacity: 1 !important; transform: none !important; animation: none !important; animation-delay: 0s !important; } } /* ========================================================================== 14. PAGE: HOME ========================================================================== */ .home .header { min-height: 80vh; height: 80vh; } .home .header .uk-slideshow-items { min-height: 80vh; height: 80vh; margin-top: -100px; aspect-ratio: unset; } .home .feed-products-cats { margin-bottom: 10vh; } .home .feed-products-cats .bg-light { position: absolute; width: 100%; height: 40vh; left: 0; bottom: -5vh; z-index: -1; } .home .services .accordion-services li.accordion-ind { position: relative; padding-top: 25px; } .home .services .accordion-services li.accordion-ind:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background-color: #232324; transition: width 0.8s ease-in-out; } .home .services .accordion-services li.accordion-ind.animate-border:before { width: 100%; } /* ========================================================================== 15. PAGE: FLATPAGE ========================================================================== */ /* nosotros (id 40) */ .flatpage-40 .intro { padding-bottom: 40vh; } .flatpage-40 .company { margin-top: -40vh; } .flatpage-40 .header-transaprent { min-height: 60vh; height: 60vh; margin-top: -80px; } /* productos (id 44) */ .flatpage-44 .header-transaprent { min-height: 60vh; height: 60vh; margin-top: -80px; } .flatpage-44 .feed-products { position: relative; overflow: hidden; } .flatpage-44 .feed-products .product-ind { position: relative; z-index: 1; } .flatpage-44 .feed-products .product-ind a { display: block; text-decoration: none; position: relative; z-index: 2; } .flatpage-44 .feed-products .product-ind .uk-background-cover { transition: transform 0.4s ease, opacity 0.4s ease; } .flatpage-44 .feed-products .product-ind .product-ind-text { transition: transform 0.4s ease, opacity 0.4s ease; } /* Hover overlay (flatpage-44 products) */ .flatpage-44 .feed-products .product-ind .product-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(35, 35, 36, 0.5); } .flatpage-44 .feed-products .product-ind .product-category-vertical { position: relative; opacity: 0; transition: opacity 0.4s ease; writing-mode: vertical-rl; top: 45px; } .flatpage-44 .feed-products .product-ind .product-category-vertical p { position: relative; top: 0; } .flatpage-44 .feed-products .product-ind:hover .uk-background-cover { opacity: 0.9; } .flatpage-44 .feed-products .product-ind:hover .product-hover-overlay { opacity: 1; pointer-events: auto; } .flatpage-44 .feed-products .product-ind:hover .product-category-vertical { opacity: 1; } .flatpage-44 .feed-products .product-ind:hover .product-ind-text { transform: translateY(-5px) scale(0.98); opacity: 0.85; } /* ========================================================================== 16. PAGE: SERVICE ========================================================================== */ .service .solutions .solution-ind { border-top: 1px solid #232324; padding-top: 5vh; padding-bottom: 5vh; } .service .solutions .solution-ind ul { padding-left: 10px; padding-top: 20px; } .service .solutions .solution-ind ul li { font-size: 0.9rem; list-style: disc; list-style-type: disc; } /* ========================================================================== 17. PAGE: PRODUCT ========================================================================== */ .product .header-transaprent { min-height: 65vh; height: 65vh; margin-top: 0; } .product .header-transaprent .uk-slideshow-items { min-height: 65vh; height: 65vh; margin-top: 0; } .product .header-transaprent .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .product .header-transaprent .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .product .header-transaprent .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } /* Product tabs */ .product .tabs .tabs-nav { border-bottom: 1px solid #232324; padding-bottom: 20px; position: relative; overflow: hidden; } .product .tabs .tabs-nav::after { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background-color: #D6C6B4; transform: translateX(-100%); transition: transform 1s ease-out; } .product .tabs .tabs-nav.animate-border::after { transform: translateX(0); } .product .tabs .uk-subnav-pill > * > a { background-color: transparent; color: #232324; border: 2px solid #232324; padding: 8px 24px; font-size: 1rem; transition: all 0.3s ease; border-radius: 50px; } .product .tabs .uk-subnav-pill > .uk-active > a, .product .tabs .uk-subnav-pill > * > a:hover { background-color: #232324; color: #fff; border-color: #232324; } .product .tabs .catalogos-link button { color: #232324; text-decoration: underline; font-size: 1.125rem; transition: all 0.3s ease; } .product .tabs .catalogos-link button:hover { color: #D6C6B4; } .product .tabs .catalogos-link .uk-dropdown { min-width: 200px; } .product .tabs .catalogos-link .uk-dropdown-nav .uk-nav-header { font-weight: 600; color: #232324; text-transform: uppercase; font-size: 0.875rem; padding: 5px 0; } .product .tabs .catalogos-link .uk-dropdown-nav li a { color: #666; transition: all 0.3s ease; padding: 5px 0; font-size: 0.9rem; } .product .tabs .catalogos-link .uk-dropdown-nav li a:hover { color: #D6C6B4; } .product .tabs .catalogos-link .uk-dropdown-nav .uk-nav-divider { margin: 10px 0; } .product .tabs .uk-card { min-height: 150px; transition: all 0.3s ease; } .product .tabs .uk-card:hover { background-color: #f8f8f8; transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .product .tabs .panel-description { font-size: 1rem; line-height: 1.8; } .product .tabs .uk-switcher > li > div > div img { width: 100%; height: auto; } .product .tabs .uk-switcher ul { padding-left: 20px; } .product .tabs .uk-switcher ul li { list-style-type: disc; list-style: disc; font-size: 0.9rem; } /* ========================================================================== 18. PAGE: PRODUCT CATEGORY ========================================================================== */ .product_category .header-transaprent { min-height: 60vh; height: 60vh; margin-top: -80px; } .product_category .feed-products { position: relative; overflow: hidden; } .product_category .feed-products .product-ind { position: relative; z-index: 1; } .product_category .feed-products .product-ind a { display: block; text-decoration: none; position: relative; z-index: 2; } .product_category .feed-products .product-ind .uk-background-cover { transition: transform 0.4s ease, opacity 0.4s ease; } .product_category .feed-products .product-ind .product-ind-text { transition: transform 0.4s ease, opacity 0.4s ease; } .product_category .feed-products .product-ind .product-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(35, 35, 36, 0.5); } .product_category .feed-products .product-ind .product-category-vertical { position: relative; opacity: 0; transition: opacity 0.4s ease; writing-mode: vertical-rl; top: 45px; } .product_category .feed-products .product-ind .product-category-vertical p { position: relative; top: 0; } .product_category .feed-products .product-ind:hover .uk-background-cover { opacity: 0.9; } .product_category .feed-products .product-ind:hover .product-hover-overlay { opacity: 1; pointer-events: auto; } .product_category .feed-products .product-ind:hover .product-category-vertical { opacity: 1; } .product_category .feed-products .product-ind:hover .product-ind-text { transform: translateY(-5px) scale(0.98); opacity: 0.85; } /* Related categories */ .product_category .related-products { border-top: 1px solid #232324; border-bottom: 1px solid #232324; } .product_category .related-products .related-category-vertical { writing-mode: vertical-rl; text-orientation: mixed; transition: all 0.4s ease; } .product_category .related-products .related-category-vertical h4 { white-space: nowrap; } .product_category .related-products .related-ind { position: relative; overflow: hidden; } .product_category .related-products .related-ind .uk-background-cover { transition: opacity 0.4s ease; } .product_category .related-products .related-ind .related-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(35, 35, 36, 0.5); } .product_category .related-products .related-ind:hover .uk-background-cover { opacity: 0.9; } .product_category .related-products .related-ind:hover .related-hover-overlay { opacity: 1; pointer-events: auto; } .product_category .related-products .related-ind:hover .related-category-vertical { transform: translateY(-5px) scale(0.98); opacity: 0.85; } /* ========================================================================== 19. PAGE: PROJECT (single + related) ========================================================================== */ .project .header-transaprent { min-height: 60vh; height: 60vh; margin-top: -80px; } .project .gallery .uk-slider .container-arrows { position: relative; margin-top: 30px; right: 40px; } .project .gallery .uk-slider .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .project .gallery .uk-slider .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .project .gallery .uk-slider .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } /* Related products on project & product pages (shared structure) */ .project .related-products, .product .related-products { border-top: 1px solid #232324; border-bottom: 1px solid #232324; } .project .related-products .related-category-vertical, .product .related-products .related-category-vertical { writing-mode: vertical-rl; text-orientation: mixed; transition: all 0.4s ease; } .project .related-products .related-category-vertical h4, .product .related-products .related-category-vertical h4 { white-space: nowrap; font-size: 0.9rem; padding-right: 7px; } .project .related-products .related-ind, .product .related-products .related-ind { position: relative; overflow: hidden; } .project .related-products .related-ind .uk-background-cover, .product .related-products .related-ind .uk-background-cover { transition: opacity 0.4s ease; } .project .related-products .related-ind .related-hover-overlay, .product .related-products .related-ind .related-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(35, 35, 36, 0.5); } .project .related-products .related-ind:hover .uk-background-cover, .product .related-products .related-ind:hover .uk-background-cover { opacity: 0.9; } .project .related-products .related-ind:hover .related-hover-overlay, .product .related-products .related-ind:hover .related-hover-overlay { opacity: 1; pointer-events: auto; } .project .related-products .related-ind:hover .related-category-vertical, .product .related-products .related-ind:hover .related-category-vertical { transform: translateY(-5px) scale(0.98); opacity: 0.85; } /* ========================================================================== 20. PAGE: BRAND ========================================================================== */ .brand .header-transaprent { min-height: 60vh; height: 60vh; margin-top: -80px; } .brand .gallery .uk-slider .container-arrows { position: relative; margin-top: 30px; right: 40px; } .brand .gallery .uk-slider .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .brand .gallery .uk-slider .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .brand .gallery .uk-slider .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } .brand .related-products .related-category-vertical h4 { white-space: nowrap; font-size: 0.9rem; padding-right: 7px; } .brand .related-products .related-ind { position: relative; overflow: hidden; } .brand .related-products .related-ind .uk-background-cover { transition: opacity 0.4s ease; } .brand .related-products .related-ind .related-category-vertical { transition: all 0.4s ease; } .brand .related-products .related-ind .related-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); background-color: rgba(35, 35, 36, 0.5); } .brand .related-products .related-ind:hover .uk-background-cover { opacity: 0.9; } .brand .related-products .related-ind:hover .related-hover-overlay { opacity: 1; pointer-events: auto; } .brand .related-products .related-ind:hover .related-category-vertical { transform: translateY(-5px) scale(0.98); opacity: 0.85; } /* ========================================================================== 21. SHARED FEEDS / SLIDERS HOVER EFFECTS ========================================================================== */ /* --- Product categories slider (home) --- */ .feed-products-cats .cat-ind { position: relative; } .feed-products-cats .cat-ind a { display: block; text-decoration: none; } .feed-products-cats .cat-ind .uk-background-cover { transition: transform 0.4s ease, opacity 0.4s ease; } .feed-products-cats .cat-ind .cat-ind-text { transition: transform 0.4s ease, opacity 0.4s ease; } .feed-products-cats .cat-ind .cat-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .feed-products-cats .cat-ind:hover .uk-background-cover { opacity: 0.9; } .feed-products-cats .cat-ind:hover .cat-hover-overlay { opacity: 1; pointer-events: auto; } .feed-products-cats .cat-ind:hover .cat-ind-text { transform: translateY(-5px) scale(0.98); opacity: 0.85; } .feed-products-cats .cat-hover-btn { background: white; color: #333; padding: 12px 32px; border-radius: 50px; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; } .feed-products-cats .cat-hover-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } /* --- Projects slider (home) --- */ .feed-projects .project-ind { position: relative; } .feed-projects .project-ind a { display: block; text-decoration: none; } .feed-projects .project-ind .uk-background-cover { transition: transform 0.4s ease, opacity 0.4s ease; } .feed-projects .project-ind .project-ind-text { transition: transform 0.4s ease, opacity 0.4s ease; margin-top: 20px; } .feed-projects .project-ind .project-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .feed-projects .project-ind:hover .uk-background-cover { opacity: 0.9; } .feed-projects .project-ind:hover .project-hover-overlay { opacity: 1; pointer-events: auto; } .feed-projects .project-ind:hover .project-ind-text { transform: translateY(-5px) scale(0.98); opacity: 0.85; } .feed-projects .project-hover-btn { background: white; color: #333; padding: 12px 32px; border-radius: 50px; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; } .feed-projects .project-hover-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } .feed-projects .uk-slider .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .feed-projects .uk-slider .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .feed-projects .uk-slider .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } /* --- Projects on product page (.projects) --- */ .projects .uk-slider .container-arrows { position: relative; } .projects .uk-slider .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .projects .uk-slider .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .projects .uk-slider .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } .projects .project-ind { position: relative; } .projects .project-ind a { display: block; text-decoration: none; } .projects .project-ind .uk-background-cover { transition: transform 0.4s ease, opacity 0.4s ease; } .projects .project-ind .project-ind-text { transition: transform 0.4s ease, opacity 0.4s ease; margin-top: 20px; } .projects .project-ind .project-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .projects .project-ind:hover .uk-background-cover { opacity: 0.9; } .projects .project-ind:hover .project-hover-overlay { opacity: 1; pointer-events: auto; } .projects .project-ind:hover .project-ind-text { transform: translateY(-5px) scale(0.98); opacity: 0.85; } .projects .project-hover-btn { background: white; color: #333; padding: 12px 32px; border-radius: 50px; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; } .projects .project-hover-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } /* --- Brands slider --- */ .brands .uk-slider .container-arrows { position: relative; } .brands .uk-slider .container-arrows .uk-icon-button { background-color: #D6C6B4; height: 45px; width: 45px; } .brands .uk-slider .container-arrows .uk-icon-button:hover { background-color: #c5b19a; } .brands .uk-slider .container-arrows .uk-icon:not(.uk-preserve) [stroke*="#"]:not(.uk-preserve) { color: #232324 !important; } .brands .project-ind { position: relative; } .brands .project-ind a { display: block; text-decoration: none; } .brands .project-ind .uk-background-contain { transition: opacity 0.4s ease; } .brands .project-ind .project-ind-text { transition: opacity 0.4s ease; margin-top: 20px; } .brands .project-ind .project-hover-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 30px; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 2; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .brands .project-ind:hover .uk-background-contain { opacity: 0.85; } .brands .project-ind:hover .project-hover-overlay { opacity: 1; pointer-events: auto; } .brands .project-ind:hover .project-ind-text { opacity: 0.85; } .brands .project-hover-btn { background: white; color: #333; padding: 12px 32px; border-radius: 50px; font-weight: 600; text-transform: uppercase; font-size: 14px; letter-spacing: 0.5px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); transition: all 0.3s ease; } .brands .project-hover-btn:hover { transform: translateY(-2px); box-shadow: 0 15px 40px rgba(0,0,0,0.25); } .brands .brand-ind { position: relative; display: flex; align-items: center; justify-content: center; min-height: 150px; } .brands .brand-ind a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .brands .brand-ind img { max-width: 100%; max-height: 150px; height: auto; width: auto; object-fit: contain; mix-blend-mode: multiply; } /* ========================================================================== 22. FILTERS (projects) ========================================================================== */ .filter-select { border-radius: 50px; border: 1px solid #232324; padding: 0.5rem 1rem; font-size: 0.9rem; background-color: #F9F5EF; color: #232324; transition: all 0.3s ease; } .filter-select:focus { outline: none; border-color: #D6C6B4; } .search-input { border-radius: 50px; border: 1px solid #232324; padding: 0.5rem 1rem; font-size: 0.9rem; background-color: white; color: #232324; transition: all 0.3s ease; } .search-input:focus { outline: none; border-color: #D6C6B4; } .search-input::placeholder { color: #72706E; opacity: 0.7; } .feed-projects .uk-form-label { padding-left: 15px; font-size: 0.8rem; } .feed-projects .uk-input.search-input { background-color: #F9F5EF; } .active-filters { display: flex; flex-wrap: wrap; gap: 10px; } .active-filters .uk-label { border-radius: 50px; background-color: #D6C6B4; color: #232324; padding: 0.5rem 1rem; font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; } .active-filters .uk-label a { color: #232324; opacity: 0.7; transition: opacity 0.2s ease; } .active-filters .uk-label a:hover { opacity: 1; } /* ========================================================================== 23. FLOATING APPOINTMENT BUTTON + MODAL ========================================================================== */ #calendar-floating > a > div:hover { transform: scale(1.1); } #modal-cita .uk-input, #modal-cita .uk-select, #modal-cita .uk-textarea { border: 1px solid #e5e5e5; border-radius: 0; } #modal-cita .uk-input:focus, #modal-cita .uk-select:focus, #modal-cita .uk-textarea:focus { border-color: #232324; } /* ========================================================================== 24. COOKIES ========================================================================== */ /* === Banner de cookies — tema Holatax ============================== */ #cookieMessageWrapper { /* Oculto por defecto: stay-creative.js lo muestra (display:block) solo si no hay consentMode guardado. Sin esto el banner quedaria visible siempre, incluso tras aceptar. */ display: none; width: 100%; position: fixed; left: 0; top: 0; z-index: 997; height: 100%; background: rgba(53, 53, 53, 0.55); } #cookieMessage { margin: 0 auto; position: absolute; padding: 40px; width: calc(100% - 32px); left: 50%; top: 50%; max-width: 540px; transform: translate(-50%, -50%); background-color: var(--ht-cream); border-radius: var(--ht-radius-md); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); text-align: center; } #cookieMessage .cookies-logo { width: 130px; height: auto; } #cookieMessage p { margin: 20px 0; color: var(--ht-ink); font-family: var(--ht-font-ui); font-size: 0.9375rem; line-height: 1.5; text-align: center; } .cookie-consent-options { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; } #cookieMessageWrapper label { font-family: var(--ht-font-ui); font-size: 0.8125rem; font-weight: 600; color: var(--ht-ink); display: inline-flex; align-items: center; } #cookieMessageWrapper .uk-checkbox { border-color: var(--ht-ink) !important; margin-right: 6px; } #cookieMessageWrapper .uk-checkbox:checked { background-color: var(--ht-ink); border-color: var(--ht-ink) !important; } #cookieMessageWrapper .uk-checkbox:disabled:checked { background-color: var(--ht-yellow); border-color: var(--ht-yellow) !important; } /* Botones del banner: mismo lenguaje visual que .ht-btn del rediseno. Aceptar todo = solido oscuro; seleccion/rechazar = outline. */ .cookie-consent-button { font-family: var(--ht-font-ui); font-size: 0.875rem; font-weight: 600; border-radius: var(--ht-radius-sm); padding: 11px 20px !important; margin: 3px; transition: background-color 0.2s ease, color 0.2s ease; } .uk-button-accept { background-color: var(--ht-ink); color: var(--ht-cream) !important; border: 1px solid var(--ht-ink); } .uk-button-accept:hover { background-color: transparent; color: var(--ht-ink) !important; } .uk-button-decline, .uk-button-decline-all { background-color: transparent; color: var(--ht-ink) !important; border: 1px solid var(--ht-ink); } .uk-button-decline:hover, .uk-button-decline-all:hover { background-color: var(--ht-ink); color: var(--ht-cream) !important; } /* Legal pages */ .cookies .header, .legal .header, .conditions .header { background-position: center; position: relative; background-size: cover; background-repeat: no-repeat; } .cookies .header { background-image: url('../../public/img/bg-cookies.jpg'); } .legal .header { background-image: url('../../public/img/bg-legal.jpg'); } .conditions .header { background-image: url('../../public/img/bg-legal.jpg'); } /* ========================================================================== 25. NEWSLETTER ========================================================================== */ #newsletter-subscribe-send { cursor: pointer; position: absolute; right: 0; top: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: uppercase; font-size: 0.9rem; padding: 6px 10px; } #newsletter-subscribe-send:hover { background-color: #232324; color: #fff; } /* ========================================================================== 26. FOOTER ========================================================================== */ footer { padding: 5vh; z-index: 1; position: relative; } footer h5 { font-weight: 400; font-size: 2rem; } footer ul.border-left { border-left: 1px solid #232324; padding-left: 20px; } footer li a, footer li { list-style: none !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 1rem; } footer li.uk-lead { font-weight: 500; font-size: 1.2rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; text-transform: uppercase; line-height: 1.6; } footer li a:hover { color: #c5b19a; } footer small { font-size: 0.7rem; } footer hr { border-top: 1px solid white; } footer .attr { height: 0; display: table-column-group; } footer .footer-logos-partners img { opacity: 0.4; } .bl-footer { border-left: 1px solid white; } .footer-logo { width: 100%; max-width: 200px; opacity: 1; display: block; } .footer-legal li { display: inline-block; margin-right: 20px; } .footer-legal li a { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; font-size: 0.8rem; } .copyright { font-size: 0.9rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 400; color: #232324; text-transform: uppercase; margin-top: 5px; } .autor { font-size: 0.9rem; margin-bottom: 0; opacity: 0.6; } .autor a { font-weight: 400; margin-top: 10px !important; color: #999; } .autor b { font-weight: 700; } /* ========================================================================== 27. RESPONSIVE - UIKIT BREAKPOINTS -------------------------------------------------------------------------- UIkit standard breakpoints: @s = 640px (small / phablet) @m = 960px (medium / tablet) @l = 1200px (large / desktop) @xl = 1600px (xlarge) ========================================================================== */ /* -------------------------------------------------------------------------- ≥ 960px (uk-@m and up) — desktop product/category grid backgrounds -------------------------------------------------------------------------- */ @media (min-width: 960px) { .flatpage-44 .feed-products .product-ind:nth-child(n+4), .product_category .feed-products .product-ind:nth-child(n+4) { margin-top: 10vh; } .flatpage-44 .feed-products .product-ind:nth-child(3n+1)::after, .product_category .feed-products .product-ind:nth-child(3n+1)::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 200vw; height: 30vh; background-color: #F9F5EF; z-index: 0; } .flatpage-44 .feed-products .product-ind:nth-child(3n+1)::after { bottom: -5vh; } .product_category .feed-products .product-ind:nth-child(3n+1)::after { bottom: -7vh; } } /* -------------------------------------------------------------------------- ≥ 640px and ≤ 959px (tablet between uk-@s and uk-@m) -------------------------------------------------------------------------- */ @media (min-width: 640px) and (max-width: 959px) { .flatpage-44 .feed-products .product-ind:nth-child(2n+1)::after, .product_category .feed-products .product-ind:nth-child(2n+1)::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; bottom: -3vh; height: 30vh; background-color: #F9F5EF; z-index: -1; } } /* -------------------------------------------------------------------------- ≤ 1199px (below uk-@l) -------------------------------------------------------------------------- */ @media (max-width: 1199px) { .section-text { padding: 5vh; } .text.section-text { padding: 3vh !important; } .uk-navbar-toggle, .uk-navbar-toggle .uk-icon > * { width: 40px; height: 40px; } a.uk-navbar-toggle:hover .uk-icon > * { transform: rotate(0); } #offcanvas-menu .uk-offcanvas-bar { background-color: #232324; } .uk-offcanvas-close:first-child + * { width: 100%; max-width: 270px; text-align: center; } .uk-offcanvas-bar .uk-nav-default > li > a { color: white; } .uk-offcanvas-bar .uk-nav-default > li > a:hover { color: #D6C6B4; } /* Off-canvas */ /* .uk-offcanvas-bar.bg-tertiary { width: 95vw; } */ .uk-offcanvas-bar ul li {font-size: 1.4rem;} /* #offcanvas-menu .uk-offcanvas-bar { background-color: #232324; width: 95vw; } */ } /* -------------------------------------------------------------------------- ≤ 959px (below uk-@m) — main mobile/tablet breakpoint -------------------------------------------------------------------------- */ @media (max-width: 959px) { .uk-navbar-nav.visible-flex { display: block !important; overflow-y: auto; height: calc(100vh - 80px); } .uk-navbar-toggle { height: 80px; float: right; z-index: 4; position: relative; } .uk-navbar-toggle:hover, .uk-navbar-toggle[aria-expanded=true] { color: #acacac; } .uk-navbar-nav > li, .uk-navbar-nav > li ul li, .uk-navbar-nav > li ul.uk-nav-sub li { min-height: 40px; justify-content: left; } .uk-navbar-nav > li > a, .uk-navbar-nav > li ul li a, .uk-navbar-nav > li ul.uk-nav-sub li a { min-height: auto; justify-content: left; padding: 8px 10px; } .container-contact { position: absolute; top: 0; width: 100%; max-height: none; overflow: visible; z-index: 1111 !important; padding-top: 20px !important; border-radius: 0 !important; border-bottom: 2px solid white; } .vertical { writing-mode: horizontal-tb; transform: rotate(0deg); } .section-large { padding: 4vh; } .container-menu-padding { padding: 0 20px !important; } .uk-modal-full .uk-modal-dialog {height: 100vh;} /* Headings */ .uk-heading-xsmall, .uk-heading-xsmall p { font-size: 1.4rem; line-height: 1; } .uk-heading-small, .uk-heading-small p { font-size: 1.6rem; line-height: 1; } .uk-heading-medium, .uk-heading-medium p { font-size: 1.8rem; line-height: 1; } .uk-heading-large, .uk-heading-large p { font-size: 2.2rem; line-height: 1; } .uk-heading-xlarge, .uk-heading-xlarge p { font-size: 3rem; margin: 0; line-height: 1.3; } .uk-text-large, .uk-text-large p { font-size: 1.2rem; } #calendar-floating .uk-padding-small {padding: 5px !important;} /* Layout helpers */ .order-1 { order: -1; -webkit-order: -1; } .order-1m { order: 0; } .order-1mu { order: -1; } /* Home / flatpage adjustments */ .home .intro, .flatpage .intro, .landing .intro { border-radius: 0; margin-top: 0; } .home .service-ind:nth-child(odd), .home .service-ind:nth-child(even), .flatpage .service-ind:nth-child(odd), .flatpage .service-ind:nth-child(even) { margin-top: 40px; } .home .types .uk-background-cover { padding-top: 0; padding-bottom: 0; margin-top: -5vh; margin-bottom: 0; } .product_category .feed-products .product-ind .product-category-vertical {display: none;} .product .tabs .uk-subnav {display: block;} .product .tabs .uk-subnav li {margin-top: 10px;} /* Footer */ footer { border-radius: 0; } .newsletter-footer { text-align: center; } .footer-logos-partners { padding-top: 40px; } .footer-logos-partners div.uk-flex { justify-content: center; } .footer-logo-container { text-align: center; } .footer-logo-container .footer-logo { margin-bottom: 20px; } .footer-social-mobile { justify-content: center; display: flex; } .footer-menu-mobile .uk-accordion-title { font-size: 1.4rem; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 300; text-transform: none; } .footer-menu-mobile .uk-accordion-title:before { display: none; } .footer-menu-mobile .uk-drop-parent-icon { transform: rotateZ(270deg); float: right; margin-right: 15px; margin-top: 5px; } .footer-menu-mobile .uk-drop-parent-icon svg { width: 15px; } .footer-menu-mobile li.uk-open .uk-accordion-title .uk-drop-parent-icon { transform: rotateX(360deg); } } /* -------------------------------------------------------------------------- ≤ 767px — phone landscape -------------------------------------------------------------------------- */ @media (max-width: 767px) { #container-menu .uk-navbar { margin: 0; } #container-menu .uk-navbar-right .uk-button { padding: 2px 10px; font-size: 0.8rem; background-color: rgba(255, 255, 255, 0.5) !important; border: 0; } .menu-langs { display: none; } .header { margin-top: -80px; } .header-logo { max-width: 150px; margin-top: 0; } /* .home .header .header-text { bottom: auto; left: 50%; top: 50%; text-align: center; } */ /* .home .header .header-text h2, .home .header .header-text h2 span { text-align: center; font-size: 2.5rem; } */ .booking-engine-header-bottom { display: none; } /* Headings */ .uk-heading-xsmall, .uk-heading-xsmall p { font-size: 1.2rem; line-height: 1.2; } .uk-heading-small, .uk-heading-small p { font-size: 1.4rem; line-height: 1.2; } .uk-heading-medium, .uk-heading-medium p { font-size: 1.6rem; line-height: 1.2; } .uk-heading-large, .uk-heading-large p { font-size: 1.8rem; line-height: 1.2; } .uk-heading-xlarge, .uk-heading-xlarge p { font-size: 2.4rem; margin: 0; line-height: 1.2; } .uk-text-large, .uk-text-large p { font-size: 1.2rem; } } /* -------------------------------------------------------------------------- ≤ 639px (below uk-@s) — small mobile -------------------------------------------------------------------------- */ @media (max-width: 639px) { /* Headings */ .uk-heading-xsmall { font-size: 1.2rem; } .uk-heading-small { font-size: 1.4rem; } .uk-heading-medium { font-size: 1.6rem; } .uk-heading-large { font-size: 1.8rem; } .uk-text-large { font-size: 1.2rem; } .container-budget { padding: 0; } footer { padding: 5%; } /* Product grid backgrounds */ .flatpage-44 .feed-products .product-ind::after, .product_category .feed-products .product-ind::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; bottom: -2vh; height: 25vh; background-color: #F9F5EF; z-index: -1; } } /* -------------------------------------------------------------------------- ≤ 459px — extra small -------------------------------------------------------------------------- */ @media (max-width: 459px) { .menu-white-bg.hotel .header .navbar li a { font-size: 0.6rem; } .uk-section-small { padding-top: 20px; padding-bottom: 20px; } } /* Banner contact: degradado blanco→transparente en la parte superior para mejorar legibilidad del texto sobre la imagen de fondo */ .banner-contact { position: relative; } .banner-contact > .uk-background-cover { position: relative; } .banner-contact > .uk-background-cover::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(to bottom, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 100%); pointer-events: none; z-index: 1; } .banner-contact > .uk-background-cover > .uk-container { position: relative; z-index: 2; } /* ========================================================================== HOLATAX HOME (2026) - Layout maquetado con UIkit 3.23.7 -------------------------------------------------------------------------- El layout (grids, sections, containers, flex) lo proporciona UIkit. Aqui solo definimos: - Reset tipografico para namespace .ht-home (anula Switzer del legacy) - Paleta de marca (overrides puntuales de UIkit + custom classes) - Detalles de marca: cards circulares, vectores decorativos, pildora Why ========================================================================== */ /* --- Reset tipografico namespace ---------------------------------------- */ .ht-home, .ht-home p, .ht-home h1, .ht-home h2, .ht-home h3, .ht-home h4, .ht-home h5, .ht-home h6, .ht-home a, .ht-home li, .ht-home button, .ht-home .uk-heading-small, .ht-home .uk-heading-medium, .ht-home .uk-heading-large, .ht-home .uk-heading-xlarge, .ht-home .uk-heading-2xlarge { font-family: var(--ht-font-ui) !important; color: var(--ht-ink); } .ht-home { background: var(--ht-cream); color: var(--ht-ink); overflow-x: hidden; } .ht-home p { font-size: 1rem; line-height: 1.4; } /* --- Headings con Sentient (display) ------------------------------------ */ .ht-home .ht-h2, .ht-about h1.ht-hero__title, .ht-home h1.ht-hero__title, .ht-home .ht-step__title, .ht-home .ht-service-card__title, .ht-home .ht-compare-box__title, .ht-home .ht-footer__email { font-family: var(--ht-font-display) !important; font-weight: 400; letter-spacing: -0.01em; } /* Anula los tamanos de uk-heading-medium para usar los tamanos Figma */ .ht-home .uk-heading-medium { font-size: clamp(2.25rem, 4.4vw, 4rem); /* 36 -> 64px */ line-height: 1.2; margin: 0; } /* --- Eyebrow (Inter medium 20px) ---------------------------------------- */ .ht-home .ht-eyebrow { font-family: var(--ht-font-ui) !important; font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--ht-ink) !important; text-transform: none; } /* --- Botones (uso global, fuera del namespace .ht-home) ----------------- */ .ht-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 18px; border-radius: var(--ht-radius-sm); font-family: var(--ht-font-ui) !important; font-weight: 500; font-size: 1rem; line-height: 1.2; text-decoration: none !important; transition: transform .2s ease, background .2s ease; cursor: pointer; border: 0; text-transform: none; letter-spacing: 0; height: auto; min-height: 0; } .ht-btn--dark { background: var(--ht-ink); color: var(--ht-paper) !important; } .ht-btn--dark:hover { background: #1f1f1f; color: var(--ht-paper) !important; transform: translateY(-1px); } .ht-btn--small { padding: 9px 14px; font-size: 0.9rem; } /* ========================================================================== HERO — Figma node 1:2 (Home), frame Hero 1440x1024 ========================================================================== */ .ht-home .ht-hero, .ht-about .ht-hero { position: relative; width: 100%; /* En Figma el hero tiene 1024 de altura sobre canvas 1440. Ratio 1024/1440 = 71.11% */ /* Mantenemos relacion de aspecto con un min-height de seguridad */ height: min(1024px, 71.11vw); min-height: 720px; background: #BABABA; color: var(--ht-cream); overflow: hidden; isolation: isolate; } .ht-home .ht-hero__bg, .ht-about .ht-hero__bg { position: absolute; inset: 0; z-index: 0; } .ht-home .ht-hero__bg::after, .ht-about .ht-hero__bg::after { /* Velado oscuro para legibilidad del texto cream sobre la imagen */ content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.15) 40%, rgba(0,0,0,0.45) 100%); pointer-events: none; z-index: 1; } .ht-home .ht-hero__bg img, .ht-about .ht-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .ht-home .ht-hero__inner, .ht-about .ht-hero__inner { position: relative; z-index: 2; height: 100%; width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 60px; display: flex; flex-direction: column; align-items: center; /* En Figma el eyebrow esta a y=269; el contenido del hero arranca arriba */ /* 269/1024 ≈ 26.27% de top */ padding-top: clamp(120px, 26vh, 269px); } /* --- Eyebrow (Inter 20 / center / cream) -------------------------------- */ .ht-home .ht-hero__eyebrow, .ht-about .ht-hero__eyebrow { font-family: var(--ht-font-ui) !important; font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--ht-cream) !important; text-align: center; margin: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45); position: relative; display: inline-flex; flex-direction: column; align-items: center; align-self: center; } .ht-home .ht-hero__eyebrow strong, .ht-about .ht-hero__eyebrow strong { font-weight: 600; color: var(--ht-cream); } /* Subrayado curvo organico del eyebrow. Implementacion: contiene un SVG inline con preserveAspectRatio=none (se adapta al ancho del texto) + vector-effect=non-scaling-stroke en el path (el grosor del trazo permanece constante en pixeles, no se deforma al estirar). El color usa currentColor para heredar del eyebrow. */ .ht-hero__eyebrow-underline { display: block; align-self: center; margin-top: 6px; width: 100%; height: 14px; pointer-events: none; color: inherit; } .ht-hero__eyebrow-underline-svg { display: block; width: 100%; height: 100%; overflow: visible; } /* Variante home/about (texto cream sobre fondo dark): sombra suave */ /* .ht-home .ht-hero__eyebrow-underline, .ht-about .ht-hero__eyebrow-underline { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.45)); } */ /* --- Title block (H1 + oval) -------------------------------------------- */ .ht-home .ht-hero__title-wrap, .ht-about .ht-hero__title-wrap { position: relative; margin-top: 46px; /* y=339 - y=269 - 24 (eyebrow height) ≈ 46 */ width: 785px; max-width: 100%; display: flex; align-items: center; justify-content: center; } .ht-home .ht-hero__title, .ht-about .ht-hero__title { font-family: var(--ht-font-display) !important; font-weight: 400; font-size: clamp(44px, 6.66vw, 76px); line-height: 1.2; letter-spacing: -0.01em; text-align: center; color: var(--ht-cream) !important; margin: 0; position: relative; z-index: 2; text-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } /* Ovalo Figma: 605x150 stroke #FFE8BA 3px, ancla a la ultima linea del H1. Estrategia: posicionarlo al pie del H1, centrado horizontal, con altura ~equivalente a una linea + algo extra. Asi cubre la palabra final del H1 sea cual sea el idioma o el numero de lineas. */ /* Las 2 ultimas palabras del H1 (insertadas via JS) van JUNTAS y SIEMPRE en una nueva linea: display:block fuerza salto, white-space:nowrap evita que se rompan entre ellas. Y el ovalo se dibuja como ::after sobre el span (centrado garantizado en sus palabras). */ .ht-home .ht-hero__title-last { display: inline-block; /* solo ocupa el ancho de las palabras */ white-space: nowrap; position: relative; } /* Romper antes de las 2 ultimas palabras */ .ht-home .ht-hero__title-last::before { content: ''; display: block; width: 0; height: 0; } /* Ovalo decorativo perfectamente centrado en las 2 palabras */ .ht-home .ht-hero__title-last::after { content: ''; position: absolute; inset: -10% -8%; border: 3px solid var(--ht-yellow); border-radius: 50%; pointer-events: none; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.25)); z-index: -1; } /* Para que el span fuerce salto de linea (display:block via wrapper) */ .ht-home .ht-hero__title { white-space: pre-line; } .ht-home .ht-hero__title .ht-hero__title-last { white-space: nowrap; } /* Ovalo amarillo decorativo: envuelve la ultima frase del H1. Posicionado al bottom del title-wrap. */ .ht-home .ht-hero__title-oval { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 25%); width: clamp(320px, 65%, 640px); height: clamp(90px, 22%, 150px); z-index: 1; pointer-events: none; border: 3px solid var(--ht-yellow); border-radius: 50%; filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.25)); } .ht-home .ht-hero__title-oval img { display: none; } /* --- Subtitle (Inter 20 / 130% / center / cream) ------------------------ */ .ht-home .ht-hero__subtitle, .ht-about .ht-hero__subtitle { margin-top: 46px; /* y=728 - (y=339+343) = 46 */ width: 623px; max-width: 100%; text-align: center; font-family: var(--ht-font-ui) !important; font-size: 20px; line-height: 1.3; color: var(--ht-cream) !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55); } .ht-home .ht-hero__subtitle p, .ht-about .ht-hero__subtitle p { margin: 0; color: var(--ht-cream) !important; font-weight: 400; } .ht-home .ht-hero__subtitle strong, .ht-about .ht-hero__subtitle strong { font-weight: 700; color: var(--ht-cream); } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 1023px) { .ht-home .ht-hero, .ht-about .ht-hero { height: auto; min-height: 600px; padding: 80px 0 60px; } .ht-home .ht-hero__inner, .ht-about .ht-hero__inner { box-sizing: border-box; padding-top: 80px; padding-left: 24px; padding-right: 24px; } .ht-home .ht-hero__title-wrap, .ht-about .ht-hero__title-wrap { margin-top: 32px; width: 100%; } /* El titulo no debe ensanchar el inner ni salirse del borde */ .ht-home .ht-hero__title, .ht-about .ht-hero__title { max-width: 100%; white-space: normal; overflow-wrap: break-word; } .ht-home .ht-hero__subtitle, .ht-about .ht-hero__subtitle { margin-top: 32px; width: 100%; max-width: 100%; box-sizing: border-box; overflow-wrap: break-word; } } @media (max-width: 639px) { .ht-home .ht-hero__title-oval { display: none; } .ht-home .ht-hero__title, .ht-about .ht-hero__title { font-size: clamp(36px, 11vw, 56px); } } /* ========================================================================== HOW IT WORKS ========================================================================== */ .ht-home .ht-how { background: var(--ht-yellow); position: relative; padding-top: 140px; } .ht-home .ht-how__subtitle { font-family: var(--ht-font-ui) !important; font-size: 1.25rem; font-weight: 400; line-height: 1.3; color: var(--ht-ink); margin: 0; } /* CTA wrap: flecha SVG curvada larga + boton "Ir al formulario" */ .ht-home .ht-how__cta-wrap { display: inline-flex; align-items: center; gap: 24px; position: relative; } .ht-home .ht-how__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 390px; flex-shrink: 0; } .ht-home .ht-how__cta-arrow img { width: 100%; height: auto; display: block; /* arrow-decor-2.svg tiene fill #FFFBF2 (cream), tal cual como en Figma */ } @media (max-width: 1199px) { .ht-home .ht-how__cta-arrow { width: 280px; } } @media (max-width: 959px) { .ht-home .ht-how__cta-arrow { display: none; } } /* Selector con specificity alta para vencer UIkit .uk-grid-match > * > :not(...) */ .ht-home .ht-how .ht-step, .ht-home article.ht-step { background: var(--ht-yellow-soft); border-radius: 50%; width: 318px !important; height: 318px !important; min-width: 318px; min-height: 318px; max-width: 318px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 36px; flex-shrink: 0; flex-grow: 0; box-sizing: border-box; aspect-ratio: 1 / 1; } @media (max-width: 1199px) { .ht-home .ht-how .ht-step, .ht-home article.ht-step { width: 280px !important; height: 280px !important; min-width: 280px; min-height: 280px; max-width: 280px; padding: 32px 28px; } } @media (max-width: 959px) { .ht-home .ht-how .ht-step, .ht-home article.ht-step { width: 100% !important; height: auto !important; min-width: 0; min-height: 0; max-width: 320px; aspect-ratio: 1 / 1; } } /* Hover dark: cualquier card en hover/focus se vuelve oscura con texto + iconos claros. Specificity alta para vencer la regla de background claro de las cards. */ .ht-home .ht-step { cursor: pointer; transition: background 0.3s ease, color 0.3s ease; } .ht-home .ht-how .ht-step:hover, .ht-home .ht-how .ht-step:focus-within, .ht-home article.ht-step:hover, .ht-home article.ht-step:focus-within { background: var(--ht-ink) !important; } .ht-home .ht-step:hover .ht-step__title, .ht-home .ht-step:hover .ht-step__desc, .ht-home .ht-step:hover .ht-step__desc *, .ht-home .ht-step:focus-within .ht-step__title, .ht-home .ht-step:focus-within .ht-step__desc, .ht-home .ht-step:focus-within .ht-step__desc * { color: var(--ht-paper) !important; } /* Iconos: en hover invierten su color (los SVG tienen stroke #353535 por defecto; brightness(0) invert(1) los pasa a blanco/cream). */ .ht-home .ht-step:hover .ht-step__icon img, .ht-home .ht-step:focus-within .ht-step__icon img { filter: brightness(0) invert(1); } .ht-home .ht-step__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .ht-home .ht-step__icon img { max-width: 100%; height: auto; } .ht-home .ht-step__title { font-family: var(--ht-font-display) !important; font-weight: 400; font-size: 1.25rem; line-height: 1.2; margin: 0 0 12px 0; text-decoration: underline; text-underline-offset: 4px; color: var(--ht-ink); } .ht-home .ht-step__desc { font-family: var(--ht-font-ui) !important; font-size: 0.9375rem; line-height: 1.35; margin: 0; max-width: 220px; color: var(--ht-ink); } .ht-home .ht-step__desc > * { margin: 0; color: inherit; font: inherit; } /* .ht-step__arrow eliminado: las flechas entre circulos no estan en el Figma final */ /* ========================================================================== WHY + COMPARATIVA ========================================================================== */ .ht-home .ht-why { background: var(--ht-cream); position: relative; } /* Eyebrow Why: "Why" texto + logo Holatax script con ovalo decorativo */ .ht-home .ht-why__eyebrow { display: inline-flex; align-items: center; gap: 16px; margin-bottom: 32px; } .ht-home .ht-why__eyebrow-text { font-family: var(--ht-font-ui) !important; font-weight: 500; font-size: 1.25rem; color: var(--ht-ink); line-height: 1; } /* Ovalo real (mas ancho que alto). border-radius: 50% sobre un elemento con width != height crea un ovalo geometrico. */ .ht-home .ht-why__eyebrow-logo { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 280px; height: 90px; border: 2px solid var(--ht-ink); border-radius: 50%; } .ht-home .ht-why__eyebrow-logo img { height: 56px; width: auto; display: block; } /* Eyebrow "Por que [Holatax]" en movil: el ovalo a 280x90 quedaba demasiado grande. Reducido proporcionalmente. */ @media (max-width: 639px) { .ht-home .ht-why__eyebrow { gap: 10px; } .ht-home .ht-why__eyebrow-text { font-size: 1rem; } .ht-home .ht-why__eyebrow-logo { width: 180px; height: 70px; } .ht-home .ht-why__eyebrow-logo img { height: 40px; } } /* H2 del bloque Why mas grande - en Figma ocupa 2 lineas con texto display muy presente. Override del uk-heading-medium del namespace. */ .ht-home .ht-why .uk-heading-medium, .ht-home .ht-why .ht-h2 { font-size: clamp(3rem, 6.6vw, 4.2rem); line-height: 1.15; margin-left: auto; margin-right: auto; margin-top: 0 !important; } /* Comparativa: 2 cajas amarillo-soft, hover amarillo mas oscuro */ .ht-home .ht-compare-box { border-radius: var(--ht-radius-md); padding: 56px 48px; height: 100%; background: var(--ht-yellow-soft); cursor: pointer; transition: background 0.35s ease; } .ht-home .ht-compare-box--old, .ht-home .ht-compare-box--smart { background: var(--ht-yellow-soft); } /* Hover/focus: caja en amarillo mas saturado #FFE8BA */ .ht-home .ht-compare-box:hover, .ht-home .ht-compare-box:focus-within { background: var(--ht-yellow); } .ht-home .ht-compare-box__label { font-family: var(--ht-font-ui) !important; font-size: 1rem; margin: 0 0 8px 0; color: var(--ht-ink); } /* Title con underline animado solo en hover (left -> right) */ .ht-home .ht-compare-box__title { font-family: var(--ht-font-display) !important; font-weight: 400; font-size: 2rem; line-height: 1.2; margin: 0 0 32px 0; color: var(--ht-ink); display: inline-block; padding-bottom: 6px; background-image: linear-gradient(var(--ht-ink), var(--ht-ink)); background-position: 0 100%; background-repeat: no-repeat; background-size: 0% 2px; transition: background-size 0.5s cubic-bezier(0.65, 0, 0.35, 1); } .ht-home .ht-compare-box:hover .ht-compare-box__title, .ht-home .ht-compare-box:focus-within .ht-compare-box__title { background-size: 100% 2px; } .ht-home .ht-compare-box__list { list-style: none; margin: 0; padding: 0; } .ht-home .ht-compare-box__list li { display: flex; align-items: flex-start; gap: 16px; font-family: var(--ht-font-ui) !important; font-size: 1.25rem; line-height: 2.2; color: var(--ht-ink); } .ht-home .ht-compare-box__list li::before { display: none; } .ht-home .ht-compare-box__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 22px; margin-top: 12px; } .ht-home .ht-compare-box__icon img { width: 100%; height: 100%; object-fit: contain; } /* ========================================================================== SERVICES ========================================================================== */ .ht-home .ht-services { background: var(--ht-yellow); } /* Eyebrow + flecha decorativa al lado derecho (Figma: vector 11:374 x=290 y=3249) */ .ht-home .ht-services__head { margin-bottom: 0; } .ht-home .ht-services__head-arrow { position: absolute; left: calc(100% + 16px); top: -12px; width: 57px; pointer-events: none; } .ht-home .ht-services__head-arrow img { width: 100%; height: auto; display: block; /* SVG cream original; se tiñe oscuro sobre fondo amarillo */ filter: brightness(0); opacity: 0.7; } @media (max-width: 639px) { .ht-home .ht-services__head-arrow { display: none; } } .ht-home .ht-services__grid { align-items: stretch; } .ht-home .ht-service-card { border-radius: var(--ht-radius-md); padding: 32px 24px; display: flex; flex-direction: column; justify-content: space-between; min-height: 315px; height: 100%; background: var(--ht-yellow-soft); } .ht-home .ht-service-card--light { background: var(--ht-cream); } .ht-home .ht-service-card--soft { background: var(--ht-yellow-soft); } /* Cards alineadas todas a la misma altura. En hover, la card sube -30px con transition suave. */ .ht-home .ht-service-card { transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1), background 0.35s ease; } @media (min-width: 960px) { .ht-home .ht-services__grid { align-items: stretch !important; } .ht-home .ht-services__grid > div, .ht-home .ht-services__grid > li { align-self: stretch; } .ht-home .ht-service-card:hover, .ht-home .ht-service-card:focus-within { transform: translateY(-30px); } } /* Slider home: limpieza de estilos por defecto del