/* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { *#dm div.dmContent h1, *#dm div.dmFooter h1 { color:rgb(102,102,102); } *#dm div.dmRespCol>* { line-height:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li>*.dmNavigation { color:rgb(17,17,17); font-weight:normal; } *.dmDesktopBody *#dm ul.dmNavWrapper>li>a:hover, *.dmDesktopBody *#dm ul.dmNavWrapper>li>a.currentPage { border-color:rgb(17,17,17); } *.dmDesktopBody *#dm ul.dmNavWrapper>li.navItemSelectedServer>a *.navText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>a *.navItemText, *.dmDesktopBody *#dm ul.dmNavWrapper>li.dmNavItemSelected>*.navItemText { font-weight:bold; } *.stickyHeaderSpacer { height:112px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-family: Poppins, "Poppins Fallback"; color:rgba(26,26,26,1); } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h1, *#dm div.dmFooter .dmNewParagraph[data-version] h1, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h1 *, *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:400; font-style:normal; text-decoration:none; } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link) { color:var(--color_4); } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h2, *#dm div.dmFooter .dmNewParagraph[data-version] h2, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2, *#dm div.dm-title .dmNewParagraph[data-version] h2 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h2 *, *#dm div.dmFooter .dmNewParagraph[data-version] h2 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h2 *, *#dm div.dm-title .dmNewParagraph[data-version] h2 * { text-decoration:none; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h3, *#dm div.dmFooter .dmNewParagraph[data-version] h3, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h3 *, *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h4, *#dm div.dmFooter .dmNewParagraph[data-version] h4, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h4 *, *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h5, *#dm div.dmFooter .dmNewParagraph[data-version] h5, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5, *#dm div.dm-title .dmNewParagraph[data-version] h5 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h5 *, *#dm div.dmFooter .dmNewParagraph[data-version] h5 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5 *, *#dm div.dm-title .dmNewParagraph[data-version] h5 * { text-decoration:none; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { color:var(--color_1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } *#dm div.dmContent .dmNewParagraph[data-version] h6, *#dm div.dmFooter .dmNewParagraph[data-version] h6, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } *#dm div.dmContent .dmNewParagraph[data-version] h6 *, *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } *#dm div.dmNewParagraph a.visited, *#dm div.dmNewParagraph a:visited, *#dm .dmNewParagraph a.visited, *#dm .dmNewParagraph a:visited, *#dm div.dmBlockElement a.visited, *#dm div.dmBlockElement a:visited, *#dm .dmBlockElement a.visited, *#dm .dmBlockElement a:visited, *#dm .dmform a.fileUploadLink.visited, *#dm .dmform a.fileUploadLink:visited, .dmPrettyList .link:not(.dmWidget).visited, .dmPrettyList .link:not(.dmWidget):visited, *#dm .dmGeoLocation a.dmGeoSVSeeAll.visited, *#dm .dmGeoLocation a.dmGeoSVSeeAll:visited, *#dm .dmGeoLocation a.dmGeoSVGoToPage.visited, *#dm .dmGeoLocation a.dmGeoSVGoToPage:visited, *#dm .postDescription a.visited, *#dm .postDescription a:visited, *#dm .blog-post-component a.visited, *#dm .blog-post-component a:visited, *#dm .timeline-post a.visited, *#dm .timeline-post a:visited, *#dm .rteBlock a.visited, *#dm .rteBlock a:visited, .newPhotoGallery .photoGalleryViewAll.link.visited, .newPhotoGallery .photoGalleryViewAll.link:visited, .dmTable a.visited, .dmTable a:visited, *#dm .ecwid .ec-link:not(.breadcrumbs__link).visited, *#dm .ecwid .ec-link:not(.breadcrumbs__link):visited, .dmSignup a:not(.social-link).visited, .dmSignup a:not(.social-link):visited, .prev-next-links a.visited, .prev-next-links a:visited { color:rgba(0,45,97,1); text-decoration:none; } *#dm div.dmNewParagraph a.hover, *#dm div.dmNewParagraph a:hover, *#dm .dmNewParagraph a.hover, *#dm .dmNewParagraph a:hover, *#dm div.dmBlockElement a.hover, *#dm div.dmBlockElement a:hover, *#dm .dmBlockElement a.hover, *#dm .dmBlockElement a:hover, *#dm .dmform a.fileUploadLink.hover, *#dm .dmform a.fileUploadLink:hover, .dmPrettyList .link:not(.dmWidget).hover, .dmPrettyList .link:not(.dmWidget):hover, *#dm .dmGeoLocation a.dmGeoSVSeeAll.hover, *#dm .dmGeoLocation a.dmGeoSVSeeAll:hover, *#dm .dmGeoLocation a.dmGeoSVGoToPage.hover, *#dm .dmGeoLocation a.dmGeoSVGoToPage:hover, *#dm .postDescription a.hover, *#dm .postDescription a:hover, *#dm .blog-post-component a.hover, *#dm .blog-post-component a:hover, *#dm .timeline-post a.hover, *#dm .timeline-post a:hover, *#dm .rteBlock a.hover, *#dm .rteBlock a:hover, .newPhotoGallery .photoGalleryViewAll.link.hover, .newPhotoGallery .photoGalleryViewAll.link:hover, .dmTable a.hover, .dmTable a:hover, *#dm .ecwid .ec-link:not(.breadcrumbs__link).hover, *#dm .ecwid .ec-link:not(.breadcrumbs__link):hover, .dmSignup a:not(.social-link).hover, .dmSignup a:not(.social-link):hover, .prev-next-links a.hover, .prev-next-links a:hover { color:rgba(0,62,130,1); text-decoration:underline; } *#dm div.dmNewParagraph a, *#dm .dmNewParagraph a, *#dm div.dmBlockElement a, *#dm .dmBlockElement a, *#dm .dmform a.fileUploadLink, .dmPrettyList .link:not(.dmWidget), *#dm .dmGeoLocation a.dmGeoSVSeeAll, *#dm .dmGeoLocation a.dmGeoSVGoToPage, *#dm .postDescription a, *#dm .blog-post-component a, *#dm .timeline-post a, *#dm .rteBlock a, .newPhotoGallery .photoGalleryViewAll.link, .dmTable a, *#dm .ecwid .ec-link:not(.breadcrumbs__link), .dmSignup a:not(.social-link), .prev-next-links a { color:rgba(26,26,26,1); text-decoration:none; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1, *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2, *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3, *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4, *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5, *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6, #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { --font-scale:false; } #dmRoot #dm div.dmNewParagraph p, #dmRoot #dm div.dmNewParagraph li { line-height:1.5; color:rgba(74,74,74,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:400; font-style:normal; text-decoration:none; letter-spacing:0.1em; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { color:rgba(26,26,26,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:700; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h1 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h1 * { text-decoration:none; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { font-weight:700; letter-spacing:0em; } #dmRoot *#dm div.dmContent h3, #dmRoot *#dm div.dmFooter h3, #dmRoot *#dm div.p_hfcontainer h3, #dmRoot *#dm div.flex_hfcontainer h3, #dmRoot *#dm div.dm-title h3 { font-weight:700; color:rgba(26,26,26,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h3 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h3 * { text-decoration:none; } #dmRoot *#dm div.dmContent h4, #dmRoot *#dm div.dmFooter h4, #dmRoot *#dm div.p_hfcontainer h4, #dmRoot *#dm div.flex_hfcontainer h4, #dmRoot *#dm div.dm-title h4 { color:rgba(26,26,26,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:normal; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h4 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h4 * { text-decoration:none; } #dmRoot *#dm div.dmContent h5, #dmRoot *#dm div.dmFooter h5, #dmRoot *#dm div.p_hfcontainer h5, #dmRoot *#dm div.flex_hfcontainer h5, #dmRoot *#dm div.dm-title h5 { font-weight:700; color:rgba(26,26,26,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h5, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h5, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h5 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h5 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h5 * { text-decoration:none; } #dmRoot *#dm div.dmContent h6, #dmRoot *#dm div.dmFooter h6, #dmRoot *#dm div.p_hfcontainer h6, #dmRoot *#dm div.flex_hfcontainer h6, #dmRoot *#dm div.dm-title h6 { color:rgba(26,26,26,1); direction:ltr; font-family: Poppins, "Poppins Fallback"; font-weight:400; font-style:normal; text-decoration:none; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 { text-decoration:inherit; } #dmRoot *#dm div.dmContent .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dmFooter .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.p_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.flex_hfcontainer .dmNewParagraph[data-version] h6 *, #dmRoot *#dm div.dm-title .dmNewParagraph[data-version] h6 * { text-decoration:none; } } @media (min-width:1025px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } #dm DIV.dmOuter DIV.dmInner, #dm DIV.dmOuter DIV#dmSlideRightNavRight { background-image:none; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:1.12923cqw; --font-scale:true; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:18px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:50px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:32px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:25px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:20px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:48px; --font-scale:false; line-height:1.1; } #dmRoot *#dm div.dmContent h2, #dmRoot *#dm div.dmFooter h2, #dmRoot *#dm div.p_hfcontainer h2, #dmRoot *#dm div.flex_hfcontainer h2, #dmRoot *#dm div.dm-title h2 { line-height:2; } } @media (min-width:768px) and (max-width:1024px) { *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:18px; } #dm div.dmNewParagraph p { font-size:18px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:16px; } *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.p_hfcontainer h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:1.12923cqw; --font-scale:true; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:16px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:50px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:30px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:25px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:20px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:23px; --font-scale:false; } } @media (min-width:0px) and (max-width:767px) { *#dm div.dmContent h6, *#dm div.dmFooter h6, *#dm div.flex_hfcontainer h6, *#dm div.dm-title h6 { font-size:14px; } #dm div.dmInner, #dm div.dmInner .dmRespCol, #dm .dmRespCol div.dmNewParagraph, #dm .ecwid .ec-store, #dm .dmform .dmforminput label, .dmPrettyList .listText, .dmPrettyList .itemName, #dm .dmRestaurantMenu .menuItemBox, .dmRestaurantMenu .menuItemName, .dmRestaurantMenu .menuItemDesc, .dmRestaurantMenu .menuItemPrice, .dmPhotoGallery .caption-text.caption-text, .dmGeoLocation a span.dmGeoMLocItemTitle, .dmGeoLocation a span.dmGeoMLocItemDetails, .map-popup-description { font-size:1.12923cqw; --font-scale:true; } #dm div.dmNewParagraph p, #dm div.dmNewParagraph li { font-size:16px; } *#dm div.dmContent h1, *#dm div.dmFooter h1, *#dm div.p_hfcontainer h1, *#dm div.flex_hfcontainer h1, *#dm div.dm-title h1 { font-size:40px; } *#dm div.dmContent h2, *#dm div.dmFooter h2, *#dm div.p_hfcontainer h2, *#dm div.flex_hfcontainer h2, *#dm div.dm-title h2 { font-size:30px; } *#dm div.dmContent h3, *#dm div.dmFooter h3, *#dm div.p_hfcontainer h3, *#dm div.flex_hfcontainer h3, *#dm div.dm-title h3 { font-size:20px; } *#dm div.dmContent h4, *#dm div.dmFooter h4, *#dm div.p_hfcontainer h4, *#dm div.flex_hfcontainer h4, *#dm div.dm-title h4 { font-size:18px; } *#dm div.dmContent h5, *#dm div.dmFooter h5, *#dm div.p_hfcontainer h5, *#dm div.flex_hfcontainer h5, *#dm div.dm-title h5 { font-size:15px; } #dmRoot *#dm div.dmContent h1, #dmRoot *#dm div.dmFooter h1, #dmRoot *#dm div.p_hfcontainer h1, #dmRoot *#dm div.flex_hfcontainer h1, #dmRoot *#dm div.dm-title h1 { font-size:12px; --font-scale:false; } } /* Tamaño para móvil (default, 0px a 767px) */ /* Selector usando el ID único del widget de hero y la etiqueta H1 */ #1360798684 h1 { /* font-size: clamp(MÍNIMO, FLUIDO (preferido), MÁXIMO); Aseguramos: 1. Que no baje de 1.8rem (Móvil). 2. Que crezca fluidamente hasta el 6% del viewport. 3. Que NUNCA supere 4rem (Desktop), lo que fija el tamaño. */ font-size: clamp(1.8rem, 6vw + 0.5rem, 4rem) !important; } /* Opcional: Si el texto está anidado en un y tiene estilos en línea, podríamos necesitar apuntar directamente al span para forzar el color, aunque el tamaño debería funcionar con el H1. */ #1360798684 h1 span { font-size: inherit !important; } /* Media Query para pantallas de smartphones (hasta 767px de ancho) */ @media (max-width: 767px) { /* 1. Apuntamos al pseudo-elemento que contiene el fondo */ #2f3b976f::before { /* 2. Usamos el shorthand de background y reescribimos la posición y el tamaño. Dejamos la URL vacía para que el navegador mantenga la imagen existente. */ background-position: 75% center !important; background-repeat: no-repeat !important; background-size: cover !important; } } /* ===== SECTION LAYOUT ===== */ .tp-style-cards { padding: 60px 0; } .tp-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; } /* ===== CARD ===== */ .tp-style-card { background: #ffffff; border-radius: 20px; padding: 36px 32px; text-align: center; box-shadow: 0 6px 20px rgba(0,0,0,0.06); transition: 0.35s cubic-bezier(.25,.46,.45,.94); position: relative; overflow: hidden; } /* Hover Elevation */ .tp-style-card:hover { transform: translateY(-8px); box-shadow: 0 14px 40px rgba(0,0,0,0.12); } .tp-style-card { transition: 0.45s cubic-bezier(.25,.46,.45,.94); } .tp-style-card:hover { transform: translateY(-6px); box-shadow: 0 8px 28px rgba(0,0,0,0.09), 0 0 0 1px rgba(1,91,185,0.08); } /* ===== ICON ===== */ .tp-style-icon-wrap { margin-bottom: 22px; } /* Stroke-draw */ .tp-icon { width: 48px; height: 48px; stroke: #1f3f63; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 180; stroke-dashoffset: 180; animation: draw 1.6s ease forwards; animation-delay: 0.2s; } .tp-style-card:hover .tp-icon { transform: scale(1.06); stroke: #015bb9; stroke-width: 2.2; filter: drop-shadow(0 0 4px rgba(1,91,185,0.25)); } /* Draw animation */ @keyframes draw { to { stroke-dashoffset: 0; } } /* ===== TITLES & TEXT ===== */ .tp-style-title { font-weight: 700; font-size: 20px; margin-bottom: 14px; color: #1f3f63; } .tp-style-text { color: #444; font-size: 15px; line-height: 1.55; margin-bottom: 24px; } /* ===== BUTTON ===== */ .tp-style-btn { display: inline-block; padding: 10px 26px; border: 1.5px solid #1f3f63; border-radius: 40px; text-decoration: none; color: #1f3f63; font-weight: 600; font-size: 14px; transition: 0.25s; } .tp-style-btn:hover { background: #1f3f63; color: #fff; } .tp-btn-primary { background: #0471aa; color: #ffffff; padding: 14px 32px; border-radius: 12px; font-size: 17px; font-weight: 600; text-decoration: none; display: inline-block; transition: 0.25s ease; box-shadow: 0 8px 24px rgba(4,113,170,0.25); } .tp-btn-primary:hover { background: #035c8a; box-shadow: 0 10px 28px rgba(4,113,170,0.32); transform: translateY(-2px); } .tp-btn-secondary { background: #ffffff; color: #0471aa; border: 2px solid #0471aa; padding: 12px 28px; border-radius: 12px; font-size: 17px; font-weight: 600; text-decoration: none; display: inline-block; transition: 0.25s ease; } .tp-btn-secondary:hover { background: #f0f8ff; transform: translateY(-2px); } /* ===== SCROLL FADE-IN ===== */ .tp-anim-section .tp-anim-card { opacity: 0; transform: translateY(25px); transition: 0.7s ease; } .tp-anim-section .tp-anim-card.tp-show { opacity: 1; transform: translateY(0); } @media (min-width: 768px) and (max-width: 1024px) { .tp-style-grid { row-gap: 32px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .tp-style-icon svg { width: 42px !important; height: 42px !important; } } @media (hover: hover) { .tp-style-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.08); } } .tp-style-card { opacity: 0; transform: translateY(20px); animation: tpFadeUp .6s ease forwards; } @keyframes tpFadeUp { to { opacity: 1; transform: translateY(0); } } @media (max-width: 480px) { .tp-style-card { box-shadow: 0 4px 14px rgba(0,0,0,0.06) !important; } } @media (max-width: 480px) { .tp-style-card { border-radius: 16px !important; } } /* GRID BASE */ .tp-cruise-destinations-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; } /* CARD */ .tp-dest-card { position: relative; display: block; border-radius: 22px; overflow: hidden; background: #ffffff; box-shadow: 0 8px 22px rgba(0,0,0,0.08); transition: transform .28s ease, box-shadow .28s ease; } /* IMAGE */ .tp-dest-card img { width: 100%; height: 220px; object-fit: cover; display: block; } /* TITLE OVERLAY */ .tp-dest-card-title { display: block; padding: 18px 20px; font-size: 19px; font-weight: 600; color: #0471aa; background: #ffffff; } /* HOVER EFFECT (lift + stronger shadow) */ .tp-dest-card:hover { transform: translateY(-5px); box-shadow: 0 14px 34px rgba(0,0,0,0.14); } /* ANIMATION (same tp-anim as your other sections) */ .tp-anim { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } .tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } /* TABLET */ @media (max-width: 1024px) { .tp-cruise-destinations-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .tp-dest-card img { height: 200px; } } /* MOBILE */ @media (max-width: 767px) { .tp-cruise-destinations-grid { grid-template-columns: 1fr; gap: 24px; } .tp-dest-card img { height: 220px; } } .tp-dest-link { font-weight: 600; font-size: 17px; color: var(--tp-blue-dark); text-decoration: none; transition: 0.25s ease; display: inline-block; margin-top: 10px; } .tp-dest-link:hover { color: var(--tp-blue); transform: translateY(-2px); } .tp-anim { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } .tp-destination-card { transition: 0.35s ease; } .tp-destination-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,0.12); } .tp-cruise-destinations-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 40px; } .tp-dest-card { display: block; border-radius: 18px; overflow: hidden; background: #ffffff; box-shadow: 0 10px 32px rgba(0,0,0,0.06); transition: 0.35s ease; text-decoration: none !important; } .tp-dest-image-wrapper { width: 100%; height: 190px; overflow: hidden; position: relative; } .tp-dest-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; } .tp-dest-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.12); } .tp-dest-card:hover img { transform: scale(1.05); } .tp-dest-card-title { display: block; padding: 14px 20px 20px; font-size: 18px; font-weight: 600; color: var(--tp-blue-dark); } .tp-anim { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; } .tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } .tp-dest-card { transition: transform 0.4s ease, box-shadow 0.4s ease; } .tp-dest-card-title { padding: 12px 18px 18px; } /* Titles in official blue */ .tp-dest-card-title { color: #0471aa; font-weight: 700; font-size: 16px; margin-top: 10px; display: inline-block; transition: color 0.25s ease, text-decoration 0.25s ease; } /* Pointer cursor for entire card */ .tp-dest-card { cursor: pointer; } /* Subtle underline on hover (premium look) */ .tp-dest-card:hover .tp-dest-card-title { color: #035a89; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } /* Base title styling (already updated earlier) */ .tp-dest-card-title { color: #0471aa; font-weight: 700; font-size: 16px; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; /* space between title and arrow */ transition: color 0.25s ease; position: relative; } /* Hidden arrow (→) */ .tp-dest-card-title::after { content: "→"; font-size: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; color: #0471aa; /* match the brand blue */ } /* Hover effect */ .tp-dest-card:hover .tp-dest-card-title { color: #035a89; text-decoration: underline; text-underline-offset: 4px; } /* Show arrow smoothly */ .tp-dest-card:hover .tp-dest-card-title::after { opacity: 1; transform: translateX(2px); } /* Title styling */ .tp-dest-card-title { color: #0471aa; font-weight: 700; font-size: 16px; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; transition: color 0.25s ease; position: relative; text-decoration: underline; text-underline-offset: 4px; } /* Flecha premium ⟶ */ .tp-dest-card-title::after { content: "⟶"; /* flecha elegante */ font-size: 16px; opacity: 0; transform: translateX(-4px); transition: opacity 0.25s ease, transform 0.25s ease; color: #0471aa; text-decoration: none !important; /* Evita el subrayado en la flecha */ } /* Hover effect */ .tp-dest-card:hover .tp-dest-card-title { color: #035a89; } /* Show arrow smoothly */ .tp-dest-card:hover .tp-dest-card-title::after { opacity: 1; transform: translateX(2px); } .tp-dest-card:hover .tp-dest-card-title { text-decoration: none; } .tp-dest-card { display: flex; flex-direction: column; justify-content: space-between; } .tp-dest-card-title { transition: color .25s ease, gap .25s ease; } .tp-dest-card:hover .tp-dest-card-title { color: #015bb9; /* un poco más fuerte */ } @media (max-width: 1024px) { .tp-cruise-destinations-grid { row-gap: 40px !important; /* actualmente parece 80–100px */ } } @media (max-width: 1024px) { .tp-cruise-destinations-grid { row-gap: 48px !important; /* actualmente parece 60px aprox */ } } @media (hover:hover) { .tp-dest-card:hover { transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0,0,0,0.12); } .tp-dest-card:hover .tp-dest-card-title { color: #015bb9; } .tp-dest-card:hover .tp-dest-link-arrow { transform: translateX(3px); } } @media (max-width: 1024px) { .tp-cruise-destinations-grid { row-gap: 40px !important; } } .tp-cruise-destinations-grid { margin-top: 25px !important; } @media (max-width: 480px) { .tp-cruise-destinations-grid { margin-top: 32px !important; } } @media (max-width: 480px) { .tp-cruise-destinations.tp-section { padding-top: 24px !important; } } @media (min-width: 481px) and (max-width: 1024px) { .tp-cruise-destinations.tp-section { padding-top: 40px !important; } } /* ================================ CTA FINAL – ESTILOS GLOBALES ================================= */ /* Eyebrow más grande y consistente */ .tp-cta-eyebrow { font-size: 14px; letter-spacing: 0.12em; font-weight: 600; opacity: 0.9; display: block; margin-bottom: 18px !important; } /* Botón más ancho y balanceado */ .tp-cta-btn { padding: 16px 42px !important; font-size: 18px; font-weight: 600; } /* Ajuste general de la tarjeta */ .tp-cta-section { border-radius: 36px; padding: 80px 40px; } /* ================================ TABLET (max 1024px) ================================= */ @media (max-width: 1024px) { .tp-cta-section { padding: 65px 36px !important; } .tp-cta-eyebrow { font-size: 15px; margin-bottom: 16px !important; } .tp-cta-section h2 { font-size: 34px !important; line-height: 1.25 !important; margin-bottom: 24px !important; } .tp-cta-section p { font-size: 18px !important; line-height: 1.55 !important; margin-bottom: 34px !important; } .tp-cta-btn { padding: 16px 48px !important; font-size: 18px !important; } } /* ================================ MOBILE (max 768px) ================================= */ @media (max-width: 768px) { .tp-cta-section { padding: 55px 26px !important; border-radius: 26px; } .tp-cta-eyebrow { font-size: 14px; } .tp-cta-section h2 { font-size: 28px !important; line-height: 1.3 !important; } .tp-cta-section p { font-size: 17px !important; line-height: 1.55; } .tp-cta-btn { padding: 14px 40px !important; font-size: 17px !important; } } /* ============================================================ TRAVEL POINT — GLOBAL STYLE SYSTEM (Updated) ============================================================ */ /* ------------------------------ COLORS ------------------------------ */ :root { --tp-blue: #2ea6d8; --tp-blue-dark: ##1171ad; --tp-gray: #575759; --tp-gray-light: #e7edf5; --tp-bg: #ffffff; --tp-text: #1c1c1c; --tp-radius: 20px; --tp-radius-large: 32px; --tp-shadow: 0 10px 32px rgba(0,0,0,0.08); --tp-shadow-hover: 0 12px 38px rgba(0,0,0,0.15); } /* ------------------------------ BASE ------------------------------ */ .tp-section { padding: 80px 0; } .tp-container { width: min(1200px, 92%); margin: 0 auto; } /* ------------------------------ TYPOGRAPHY ------------------------------ */ .section-eyebrow { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tp-blue-dark); margin-bottom: 12px; } .section-title { font-size: 40px; line-height: 1.2; font-weight: 700; color: var(--tp-blue-dark); margin-bottom: 20px; } .tp-section-subtext { font-size: 18px; line-height: 1.65; color: var(--tp-gray); max-width: 800px; } /* ------------------------------ ANIMATIONS ------------------------------ */ .tp-anim { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; } .tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } /* ============================================================ DESTINATIONS GRID ============================================================ */ .tp-cruise-destinations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 60px; } .tp-dest-card { background: #ffffff; border-radius: var(--tp-radius); overflow: hidden; box-shadow: var(--tp-shadow); text-decoration: none; display: block; transition: transform .25s ease, box-shadow .25s ease; } .tp-dest-card:hover { transform: translateY(-4px); box-shadow: var(--tp-shadow-hover); } .tp-dest-image-wrapper { width: 100%; height: 230px; overflow: hidden; } .tp-dest-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; } .tp-dest-card:hover img { transform: scale(1.06); } .tp-dest-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; padding: 22px 26px; color: var(--tp-blue-dark); text-decoration: underline; text-decoration-thickness: 2px; } /* Arrow animation */ .tp-dest-card-title::after { content: "→"; font-size: 20px; transition: transform .25s ease; } .tp-dest-card:hover .tp-dest-card-title::after { transform: translateX(4px); } /* ============================================================ CTA DARK SECTION ============================================================ */ .tp-cruise-cta-dark { background: var(--tp-blue-dark); padding: 120px 0; border-radius: 0; } .tp-cruise-cta-dark-box { background: #00496f; padding: 70px 50px; border-radius: var(--tp-radius-large); text-align: center; box-shadow: var(--tp-shadow); } .tp-cta-eyebrow-light { color: #bfe7ff; font-size: 16px; margin-bottom: 14px; display: block; } .tp-cta-title-light { color: #ffffff; font-size: 42px; line-height: 1.25; margin-bottom: 22px; } .tp-cta-text-light { color: #d9efff; font-size: 18px; margin-bottom: 42px; line-height: 1.65; } /* Button inside CTA */ .tp-cruise-cta-btn-light { background: #ffffff; color: var(--tp-blue-dark); padding: 18px 38px; border-radius: 16px; font-weight: 600; font-size: 18px; display: inline-block; text-decoration: none !important; box-shadow: var(--tp-shadow); transition: all .25s ease; } .tp-cruise-cta-btn-light:hover { transform: translateY(-3px); box-shadow: var(--tp-shadow-hover); } /* ============================================================ RESPONSIVE ============================================================ */ /* TABLET */ @media (max-width: 992px) { .section-title { font-size: 34px; } .tp-cruise-destinations-grid { gap: 24px; } .tp-cruise-cta-dark-box { padding: 60px 40px; } .tp-cta-title-light { font-size: 34px; } .tp-cta-eyebrow-light { font-size: 17px; } } /* MOBILE */ @media (max-width: 768px) { .tp-section { padding: 60px 0; } .section-title { font-size: 30px; } .section-eyebrow { font-size: 14px; } .tp-cruise-destinations-grid { grid-template-columns: 1fr; gap: 28px; } .tp-dest-image-wrapper { height: 210px; } .tp-cta-title-light { font-size: 28px; } .tp-cruise-cta-dark-box { padding: 50px 30px; } } /* ------------------------------ BASE SECTION + CONTAINER ------------------------------ */ .tp-section { padding: 80px 0; } .tp-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* EYEBROW */ .section-eyebrow { display: block; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: #575759; margin-bottom: 12px; } /* TITLE */ .section-title { font-size: 36px; line-height: 1.25; font-weight: 700; color: #29a7db; margin-bottom: 22px; } /* SUBTEXT */ .tp-section-subtext { font-size: 18px; line-height: 1.65; color: #575759; max-width: 820px; } /* GRID */ .tp-features-grid { display: grid; gap: 40px 48px; grid-template-columns: repeat(2, 1fr); } /* CARD */ .tp-feature-card { padding: 0 4px; } /* TITLE */ .tp-feature-title { font-size: 20px; font-weight: 700; color: #1c1c1c; margin-bottom: 10px; } /* PARAGRAPH */ .tp-feature-card p { font-size: 17px; color: #575759; line-height: 1.55; } .tp-simple-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; } .tp-simple-item h4 { font-size: 20px; font-weight: 700; color: #1c1c1c; margin-bottom: 8px; } .tp-simple-item p { font-size: 17px; color: #575759; line-height: 1.55; } .tp-cruise-logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 32px; } .tp-cruise-logo-card { background: #ffffff; padding: 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); text-align: center; transition: 0.25s ease; } .tp-cruise-logo-card img { width: 120px; height: auto; object-fit: contain; opacity: 0.9; margin-bottom: 14px; } .tp-cruise-logo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); } .tp-cruise-logo-card span { font-size: 15px; color: #1c1c1c; font-weight: 600; } .tp-cruise-logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 32px; } .tp-cruise-logo-card { background: #ffffff; padding: 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); text-align: center; transition: 0.25s ease; } .tp-cruise-logo-card img { width: 120px; height: auto; object-fit: contain; opacity: 0.9; margin-bottom: 14px; } .tp-cruise-logo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); } .tp-cruise-logo-card span { font-size: 15px; color: #1c1c1c; font-weight: 600; } .tp-simple-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 30px; } .tp-simple-item h4 { font-size: 20px; font-weight: 700; color: #1c1c1c; margin-bottom: 8px; } .tp-simple-item p { font-size: 17px; color: #575759; line-height: 1.55; } .tp-cruise-logos-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 32px; } .tp-cruise-logo-card { background: #ffffff; padding: 24px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.06); text-align: center; transition: 0.25s ease; } .tp-cruise-logo-card img { width: 120px; height: auto; object-fit: contain; opacity: 0.9; margin-bottom: 14px; } .tp-cruise-logo-card:hover { transform: translateY(-5px); box-shadow: 0 10px 40px rgba(0,0,0,0.12); } .tp-cruise-logo-card span { font-size: 15px; color: #1c1c1c; font-weight: 600; } .tp-itinerary-grid { display: grid; gap: 32px; grid-template-columns: repeat(3, 1fr); margin-top: 32px; } .tp-itinerary-card { padding: 28px; background: #ffffff; border-radius: 18px; box-shadow: 0 8px 28px rgba(0,0,0,0.06); transition: 0.25s ease; } .tp-itinerary-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); } .tp-itinerary-card h3 { font-size: 20px; font-weight: 700; margin-bottom: 10px; } .tp-itinerary-card p { color: #575759; font-size: 16px; line-height: 1.55; margin-bottom: 16px; } /* Link Arrow */ .tp-link-arrow { color: #0471aa; font-weight: 600; text-decoration: none; position: relative; padding-right: 20px; } .tp-link-arrow::after { content: "→"; position: absolute; right: 0; top: 0; transition: 0.2s ease; } .tp-link-arrow:hover::after { right: -4px; } /* TABLET */ @media (max-width: 1024px) { .tp-section { padding: 60px 0; } .section-title { font-size: 30px; } .tp-features-grid { grid-template-columns: 1fr; } .tp-simple-list { grid-template-columns: 1fr; } .tp-cruise-logos-grid { grid-template-columns: repeat(2, 1fr); } .tp-itinerary-grid { grid-template-columns: 1fr; } } /* MOBILE */ @media (max-width: 600px) { .tp-section { padding: 50px 0; } .section-title { font-size: 26px; } .tp-section-subtext { font-size: 16px; } } /* --------------------------------------------------------- FAQ – PREMIUM STYLE --------------------------------------------------------- */ .tp-faq-list { margin-top: 32px; display: flex; flex-direction: column; gap: 28px; } .tp-faq-item { background: #ffffff; padding: 28px 32px; border-radius: 18px; box-shadow: 0 8px 26px rgba(0,0,0,0.06); transition: 0.25s ease; cursor: pointer; position: relative; } .tp-faq-item:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0,0,0,0.12); } .tp-faq-item h4 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: #004a72; } .tp-faq-item p { font-size: 17px; color: #575759; line-height: 1.55; } /* MOBILE */ @media (max-width: 600px) { .tp-faq-item { padding: 24px; } .tp-faq-item h4 { font-size: 18px; } } /* ============================================================ ALASKA HERO — Travel Point ============================================================ */ .tp-alaska-hero { position: relative; width: 100%; min-height: 90vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; /* Background */ background-image: url("https://lirp.cdn-website.com/f95e2c3f/dms3rep/multi/opt/alaska-page-bg2-1920w.png"); background-size: cover; background-position: center 30%; /* Subido para que se vea más glaciar */ background-repeat: no-repeat; } /* Overlay oscuro (pro hero look) */ .tp-alaska-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.40) ), rgba(0, 0, 0, 0.20); z-index: 1; } /* Content */ .tp-alaska-hero-inner { position: relative; z-index: 2; max-width: 900px; color: #ffffff; } .tp-alaska-hero-eyebrow { font-size: 16px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 14px; color: #b8f0ff; } .tp-alaska-hero-title { font-size: 48px; font-weight: 700; margin-bottom: 20px; line-height: 1.15; } .tp-alaska-hero-sub { font-size: 18px; max-width: 650px; margin: 0 auto 30px; opacity: 0.9; } .tp-alaska-hero-btn { display: inline-block; padding: 14px 32px; background: #ffffff; color: #003b73; border-radius: 12px; font-weight: 600; font-size: 17px; transition: 0.25s ease; } .tp-alaska-hero-btn:hover { background: #e6f6ff; transform: translateY(-2px); } /* MOBILE */ @media (max-width: 768px) { .tp-alaska-hero { min-height: 80vh; background-position: center 45%; } .tp-alaska-hero-title { font-size: 32px; } .tp-alaska-hero-sub { font-size: 15px; } } .tp-alaska-hero .section-title, .tp-alaska-hero h1, .tp-alaska-hero h2 { color: #ffffff !important; } .tp-alaska-hero p, .tp-alaska-hero .tp-hero-subtext { color: #e8f3ff !important; } .tp-hero-btn, .tp-hero-btn:visited { display: inline-block; background: #ffffff; color: #015bb9; padding: 14px 32px; border-radius: 14px; font-weight: 600; font-size: 17px; text-decoration: none !important; box-shadow: 0 10px 32px rgba(0,0,0,0.18); transition: 0.25s ease; } .tp-hero-btn:hover { background: #e9f3ff; box-shadow: 0 12px 38px rgba(0,0,0,0.28); transform: translateY(-3px); } .tp-hero-btn { display: inline-block; backdrop-filter: blur(8px); background: rgba(255,255,255,0.28); color: #fff; padding: 14px 34px; border-radius: 16px; text-decoration: none; font-weight: 600; border: 1px solid rgba(255,255,255,0.4); transition: 0.25s ease; } .tp-hero-btn:hover { background: rgba(255,255,255,0.4); transform: translateY(-3px); } @media (min-width: 768px) and (max-width: 1024px) { .tp-hero-content { padding-top: 220px !important; padding-bottom: 180px !important; } } @media (min-width: 768px) and (max-width: 1024px) { .tp-btn-glass { font-size: 18px !important; padding: 16px 40px !important; } } @media (max-width: 480px) { .tp-hero-content { padding-top: 180px !important; } } @media (max-width: 480px) { .tp-hero-title { font-size: 26px !important; line-height: 1.25 !important; margin-bottom: 16px !important; } .tp-hero-eyebrow { font-size: 12px !important; letter-spacing: 1.6px !important; } .tp-hero-text { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 24px !important; } .tp-hero-btn { padding: 14px 24px !important; font-size: 15px !important; } } /* ===== Alaska Feature Grid ===== */ .tp-features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 60px; margin-top: 40px; } .tp-feature-card h3.tp-feature-title { font-size: 22px; font-weight: 700; color: #1c1c1c; margin-bottom: 12px; } .tp-feature-card p { font-size: 17px; line-height: 1.6; color: #575759; } /* ============================= TABLET (max 1024px) ============================= */ @media (max-width: 1024px) { .section-title { font-size: 40px; line-height: 1.25; max-width: 90%; } .section-eyebrow { font-size: 14px; margin-bottom: 18px; letter-spacing: 0.12em; } .tp-features-grid { grid-template-columns: 1fr 1fr; gap: 60px 50px; } .tp-feature-title { font-size: 24px; margin-bottom: 12px; } .tp-feature-card p { font-size: 17px; line-height: 1.55; } } /* ============================= MOBILE (max 768px) ============================= */ @media (max-width: 768px) { .section-eyebrow { font-size: 13px; margin-top: 40px; margin-bottom: 14px; letter-spacing: 0.14em; } .section-title { font-size: 30px; line-height: 1.25; max-width: 95%; } .tp-features-grid { grid-template-columns: 1fr; gap: 48px; } .tp-feature-title { font-size: 22px; margin-bottom: 10px; } .tp-feature-card p { font-size: 17px; line-height: 1.55; } /* Divider premium opcional */ .tp-feature-card { padding-bottom: 30px; border-bottom: 1px solid rgba(0,0,0,0.06); } .tp-feature-card:last-child { border-bottom: none; padding-bottom: 0; } } /* ============================================ GLOBAL CRUISE LOGO GRID SYSTEM For all destinations (Alaska, Caribbean, Med, etc.) Classes: .tp-cruise-logos-grid + .tp-cruise-logo-card ============================================ */ /* GRID BASE */ .tp-cruise-logos-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } /* CARD BASE */ .tp-cruise-logo-card { background: #ffffff; padding: 40px 30px; border-radius: 18px; text-align: center; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06); transition: 0.28s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* LOGO IMAGE */ .tp-cruise-logo-card img { max-width: 160px; max-height: 70px; object-fit: contain; margin-bottom: 20px; opacity: 0.95; transition: 0.3s ease; } /* LOGO TEXT */ .tp-cruise-logo-card span { font-size: 18px; font-weight: 600; color: var(--tp-text, #1c1c1c); } /* HOVER EFFECT */ .tp-cruise-logo-card:hover { transform: translateY(-6px); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.12); } .tp-cruise-logo-card:hover img { opacity: 1; transform: scale(1.03); } /* ========================================================= TABLET — 2 columns ========================================================= */ @media (max-width: 1024px) { .tp-cruise-logos-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .tp-cruise-logo-card { padding: 34px 26px; } .tp-cruise-logo-card img { max-width: 150px; } } /* ========================================================= MOBILE — 1 column ========================================================= */ @media (max-width: 768px) { .tp-cruise-logos-grid { grid-template-columns: 1fr; gap: 26px; } .tp-cruise-logo-card { padding: 32px 24px; } .tp-cruise-logo-card img { max-width: 140px; } } /* ========================================================== GLOBAL ITINERARY CARD SYSTEM Applies to ALL destinations Classes: .tp-itinerary-grid + .tp-itinerary-card ========================================================== */ /* GRID BASE (Desktop: 3 columns) */ .tp-itinerary-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } /* CARD BASE */ .tp-itinerary-card { background: #ffffff; padding: 40px 32px; border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.06); transition: 0.25s ease; display: flex; flex-direction: column; justify-content: space-between; } /* TITLE */ .tp-itinerary-card h3 { font-size: 24px; font-weight: 700; color: var(--tp-text, #1c1c1c); margin-bottom: 16px; line-height: 1.3; } /* DESCRIPTION */ .tp-itinerary-card p { font-size: 17px; line-height: 1.55; color: var(--tp-gray, #575759); margin-bottom: 26px; } /* "REQUEST ITINERARY" LINK */ .tp-link-arrow { font-size: 17px; font-weight: 600; color: var(--tp-blue-dark, #015bb9); text-decoration: none; display: inline-flex; align-items: center; transition: 0.25s ease; } .tp-link-arrow::after { content: "→"; margin-left: 8px; transition: 0.25s ease; } .tp-link-arrow:hover { color: var(--tp-blue, #24a9e0); } .tp-link-arrow:hover::after { transform: translateX(4px); } /* CARD HOVER */ .tp-itinerary-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px rgba(0,0,0,0.12); } /* ========================================================== TABLET — 2 columns ========================================================== */ @media (max-width: 1024px) { .tp-itinerary-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; } .tp-itinerary-card { padding: 36px 28px; } } /* ========================================================== MOBILE — 1 column ========================================================== */ @media (max-width: 768px) { .tp-itinerary-grid { grid-template-columns: 1fr; gap: 26px; } .tp-itinerary-card { padding: 32px 26px; } .tp-itinerary-card h3 { font-size: 22px; } .tp-itinerary-card p { font-size: 16px; } } .tp-itinerary-image img { transition: transform 0.35s ease; } .tp-itinerary-card:hover .tp-itinerary-image img { transform: scale(1.05); } /* Uniformar tamaño de imágenes en tarjetas de itinerarios */ .tp-itinerary-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; } .tp-itinerary-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* FAQ Layout */ .tp-faq-list { display: flex; flex-direction: column; gap: 24px; margin-top: 32px; } /* FAQ Card Style */ .tp-faq-item { background: #ffffff; border-radius: 16px; padding: 28px 32px; box-shadow: 0 6px 26px rgba(0, 0, 0, 0.06); transition: 0.25s ease; } .tp-faq-item:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10); } /* Question */ .tp-faq-question { font-size: 20px; font-weight: 600; margin-bottom: 10px; color: #1c1c1c; } /* Answer */ .tp-faq-answer { font-size: 15px; line-height: 1.6; color: #575759; } /* Mobile */ @media (max-width: 768px) { .tp-faq-item { padding: 22px 24px; } .tp-faq-question { font-size: 18px; } .tp-faq-answer { font-size: 15px; } } /* CTA Dark Section */ .tp-cruise-cta-dark { background: #015bb9; /* Azul oscuro Travel Point */ padding: 120px 0; } .tp-cruise-cta-dark-box { background: rgba(0, 32, 73, 0.65); /* Caja interna oscuro translúcido */ padding: 60px 40px; border-radius: 28px; text-align: center; max-width: 820px; margin: 0 auto; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.23); backdrop-filter: blur(8px); } /* Eyebrow */ .tp-cta-eyebrow-light { color: #e3f4ff; font-size: 13px; font-weight: 600; letter-spacing: 1.8px; margin-bottom: 16px; text-transform: uppercase; opacity: 0.9; } /* Title */ .tp-cta-title-light { color: #ffffff; margin-bottom: 20px; font-size: 34px; font-weight: 700; line-height: 1.3; } /* Paragraph */ .tp-cta-text-light { color: #dce9f7; max-width: 650px; margin: 0 auto 32px auto; font-size: 17px; line-height: 1.7; } /* Button */ .tp-cruise-cta-btn-light { background: #ffffff; color: #015bb9; padding: 18px 36px; border-radius: 14px; font-weight: 600; font-size: 17px; box-shadow: 0 10px 28px rgba(255, 255, 255, 0.25); transition: 0.25s ease; } .tp-cruise-cta-btn-light:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(255, 255, 255, 0.35); } /* Responsive */ @media (max-width: 768px) { .tp-cruise-cta-dark { padding: 80px 0; } .tp-cruise-cta-dark-box { padding: 50px 30px; border-radius: 22px; } .tp-cta-title-light { font-size: 27px; } } /* ---------------------------------------------------- TABLET OPTIMIZATION — Cruise CTA Section Applies from 768px to 1024px ---------------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { /* Reduce padding vertical para que no se sienta tan grande */ .tp-cruise-cta-dark-box { padding: 60px 40px !important; max-width: 700px; margin: 0 auto; } /* Mejor lectura del título */ .tp-cruise-cta-dark-box .section-title { font-size: 34px !important; line-height: 1.25 !important; max-width: 620px; margin: 0 auto 24px auto; text-align: center; } /* Texto más cómodo en tablet */ .tp-cruise-cta-text { max-width: 640px; margin: 0 auto 40px auto; font-size: 18px !important; line-height: 1.55 !important; text-align: center; } /* Botón centrado perfecto */ .tp-cruise-cta-btn-light { display: inline-flex !important; justify-content: center; align-items: center; margin: 0 auto; } } /* ---------------------------------------------------- MOBILE OPTIMIZATION — Cruise CTA Section Applies from 480px to 767px ---------------------------------------------------- */ @media (min-width: 480px) and (max-width: 767px) { /* Caja más compacta y centrada */ .tp-cruise-cta-dark-box { padding: 50px 28px !important; border-radius: 22px; max-width: 95%; margin: 0 auto; } /* Eyebrow más pequeño y con menos spacing */ .tp-cruise-cta-dark-box .section-eyebrow { font-size: 13px !important; margin-bottom: 12px !important; text-align: center !important; } /* Título más legible en móviles */ .tp-cruise-cta-dark-box .section-title { font-size: 28px !important; line-height: 1.3 !important; max-width: 300px; margin: 0 auto 18px auto !important; text-align: center !important; } /* Texto principal */ .tp-cruise-cta-text { font-size: 16px !important; line-height: 1.55 !important; max-width: 340px; margin: 0 auto 32px auto !important; text-align: center !important; } /* Botón centrado full-touch */ .tp-cruise-cta-btn-light { display: flex !important; justify-content: center !important; align-items: center !important; padding: 18px 26px !important; font-size: 17px !important; margin: 0 auto !important; } } /* ---------------------------------------------------- MOBILE SMALL — Cruise CTA Section Applies below 480px (iPhone SE, Android small) ---------------------------------------------------- */ @media (max-width: 479px) { /* Caja más compacta y con mejor proporción en pantallas chicas */ .tp-cruise-cta-dark-box { padding: 42px 22px !important; border-radius: 18px; max-width: 94%; margin: 0 auto; } /* Eyebrow */ .tp-cruise-cta-dark-box .section-eyebrow { font-size: 12px !important; margin-bottom: 10px !important; text-align: center !important; opacity: 0.9; } /* Título — más pequeño y más alto para 1–2 líneas limpias */ .tp-cruise-cta-dark-box .section-title { font-size: 24px !important; line-height: 1.35 !important; margin-bottom: 16px !important; text-align: center !important; max-width: 260px; margin-left: auto !important; margin-right: auto !important; } /* Párrafo — más legible en pantallas angostas */ .tp-cruise-cta-text { font-size: 15px !important; line-height: 1.55 !important; margin-bottom: 26px !important; max-width: 300px; margin-left: auto !important; margin-right: auto !important; text-align: center !important; } /* Botón — más grande y más táctil */ .tp-cruise-cta-btn-light { padding: 16px 22px !important; font-size: 16px !important; border-radius: 14px !important; display: flex !important; justify-content: center !important; align-items: center !important; margin: 0 auto !important; } } /* ---------------------------------------------- MEDITERRANEAN HERO — REFINEMENTS ------------------------------------------------ */ /* Reduce 10–15% title size in desktop */ .tp-mediterranean-hero .tp-hero-title { font-size: 54px !important; /* antes ~60px */ line-height: 1.12; max-width: 880px; } /* Wider subtitle (more elegant spacing) */ .tp-mediterranean-hero .tp-hero-subtitle { max-width: 760px !important; } /* Lift content block slightly */ .tp-mediterranean-hero .tp-hero-content { margin-top: -20px; /* ajustable entre -30 y -60 */ } /* Subtle bottom fade for luxury feel */ .tp-mediterranean-hero::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 180px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 2; } /* --- Tablet Adjustments --- */ @media (max-width: 991px) { .tp-mediterranean-hero .tp-hero-title { font-size: 42px !important; } .tp-mediterranean-hero .tp-hero-content { margin-top: -20px; } } /* --- Mobile Adjustments --- */ @media (max-width: 575px) { .tp-mediterranean-hero .tp-hero-title { font-size: 32px !important; } .tp-mediterranean-hero .tp-hero-subtitle { max-width: 90%; } .tp-mediterranean-hero .tp-hero-content { margin-top: 0; } } .tp-mediterranean-hero .tp-hero-title, .tp-mediterranean-hero .tp-hero-subtitle { text-shadow: 0 4px 18px rgba(0,0,0,0.35); } /* Improve Mediterranean feature section readability on tablet */ @media (min-width: 769px) and (max-width: 1024px) { .tp-features-grid h3 { font-size: 24px; line-height: 1.3; } .tp-features-grid p { font-size: 17px; line-height: 1.55; } .tp-section-intro { font-size: 18px; max-width: 680px; } .section-title { font-size: 40px; } } @media (max-width: 480px) { /* Eyebrow */ .section-eyebrow { font-size: 15px !important; letter-spacing: 1.6px; } /* Título principal */ .section-title { font-size: 34px !important; line-height: 1.22 !important; margin-bottom: 24px; } /* Texto introductorio debajo del título */ .tp-section > p, .tp-med-intro, .tp-section .tp-intro { font-size: 18px !important; line-height: 1.55 !important; } /* Subtítulos de características */ .tp-feature-item h3, .tp-med-features h3, .tp-features-grid h3 { font-size: 27px !important; line-height: 1.25 !important; margin-bottom: 10px; } /* Párrafos de los items */ .tp-feature-item p, .tp-features-grid p, .tp-med-features p { font-size: 19px !important; line-height: 1.6 !important; } /* Separación entre bloques */ .tp-feature-item { margin-bottom: 40px !important; } } @media (max-width: 480px) { /* Párrafo introductorio debajo del título principal */ .tp-section > p:first-of-type, .tp-container > p:first-of-type { font-size: 19px !important; line-height: 1.6 !important; margin-top: 10px; } } .tp-feature-icon img { filter: invert(32%) sepia(93%) saturate(1300%) hue-rotate(179deg) brightness(92%) contrast(102%); } .tp-feature-icon svg { stroke: #0471aa; } /* -------------------------------------------- FINAL TABLET TUNING – About Hero -------------------------------------------- */ @media (min-width: 768px) and (max-width: 1024px) { /* Contenedor principal */ .tp-about-hero .tp-container { max-width: 600px !important; padding-left: 32px !important; } /* Título */ .tp-about-hero .tp-hero-title { font-size: 34px !important; line-height: 1.2 !important; } /* Texto */ .tp-about-hero .tp-hero-text { font-size: 16px !important; max-width: 520px !important; line-height: 1.45 !important; } /* Botón */ .tp-about-hero .tp-hero-btn { padding: 16px 30px !important; font-size: 16px !important; border-radius: 14px !important; } } /* ============================================ MY STORY — DESKTOP BASE =============================================== */ .tp-section .section-eyebrow { font-size: 14px; letter-spacing: 0.18em; font-weight: 600; color: #6b7280; margin-bottom: 14px; } .tp-section .section-title { font-size: 38px; line-height: 1.15; font-weight: 700; margin-bottom: 22px; color: #0f172a; } .tp-section p { font-size: 17px; line-height: 1.65; color: #374151; margin-bottom: 16px; } .tp-section p:last-child { margin-bottom: 0; } /* ============================================ TABLET 768–1024 =============================================== */ @media (min-width: 768px) and (max-width: 1024px) { /* Ajustar tipografías */ .tp-section .section-eyebrow { font-size: 16px; letter-spacing: 0.22em; } .tp-section .section-title { font-size: 34px; line-height: 1.2; margin-bottom: 20px; } .tp-section p { font-size: 16px; line-height: 1.7; } /* Ajustar el layout (el contenedor con display:flex inline) */ .tp-section .tp-container > div { gap: 40px !important; } /* Ajustar ancho de foto */ .tp-section .tp-container > div > div:last-child { flex: 0 0 360px !important; max-width: 360px !important; } .tp-section img { border-radius: 20px !important; box-shadow: 0 16px 40px rgba(0,0,0,0.12) !important; } } /* ============================================ MOBILE < 768 =============================================== */ @media (max-width: 767px) { /* Cambiar layout a columna */ .tp-section .tp-container > div { flex-direction: column !important; gap: 32px !important; } /* Tipografía móvil */ .tp-section .section-title { font-size: 28px; } .tp-section p { font-size: 15px; } /* Foto */ .tp-section .tp-container > div > div:last-child { flex: 0 0 auto !important; max-width: 100% !important; } .tp-section img { max-width: 440px !important; margin: 0 auto; } } /* ============================================ TABLET OPTIMIZATIONS FOR "MY STORY" SECTION ============================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* Más aire al lado izquierdo del texto */ .tp-section .tp-container > div { padding-left: 24px; padding-right: 24px; } /* Ajusta el ancho del texto para que no quede tan reducido */ .tp-section .tp-container > div > div:first-child { max-width: 520px; } /* Eyebrow más grande en tablet */ .section-eyebrow { font-size: 15px !important; letter-spacing: 1.4px; } /* Título más cómodo en tablet */ .section-title { font-size: 36px !important; line-height: 1.2; margin-bottom: 18px; } /* Tamaño de párrafo más legible */ .tp-section p { font-size: 17px !important; line-height: 1.6 !important; margin-bottom: 18px !important; } /* Espaciado entre columnas más relajado */ .tp-section .tp-container > div { gap: 40px !important; } /* Imagen un poco más estrecha para mejor balance */ .tp-section img { max-width: 380px !important; } } /* ============================================ MOBILE FIX – Reduce vertical spacing in "My Story" ============================================ */ @media (max-width: 767px) { /* Reduce el padding general del section */ .tp-section.tp-anim { padding-top: 40px !important; padding-bottom: 40px !important; } /* Reduce el espacio entre el texto y la foto */ .tp-section .tp-container > div { gap: 28px !important; flex-direction: column !important; } /* Ajuste: la imagen no debe dejar tanto espacio abajo */ .tp-section img { margin-bottom: 0 !important; } } /* ------------------------------ ABOUT VALUES — BASE STYLES ------------------------------ */ .tp-about-values { padding-top: 80px; padding-bottom: 80px; } .tp-about-intro { max-width: 900px; margin-bottom: 50px; font-size: 18px; line-height: 1.65; color: var(--tp-text); } /* GRID */ .tp-about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px 60px; align-items: start; } /* ITEM CARD */ .tp-about-item { display: flex; flex-direction: column; gap: 14px; } .tp-about-icon { width: 78px; height: auto; margin-bottom: 6px; } .tp-about-title { font-size: 22px; font-weight: 700; color: var(--tp-text); } /* ------------------------------ TABLET FIXES ------------------------------ */ @media (max-width: 1024px) { .tp-about-values { padding-top: 60px; padding-bottom: 60px; } .tp-about-icon { width: 68px; } .tp-about-title { font-size: 20px; } .tp-about-grid { gap: 46px 40px; } } /* ------------------------------ MOBILE STACKING ------------------------------ */ @media (max-width: 767px) { .tp-about-values { padding-top: 50px; padding-bottom: 50px; } .tp-about-grid { grid-template-columns: 1fr; gap: 40px; } .tp-about-item { text-align: center; align-items: center; } .tp-about-icon { width: 60px; } .tp-about-title { font-size: 20px; } .tp-about-intro { font-size: 17px; margin-bottom: 40px; } } /* Why Travellers Choose Me */ .tp-choose-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 60px; margin-top: 40px; } .tp-choose-title { font-size: 22px; font-weight: 600; color: #0471aa; margin-bottom: 6px; } /* Tablet */ @media (max-width: 1024px) { .tp-choose-grid { grid-template-columns: 1fr; gap: 32px; } .tp-choose-title { font-size: 20px; } } /* Mobile */ @media (max-width: 767px) { .tp-choose-grid { grid-template-columns: 1fr; gap: 28px; } } /* FAQ Grid Fix - Equal Height in Tablet */ .tp-faq-list { display: grid; grid-template-columns: 1fr; gap: 28px; } /* Tablet breakpoint (puedes ajustar según tu media query actual) */ @media (min-width: 768px) and (max-width: 1024px) { .tp-faq-list { grid-template-columns: 1fr 1fr; } .tp-faq-item { display: flex; flex-direction: column; justify-content: flex-start; height: 100%; padding: 20px 0; } .tp-faq-question { margin-bottom: 10px; } .tp-faq-answer { margin-top: auto; } } /* Desktop (por si quieres mantener consistencia visual) */ @media (min-width: 1025px) { .tp-faq-list { grid-template-columns: 1fr 1fr; gap: 32px; } .tp-faq-item { height: 100%; display: flex; flex-direction: column; } } /* FAQ card padding fix */ .tp-faq-item { background: #ffffff; border-radius: 18px; padding: 28px 28px; box-shadow: 0 6px 18px rgba(0,0,0,0.06); } /* Tablet adjustments */ @media (min-width: 768px) and (max-width: 1024px) { .tp-faq-item { padding: 32px 32px; } } /* Mobile */ @media (max-width: 767px) { .tp-faq-item { padding: 24px 22px; } } /* Cruise logo cards – reset clipping but keep card style */ .tp-cruise-logo-card { border-radius: 18px; padding: 32px 24px; text-align: center; background: #ffffff; box-shadow: 0 10px 32px rgba(0,0,0,0.06); overflow: hidden; /* restore this to prevent stretched overflow */ } /* Fix logo sizing */ .tp-cruise-logo-card img { width: 100%; max-width: 180px; /* prevents stretching */ height: auto; /* keeps proportions perfect */ object-fit: contain; border-radius: 0 !important; display: block; margin: 0 auto 12px; } /* Tablet (logos slightly smaller for balance) */ @media (min-width: 768px) and (max-width: 1024px) { .tp-cruise-logo-card img { max-width: 150px; } } /* Remove forced backgrounds behind logos on ALL breakpoints */ .tp-cruise-logo-card img { background: transparent !important; box-shadow: none !important; } /* Tablet improvements */ @media (min-width: 768px) and (max-width: 1180px) { .tp-cruise-logo-card img { background: transparent !important; box-shadow: none !important; } } .tp-cruise-logo-card img { max-height: 70px; width: auto; object-fit: contain; } /* ================================ FIX LOGOS — TABLET & MOBILE ================================ */ .tp-cruise-logo-card img { width: 100%; height: auto; max-height: 120px; /* Tamaño seguro desktop */ object-fit: contain; display: block; } /* TABLET */ @media (max-width: 1024px) { .tp-cruise-logo-card { padding: 28px 20px !important; } .tp-cruise-logo-card img { max-height: 90px; /* Ajusta al tamaño tablet */ } } /* MOBILE */ @media (max-width: 768px) { .tp-cruise-logo-card { padding: 24px 18px !important; } .tp-cruise-logo-card img { max-height: 80px; /* Ajusta para móvil */ } } /* ================================ GLOBAL FIX — DARK CTA TEXT ================================ */ .tp-cruise-cta-dark-box, .tp-cruise-cta-dark-box .section-eyebrow, .tp-cruise-cta-dark-box .section-title, .tp-cruise-cta-dark-box p { color: #ffffff !important; } /* Botón también ajustado para siempre verse limpio */ .tp-cruise-cta-btn-light { background: #ffffff !important; color: #015bb9 !important; /* azul oficial del logo */ border: none !important; box-shadow: 0 12px 32px rgba(255,255,255,0.25); } .tp-cruise-cta-btn-light:hover { background: #f7f7f7 !important; color: #004a82 !important; /* tono más oscuro en hover */ transform: translateY(-3px); } /* GRID BASE */ .tp-destinations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 32px; } /* CARD BASE */ .tp-dest-card-alt { display: block; background: #ffffff; border-radius: 18px; padding: 0 0 24px; text-decoration: none; color: #1c1c1c; box-shadow: 0 8px 24px rgba(0,0,0,0.08); transition: 0.28s ease; opacity: 0; transform: translateY(20px); } /* Reveal when visible */ .tp-anim-visible.tp-dest-card-alt { opacity: 1; transform: translateY(0); } /* Hover */ .tp-dest-card-alt:hover { transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.12); } /* IMAGE */ .tp-dest-image-wrapper-alt img { width: 100%; border-radius: 18px 18px 0 0; object-fit: cover; height: 240px; } /* TITLE */ .tp-dest-card-title-alt { font-size: 20px; font-weight: 700; margin: 18px 20px 6px; line-height: 1.3; } /* TEXT */ .tp-dest-card-text-alt { font-size: 15px; color: #575759; line-height: 1.55; margin: 0 20px; } /* RESPONSIVE */ @media (max-width: 900px) { .tp-destinations-grid { grid-template-columns: 1fr; gap: 28px; } .tp-dest-image-wrapper-alt img { height: 220px; } } /* ============================================================ TABLET OPTIMIZATION — Travel Point Applies to screens between 768px and 1024px ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { /* Improve left/right breathing room */ .tp-container { padding-left: 32px !important; padding-right: 32px !important; } /* Better spacing between eyebrow, title and content */ .section-eyebrow { margin-bottom: 12px !important; } .section-title { margin-bottom: 28px !important; line-height: 1.25; } /* Increase space between cards in list layouts */ .tp-dest-card, .tp-popular-card, .tp-cruise-logo-card, .tp-faq-item { margin-bottom: 32px !important; } /* Fix card padding for clearer breathing */ .tp-popular-card, .tp-dest-card { padding: 20px !important; } /* Make sure images inside cards are never flush to the edges */ .tp-popular-card img, .tp-dest-card img { border-radius: 14px !important; } .tp-popular-card img { margin-top: 8px !important; } } /* Grid layout basado en tu sistema de cards */ .tp-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; } /* Cards */ .tp-service-card { background: #ffffff; border-radius: 18px; padding: 32px 28px; box-shadow: 0 12px 36px rgba(0,0,0,0.08); transition: transform .25s ease, box-shadow .25s ease; } .tp-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 46px rgba(0,0,0,0.12); } /* Iconos */ .tp-service-icon { width: 64px; height: auto; margin-bottom: 20px; filter: invert(29%) sepia(97%) saturate(1100%) hue-rotate(178deg) brightness(90%) contrast(94%); /* Esto convierte el SVG a #0471aa aunque sea negro */ } /* Title */ .tp-service-title { font-size: 20px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; } /* Text */ .tp-service-text { font-size: 16px; line-height: 1.55; color: #4a4a4a; } /* Tablet */ @media (max-width: 1024px) { .tp-services-grid { grid-template-columns: 1fr 1fr; } } /* Mobile */ @media (max-width: 768px) { .tp-services-grid { grid-template-columns: 1fr; gap: 24px; } .tp-service-card { padding: 28px 24px; } } /* Grid layout */ .tp-services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; } /* Cards */ .tp-service-card { background: #ffffff; border-radius: 18px; padding: 32px 28px; box-shadow: 0 12px 36px rgba(0,0,0,0.08); transition: transform .25s ease, box-shadow .25s ease; } .tp-service-card:hover { transform: translateY(-4px); box-shadow: 0 16px 46px rgba(0,0,0,0.12); } /* Icons → Azul oficial #0471aa */ .tp-service-icon { width: 64px; height: auto; margin-bottom: 20px; filter: invert(29%) sepia(97%) saturate(1100%) hue-rotate(178deg) brightness(90%) contrast(94%); } /* Titles */ .tp-service-title { font-size: 20px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; } /* Text */ .tp-service-text { font-size: 16px; line-height: 1.55; color: #4a4a4a; } /* Subtitle debajo del H2 */ .section-subtext { margin-top: 12px; max-width: 680px; font-size: 16px; color: #505050; } /* Tablet */ @media (max-width: 1024px) { .tp-services-grid { grid-template-columns: 1fr 1fr; } } /* Mobile */ @media (max-width: 768px) { .tp-services-grid { grid-template-columns: 1fr; gap: 24px; } .tp-service-card { padding: 28px 24px; } } /* Grid */ .tp-testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; margin-top: 48px; } /* Card */ .tp-testimonial-card { background: #ffffff; border-radius: 18px; padding: 28px; box-shadow: 0 12px 32px rgba(0,0,0,0.08); transition: transform .25s ease, box-shadow .25s ease; } .tp-testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.12); } /* Stars */ .tp-stars { font-size: 20px; letter-spacing: 2px; margin-bottom: 12px; color: #0471aa; } /* Text */ .tp-testimonial-text { font-size: 16px; line-height: 1.55; margin-bottom: 20px; color: #444; } /* User */ .tp-testimonial-user { display: flex; align-items: center; gap: 12px; } .tp-testimonial-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } /* Responsive */ @media (max-width: 1024px) { .tp-testimonials-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .tp-testimonials-grid { grid-template-columns: 1fr; } } @media (max-width: 1024px) { .tp-testimonials-grid { column-gap: 32px; row-gap: 36px; } } @media (max-width: 1024px) { .tp-testimonial-card { padding: 32px !important; } } /* TABLET */ @media (max-width: 1024px) { .tp-testimonial-user strong { font-size: 17px !important; font-weight: 600; } .tp-testimonial-user span { font-size: 15px !important; opacity: 0.75; } } /* MOBILE */ @media (max-width: 767px) { .tp-testimonial-user strong { font-size: 18px !important; font-weight: 600; } .tp-testimonial-user span { font-size: 16px !important; opacity: 0.75; } .tp-testimonial-card { padding: 28px !important; } } /* ================================ ⭐ TESTIMONIOS — TABLET ================================ */ @media (max-width: 1024px) { .tp-testimonial-card { padding: 30px !important; } .tp-testimonial-text { font-size: 18px !important; line-height: 1.55; } .tp-testimonial-user { margin-top: 22px; gap: 14px; } .tp-testimonial-avatar { width: 52px !important; height: 52px !important; } .tp-testimonial-user strong { font-size: 18px !important; font-weight: 700; } .tp-testimonial-user span { font-size: 16px !important; opacity: 0.8; } .tp-stars { font-size: 20px !important; margin-bottom: 12px; } } /* ================================ ⭐ TESTIMONIOS — MOBILE ================================ */ @media (max-width: 767px) { .tp-testimonial-card { padding: 28px !important; border-radius: 22px !important; } .tp-testimonial-text { font-size: 19px !important; line-height: 1.6; } .tp-testimonial-user { margin-top: 24px; gap: 16px; } .tp-testimonial-avatar { width: 54px !important; height: 54px !important; } .tp-testimonial-user strong { font-size: 19px !important; font-weight: 700; } .tp-testimonial-user span { font-size: 17px !important; opacity: 0.9; } .tp-stars { font-size: 22px !important; margin-bottom: 14px; } } /* ================================ AFFILIATIONS LAYOUT ================================ */ .tp-affiliation-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 60px; margin-top: 40px; } .tp-affiliation-text p { font-size: 18px; line-height: 1.7; color: var(--tp-text); max-width: 540px; } /* Logos grid */ .tp-affiliation-logos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 40px; align-items: center; justify-items: start; } .tp-affiliation-logo { width: 160px; height: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.08)); } /* ================================ RESPONSIVE — TABLET ================================ */ @media (max-width: 1024px) { .tp-affiliation-wrapper { grid-template-columns: 1fr; gap: 50px; } .tp-affiliation-text p { font-size: 17px; max-width: 100%; } .tp-affiliation-logos { grid-template-columns: repeat(3, 1fr); justify-items: center; } .tp-affiliation-logo { width: 140px; } } /* ================================ RESPONSIVE — MOBILE ================================ */ @media (max-width: 767px) { .tp-affiliation-wrapper { gap: 40px; } .tp-affiliation-logos { grid-template-columns: repeat(2, 1fr); gap: 22px; } .tp-affiliation-logo { width: 120px; } .tp-affiliation-text p { font-size: 16px; } } /* =========================== MEET THE EXPERT SECTION =========================== */ .tp-expert-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; gap: 60px; } .tp-expert-title { max-width: 520px; } .tp-expert-name { font-size: 24px; font-weight: 700; margin-top: 25px; margin-bottom: 15px; } .tp-expert-text { font-size: 17px; line-height: 1.55; max-width: 480px; margin-bottom: 25px; } .tp-expert-btn { display: inline-block; margin-top: 10px; } /* PHOTO */ .tp-expert-photo img { width: 100%; border-radius: 22px; box-shadow: 0 12px 38px rgba(0,0,0,0.10); } /* =========================== TABLET OPTIMIZATION =========================== */ @media (max-width: 1024px) { .tp-expert-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; } .tp-expert-title { max-width: 420px; margin-left: auto; margin-right: auto; } .tp-expert-text { max-width: 450px; margin-left: auto; margin-right: auto; margin-bottom: 18px; } .tp-expert-photo { margin-top: 16px; } } /* =========================== MOBILE OPTIMIZATION =========================== */ @media (max-width: 640px) { .tp-expert-name { font-size: 22px; } .tp-expert-title { font-size: 28px; line-height: 1.25; } .tp-expert-text { font-size: 16px; } .tp-expert-photo img { border-radius: 18px; } } /* Reduce top spacing for desktop */ @media (min-width: 1025px) { .tp-expert { padding-top: 40px; padding-bottom: 40px; } .tp-expert-grid { align-items: center; gap: 40px; } } /* Clean photo bottom (remove fade) */ .tp-expert-photo img { mask-image: none !important; -webkit-mask-image: none !important; } /* Optional: Make title cleaner on desktop */ @media (min-width: 1025px) { .tp-expert-title { max-width: 580px; line-height: 1.18; } } .tp-expert-photo img { mask-image: none !important; -webkit-mask-image: none !important; } @media (min-width: 1025px) { .tp-expert { padding-top: 40px; padding-bottom: 40px; } .tp-expert-grid { align-items: center; gap: 40px; } } @media (min-width: 1025px) { .tp-expert-title { max-width: 620px; line-height: 1.18; } } @media (min-width: 1025px) { .tp-expert { padding-top: 40px !important; padding-bottom: 40px !important; } } @media (min-width: 1025px) { .tp-expert { padding-top: 40px !important; padding-bottom: 40px !important; } } .tp-expert-photo img { mask-image: none !important; -webkit-mask-image: none !important; } .tp-expert-text { max-width: 520px; } .tp-expert-content { padding-top: 20px; } @media (max-width: 991px) { .tp-expert-photo { margin-left: auto; margin-right: auto; display: block; } } @media (max-width: 991px) { .tp-expert-title { font-size: 34px; line-height: 1.15; } } @media (max-width: 991px) { .tp-expert-photo { margin-top: -20px; /* o -30px si quieres más */ } } /* CTA Section Wrapper */ .tp-cta-section { background: var(--tp-blue-dark); padding: 80px 0; color: #ffffff; } /* CTA internal layout */ .tp-cta-content { display: flex; align-items: center; justify-content: space-between; gap: 60px; } .tp-cta-left { flex: 1; max-width: 580px; } .tp-cta-title { color: #ffffff; margin-bottom: 20px; } .tp-cta-text { font-size: 18px; line-height: 1.6; opacity: 0.95; } /* Right side (button + subtext) */ .tp-cta-right { display: flex; flex-direction: column; align-items: center; gap: 18px; } .tp-cta-btn { font-size: 18px; padding: 18px 40px; border-radius: 14px; box-shadow: 0 0 25px rgba(255,255,255,0.25); } .tp-cta-subtext { text-align: center; font-size: 16px; opacity: 0.9; } /* Responsive */ @media (max-width: 900px) { .tp-cta-content { flex-direction: column; text-align: center; } .tp-cta-left, .tp-cta-right { max-width: 100%; } } /* ============================= HERO – SERVICES PAGE ============================= */ .tp-hero-services { background: #0b63a3; /* Azul fuerte que combina perfecto con tu brand */ padding: 160px 0 180px; color: #ffffff; text-align: center; position: relative; overflow: hidden; } .tp-hero-services-inner { max-width: 900px; margin: 0 auto; } .tp-hero-services-title { color: #ffffff; margin-top: 18px; margin-bottom: 20px; } .tp-hero-services-text { max-width: 720px; margin: 0 auto 40px; font-size: 20px; line-height: 1.7; opacity: 0.95; } .tp-hero-services-btn { padding: 18px 38px; font-size: 18px; border-radius: 14px; } /* Tablet */ @media (max-width: 900px) { .tp-hero-services { padding: 130px 0 150px; } .tp-hero-services-text { font-size: 18px; } } /* Mobile */ @media (max-width: 600px) { .tp-hero-services { padding: 120px 20px 140px; } .tp-hero-services-title { font-size: 32px; line-height: 1.25; } .tp-hero-services-text { font-size: 17px; } } /* HERO SERVICES – Mejor contraste de colores */ .tp-hero-services-title { color: #ffffff !important; } .tp-hero-services-text { color: rgba(255, 255, 255, 0.92) !important; } .tp-hero-services .section-eyebrow { color: rgba(255, 255, 255, 0.65) !important; letter-spacing: 0.14em; } .tp-hero-services-btn { background: #ffffff !important; color: #0b63a3 !important; box-shadow: 0 12px 36px rgba(0,0,0,0.15); } .tp-hero-services-btn:hover { background: #e9f4ff !important; color: #0b63a3 !important; } .tp-hero-services .section-eyebrow::after { content: ""; display: block; width: 48px; height: 3px; background: rgba(255,255,255,0.35); margin: 12px auto 0; border-radius: 2px; } /* === SERVICES HERO – POLISH ADJUSTMENTS === */ .tp-services-hero { padding-top: 140px; /* controla la distancia bajo el navbar */ padding-bottom: 120px; } /* Aumenta el espacio entre eyebrow y título */ .tp-services-hero .tp-eyebrow { margin-bottom: 24px !important; } /* Ajuste de espacio entre título y descripción */ .tp-services-hero .tp-hero-title { margin-bottom: 28px !important; } /* Ajuste de espacio entre descripción y botón */ .tp-services-hero .tp-hero-text { margin-bottom: 36px !important; } /* — MOBILE OPTIMIZATION — */ @media (max-width: 768px) { /* Reduce tamaño del título solo en mobile */ .tp-services-hero .tp-hero-title { font-size: 34px !important; line-height: 1.18 !important; } .tp-services-hero { padding-top: 120px; padding-bottom: 100px; } } .tp-hero-services { background: linear-gradient( 180deg, #0b63a0 0%, #0d70b5 30%, #0a5a93 65%, #084a7a 100% ); } @media (max-width: 1024px) { .tp-hero-services-title { font-size: 36px; line-height: 1.2; } } @media (max-width: 1024px) { .tp-hero-services-inner { padding-bottom: 60px; } } .tp-hero-services .section-eyebrow { font-size: 15px; /* o 16px */ letter-spacing: 0.12em; } @media (max-width: 480px) { .tp-hero-services-title { font-size: 30px; line-height: 1.18; } } @media (max-width: 480px) { .tp-hero-services .section-eyebrow { margin-bottom: 12px; } } @media (max-width: 480px) { .tp-hero-services-btn { margin-top: 28px; margin-bottom: 40px; } } @media (max-width: 480px) { .tp-hero-services-title { line-height: 1.12; } } /* GRID */ .tp-services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } @media (max-width: 900px) { .tp-services-grid { grid-template-columns: 1fr; } } /* CARD */ .tp-service-card { background: #ffffff; border-radius: var(--tp-radius); padding: 28px; box-shadow: var(--tp-shadow); transition: 0.25s ease; } .tp-service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); } /* ICON */ .tp-service-icon { width: 48px; height: 48px; margin-bottom: 16px; } /* TITLES & TEXT */ .tp-service-title { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: var(--tp-text); } .tp-service-text { font-size: 15px; line-height: 1.6; margin-bottom: 16px; color: var(--tp-text); opacity: 0.9; } /* LIST */ .tp-service-list { padding-left: 18px; margin-bottom: 24px; } .tp-service-list li { margin-bottom: 6px; font-size: 15px; color: var(--tp-text); } /* BUTTON */ .tp-service-btn { margin-top: auto; font-size: 14px; padding: 10px 18px; } /* Card hover premium */ .tp-service-card { transition: transform 0.25s ease, box-shadow 0.25s ease; } .tp-service-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08); } .tp-service-card h3 { margin-bottom: 14px; } .tp-service-card p { margin-bottom: 14px; } .tp-service-card-icon { margin-bottom: 18px; } .tp-service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 32px; } .tp-service-card { display: flex; flex-direction: column; justify-content: space-between; } .tp-btn-secondary { transition: all 0.25s ease; } .tp-btn-secondary:hover { background-color: var(--tp-blue); color: #fff; border-color: var(--tp-blue); } .tp-service-card.tp-anim { opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease, transform 0.5s ease; } .tp-service-card.tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } @media (max-width: 992px) { .tp-service-title { font-size: 1.3rem; /* si ahora usa 1.5rem */ } } .tp-service-icon { margin-bottom: 12px; /* si ahora usa 20px */ } @media (max-width: 992px) { .tp-service-btn { width: 100%; text-align: center; } } /* TABLET OPTIMIZATIONS */ @media (min-width: 768px) and (max-width: 1024px) { /* Reduce body text size very slightly */ .tp-service-text { font-size: 16px; line-height: 1.55; } /* Improve readability for bullet lists */ .tp-service-list li { font-size: 16px; line-height: 1.6; margin-bottom: 6px; } /* Slightly increase spacing between icon and title */ .tp-service-icon { margin-bottom: 14px; } /* Full-width button inside cards */ .tp-service-btn { width: 100%; display: block; text-align: center; padding: 16px 22px; font-size: 16px; } /* Slightly reduce horizontal padding of cards on tablet */ .tp-service-card { padding: 36px 32px; } /* Improve vertical spacing between cards */ .tp-services-grid { gap: 36px; } } /* WHY SECTION STRUCTURE */ .tp-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; } /* Header */ .tp-why-header { grid-column: 1 / -1; max-width: 720px; } .tp-why-subtext { font-size: 17px; color: var(--tp-text); margin-top: 12px; max-width: 620px; } /* Image */ .tp-why-image img { width: 100%; border-radius: 18px; box-shadow: var(--tp-shadow); } /* Features Grid */ .tp-why-features { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 48px; } .tp-why-item { padding-top: 20px; border-top: 2px solid var(--tp-gray-light); } .tp-why-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--tp-text); } .tp-why-text { font-size: 16px; line-height: 1.55; color: var(--tp-text); } /* TABLET */ @media (max-width: 1024px) { .tp-why-grid { grid-template-columns: 1fr; } .tp-why-image { order: 2; } .tp-why-features { order: 3; grid-template-columns: 1fr 1fr; } } /* MOBILE */ @media (max-width: 768px) { .tp-why-features { grid-template-columns: 1fr; gap: 32px; } .tp-why-item { padding-top: 16px; } } /* Mejorar separación general */ .tp-why-grid { max-width: 1180px; margin: 0 auto; gap: 64px 80px; } /* Limitar ancho de cada columna para evitar textos muy anchos */ .tp-why-features { max-width: 520px; } /* Alineación visual respecto a la imagen */ .tp-why-features { padding-top: 12px; } /* Ajuste de los beneficios para mejor lectura */ .tp-why-item { max-width: 420px; padding-top: 24px; border-top: 2px solid var(--tp-gray-light); } /* Ajustar filas */ .tp-why-features { row-gap: 48px; margin-top: 24px; } /* Imagen más centrada */ .tp-why-image img { border-radius: 18px; box-shadow: var(--tp-shadow); object-fit: cover; } .tp-why-grid { margin-top: 32px; } .tp-why-section { max-width: 1180px; margin: 0 auto; } .tp-why-features { row-gap: 48px; margin-top: 32px; } .tp-why-item h3 { margin-bottom: 10px; } .tp-why-intro { max-width: 620px; } /* TABLET ADJUSTMENTS FOR WHY SECTION */ @media (max-width: 1024px) { .tp-why-image { margin-bottom: 32px; /* antes seguro era 48–64 */ } .tp-why-features { margin-top: 0; /* subimos los beneficios */ gap: 32px; /* reducimos espacio entre elementos */ } .tp-why-feature { max-width: 420px; /* mantiene proporción elegante */ } .tp-why-feature hr { width: 60%; /* líneas más cortas para estética tablet */ } } @media (max-width: 1024px) { .tp-why-subtext { margin-bottom: 32px; } } @media (max-width: 1024px) { .tp-why-image { max-width: 85%; margin-left: auto; margin-right: auto; } } @media (max-width: 1024px) { .tp-why-feature-wrapper { row-gap: 48px; } } @media (max-width: 768px) { .tp-why-image { margin-top: 24px; } } @media (max-width: 768px) { .tp-why-divider { width: 80%; margin: 32px auto; } } @media (max-width: 480px) { .tp-why-title { line-height: 1.15; } } /* GRID STRUCTURE */ .tp-howworks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; } .tp-howworks-left { max-width: 500px; } .tp-howworks-subtitle { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: var(--tp-text); } .tp-howworks-text { line-height: 1.6; color: var(--tp-text); margin-bottom: 30px; } /* IMAGE */ .tp-howworks-image { width: 100%; border-radius: 16px; box-shadow: var(--tp-shadow); display: block; } /* STEPS */ .tp-howworks-step { display: flex; gap: 20px; margin-bottom: 40px; } .tp-howworks-number { font-size: 40px; font-weight: 700; color: var(--tp-blue-dark); min-width: 40px; } .tp-howworks-step-title { font-size: 18px; font-weight: 700; margin-bottom: 6px; } /* RESPONSIVE */ @media (max-width: 900px) { .tp-howworks-grid { grid-template-columns: 1fr; } .tp-howworks-number { font-size: 34px; } } /* Ajusta un poco más ancho el texto izquierdo */ .tp-how-left { max-width: 560px; } /* Más espacio entre pasos */ .tp-how-step { margin-bottom: 36px; } /* Alinear número con título */ .tp-how-step-number { line-height: 1; margin-top: 4px; display: inline-block; } /* Aumentar aire vertical entre imagen y pasos */ .tp-how-wrapper { gap: 48px; } @media (max-width: 990px) { .tp-how-wrapper { grid-template-columns: 1fr; gap: 40px; } .tp-how-left { max-width: 100%; text-align: left; } .tp-how-step { margin-bottom: 32px; } .tp-how-step-number { font-size: 42px; } } @media (max-width: 640px) { .tp-how-title { font-size: 26px; line-height: 1.28; } .tp-how-left p { font-size: 16px; } .tp-how-step-number { font-size: 38px; margin-bottom: 6px; } .tp-how-step-title { font-size: 20px; } .tp-how-step-text { font-size: 15px; line-height: 1.55; } .tp-how-image { margin-top: 10px; } } .tp-how-image { box-shadow: 0 12px 28px rgba(0,0,0,0.10); border-radius: 16px; } /* ------------------------------------------------------- FAQ SECTION STYLING (Travel Point) ------------------------------------------------------- */ .tp-faq-section { padding-top: 80px; padding-bottom: 80px; } .tp-faq-header { max-width: 720px; margin-bottom: 50px; } .tp-faq-sub { font-size: 18px; color: var(--tp-text-light, #5f6b7a); margin-top: 10px; } /* GRID: Two columns on desktop */ .tp-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 48px; } /* FAQ ITEMS */ .tp-acc-item { border-bottom: 1px solid #dfe7ef; padding-bottom: 18px; transition: border-color 0.25s ease; } .tp-acc-item.open { border-color: var(--tp-blue, #24a9e0); } /* FAQ BUTTON */ .tp-acc-btn { width: 100%; background: none; border: none; padding: 0; padding-right: 32px; font-size: 20px; font-weight: 600; color: var(--tp-text, #1c1c1c); text-align: left; cursor: pointer; position: relative; transition: color 0.25s ease; } .tp-acc-btn:hover { color: var(--tp-blue-dark, #1171ad); } /* ICON */ .tp-acc-icon { position: absolute; right: 0; top: 4px; font-size: 26px; font-weight: 300; color: var(--tp-blue-dark, #1171ad); transition: transform 0.25s ease, color 0.25s ease; } .tp-acc-item.open .tp-acc-icon { transform: rotate(45deg); color: var(--tp-blue, #24a9e0); } /* CONTENT */ .tp-acc-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.35s ease, opacity 0.35s ease; padding-top: 0; } .tp-acc-item.open .tp-acc-content { max-height: 500px; opacity: 1; padding-top: 12px; } .tp-acc-content p { font-size: 17px; line-height: 1.6; color: var(--tp-text-light, #5f6b7a); } /* ------------------------------------------------------- RESPONSIVE ------------------------------------------------------- */ /* TABLET */ @media (max-width: 1024px) { .tp-faq-grid { grid-template-columns: 1fr; gap: 32px; } .tp-acc-btn { font-size: 19px; } .tp-acc-icon { font-size: 24px; } } @media (max-width: 1024px) { .tp-faq-wrapper { max-width: 92%; margin: 0 auto; } } .tp-faq-item { padding: 22px 0; } /* MOBILE */ @media (max-width: 600px) { .tp-faq-section { padding-top: 60px; padding-bottom: 60px; } .tp-faq-header { margin-bottom: 40px; } .tp-acc-btn { font-size: 18px; padding-right: 28px; } .tp-acc-icon { font-size: 22px; } .tp-acc-content p { font-size: 16px; } } .tp-faq-row { margin-bottom: 28px; } .tp-faq-toggle { font-size: 24px; font-weight: 600; } .tp-faq-question:hover { color: var(--tp-blue-dark); transition: 0.2s ease; } .tp-faq-grid { align-items: start; } .tp-acc-icon { display: flex; justify-content: space-between; align-items: center; } .tp-acc-icon { display: flex; justify-content: space-between; align-items: center; } .tp-faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); } /* GRID — 2 columns on desktop, 1 on tablet/móvil */ .tp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; } @media (max-width: 1024px) { .tp-faq-grid { grid-template-columns: 1fr; gap: 28px; max-width: 90%; margin: 0 auto; } } /* BUTTON LAYOUT */ .tp-faq-question { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 1.05rem; font-weight: 600; color: var(--tp-text); background: none; border: none; cursor: pointer; text-align: left; } /* ICON */ .tp-faq-icon { font-size: 22px; line-height: 1; margin-left: 16px; transition: transform .25s ease; } .tp-faq-item.active .tp-faq-icon { transform: rotate(45deg); } /* ANSWER */ .tp-faq-answer { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding-right: 40px; } .tp-faq-item.active .tp-faq-answer { max-height: 300px; margin-top: 10px; } /* DIVIDERS */ .tp-faq-item { border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 10px; } /* ---------------------------------------- FAQ – FIXED LAYOUT FOR .tp-acc-* CLASSES ----------------------------------------- */ /* GRID: 2 columnas en desktop, 1 en tablet/móvil */ .tp-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 48px; } @media (max-width: 1024px) { .tp-faq-grid { grid-template-columns: 1fr; gap: 24px; } } /* ---------------------------------------- BUTTON STRUCTURE ----------------------------------------- */ .tp-acc-btn { width: 100%; background: #fff; border-radius: 16px; padding: 28px 32px; display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem; font-weight: 600; text-align: left; border: none; cursor: pointer; transition: background .25s ease, box-shadow .25s ease; box-shadow: 0 4px 18px rgba(0,0,0,0.06); } .tp-acc-btn:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.10); } /* ---------------------------------------- ICON ----------------------------------------- */ .tp-acc-icon { font-size: 22px; margin-left: 16px; transition: transform .25s ease; } .tp-acc-item.open .tp-acc-icon { transform: rotate(45deg); } /* ---------------------------------------- ANSWER BOX ----------------------------------------- */ .tp-acc-content { max-height: 0; overflow: hidden; transition: max-height .35s ease; padding: 0 32px; } .tp-acc-item.open .tp-acc-content { max-height: 300px; padding-bottom: 24px; } /* FIX: elimina doble padding y bordes viejos */ .tp-acc-item { border: none !important; padding: 0; } .tp-faq-answer { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.25s ease; } .tp-faq-item.open .tp-faq-answer { max-height: 400px; /* o lo que necesite tu contenido */ opacity: 1; } /* Reset para evitar que los FAQ parezcan cards */ .tp-faq-item { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Estilo correcto para el contenedor del botón */ .tp-faq-question { width: 100%; background: #ffffff; border-radius: 14px; padding: 24px 28px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); border: 1px solid #eaeaea; } /* Espaciado entre items */ .tp-faq-item + .tp-faq-item { margin-top: 24px; } /* Respuesta */ .tp-faq-answer { background: none !important; padding: 0 4px 0 4px; margin-top: 12px; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.25s ease; } .tp-faq-item.open .tp-faq-answer { max-height: 300px; opacity: 1; } /* =========================================== WIDE CTA SECTION =========================================== */ .tp-cta-wide { padding: 40px 0; } .tp-cta-card { position: relative; width: 100%; min-height: 420px; border-radius: 26px; overflow: hidden; display: flex; align-items: center; background: #000; box-shadow: var(--tp-shadow); } /* Background image */ .tp-cta-image { position: absolute; inset: 0; background-image: url("https://lirp.cdn-website.com/f95e2c3f/dms3rep/multi/opt/img-cta-services-1920w.png"); background-size: cover; background-position: center; filter: brightness(0.55); z-index: 1; } /* Content */ .tp-cta-content { position: relative; z-index: 2; padding: 50px 60px; max-width: 480px; color: #ffffff; } .tp-cta-title { font-size: 38px; font-weight: 700; margin-bottom: 18px; line-height: 1.2; color: #ffffff; } .tp-cta-text { font-size: 18px; line-height: 1.6; margin-bottom: 32px; color: #ffffff; } /* CTA Button */ .tp-cta-btn { display: inline-block; margin-top: 10px; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width: 1024px) { .tp-cta-card { min-height: 380px; } .tp-cta-content { padding: 40px; max-width: 430px; } .tp-cta-title { font-size: 32px; } } @media (max-width: 768px) { .tp-cta-card { padding: 0; } .tp-cta-content { padding: 32px; max-width: 100%; } .tp-cta-title { font-size: 28px; } .tp-cta-text { font-size: 16px; } } /* =========================================== CTA WIDE SECTION — FIXED VERSION =========================================== */ .tp-cta-wide { padding: 40px 0; } .tp-cta-card { position: relative; width: 100%; min-height: 420px; border-radius: 26px; overflow: hidden; display: flex; align-items: center; box-shadow: var(--tp-shadow); } /* Background image */ .tp-cta-image { position: absolute; inset: 0; background-image: url("https://lirp.cdn-website.com/f95e2c3f/dms3rep/multi/opt/img-cta-services-1920w.png"); background-size: cover; background-position: center; z-index: 1; } /* Dark overlay for readability */ .tp-cta-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.2)); z-index: 2; } /* Content */ .tp-cta-content { position: relative; z-index: 3; padding: 60px; max-width: 520px; color: #ffffff; } .tp-cta-title { font-size: 38px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: #ffffff; /* FIX: prevent forced line breaks */ display: block; white-space: normal; } .tp-cta-text { font-size: 18px; margin-bottom: 32px; line-height: 1.6; color: #ffffff; } .tp-cta-btn { margin-top: 10px; } /* =========================================== RESPONSIVE =========================================== */ @media (max-width: 1024px) { .tp-cta-content { padding: 40px; max-width: 420px; } .tp-cta-title { font-size: 32px; } } @media (max-width: 768px) { .tp-cta-card { min-height: 520px; } .tp-cta-overlay { background: rgba(0,0,0,0.55); } .tp-cta-content { padding: 32px; max-width: 100%; } .tp-cta-title { font-size: 28px; } } /* CTA 2 - full width image card */ .tp-cta2-section { padding: 72px 0; } .tp-cta2-card { position: relative; border-radius: 28px; overflow: hidden; min-height: 380px; display: flex; align-items: center; background-image: url("https://lirp.cdn-website.com/f95e2c3f/dms3rep/multi/opt/img-cta-services-1920w.png"); background-size: cover; background-position: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25); color: #ffffff; } /* Overlay oscuro encima de la foto */ .tp-cta2-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 20%, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.72)); } /* Contenido */ .tp-cta2-content { position: relative; max-width: 520px; padding: 56px 56px 64px; } .tp-cta2-title { font-size: 32px; line-height: 1.25; margin: 0 0 16px; color: #ffffff !important; } .tp-cta2-text { font-size: 16px; line-height: 1.6; margin: 0 0 28px; color: rgba(255, 255, 255, 0.92) !important; } /* Botón dentro de la tarjeta */ .tp-cta2-btn { margin-top: 4px; } /* Tablet */ @media (max-width: 1024px) { .tp-cta2-card { min-height: 420px; } .tp-cta2-content { max-width: 480px; padding: 40px 32px 48px; } .tp-cta2-title { font-size: 28px; } } /* Mobile */ @media (max-width: 768px) { .tp-cta2-section { padding: 56px 0; } .tp-cta2-card { min-height: 420px; } .tp-cta2-content { padding: 32px 24px 40px; } .tp-cta2-title { font-size: 24px; } .tp-cta2-text { font-size: 15px; } } @media (min-width: 1025px) { .tp-cta2-content { padding-top: 72px; } } .tp-cta2-btn { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); } @media (min-width: 1400px) { .tp-cta2-content { max-width: 580px; } } /* CTA2 — ajustes para mobile */ @media (max-width: 768px) { .tp-cta2-card { padding: 28px; border-radius: 26px; } .tp-cta2-title { font-size: 28px; line-height: 1.25; margin-bottom: 16px; } .tp-cta2-text { font-size: 15px; line-height: 1.55; margin-bottom: 24px; } .tp-cta2-btn { width: 100%; padding: 18px 20px; font-size: 16px; text-align: center; } /* Hacer overlay un poco más oscuro solo en móvil */ .tp-cta2-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.65) ); } /* Evitar que la imagen se corte demasiado arriba */ .tp-cta2-bg { background-size: cover; background-position: center center; } } /* FIX: Force HTML widget to expand full height */ .cruise-hero-layer { position: relative; height: 100vh; /* Full hero height */ width: 100%; display: flex; align-items: center; z-index: 2; /* Above video, below navbar */ } /* FULL COVER OVERLAY */ .cruise-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.40) ); z-index: 1; pointer-events: none; } /* TEXT CONTENT */ .cruise-hero-content { position: relative; z-index: 2; color: #fff; max-width: 600px; padding-left: 6%; padding-right: 20px; } /* TYPOGRAPHY */ .cruise-eyebrow { color: #fff; font-size: 13px; letter-spacing: 1px; opacity: .95; } .cruise-title { font-size: 52px; font-weight: 700; line-height: 1.12; margin: 10px 0 20px; } .cruise-sub { font-size: 18px; line-height: 1.55; margin-bottom: 30px; } /* MOBILE */ @media (max-width: 768px) { .cruise-title { font-size: 34px; } .cruise-hero-content { padding-left: 20px; padding-right: 20px; margin-top: 12vh; } } .cruise-hero-content, .cruise-hero-content * { color: #ffffff !important; } .cruise-title { font-size: 56px; line-height: 1.1; font-weight: 700; margin-bottom: 20px; } .cruise-sub { font-size: 19px; max-width: 520px; } @media(max-width: 768px) { .cruise-title { font-size: 34px; } .cruise-sub { font-size: 16px; } } .cruise-hero-content { margin-top: 12vh; /* baja el bloque */ margin-left: 6%; } .cruise-hero-layer { align-items: flex-start; padding-top: 18vh; } .cruise-hero-content { max-width: 520px; } .cruise-eyebrow { font-size: 14px; letter-spacing: 1px; opacity: 0.9; } .cruise-title { text-shadow: 0 2px 6px rgba(0,0,0,0.35); } .cruise-hero-content { animation: cruiseFade 1s ease-out forwards; opacity: 0; transform: translateY(20px); } @keyframes cruiseFade { to { opacity: 1; transform: translateY(0); } } .cruise-hero-content { max-width: 480px; } .cruise-title { margin-top: 6px; } .cruise-title, .cruise-sub, .cruise-eyebrow { text-shadow: 0 2px 8px rgba(0,0,0,0.35); } .cruise-sub { max-width: 440px; } .cruise-hero-content { opacity: 0; transform: translateY(20px); animation: heroFade 1s ease-out forwards 0.2s; } @keyframes heroFade { to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) and (min-width: 768px) { .cruise-hero-content { top: 22vh; /* antes estaba más abajo */ transform: none; } } @media (max-width: 1024px) and (min-width: 768px) { .cruise-sub { max-width: 420px; font-size: 1rem; line-height: 1.45; } } @media (max-width: 1024px) and (min-width: 768px) { .cruise-title { font-size: 2rem; line-height: 1.15; } } @media (max-width: 1024px) and (min-width: 768px) { .cruise-btn { padding: 14px 26px; font-size: 0.95rem; } } @media (max-width: 768px) { .cruise-hero-content { top: 18vh; /* antes 22–25vh aprox */ } } @media (max-width: 768px) { .cruise-sub { max-width: 90%; margin-right: auto; } } @media (max-width: 768px) { .cruise-hero-content { top: 16vh; /* antes 18–20vh según tu versión actual */ } } @media (max-width: 768px) { .cruise-hero-content { top: 14vh; /* Subimos el contenido (antes estaba alrededor de 18–20vh) */ padding: 0 28px; /* Más margen lateral para móviles */ } .cruise-eyebrow { font-size: 12px; margin-bottom: 12px; /* Más espacio antes del título */ } .cruise-title { font-size: 26px; line-height: 1.22; margin-bottom: 16px; } .cruise-sub { font-size: 15px; line-height: 1.45; margin-bottom: 24px; } .cruise-btn { font-size: 15px; padding: 14px 22px; } } /* GLOBAL CRUISE WHY SECTION */ .tp-why-cruise { padding: 80px 0; } .tp-why-cruise .tp-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: 1px; color: var(--tp-blue-dark); margin-bottom: 8px; } .tp-why-cruise .tp-title { font-size: 32px; font-weight: 700; margin-bottom: 14px; color: var(--tp-text); } .tp-why-cruise .tp-sub { max-width: 700px; color: #555; margin-bottom: 40px; } /* GRID */ .tp-why-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); } @media (max-width: 768px) { .tp-why-grid { grid-template-columns: 1fr; } } /* CARDS */ .tp-why-card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 8px 26px rgba(0,0,0,0.08); transition: 0.3s ease; } .tp-why-card:hover { transform: translateY(-6px); box-shadow: 0 12px 34px rgba(0,0,0,0.12); } /* IMAGES */ .tp-why-img { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; margin-bottom: 18px; } /* TEXTS */ .tp-why-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--tp-text); } .tp-why-text { font-size: 15px; line-height: 1.55; color: #555; } /* GRID CON ALTURA IGUALADA */ .tp-why-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); align-items: stretch; /* Asegura que todas las cards tengan la misma altura */ } /* TARJETAS */ .tp-why-card { background: #fff; border-radius: 18px; padding: 24px; box-shadow: 0 8px 26px rgba(0,0,0,0.08); transition: 0.3s ease; height: 100%; /* Fuerza a que todas se expandan igual */ display: flex; flex-direction: column; /* Permite que el contenido crezca parejo */ } /* IMAGEN */ .tp-why-img { width: 100%; height: 190px; object-fit: cover; border-radius: 14px; margin-bottom: 18px; } /* TITULO */ .tp-why-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--tp-text); } /* TEXTO */ .tp-why-text { font-size: 15px; line-height: 1.55; color: #555; flex-grow: 1; /* Hace que el texto empuje el card hacia abajo */ } /* HOVER */ .tp-why-card:hover { transform: translateY(-6px); box-shadow: 0 12px 34px rgba(0,0,0,0.12); } /* MOBILE */ @media (max-width: 768px) { .tp-why-grid { grid-template-columns: 1fr; } } /* ============================================ CRUISE LINES SECTION — GLOBAL STYLING ============================================ */ /* Section spacing */ .tp-cruise-lines { padding: 80px 0; } .tp-cruise-cat { font-size: 26px; font-weight: 700; margin: 50px 0 25px; color: #1c1c1c; } /* GRID */ .tp-cruise-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; margin-bottom: 20px; } /* CARD BASE */ .tp-cruise-card { background: #ffffff; border-radius: 20px; padding: 28px 22px; text-align: center; box-shadow: 0 8px 22px rgba(0,0,0,0.06); transition: transform .25s ease, box-shadow .25s ease; display: flex; flex-direction: column; justify-content: flex-start; min-height: 210px; } /* Images uniform */ .tp-cruise-card img { width: 120px; height: auto; margin: 0 auto 18px; object-fit: contain; display: block; } /* Names */ .tp-cruise-card p { font-size: 15px; font-weight: 600; color: #1c1c1c; line-height: 1.4; } /* Hover */ .tp-cruise-card:hover { transform: translateY(-6px); box-shadow: 0 14px 32px rgba(0,0,0,0.12); } /* Hidden sections for "See All Cruise Lines" */ .hidden-extra-lines { display: none; } /* Button wrapper */ .tp-cruise-btn-wrap { text-align: center; margin-top: 40px; } /* Secondary button style (already existing but reinforced) */ .tp-btn-secondary { background: #ffffff; color: #015bb9; border: 2px solid #015bb9; padding: 12px 26px; border-radius: 14px; font-weight: 600; font-size: 16px; cursor: pointer; transition: 0.25s ease; } .tp-btn-secondary:hover { background: #015bb9; color: #ffffff; transform: translateY(-3px); } /* ============================================ ANIMATIONS – .tp-anim (matches your system) ============================================ */ .tp-anim { opacity: 0; transform: translateY(25px); transition: all .6s cubic-bezier(.16,.84,.44,1); } .tp-anim.tp-anim-visible { opacity: 1; transform: translateY(0); } /* Card-specific stagger */ .tp-cruise-card.tp-anim { transition-delay: .15s; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 768px) { .tp-cruise-cat { font-size: 22px; margin: 35px 0 20px; } .tp-cruise-card { padding: 22px 18px; min-height: 190px; } .tp-cruise-card img { width: 100px; } } @media (max-width: 480px) { .tp-cruise-card { min-height: auto; padding: 20px 14px; } .tp-cruise-card img { width: 90px; } } /* ================================================= FIX: CTA SECTION LAYOUT & WIDTH ================================================= */ /* 1. Forzamos que el contenedor de ESTA sección sea más ancho y anule el padding del 20% si lo hereda */ .tp-cta-section .tp-container { width: 100% !important; max-width: 1200px !important; /* Ancho máximo estándar */ padding-left: 20px !important; /* Padding normal */ padding-right: 20px !important; /* Padding normal */ margin: 0 auto !important; } /* 2. Definimos la estructura Flexbox para Desktop */ .tp-cta-content { display: flex !important; flex-direction: row !important; /* Lado a lado en Desktop */ justify-content: space-between !important; align-items: center !important; gap: 40px !important; } /* 3. Ajustamos las columnas para que no se aplasten */ .tp-cta-left { flex: 2 !important; /* Toma más espacio (2/3) */ min-width: 300px !important; /* Evita que se haga minúsculo */ text-align: left !important; } .tp-cta-right { flex: 1 !important; /* Toma menos espacio (1/3) */ min-width: 250px !important; text-align: center !important; /* Alinea botón y texto garantía */ display: flex !important; flex-direction: column !important; align-items: center !important; } /* 4. Arreglo del Título para que no se rompa */ .tp-cta-title { white-space: normal !important; /* Permite flujo natural */ word-wrap: break-word !important; line-height: 1.2 !important; margin-bottom: 15px !important; } /* ================================================= RESPONSIVE: TABLET Y MOVIL Aquí forzamos que se apilen cuando la pantalla baja de 1024px ================================================= */ @media (max-width: 1024px) { .tp-cta-content { flex-direction: column !important; /* Uno arriba del otro */ text-align: center !important; gap: 30px !important; } .tp-cta-left { text-align: center !important; width: 100% !important; } .tp-cta-right { width: 100% !important; align-items: center !important; } } /* ================================================= FIX: CTA RESPONSIVENESS Forzamos el diseño apilado en Tablets y Laptops pequeñas ================================================= */ @media (max-width: 1150px) { /* 1. Cambiamos la dirección a Columna (Apilado) */ .tp-cta-content { flex-direction: column !important; text-align: center !important; gap: 40px !important; /* Espacio entre el texto y el botón */ } /* 2. Forzamos que los contenedores ocupen el 100% del ancho */ .tp-cta-left, .tp-cta-right { width: 100% !important; max-width: 100% !important; flex: none !important; } /* 3. Centramos el botón y el subtexto */ .tp-cta-right { display: flex; flex-direction: column; align-items: center; } /* 4. Ajuste para que el párrafo no sea demasiado ancho al estar apilado */ .tp-cta-text { max-width: 600px; margin-left: auto; margin-right: auto; } /* 5. Aseguramos que el título se centre */ .tp-cta-title { width: 100%; text-align: center; } } /* --- FIX PARA CTA APLASTADO --- */ /* 1. Sobrescribir el padding global exagerado para esta sección */ .tp-cta-section .tp-container { width: 100% !important; max-width: 1200px !important; padding-left: 24px !important; /* Padding normal */ padding-right: 24px !important; /* Padding normal */ margin: 0 auto !important; } /* 2. En pantallas medianas (Laptops/Tablets), forzar el diseño apilado */ @media (max-width: 1200px) { .tp-cta-content { flex-direction: column !important; /* Uno arriba del otro */ text-align: center !important; /* Todo centrado */ gap: 30px !important; } /* Que el texto ocupe todo el ancho disponible */ .tp-cta-left { width: 100% !important; max-width: 700px !important; /* Para que no se lea eterno */ margin: 0 auto !important; } /* Que el botón ocupe todo el ancho o se centre */ .tp-cta-right { width: 100% !important; display: flex; flex-direction: column; align-items: center; } /* Arreglar el título para que no se rompa */ .tp-cta-title { font-size: 32px !important; /* Un poco más pequeño en tablet */ line-height: 1.3 !important; white-space: normal !important; } } /* --- FIX: FORZAR 3 COLUMNAS EN SERVICIOS --- */ @media (min-width: 1024px) { .tp-services-grid { /* Fuerza exactamente 3 columnas de igual ancho */ grid-template-columns: repeat(3, 1fr) !important; /* Asegura que ocupen todo el ancho disponible */ width: 100% !important; justify-content: center !important; } } /* --- FIX: EQUILIBRIO ÓPTICO DE ICONOS --- */ /* Aumentamos un 15% el tamaño SOLO del segundo icono (el del centro) */ .tp-services-grid .tp-service-card:nth-child(2) .tp-service-icon { transform: scale(1.15); /* Crece un poquito */ transform-origin: left top; /* Mantiene la alineación */ margin-bottom: 22px; /* Ajuste fino del margen si es necesario */ } /* Asegura que el contenedor use Grid o Flex para alinear alturas */ .tp-services-grid { display: flex; /* O display: grid; grid-template-columns: repeat(..., 1fr); */ flex-wrap: wrap; /* Si usas flex */ align-items: stretch; /* CLAVE: Esto estira las tarjetas para que tengan la misma altura */ } /* Asegura que la tarjeta ocupe el 100% de la altura disponible */ .tp-service-card { height: 100%; /* CLAVE: Ocupa toda la altura que le da el contenedor */ display: flex; flex-direction: column; /* Organiza el contenido verticalmente */ justify-content: space-between; /* Distribuye el espacio si es necesario */ } @media (max-width: 768px) { .tp-cta-content { /* Tu contenedor flex */ flex-direction: column; text-align: center; } .tp-cta-text-column, .tp-cta-button-column { width: 100%; margin-bottom: 20px; } } /* Ajuste para la sección de CTA "Ready to plan..." */ .tp-cta-content { display: flex; justify-content: center; /* Centrar el contenido */ align-items: flex-start; /* O center, según prefieras */ gap: 40px; /* Espacio entre texto y botón */ max-width: 1200px; /* Ancho máximo para que no se estire demasiado */ margin: 0 auto; /* Centrar el contenedor */ } /* Darle más ancho a la columna de texto */ .tp-cta-left, /* Asumiendo que este es el div del texto */ .tp-cta-text-wrapper { flex: 2; /* Toma más espacio (2 partes) */ min-width: 300px; /* Ancho mínimo para evitar que se aplaste */ } /* Ajustar la columna del botón */ .tp-cta-right, /* Asumiendo que este es el div del botón */ .tp-cta-button-wrapper { flex: 1; /* Toma menos espacio (1 parte) */ min-width: 250px; display: flex; flex-direction: column; align-items: center; /* Centrar botón y texto de garantía */ } /* Responsive: Apilar en pantallas pequeñas */ @media (max-width: 900px) { .tp-cta-content { flex-direction: column; text-align: center; } } /* Asegura que las tarjetas se distribuyan uniformemente */ .tp-services-grid { display: grid; /* Esto crea 3 columnas de igual ancho que se ajustan */ grid-template-columns: repeat(3, 1fr); gap: 32px; /* Espacio entre tarjetas */ width: 100%; } .tp-services-grid { display: flex; justify-content: space-between; gap: 32px; } .tp-service-card { flex: 1; Hace que todas las tarjetas crezcan igual min-width: 280px; Evita que se hagan muy flacas } /* --- FIX: DISEÑO DE TARJETAS PARA TABLET (768px - 1024px) --- */ @media (min-width: 768px) and (max-width: 1024px) { .tp-services-grid { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; /* Centra la tarjeta que quede sola */ gap: 24px !important; /* Un poco menos de espacio entre ellas */ } .tp-service-card { /* Calculamos el ancho para que quepan 2 (aprox 48%) menos el gap */ width: calc(50% - 20px) !important; flex: 0 0 calc(50% - 20px) !important; margin-bottom: 20px !important; } } /* --- FIX: IGUALAR ALTURAS DE TARJETAS --- */ /* 1. Asegura que el contenedor de la cuadrícula use flex y estire los hijos */ .tp-services-grid { display: flex; flex-wrap: wrap; align-items: stretch; /* CLAVE: Estira todas las tarjetas a la misma altura de la fila */ } /* 2. Asegura que la tarjeta ocupe toda esa altura */ .tp-service-card { height: 100%; /* Ocupa el 100% de la altura que le da la fila */ display: flex; flex-direction: column; /* Para organizar el contenido interno */ } /* 3. (Opcional) Si quieres que el texto empuje el contenido hacia abajo uniformemente */ .tp-service-text { flex-grow: 1; /* Hace que el texto ocupe el espacio sobrante si lo hay */ } /* --- FIX: IGUALAR ALTURAS EN TABLET (768px - 1024px) --- */ @media (min-width: 768px) and (max-width: 1024px) { /* 1. Contenedor Grid/Flex */ .tp-services-grid { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; /* Fuerza a que todos los hijos tengan la misma altura de fila */ gap: 24px !important; justify-content: center !important; } /* 2. Tarjetas Individuales */ .tp-service-card { /* Calculamos ancho para 2 columnas (menos el gap) */ width: calc(50% - 12px) !important; /* altura automática para que 'align-items: stretch' funcione */ height: auto !important; min-height: 100% !important; /* Configuración interna para que el botón siempre quede abajo */ display: flex !important; flex-direction: column !important; } /* 3. Ajuste para la 3ra tarjeta (la que queda sola abajo) */ .tp-service-card:last-child { /* Opcional: Si quieres que la última ocupe el mismo ancho que las de arriba */ width: calc(50% - 12px) !important; /* O si prefieres que ocupe todo el ancho (descomenta la siguiente línea): */ /* width: 100% !important; */ } /* 4. Forzar que el texto ocupe el espacio disponible para empujar el botón al fondo */ .tp-service-text { flex-grow: 1 !important; } } /* ========================================================= FIX: PAGE SERVICES GRID (TABLET HEIGHT & LAYOUT) Aplica solo a la sección con clase .tp-services-cards ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { /* 1. Contenedor: Forzar Flexbox y estiramiento */ .tp-services-cards .tp-services-grid { display: flex !important; flex-wrap: wrap !important; align-items: stretch !important; /* CLAVE: Iguala la altura de toda la fila */ gap: 24px !important; justify-content: center !important; grid-template-columns: none !important; /* Anula cualquier grid previo */ } /* 2. Tarjetas: Ancho exacto para 2 columnas */ .tp-services-cards .tp-service-card { width: calc(50% - 12px) !important; /* 50% menos la mitad del gap */ flex: initial !important; /* Evita que crezcan o se encojan raro */ height: auto !important; min-height: 100% !important; /* Llena la altura del padre flex */ /* Organización interna */ display: flex !important; flex-direction: column !important; margin: 0 !important; } /* 3. Forzar que el texto empuje el botón al fondo */ .tp-services-cards .tp-service-text, .tp-services-cards .tp-service-list { margin-bottom: auto !important; /* Empuja el contenido inferior hacia abajo */ } .tp-services-cards .tp-service-btn { margin-top: 20px !important; /* Espacio seguro antes del botón */ width: 100% !important; /* Botón ancho se ve mejor en tablet */ text-align: center !important; } } /* ========================================================= FIX: SERVICES PAGE GRID (DESKTOP 2x2) Fuerza 2 columnas para las 4 tarjetas, solo en esta sección ========================================================= */ @media (min-width: 1024px) { /* 1. Apuntamos al contenedor grid DENTRO de la sección específica */ section.tp-services-cards .tp-services-grid { display: grid !important; /* Aquí está la magia: Forzamos 2 columnas de igual tamaño */ grid-template-columns: repeat(2, 1fr) !important; gap: 40px !important; /* Espacio generoso entre tarjetas */ width: 100% !important; max-width: 1000px !important; /* Opcional: limita el ancho para que no se separen demasiado */ margin: 0 auto !important; /* Centra el grid */ } /* 2. Aseguramos que las tarjetas llenen su celda del grid */ section.tp-services-cards .tp-service-card { width: 100% !important; max-width: none !important; height: 100% !important; /* Para que tengan la misma altura */ margin: 0 !important; } } /* ========================================================= FIX: EQUAL HEIGHT CARDS (DESKTOP) ========================================================= */ /* 1. Contenedor de la cuadrícula */ .tp-services-grid { display: flex !important; /* Usamos Flexbox para control total */ flex-wrap: wrap !important; /* Permite que bajen si no caben (aunque en desktop controlamos el ancho) */ align-items: stretch !important; /* CLAVE: Estira todas las tarjetas a la misma altura de la fila */ gap: 32px !important; /* Espacio entre tarjetas */ justify-content: center !important; } /* 2. Tarjeta individual */ .tp-service-card { /* Ancho para 3 tarjetas por fila (como en el Home) o ajusta según necesites */ /* Si es para la sección de 3 tarjetas: */ width: calc(33.333% - 22px) !important; /* Si es para la sección de 4 tarjetas (Servicios), usa width: calc(50% - 16px) o grid */ display: flex !important; /* Hacemos la tarjeta un contenedor flex */ flex-direction: column !important; /* Elementos uno debajo del otro */ height: auto !important; /* Se adapta al contenido pero... */ min-height: 100% !important; /* ...intenta llenar la altura del padre */ } /* 3. Empujar el botón al fondo */ /* Hacemos que la lista (o el texto) crezca para ocupar el espacio vacío */ .tp-service-list { margin-bottom: auto !important; /* Esto empuja el botón hacia abajo */ padding-bottom: 24px !important; /* Espacio antes del botón */ } /* 4. Botón */ .tp-service-btn { margin-top: 0 !important; /* El margen lo maneja el elemento anterior */ width: 100% !important; /* Opcional: botón ancho completo */ text-align: center !important; } /* ========================================================= RESPONSIVE ADJUSTMENTS ========================================================= */ /* Tablet (2 columnas) */ @media (max-width: 1024px) { .tp-service-card { width: calc(50% - 16px) !important; } } /* Mobile (1 columna) */ @media (max-width: 768px) { .tp-service-card { width: 100% !important; } } @media (min-width: 768px) and (max-width: 1024px) { /* ... tu código anterior ... */ /* APUNTAMOS A LA TERCERA TARJETA ESPECÍFICAMENTE */ .tp-services-grid .tp-service-card:nth-child(3) { margin-left: auto !important; margin-right: auto !important; } } /* ========================================================= FIX: "WHY CHOOSE US" - TABLET LAYOUT (STACKED) ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { /* 1. Cambiamos el contenedor principal a columna */ .tp-why-grid { grid-template-columns: 1fr !important; /* Una sola columna */ gap: 40px !important; text-align: center !important; /* Centramos todo */ } /* 2. Ajustamos la imagen para que se vea grande y bonita */ .tp-why-image { order: 2 !important; /* Opcional: Si quieres la foto después del título */ width: 100% !important; max-width: 600px !important; /* Limitamos para que no sea gigante */ margin: 0 auto !important; } .tp-why-image img { width: 100% !important; height: auto !important; max-height: 400px !important; /* Control de altura */ object-fit: cover !important; } /* 3. Ajustamos la cuadrícula de textos (los 4 puntos) */ .tp-why-features { order: 3 !important; display: grid !important; grid-template-columns: 1fr 1fr !important; /* Mantenemos 2x2 para los textos */ gap: 30px !important; text-align: left !important; /* El texto se lee mejor a la izquierda */ } /* 4. Aseguramos que el encabezado esté arriba */ .tp-why-header { order: 1 !important; grid-column: 1 / -1 !important; } } /* ========================================================= FIX: FAQ TABLET ALIGNMENT (GRID VERSION) Fuerza una sola columna usando Grid override ========================================================= */ @media (max-width: 1024px) { /* 1. Apuntamos con más especificidad: Sección -> Grid */ .tp-faq-section .tp-faq-grid { display: grid !important; /* Mantenemos Grid */ grid-template-columns: 100% !important; /* FORZAMOS 1 sola columna del 100% */ width: 100% !important; max-width: 700px !important; /* Ancho máximo para estética */ margin: 0 auto !important; /* Centrado */ gap: 20px !important; } /* 2. Aseguramos que cada item llene su celda */ .tp-faq-section .tp-faq-item { width: 100% !important; max-width: none !important; margin: 0 !important; grid-column: 1 / -1 !important; /* Ocupa toda la fila disponible */ } /* 3. Aseguramos el botón interno */ .tp-faq-question { width: 100% !important; box-sizing: border-box !important; } } /* ========================================================= FIX: FAQ LAST ITEM ALIGNMENT (TABLET) Asegura que el último elemento también ocupe el 100% ========================================================= */ @media (max-width: 1024px) { /* Apuntamos específicamente al último item de la lista */ .tp-faq-item:last-child { width: 100% !important; max-width: none !important; /* Quita cualquier restricción heredada */ margin-bottom: 0 !important; grid-column: 1 / -1 !important; /* Si sigue en grid, ocupa todo */ } } /* ========================================================= FIX FINAL: FAQ TABLET (GRID SPAN) Obliga a que cada pregunta ocupe todo el ancho de la fila ========================================================= */ @media (max-width: 1024px) { /* 1. Aseguramos que el contenedor sea Grid */ .tp-faq-section .tp-faq-grid { display: grid !important; /* Esto define una sola columna que ocupa todo el espacio */ grid-template-columns: 1fr !important; width: 100% !important; } /* 2. LA CLAVE: Forzamos a los items a expandirse "de pared a pared" */ .tp-faq-section .tp-faq-item { /* "1 / -1" significa: empieza en la primera línea y termina en la última */ grid-column: 1 / -1 !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } } /* ========================================================= FIX FINAL: FAQ TABLET (BLOCK METHOD) Elimina el grid y fuerza bloques de ancho completo ========================================================= */ @media (max-width: 1024px) { /* 1. Al contenedor le quitamos el Grid/Flex */ .tp-faq-section .tp-faq-grid { display: block !important; /* Se comporta como una caja normal */ width: 100% !important; max-width: 700px !important; /* Mantenemos el ancho máximo estético */ margin: 0 auto !important; } /* 2. A cada pregunta le decimos que llene el espacio */ .tp-faq-section .tp-faq-item { display: block !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 24px !important; /* Agregamos margen abajo manual (porque block no tiene gap) */ } /* 3. Quitamos margen al último para que no quede espacio extra */ .tp-faq-section .tp-faq-item:last-child { margin-bottom: 0 !important; } } /* ========================================================= FIX FINALISIMO: FAQ TABLET (DIRECT CHILDREN) Ataca a cualquier div dentro del grid para forzarlo al 100% ========================================================= */ @media (max-width: 1024px) { /* 1. Forzamos al contenedor a ser un bloque simple */ .tp-faq-section .tp-faq-grid { display: block !important; width: 100% !important; padding: 0 !important; } /* 2. EL TRUCO: Seleccionamos los hijos directos (>) */ /* Esto le dice a CUALQUIER div dentro del grid que se estire */ .tp-faq-section .tp-faq-grid > div, .tp-faq-section .tp-faq-grid > .tp-faq-item { width: 100% !important; max-width: 100% !important; min-width: 100% !important; /* Fuerza bruta */ flex: 0 0 100% !important; /* Por si acaso sigue siendo flex */ box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 24px !important; display: block !important; } } /* ========================================================= FIX FINAL: FAQ TABLET (GRID VERSION) Fuerza el grid a una sola columna ========================================================= */ @media (min-width: 768px) and (max-width: 1024px) { /* 1. Forzar el Grid a 1 sola columna */ .tp-faq-grid { display: grid !important; grid-template-columns: 100% !important; /* Una sola columna que ocupa todo */ grid-template-rows: auto !important; width: 100% !important; max-width: 700px !important; /* Opcional: para que no se vea tan ancho */ margin: 0 auto !important; gap: 20px !important; } /* 2. Asegurar que los items ocupen esa columna */ .tp-faq-item { width: 100% !important; grid-column: 1 / -1 !important; /* Ocupa desde el principio al fin */ margin: 0 !important; } } /* ========================================================= FIX: ESPACIO ENTRE FAQ Y CTA Acerca el CTA final a la sección de preguntas ========================================================= */ /* 1. Reducimos el espacio inferior del FAQ */ .tp-faq-section { padding-bottom: 40px !important; /* Antes probablemente era 80px o 100px */ } /* 2. Reducimos el espacio superior del CTA */ .tp-cta-section { padding-top: 40px !important; /* Lo acercamos visualmente */ margin-top: 0 !important; /* Aseguramos que no haya margen externo */ } /* Opcional: Si hay un div contenedor intermedio de Duda que añade espacio */ .tp-faq-section + .tp-cta-section { margin-top: 0 !important; } /* HERO BASE */ .tp-hero { position: relative; width: 100vw; padding: 160px 0; color: #fff; min-height: 70vh; display: flex; align-items: center; overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .tp-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 1; } .tp-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 2; } .tp-hero-content { position: relative; z-index: 3; max-width: 780px; } /* Eyebrow */ .tp-hero-eyebrow { font-size: 15px; letter-spacing: 1.3px; opacity: 0.9; margin-bottom: 16px; } /* Title */ .tp-hero-title { font-size: 54px; line-height: 1.15; font-weight: 700; margin-bottom: 22px; } /* Subheading */ .tp-hero-sub { font-size: 18px; max-width: 620px; opacity: 0.92; margin-bottom: 32px; } /* Mobile */ @media (max-width: 768px) { .tp-hero { padding: 110px 0 120px; } .tp-hero-title { font-size: 36px; } .tp-hero-sub { font-size: 16px; } } /* EXPERIENCES SECTION */ .tp-experiences { padding: 90px 0 110px; } .tp-exp-title { text-align: center; margin-bottom: 60px; color: var(--tp-blue); } .tp-exp-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px 50px; } .tp-exp-item { text-align: center; padding: 28px; border-radius: 16px; transition: 0.3s ease; } .tp-exp-item:hover { background: #f6f9fc; box-shadow: 0 14px 32px rgba(0,0,0,0.08); transform: translateY(-6px); } .tp-exp-icon { width: 62px; margin-bottom: 18px; opacity: 0.9; } .tp-exp-heading { font-size: 20px; font-weight: 600; margin-bottom: 12px; } .tp-exp-text { font-size: 16px; line-height: 1.55; color: var(--tp-gray); } /* TABLET */ @media (max-width: 1024px) { .tp-exp-grid { grid-template-columns: repeat(2, 1fr); max-width: 900px; } } /* MOBILE */ @media (max-width: 768px) { .tp-exp-grid { grid-template-columns: 1fr; gap: 40px; } } .two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 40px; } .tp-img-rounded { width: 100%; border-radius: 16px; object-fit: cover; } .tp-style-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px; margin-top: 20px; } .tp-style-card { background: #ffffff; padding: 24px; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,0.06); text-align: left; } .tp-list { margin-top: 16px; padding-left: 18px; } .tp-list li { margin-bottom: 6px; } /* HERO FOR CRUISE STYLE PAGES */ .tp-cruise-hero { background: #e8f1f8; padding-top: 140px; /* avoids menu overlap */ padding-bottom: 80px; min-height: 380px; display: flex; align-items: center; } /* Breadcrumb */ .tp-hero-breadcrumb { display: inline-block; font-size: 20px; font-weight: 600; color: var(--tp-blue-dark); margin-bottom: 20px; border-bottom: 3px solid var(--tp-blue); padding-bottom: 4px; } /* Title spacing */ .tp-hero-title { margin-bottom: 20px; } /* Subtitle */ .tp-hero-sub { max-width: 780px; font-size: 18px; line-height: 1.6; color: var(--tp-text); } /* RESPONSIVE FIXES */ @media (max-width: 768px) { .tp-cruise-hero { padding-top: 120px; padding-bottom: 60px; min-height: auto; } .tp-hero-title { font-size: 34px; } .tp-hero-sub { font-size: 16px; } } /* ---------------------------------------------- LUXURY CRUISE HERO - PREMIUM HYBRID STYLE ---------------------------------------------- */ .tp-cruise-hero { position: relative; height: 80vh; min-height: 520px; border-radius: 0 0 40px 40px; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; padding: 0 5%; color: #ffffff; } /* Background image */ .tp-cruise-hero::before { content: ""; position: absolute; inset: 0; background-image: url("https://lirp.cdn-website.com/f95e2c3f/dms3rep/multi/opt/ts-luxury-hero-1920w.webp"); background-size: cover; background-position: center; filter: brightness(0.45) blur(1.5px); z-index: 1; } /* Dark gradient overlay */ .tp-cruise-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom right, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.25) ); z-index: 2; } .tp-cruise-hero-inner { position: relative; z-index: 3; max-width: 620px; } /* Eyebrow */ .tp-hero-eyebrow { display: inline-block; font-size: 15px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 18px; color: #8acbff; } /* Title */ .tp-hero-title { font-size: 46px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; } /* Subtitle */ .tp-hero-sub { font-size: 18px; line-height: 1.6; margin-bottom: 32px; opacity: 0.92; } /* Button */ .tp-hero-btn { padding: 16px 32px; font-size: 17px; } /* Responsive */ @media (max-width: 768px) { .tp-cruise-hero { height: 70vh; padding: 0 24px; } .tp-hero-title { font-size: 34px; } .tp-hero-sub { font-size: 16px; } } /* Improve text readability */ .tp-cruise-hero-inner h1, .tp-cruise-hero-inner p, .tp-hero-eyebrow { color: #ffffff; text-shadow: 0 4px 18px rgba(0, 0, 0, 0.55); } /* Slightly stronger overlay */ .tp-cruise-hero::after { background: linear-gradient( to bottom right, rgba(0,0,0,0.65), rgba(0,0,0,0.35) ); } .tp-hero-btn { background: #0b63f3; color: #ffffff !important; box-shadow: 0 8px 20px rgba(11, 99, 243, 0.25); } .tp-hero-btn:hover { background: #084ec3; transform: translateY(-2px); } /* Force white, visible H1 inside cruise hero */ .tp-cruise-hero-inner h1 { color: #ffffff !important; text-shadow: 0 4px 18px rgba(0,0,0,0.55); font-size: 3rem; line-height: 1.2; font-weight: 700; } /* For mobile responsiveness */ @media (max-width: 768px) { .tp-cruise-hero-inner h1 { font-size: 2.1rem; } } .tp-cruise-hero-inner h1 { letter-spacing: -0.5px; } .tp-cruise-hero-inner h1, .tp-cruise-hero-inner p, .tp-cruise-hero-inner span { text-shadow: 0 6px 30px rgba(0,0,0,0.45); } /* GRID */ .tp-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; } /* TEXT AREA */ .tp-style-text p { margin-bottom: 20px; line-height: 1.6; color: var(--tp-text); } /* BULLET LIST */ .tp-style-list { list-style: none; padding-left: 0; margin-top: 20px; } .tp-style-list li { margin-bottom: 14px; font-size: 18px; display: flex; align-items: flex-start; gap: 10px; } .tp-style-list li::before { content: "•"; color: var(--tp-blue); font-size: 22px; line-height: 1; } /* IMAGE */ .tp-style-image img { width: 100%; border-radius: 16px; box-shadow: var(--tp-shadow); object-fit: cover; } /* MOBILE */ @media (max-width: 860px) { .tp-style-grid { grid-template-columns: 1fr; } .tp-style-image { order: -1; margin-bottom: 20px; } } /* Mejor alineación del bloque de texto */ .tp-style-text { max-width: 580px; } /* Bullets refinados */ .tp-style-list li { margin-bottom: 18px; font-size: 18px; line-height: 1.55; } .tp-style-list li::before { content: "•"; color: var(--tp-blue); font-size: 26px; line-height: 1; margin-top: 2px; } .tp-style-text p { margin-bottom: 28px; } /* ================================ WHY CHOOSE – RESPONSIVE FIX ================================= */ /* --- GRID DESKTOP --- */ .tp-cruise-why { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } /* image style */ .tp-cruise-why img { width: 100%; border-radius: 18px; box-shadow: var(--tp-shadow); } /* --- TABLET (imagen izquierda, texto derecha) --- */ @media (max-width: 980px) { .tp-cruise-why { grid-template-columns: 1fr; text-align: left; } .tp-cruise-why img { order: 1; max-width: 85%; margin: 0 auto; } .tp-cruise-why-content { order: 2; padding: 0 20px; } } /* --- MOBILE (imagen arriba, spacing más compacto) --- */ @media (max-width: 640px) { .tp-cruise-why img { max-width: 100%; margin: 0 auto 30px auto; } .tp-cruise-why-content { padding: 0 18px; } .tp-cruise-why h2 { font-size: 28px; line-height: 1.22; } .tp-cruise-why p { font-size: 17px; line-height: 1.55; } .tp-cruise-why li { font-size: 17px; margin-bottom: 12px; } } /* ========================================== WHY CHOOSE – LAYOUT BASE ========================================== */ .tp-cruise-why { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; } .tp-cruise-why img { width: 100%; border-radius: 18px; box-shadow: var(--tp-shadow); } /* Content spacing */ .tp-cruise-why-content p { margin: 20px 0 25px; } .tp-cruise-why-content ul { padding-left: 20px; margin-top: 10px; } .tp-cruise-why-content li { margin-bottom: 12px; font-size: 18px; line-height: 1.55; color: var(--tp-text); } /* ========================================== TABLET RESPONSIVE (imagen arriba pero centrada) ========================================== */ @media (max-width: 980px) { .tp-cruise-why { grid-template-columns: 1fr; text-align: left; } .tp-cruise-why img { order: 1; max-width: 85%; margin: 0 auto 35px; } .tp-cruise-why-content { order: 2; padding: 0 20px; } } /* ========================================== MOBILE RESPONSIVE ========================================== */ @media (max-width: 640px) { .tp-cruise-why img { max-width: 100%; margin: 0 auto 30px; } .tp-cruise-why-content { padding: 0 18px; } .tp-cruise-why h2 { font-size: 28px; line-height: 1.22; } .tp-cruise-why p { font-size: 17px; line-height: 1.55; } .tp-cruise-why li { font-size: 17px; } } /* ================================ CRUISE STYLE – GRID LAYOUT ================================ */ .tp-cruise-style-grid { margin-top: 50px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; align-items: stretch; } /* ================================ CARD DESIGN (RESTORED VERSION) ================================ */ .tp-cruise-style-card { background: #ffffff; border-radius: 20px; padding: 50px 30px; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); transition: 0.3s ease; display: flex; flex-direction: column; justify-content: center; } .tp-cruise-style-card img { max-width: 180px; margin: 0 auto 25px; } .tp-cruise-style-card h4 { font-size: 20px; font-weight: 600; margin-top: 5px; color: var(--tp-text); } .tp-cruise-style-card:hover { transform: translateY(-6px); box-shadow: 0 14px 38px rgba(0,0,0,0.15); } /* ================================ RESPONSIVE (TABLET) ================================ */ @media (max-width: 1024px) { .tp-cruise-style-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } /* ================================ RESPONSIVE (MOBILE) ================================ */ @media (max-width: 600px) { .tp-cruise-style-grid { grid-template-columns: 1fr; } .tp-cruise-style-card { padding: 40px 24px; } .tp-cruise-style-card img { max-width: 150px; } } /* ========================================= LUXURY STYLE - BEST CRUISE LINES SECTION ========================================= */ .tp-cruise-style-lines { background: #ffffff; } .tp-cruise-style-lines .section-title { text-align: center; margin-bottom: 8px; } .tp-cruise-style-lines .tp-section-sub { text-align: center; max-width: 760px; margin: 0 auto 48px auto; } /* BLOQUES POR CATEGORÍA */ .tp-cruise-style-block { margin-bottom: 56px; } .tp-cruise-style-header { max-width: 720px; margin: 0 auto 28px auto; text-align: center; } .tp-cruise-style-title { font-size: 22px; font-weight: 700; color: var(--tp-text, #1c1c1c); margin-bottom: 6px; } .tp-cruise-style-sub { font-size: 15px; color: var(--tp-gray, #575759); } /* GRID DE TARJETAS */ .tp-cruise-style-grid { display: grid; gap: 24px; } /* tarjetas full width en mobile */ .tp-cruise-style-card { background: #ffffff; border-radius: var(--tp-radius, 16px); box-shadow: var(--tp-shadow, 0 6px 20px rgba(0,0,0,0.08)); padding: 28px 24px 24px 24px; text-align: center; transition: transform 0.25s ease, box-shadow 0.25s ease; } /* efecto hover premium */ .tp-cruise-style-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12); } .tp-cruise-style-logo { max-width: 160px; max-height: 56px; width: auto; height: auto; object-fit: contain; margin: 0 auto 18px auto; display: block; } .tp-cruise-style-name { font-size: 17px; font-weight: 600; margin-bottom: 6px; color: var(--tp-text, #1c1c1c); } .tp-cruise-style-tag { font-size: 14px; color: var(--tp-gray, #575759); } /* BREAKPOINTS */ @media (min-width: 640px) { .tp-cruise-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 960px) { .tp-cruise-style-header { text-align: left; margin-bottom: 24px; } .tp-cruise-style-lines .section-title, .tp-cruise-style-lines .tp-section-sub { text-align: center; } .tp-cruise-style-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ====================================== BEST CRUISE LINES – LAYOUT Y CARDS ====================================== */ /* Contenedor general de la sección */ .tp-cruise-style-lines { padding-top: 60px; } .tp-cruise-style-lines .section-eyebrow { display: block; margin-bottom: 10px; } .tp-cruise-style-lines .section-title { text-align: left; max-width: 780px; } .tp-cruise-style-lines .tp-section-sub { max-width: 820px; margin-top: 14px; } /* Bloque por categoría (Ultra Luxury / Premium) */ .tp-cruise-style-block { margin-top: 56px; } .tp-cruise-style-header { margin-bottom: 24px; } .tp-cruise-style-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; } .tp-cruise-style-sub { max-width: 680px; font-size: 15px; line-height: 1.6; } /* GRID DE CARDS */ .tp-cruise-style-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; } /* CARD */ .tp-cruise-style-card { background: #ffffff; padding: 28px 24px; border-radius: 20px; text-align: center; box-shadow: 0 10px 32px rgba(0,0,0,0.06); transition: transform 0.25s ease, box-shadow 0.25s ease; } .tp-cruise-style-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.10); } /* Logo dentro de la card */ .tp-cruise-style-logo { max-width: 140px; height: auto; display: block; margin: 0 auto 18px; } /* Nombre y tag */ .tp-cruise-style-name { font-size: 17px; font-weight: 600; margin-bottom: 6px; } .tp-cruise-style-tag { font-size: 14px; line-height: 1.6; color: #5f6470; } /* ============================ TABLET ============================ */ @media (max-width: 1024px) { .tp-cruise-style-lines { padding-top: 40px; } .tp-cruise-style-lines .section-title { text-align: left; } .tp-cruise-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .tp-cruise-style-card { padding: 26px 22px; } .tp-cruise-style-logo { max-width: 130px; margin-bottom: 16px; } } /* ============================ MÓVIL ============================ */ @media (max-width: 768px) { .tp-cruise-style-lines { padding-top: 32px; } .tp-cruise-style-lines .section-title { text-align: left; } .tp-cruise-style-lines .tp-section-sub { margin-top: 10px; } .tp-cruise-style-block { margin-top: 40px; } .tp-cruise-style-grid { grid-template-columns: 1fr; gap: 20px; } .tp-cruise-style-card { padding: 24px 20px; } .tp-cruise-style-logo { max-width: 120px; margin-bottom: 14px; } .tp-cruise-style-title { font-size: 22px; } } /* TABLET FIX */ @media (max-width: 1024px) { /* Fuerza el grid a 2 columnas reales */ .tp-cruise-style-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; width: 100%; } /* Asegura que los cards ocupen bien su columna */ .tp-cruise-style-card { width: 100% !important; max-width: 100% !important; padding: 28px 24px !important; text-align: center; } /* LOGO RESPONSIVO REAL */ .tp-cruise-style-logo { width: 100%; max-width: 160px; /* límite visual */ height: auto; margin: 0 auto 18px auto; display: block; } } /* MOBILE FIX (1 columna) */ @media (max-width: 640px) { .tp-cruise-style-grid { grid-template-columns: 1fr !important; } .tp-cruise-style-card { max-width: 440px; margin: 0 auto; } .tp-cruise-style-logo { max-width: 140px; } } /* ------- BASE GRID ------- */ .tp-cruise-style-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; justify-items: center; justify-content: center; } /* ------- TABLET (Perfectamente centrado) ------- */ @media (max-width: 1024px) { .tp-cruise-style-grid { grid-template-columns: repeat(2, 1fr); justify-items: center; justify-content: center; margin: 0 auto; max-width: 700px; /* evita que se pegue a la izquierda */ } } /* ------- MOBILE ------- */ @media (max-width: 768px) { .tp-cruise-style-grid { grid-template-columns: 1fr; justify-items: center; justify-content: center; max-width: 100%; } } /* ------- CARD ------- */ .tp-cruise-style-card { width: 100%; max-width: 280px; padding: 32px 24px; background: #fff; border-radius: 20px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,0.08); } /* Logo */ .tp-cruise-style-logo { width: auto; max-width: 160px; height: 70px; object-fit: contain; margin-bottom: 16px; } /* Titles */ .tp-cruise-style-name { font-size: 20px; font-weight: 600; margin-bottom: 10px; } /* Tagline */ .tp-cruise-style-tag { font-size: 15px; opacity: .8; line-height: 1.4; } /* GRID – en tablet siempre 2 columnas centradas */ @media (min-width: 641px) and (max-width: 1024px) { .tp-cruise-style-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; justify-items: center; } } /* En móvil sigue siendo 1 columna */ @media (max-width: 640px) { .tp-cruise-style-grid { grid-template-columns: 1fr; gap: 24px; } } /* ====================================================== FIX: LOGOS — CÍRCULO BLANCO PERFECTO Y MISMO TAMAÑO ====================================================== */ .tp-cruise-style-logo { width: 140px; height: auto; object-fit: contain; display: block; margin: 0 auto; } /* Tablet (2 columnas) */ @media (max-width: 1024px) { .tp-cruise-style-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; width: 100%; } } /* Mobile (1 columna) */ @media (max-width: 600px) { .tp-cruise-style-grid { grid-template-columns: 1fr; gap: 24px; } } /* ============================ TABLET — DUDA BREAKPOINT 770PX ============================ */ @media (max-width: 770px) { /* Grid a 2 columnas perfectamente centrado */ .tp-cruise-style-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 32px !important; justify-items: center !important; width: 100% !important; } /* Las tarjetas siempre misma altura */ .tp-cruise-style-card { width: 100% !important; max-width: 260px !important; height: auto !important; margin: 0 auto !important; padding: 32px 24px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; } /* Resolver el “chip blanco” debajo del logo */ .tp-cruise-style-logo { background: transparent !important; padding: 0 !important; margin-bottom: 16px !important; width: auto !important; max-width: 140px !important; height: auto !important; object-fit: contain !important; } } /* ===================================== TABLET FIX — DUDA BREAKPOINT 770PX ===================================== */ @media (max-width: 770px) { /* GRID — centrada, bien distribuida, 2 columnas */ .tp-cruise-style-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 28px !important; justify-items: center !important; width: 100% !important; } /* CARDS — más anchas, más elegantes */ .tp-cruise-style-card { width: 100% !important; max-width: 310px !important; /* ← más ancho */ padding: 32px 20px !important; border-radius: 26px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; } /* LOGOS — eliminar totalmente el círculo blanco */ .tp-cruise-style-logo { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; margin: 0 auto 18px auto !important; width: 140px !important; height: auto !important; object-fit: contain !important; display: block !important; } /* Algunos logos traen un contenedor con sombra */ .tp-cruise-style-card img { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; } } /* ============================= FIX CRUISE CARDS TABLET ONLY ============================= */ @media (min-width: 600px) and (max-width: 900px) { /* Forzar que las cards se distribuyan correctamente */ .tp-cruise-style-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; justify-items: center !important; width: 100% !important; gap: 28px !important; } /* Ajuste de padding para evitar el círculo blanco */ .tp-cruise-style-card { padding: 28px 22px !important; border-radius: 22px !important; box-shadow: 0 8px 20px rgba(0,0,0,0.08) !important; background: #fff !important; } /* LOGOS — aseguramos tamaño fijo y sin recorte */ .tp-cruise-style-logo { width: 140px !important; height: auto !important; margin: 0 auto 20px auto !important; object-fit: contain !important; display: block !important; } /* ELIMINAR CUALQUIER EFECTO DE WRAPPERS DE DUDA */ .tp-cruise-style-card img, .tp-cruise-style-card picture, .tp-cruise-style-card div, .tp-cruise-style-card .dmRespCol, .tp-cruise-style-card .dmInner { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; } } /* ============================================= TABLET IMPROVEMENT: WIDER CRUISE STYLE CARDS ============================================= */ @media (min-width: 600px) and (max-width: 900px) { /* Grid más amplio y uniforme */ .tp-cruise-style-grid { grid-template-columns: repeat(2, minmax(280px, 1fr)) !important; gap: 32px !important; } /* Cards más anchas y elegantes */ .tp-cruise-style-card { width: 100% !important; max-width: 340px !important; /* antes eran aprox 280px */ padding: 32px 26px !important; border-radius: 24px !important; } /* Logos ligeramente más grandes y mejor ubicados */ .tp-cruise-style-logo { width: 150px !important; margin-bottom: 22px !important; } /* Títulos y textos centrados con mejor line-height */ .tp-cruise-style-name { font-size: 20px !important; margin-bottom: 10px !important; line-height: 1.2 !important; } .tp-cruise-style-tag { font-size: 16px !important; line-height: 1.45 !important; } } /* ==================================================================== */ /* System Style Definitions */ /* ==================================================================== */ @media all { :root { --btn-text-direction: ltr; --btn-border-r-color: var(--btn-border-color); --btn-border-l-color: var(--btn-border-color); --btn-border-b-width: var(--btn-border-width); --btn-border-width: 1px; --btn-border-radius: 50px; --btn-border-t-width: var(--btn-border-width); --btn-border-tl-radius: 8px; --btn-border-br-radius: 8px; --btn-border-bl-radius: 8px; --btn-bg-color: rgba(5,113,170,1); --btn-border-color: rgba(0, 0, 0, 0); --btn-border-tr-radius: 8px; --btn-border-r-width: var(--btn-border-width); --btn-border-b-color: var(--btn-border-color); --btn-border-l-width: var(--btn-border-width); --btn-border-t-color: var(--btn-border-color); --btn-text-align: center; --btn-text-color: rgba(255, 255, 255, 1); --btn-text-decoration: none; --btn-text-font-weight: 400; --btn-icon-color: rgba(255, 255, 255, 1); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: rgba(36,169,223,1); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: rgba(0, 0, 0, 0); --btn-hover-text-color: var(--color_7); --btn-hover-text-font-weight: var(--btn-text-font-weight); --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } .button_2 { --btn-border-l-color: var(--color_3); --btn-border-r-color: var(--color_3); --btn-border-b-width: 0; --btn-text-direction: ltr; --btn-border-radius: 50px; --btn-border-t-width: 0; --btn-border-tl-radius: 8px; --btn-border-br-radius: 8px; --btn-border-bl-radius: 8px; --btn-bg-color: rgba(0, 0, 0, 0); --btn-border-r-width: 0; --btn-border-tr-radius: 8px; --btn-border-b-color: var(--color_3); --btn-border-l-width: 0; --border-style: solid; --btn-border-t-color: var(--color_3); --btn-text-align: center; --btn-text-color: var(--color_3); --btn-text-decoration: none; --btn-text-font-weight: 400; --btn-icon-color: rgba(5,113,170,1); --btn-icon-fill: rgb(0, 0, 238); --btn-icon-wrpr-display: none; --btn-hover-border-b-color: var(--btn-hover-border-color); --btn-hover-bg: rgba(5,113,170,1); --btn-hover-border-t-color: var(--btn-hover-border-color); --btn-hover-border-r-color: var(--btn-hover-border-color); --btn-hover-border-l-color: var(--btn-hover-border-color); --btn-hover-border-color: rgba(5,113,170,1); --btn-hover-text-color: rgba(255, 255, 255, 1); --btn-hover-text-font-weight: var(--btn-text-font-weight); --btn-hover-text-decoration: var(--btn-text-decoration); --btn-hover-text-font-style: var(--btn-text-font-style); } :root { --section-padding-top: 40px; --section-padding-left: 5%; --section-padding-right: 5%; --section-padding-bottom: 40px; --column-padding-top: 16px; --column-padding-right: 16px; --column-padding-left: 16px; --column-padding-bottom: 16px; --inner-column-padding-left: 12px; --inner-column-padding-right: 12px; --inner-column-padding-top: 12px; --inner-column-padding-bottom: 12px; } } @media (min-width: 1025px) { :root { --btn-text-font-size: 16px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 14px; } } @media (min-width: 768px) and (max-width: 1024px) { :root { --btn-text-font-size: 16px; } .button_2 { --btn-text-font-size: 16px; } :root { --section-padding-left: 2%; --section-padding-right: 2%; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 13px; } } @media (min-width: 0px) and (max-width: 767px) { :root { --btn-text-font-size: 18px; } .button_2 { --btn-text-font-size: 18px; } :root { --section-padding-left: 4%; --section-padding-right: 4%; } } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] { border-radius: 7px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] { border-radius: 0px; background-clip: border-box; box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDc1IDQwIiBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIj48bGluZWFyR3JhZGllbnQgaWQ9ImhhdDAiIGdyYWRpZW50VW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiB4MT0iNTAlIiB5MT0iMTAwJSIgeDI9IjUwJSIgeTI9Ii0xLjQyMTA4NTQ3MTUyMDJlLTE0JSI+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMwNDA1MDUiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4wNSIvPgogICA8L2xpbmVhckdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9Ijc1IiBoZWlnaHQ9IjQwIiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:hover { box-shadow: inset 0 2px 1px rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(0, 0, 0, 0.2), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC']:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 100px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BIG_BASIC'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] { background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] { box-shadow: inset 0 -6px 0 0 rgba(0, 0, 0, 0.2), 0 -3px 0 0 #ccc; transition: box-shadow 0.1s ease; position: relative; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 #ccc; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'].flexButton { padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .text { position: relative; top: -3px; transition: all 0.1s ease; padding: 13px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY']:hover .text { top: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='SQUISHY'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TRANSPARENT'] { border-radius: 5px / 4px; box-shadow: 0 0 18px rgba(5, 5, 6, 0.3); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS']:before { content: ""; width: 100%; height: 50%; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.15); display: block; position: absolute; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='TWO_COLORS'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] { border-radius: 21px; background-clip: border-box; box-shadow: 0 3px 3px rgba(5, 5, 6, 0.07), inset 0 0 0 2px rgba(0, 0, 0, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:hover { box-shadow: 0 3px 3px rgba(5, 5, 6, 0.1); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMDAwIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmYiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CiAgIDwvbGluZWFyR3JhZGllbnQ+Cgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTI1IiBoZWlnaHQ9IjM4IiBmaWxsPSJ1cmwoI2hhdDApIiAvPgo8L3N2Zz4=); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED']:active { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.1), inset 0 3px 3px rgba(5, 5, 6, 0.3); background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEyNSAzOCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PGxpbmVhckdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjUwJSIgeTE9IjEwMCUiIHgyPSI1MCUiIHkyPSItMS40MjEwODU0NzE1MjAyZS0xNCUiPgo8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjZmZmIiBzdG9wLW9wYWNpdHk9IjAuMiIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAiIHN0b3Atb3BhY2l0eT0iMC4yIi8+CjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMCIgc3RvcC1vcGFjaXR5PSIwLjIiLz4KICAgPC9saW5lYXJHcmFkaWVudD4KCjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMjUiIGhlaWdodD0iMzgiIGZpbGw9InVybCgjaGF0MCkiIC8+Cjwvc3ZnPg==); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUNDED'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] { background-clip: border-box; box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5); padding-left: 46px; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON']:hover { box-shadow: 0 1px 1px rgba(5, 5, 6, 0.5), inset 0 0 0 800px rgba(0, 0, 0, 0.1); } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .iconBg { background-color: #f7f7f7; top: 0; bottom: 0; margin: 0; width: 50px; text-align: center; display: block; height: 100%; border-top-left-radius: inherit; border-bottom-left-radius: inherit; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .icon { display: inline-block; float: none; position: absolute; top: 50%; left: 0; right: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='CONTRAST_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] { overflow: hidden; background-clip: border-box; border-radius: 0px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .text { opacity: 1; display: inline-block; transition: all 0.3s; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .text { opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .iconBg { position: absolute; top: -200%; bottom: 0; margin: auto; width: 100%; left: 0; transition: all 0.3s; opacity: 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED']:hover .iconBg { top: 0; opacity: 1; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ANIMATED'] .icon { display: block; float: left; position: absolute; font-size: 27px; width: 100%; height: 100%; margin-top: -13px; top: 50%; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] { overflow: initial; background-clip: border-box; border-radius: 2px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] { border-radius: 6px; overflow: initial; background-clip: border-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='THICK_BORDER_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] { background-clip: border-box; border-radius: 6px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] { background-clip: border-box; border-radius: 3px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'].flexButton { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_SOFT'] .iconBg { display: none; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] { background-clip: border-box; border-radius: 0px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] { background-clip: border-box; border-radius: 6px; padding: 0 0 0 40px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'].flexButton { padding: 10px 7px 10px 47px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .text { padding: 10px 7px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .iconBg { display: block; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='FLAT_ROUND_ICON'] .hidden .iconBg + .text { margin-left: -40px; box-sizing: content-box; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] { overflow: initial; background-clip: border-box; border-radius: 1px; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'].flexButton { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .text { padding: 16px 0; } #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='BORDER_SHORT'] .iconBg { display: none; } @media (min-width: 768px) { #dm .dmRespRow .dmRespCol > .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container-global .dmWidget[data-buttonstyle='BORDER_SHORT'], #dm .sticky-widgets-container .dmWidget[data-buttonstyle='BORDER_SHORT'] { width: 222px; } } #dm .dmWidget:not([data-buttonstyle]), div.buttons , #dm .button_2 .dmWidget:not([data-buttonstyle]), #dm .dmWidget.button_2:not([data-buttonstyle]), div.buttons .button_2, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] { border-radius: 50px; } #dm .dmWidget:not([data-buttonstyle]).flexButton, div.buttons .flexButton, #dm .button_2 .dmWidget:not([data-buttonstyle]).flexButton, #dm .dmWidget.button_2:not([data-buttonstyle]).flexButton, div.buttons .button_2.flexButton, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'].flexButton { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .textonly, #dm .dmWidget:not([data-buttonstyle]) input, #dm .dmWidget:not([data-buttonstyle]) .text, div.buttons .text, #dm .button_2 .dmWidget:not([data-buttonstyle]) .textonly, #dm .button_2 .dmWidget:not([data-buttonstyle]) input, #dm .button_2 .dmWidget:not([data-buttonstyle]) .text, #dm .dmWidget.button_2:not([data-buttonstyle]) .textonly, #dm .dmWidget.button_2:not([data-buttonstyle]) input, #dm .dmWidget.button_2:not([data-buttonstyle]) .text, div.buttons .button_2 .text, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] input, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .text { padding: 10px 0px; } #dm .dmWidget:not([data-buttonstyle]) .iconBg, #dm .button_2 .dmWidget:not([data-buttonstyle]) .iconBg, #dm .dmWidget.button_2:not([data-buttonstyle]) .iconBg, #dm .dmOuter .dmInner .dmWidget[data-buttonstyle='ROUND_SIDES'] .iconBg { display: none; } #dm div.dmInner #site_content .dmWidget, #dm div.dmInner .dmHeader .dmWidget { background-color: var(--btn-bg-color); border-color: var(--btn-border-color); border-bottom-color: var(--btn-border-b-color); border-left-color: var(--btn-border-l-color); border-right-color: var(--btn-border-r-color); border-top-color: var(--btn-border-t-color); border-radius: var(--btn-border-radius); border-bottom-left-radius: var(--btn-border-bl-radius); border-bottom-right-radius: var(--btn-border-br-radius); border-top-left-radius: var(--btn-border-tl-radius); border-top-right-radius: var(--btn-border-tr-radius); border-width: var(--btn-border-width); border-bottom-width: var(--btn-border-b-width); border-left-width: var(--btn-border-l-width); border-right-width: var(--btn-border-r-width); border-top-width: var(--btn-border-t-width); direction: var(--btn-text-direction); text-align: var(--btn-text-align); } #dm div.dmInner #site_content .dmWidget span.text, #dm div.dmInner #site_content .dmformsubmit input { color: var(--btn-text-color); font-size: var(--btn-text-font-size); font-weight: var(--btn-text-font-weight); text-decoration: var(--btn-text-decoration); } #dm div.dmInner #site_content .dmWidget:hover, #dm div.dmInner #site_content .dmWidget.hover, #dm div.dmInner .dmHeader .dmWidget:hover, #dm div.dmInner .dmHeader .dmWidget.hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-border-color); border-bottom-color: var(--btn-hover-border-b-color); border-left-color: var(--btn-hover-border-l-color); border-right-color: var(--btn-hover-border-r-color); border-top-color: var(--btn-hover-border-t-color); } #dm div.dmInner #site_content .dmWidget:hover span.text, #dm div.dmInner #site_content .dmWidget.hover span.text, #dm div.dmInner .dmHeader .dmWidget:hover span.text, #dm div.dmInner .dmHeader .dmWidget.hover span.text, #dm div.dmInner #site_content .dmWidget:hover input[type="submit"], #dm div.dmInner #site_content .dmWidget.hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget:hover input[type="submit"], #dm div.dmInner .dmHeader .dmWidget.hover input[type="submit"] { color: var(--btn-hover-text-color); } #dm div.dmInner #site_content .dmWidget span.icon, #dm div.dmInner .dmHeader .dmWidget span.icon { color: var(--btn-icon-color); fill: var(--btn-icon-fill); } #dm div.dmInner #site_content .dmWidget:not([data-buttonstyle]) .iconBg, #dm div.dmInner .dmHeader .dmWidget:not([data-buttonstyle]) .iconBg { display: var(--btn-icon-wrpr-display); } .dmBody [data-layout-grid] > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group { padding-bottom: var(--section-padding-bottom); padding-left: var(--section-padding-left); padding-right: var(--section-padding-right); padding-top: var(--section-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group, .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group { padding-bottom: var(--column-padding-bottom); padding-left: var(--column-padding-left); padding-right: var(--column-padding-right); padding-top: var(--column-padding-top); } .dmBody [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]), .dmFooterContainer [data-layout-grid] > .flex-element.group > .flex-element.group .flex-element.group:not([data-layout-type] *):not([data-layout-type]) { padding-bottom: var(--inner-column-padding-bottom); padding-left: var(--inner-column-padding-left); padding-right: var(--inner-column-padding-right); padding-top: var(--inner-column-padding-top); } @media all { nav.u_1998592992 { color:white !important; } *#dm .dmInner *.u_1306770187 { width:100% !important; } *#dm .dmInner *.u_1581198931 { width:100% !important; } *#dm .dmInner div#hamburger-drawer.layout-drawer { background-color:rgba(255,255,255,1) !important; } *#dm .dmInner nav.u_1998592992.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner *.u_1040696130 { justify-content:center !important; } *#dm .dmInner *.u_1040696130.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0 !important; padding-top:0 !important; padding-left:20px !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; padding-right:20px !important; } *#dm .dmInner nav.u_1040696130.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner a.u_1354841978:hover { background-image:none !important; } *#dm .dmInner a.u_1354841978.hover { background-image:none !important; } *#dm .dmInner *.u_1955933514 { width:100% !important; } *#dm .dmInner *.u_1495895470.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0 !important; padding-top:0 !important; padding-left:20px !important; padding-bottom:0 !important; margin-top:0 !important; margin-bottom:0 !important; margin-right:0 !important; padding-right:20px !important; } *#dm .dmInner nav.u_1495895470.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:rgba(0,0,0,1) !important; } *#dm .dmInner *.u_1495895470 { justify-content:flex-end !important; } *#dm .dmInner *.u_1198691314.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { margin-left:0px !important; padding-top:0px !important; padding-left:20px !important; padding-bottom:0px !important; margin-top:0px !important; margin-bottom:0px !important; margin-right:0px !important; padding-right:20px !important; } *#dm .dmInner *.u_1117254353 { width:100% !important; } *#dm .dmInner *.u_1198691314 { justify-content:center !important; } *#dm .dmInner a.u_1540576542:hover { background-image:none !important; } *#dm .dmInner a.u_1540576542.hover { background-image:none !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item:hover { color:rgba(36,169,223,1) !important; font-weight:bold !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item.hover { color:rgba(36,169,223,1) !important; font-weight:bold !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item.dmNavItemSelected { color:rgba(36,169,223,1) !important; font-weight:bold !important; } *#dm .dmInner a.u_1540576542 { box-shadow:rgb(255,255,255) 0px 0px 11px 0px !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::before { font-size:20px !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::after { font-size:20px !important; } *#dm .dmInner nav.u_1198691314.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { color:var(--color_7) !important; font-size:20px !important; } *#dm .dmInner nav.u_1198691314 { justify-content:space-between !important; } *#dm .dmInner *.u_1557129660 .copyright { justify-content:flex-start !important; text-align:left !important; } *#dm .dmInner div.u_1068509695 img { object-fit:contain !important; } *#dm .dmInner div.u_1737844687 img { object-fit:contain !important; } *#dm .dmInner div.u_1557129660 .copyright { color:var(--color_1) !important; } *#dm .dmInner div.u_1151427999 .socialHubIcon { color:rgba(51,51,51,1) !important; border-color:rgba(12,63,23,1) !important; } *#dm .dmInner div.u_1151427999 .socialHubInnerDiv { column-gap:13px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav[data-nav-structure='VERTICAL'] .unifiednav__container:not([data-depth])>.unifiednav__item-wrap::after { align-self:center !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav .unifiednav__container[data-depth] .unifiednav__item { justify-content:center !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { justify-content:center !important; font-size:21px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::before { font-size:21px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::after { font-size:21px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav.effect-bottom2 .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item .nav-item-text::after { border-style:solid !important; border-width:3px 0px 0px 0px !important; border-color:rgb(32,158,214) rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0) !important; } } @media (min-width:0) and (max-width:767px) { *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content.hamburger-reverse { transform:translate(-75vw,0) !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer[data-origin="top"]:not([data-auto-height]) { height:100% !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(0,100%) !important; } *#dm .dmInner *.u_1151427999 .socialHubIcon { width:34px !important; height:34px !important; font-size:22.666666666666668px !important; line-height:34px !important; } *#dm .dmInner *.u_1151427999 .socialHubIcon:after { width:42px !important; height:34px !important; } } @media (min-width:1025px) { *.stickyHeaderSpacer { height:249.2734375px !important; } *#dm .dmInner div.u_1557129660 .copyright { font-size:15px !important; } *#dm .dmInner *.u_1151427999 .socialHubIcon { width:32px !important; height:32px !important; font-size:21.333333333333332px !important; line-height:32px !important; } *#dm .dmInner *.u_1151427999 .socialHubIcon:after { width:40px !important; height:32px !important; } } @media (min-width:768px) and (max-width:1024px) { *.stickyHeaderSpacer { height:249.2734375px !important; } div[dmtemplateid="FlexHeader"] .layout-drawer-overlay { background-color:rgba(0,0,0,0.6) !important; } *#dm .dmInner *#hamburger-drawer.layout-drawer[data-origin="top"]:not([data-auto-height]) { height:100% !important; } *[dmtemplateid="FlexHeader"].runtime-module-container.layout-drawer_open.layout-drawer_push-content { transform:translate(50vw,0) !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav .unifiednav__container:not([data-depth])>.unifiednav__item-wrap>.unifiednav__item { font-size:21px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::before { font-size:21px !important; } *#dm .dmInner nav.u_1491006479.main-navigation.unifiednav:not([data-nav-structure='VERTICAL']) .unifiednav__container:not([data-depth])>.unifiednav__item-wrap:not(:last-child)::after { font-size:21px !important; } } @media all { #flex-header[data-changeable-on-scroll][data-scrolling] [data-widget-type="image"] img { width: 100%; } #flex-header { background-color: var(--color_7); background-image: none; padding: 30px 0% 10px 0%; margin: 0px 0% 0px 0%; } #flex-header[data-changeable-on-scroll] { --header-on-scroll-text-color: var(--color_4); --header-on-scroll-navigation-links-hover-color: rgba(5,113,170,1); --header-on-scroll-button-background-color: rgba(5,113,170,1); --header-on-scroll-button-color: var(--color_7); } #flex-header[data-changeable-on-scroll][data-scrolling] { padding-top: 20px; padding-bottom: 0px; background-color: var(--color_7); } } @media (min-width: 1025px) { } @media (min-width: 768px) and (max-width: 1024px) { } @media (min-width: 768px) and (max-width: 1024px) { #flex-header { } } @media (max-width: 767px) { } @media (max-width: 767px) { #flex-header { } } @media all { #flex-footer { background-color: rgba(0, 0, 0, 0); background-image: none; } } @media (min-width: 768px) and (max-width: 1024px) { #flex-footer { } } @media (max-width: 767px) { #flex-footer { } } @media all { #\36 3a049320d35b55b4ef2a374 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; background-color: rgba(0, 0, 0, 0); justify-content: flex-start; padding: 16px 16px 16px 16px; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #\36 3a049320d35b55b4ef2a376 { background-color: rgba(0, 0, 0, 0); } #\36 3a049320d35b55b4ef2a377 { min-height: 531px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 2% 4%; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #\36 3a049ca0d35b55b4ef2a5c3 { width: 544px; height: auto; max-width: 100%; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\36 2d6a167a824ca526194d9a5 { background-color: rgba(232, 255, 133, 1); } } @media (min-width: 768px) and (max-width: 1024px) { #\36 3a049320d35b55b4ef2a374 { justify-content: flex-start; padding-top: 16px; } #\36 3a049320d35b55b4ef2a377 { min-height: 522px; padding: 4% 4% 4% 4%; } } @media (max-width: 767px) { #\36 3a049320d35b55b4ef2a374 { min-height: 535px; justify-content: flex-start; padding-top: 16px; width: 100%; height: auto; } #\36 3a049320d35b55b4ef2a377 { min-height: unset; flex-direction: column; padding: 4% 4% 4% 4%; } #\36 3a049ca0d35b55b4ef2a5c3 { align-self: flex-start; margin-left: 0px; margin-right: 0px; } } @media all { #\36 406026c90e1521f6ecb0ecd { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; padding: 16px 16px 16px 16px; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #\36 406026c90e1521f6ecb0ecc { min-height: 238px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 4% 4%; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #widget_s4l { width: 100%; height: auto; max-width: 100%; order: 1; } } @media (min-width: 1025px) { #widget_s4l { justify-self: auto; align-self: auto; width: 95.8158273381295%; grid-area: auto / auto / auto / auto; } } @media (min-width: 768px) and (max-width: 1024px) { #\36 406026c90e1521f6ecb0ecc { min-height: 279px; padding: 4% 4% 4% 4%; } #\36 406026c90e1521f6ecb0ecd { justify-content: flex-end; padding-bottom: 16px; } } @media (max-width: 767px) { #\36 406026c90e1521f6ecb0ecd { min-height: 206px; justify-content: center; padding-bottom: 16px; width: 100%; height: auto; } #\36 406026c90e1521f6ecb0ecc { min-height: unset; flex-direction: column; padding: 4% 4% 4% 4%; } #widget_s4l { margin-left: 0px; margin-right: 0px; } } @media all { #\39 d047ce9 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 100%; min-width: 4%; align-items: flex-end; justify-content: flex-end; padding: 16px 16px 16px 16px; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #a1f8711f { min-height: 0px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 4% 4% 2% 4%; margin-right: 0%; margin-top: 0%; margin-left: 0%; margin-bottom: 0%; } #\31 2a003a5 a { background-color: rgba(0,0,0,0); } #\31 2a003a5 svg { fill: rgba(120,120,120,1); } #\31 2a003a5 { width: 30px; height: 30px; } } @media (min-width: 768px) and (max-width: 1024px) { #a1f8711f { padding-left: 4%; padding-right: 4%; padding-bottom: 4%; } #\39 d047ce9 { padding-bottom: 6px; } } @media (max-width: 767px) { #\39 d047ce9 { width: 100%; min-height: 62px; height: auto; padding-bottom: 6px; } #a1f8711f { min-height: unset; flex-direction: column; padding-left: 4%; padding-right: 4%; padding-bottom: 4%; } } @media all { #\39 dc5a074 { min-height: auto; column-gap: 0%; row-gap: 0px; max-width: none; width: 100%; flex-wrap: nowrap; padding: 6px 2% 6px 2%; margin: 0% 0% 0% 0%; } #\35 286ad74 { width: 282px; height: auto; max-width: 100%; order: 0; min-height: 59px; grid-area: auto / auto / auto / auto; } #\38 8e69a6f { flex-direction: row; justify-content: flex-start; align-items: center; width: 18%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #\32 61979b7 { width: 145px; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\30 4886df1 { flex-direction: row; justify-content: flex-end; align-items: center; width: 18%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #\32 3d5f850 { width: 100%; height: auto; max-width: 100%; justify-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\37 80d21df { flex-direction: row; align-items: center; width: 63.98096794285344%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 6px 16px 6px 16px; margin: 0% 0% 0% 0%; } #\37 64397de { min-height: 8px; column-gap: 4%; row-gap: 24px; flex-direction: row; width: 25%; justify-content: flex-end; align-items: center; min-width: 4%; padding: 16px 16px 16px 16px; margin: 0% 0% 0% 0%; } #\30 0ca91b4 svg { fill: var(--color_7); } #\30 0ca91b4 { width: 30px; height: 30px; max-width: 100%; } #\37 ff771e1 { width: 60px; height: 60px; max-width: 100%; } #\31 c1481e3 { margin: 0px 0% 0px 0%; } } @media (min-width: 768px) and (max-width: 1024px) { #\39 dc5a074 { padding-left: 2%; padding-right: 2%; flex-direction: row; flex-wrap: nowrap; min-height: 0px; } #\35 286ad74 { width: 235px; } #\38 8e69a6f { width: 39.91785714285713%; margin-left: -0.0011659701492537314%; justify-content: center; order: 1; min-height: 8px; } #\30 4886df1 { width: 30%; order: 0; justify-content: flex-start; min-height: 8px; } #\32 61979b7 { width: 122px; height: auto; } #\37 80d21df { width: 20.7%; order: 2; justify-content: flex-end; padding-right: 50px; } #\37 64397de { order: 3; width: 30%; min-height: 8px; } #\30 0ca91b4 { justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #\37 ff771e1 { width: 32px; height: 32px; } } @media (max-width: 767px) { #\39 dc5a074 { min-height: 0px; flex-direction: row; flex-wrap: nowrap; padding: 0px 2% 0px 2%; } #\38 8e69a6f { width: 50.00000000000001%; justify-content: center; order: 1; min-height: 8px; } #\30 4886df1 { width: 25%; order: 0; justify-content: flex-start; min-height: 8px; } #\32 61979b7 { width: 110px; height: auto; } #\37 80d21df { width: 12.3%; order: 2; } #\37 64397de { align-items: center; width: 25%; order: 3; min-height: 8px; } #\37 ff771e1 { width: 32px; height: 32px; } } @media all { #db9c47d5 { width: 455px; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #e31efa6b { background-color: var(--color_8); padding-top: 20px; padding-bottom: 20px; background-image: none; } #\38 94f1689 { width: 100%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 0% 0% 0% 0%; margin: 0% 0% 0% 0%; } #\35 c02ddf6 { min-height: 10px; column-gap: 4%; row-gap: 24px; width: 100%; flex-wrap: nowrap; padding: 20px 2% 20px 2%; margin: 0% 0% 0% 0%; } } @media (min-width: 768px) and (max-width: 1024px) { #\38 94f1689 { width: 100%; min-height: 8px; } #\35 c02ddf6 { padding-left: 20px; padding-right: 0px; flex-direction: row; flex-wrap: nowrap; min-height: 10px; } } @media (max-width: 767px) { #\38 94f1689 { width: 100%; min-height: 29px; align-items: center; height: auto; } #\35 c02ddf6 { min-height: 0; flex-direction: column; row-gap: 10px; flex-wrap: nowrap; padding: 0px 2% 0px 2%; } #e0eb8090 { margin: 0px 0% 0px 0%; } } @media all { #\34 0517066 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #\35 0182487 { width: 99.99441131368205%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 3; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #dcb1d224 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 30.666666666666668%; justify-content: flex-start; min-width: 4%; padding: 0% 0% 0% 0%; margin: 0% 0% 0% 0%; } #\37 c852a38 { background-color: var(--color_8); background-image: none; } #\31 0d6af2d { justify-content: flex-start; width: 30.666666666666668%; min-width: 4%; min-height: 8px; column-gap: 4%; row-gap: 24px; padding: 0% 0% 0% 0%; margin: 0% 0% 0% 0%; } #af098da6 { width: 99.99441131368205%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 1; grid-area: auto / auto / auto / auto; } #\32 feca992 { min-height: 399px; column-gap: 4%; row-gap: 24px; width: 100%; padding: 50px 2% 0% 2%; margin: 0% 0% 0% 0%; } #\31 4f45595 { min-height: 8px; column-gap: 4%; row-gap: 24px; width: 30.666666666666668%; justify-content: flex-start; min-width: 4%; padding: 0% 0% 0% 0%; margin: 0% 0% 0% 0%; } #\32 080bde7 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; grid-area: auto / auto / auto / auto; } #widget_1r8 { width: 100%; height: auto; max-width: 100%; order: 1; align-self: stretch; } #d1c098a2 { width: 100%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #\39 4a9ec62 { width: 99.99441131368205%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 2; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #c8b7595e { flex-direction: row; justify-content: flex-start; align-items: center; width: 50%; min-height: 56px; max-height: 100%; row-gap: 24px; column-gap: 24px; height: auto; padding: 0px 12px 0px 12px; margin: 0px 0% 0px 2px; } #f7abc99d { flex-direction: row; justify-content: flex-start; align-items: center; width: 50%; min-height: 56px; max-height: 100%; row-gap: 24px; column-gap: 24px; margin-left: 2px; height: auto; } #\38 98902b6 { width: 47.97%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #\30 896eec2 { flex-direction: row; justify-content: flex-start; align-items: center; width: 100.00%; min-height: 68px; max-height: 100%; row-gap: 24px; column-gap: 6px; height: auto; padding: 0px 12px 0px 12px; margin: 0px 0% 0px 0%; } #\34 a3a4054 { width: 130px; height: auto; max-width: 100%; } #\32 f2c7ada { flex-direction: row; justify-content: flex-start; align-items: center; width: 100.00%; min-height: 81px; max-height: 100%; row-gap: 24px; column-gap: 6px; height: auto; padding: 0px 12px 0px 12px; margin: 0px 0% 0px 0%; } #efce0b4a { align-items: flex-start; width: 100%; min-height: 149px; max-height: 100%; row-gap: 0px; column-gap: 24px; order: 1; justify-self: auto; align-self: auto; height: auto; padding: 0px 12px 0px 12px; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #\39 4b51a4a { width: 47.97%; height: auto; max-width: 100%; justify-self: auto; align-self: auto; order: 0; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #dc902959 { width: 124px; height: auto; max-width: 100%; } #group_7m3 { align-items: flex-start; width: 100%; min-height: 160px; max-height: 100%; row-gap: 10px; column-gap: 24px; order: 2; height: auto; flex-wrap: nowrap; padding: 0px 0px 0px 0px; margin: 0px 0% 0px 0%; } #group_a44 { flex-direction: row; justify-content: space-between; align-items: center; width: 97.59%; min-height: 74px; max-height: 100%; row-gap: 24px; column-gap: 6px; order: 0; height: auto; min-width: 32px; padding: 0px 0px 0px 0px; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #widget_0v2 { width: 80px; height: auto; max-width: 100%; order: 1; } #widget_l7v { width: 80px; height: auto; max-width: 100%; order: 0; } #widget_4b3 { width: 90px; height: auto; max-width: 100%; order: 2; } #\34 fb138cf { flex-direction: row; align-items: center; width: 97.59%; min-height: 74px; max-height: 100%; row-gap: 24px; column-gap: 24px; order: 0; height: auto; min-width: 32px; padding: 0px 0px 0px 0px; margin: 0px 0% 0px 0%; grid-area: auto / auto / auto / auto; } #\37 713f37f { width: 80px; height: auto; max-width: 100%; order: 0; } #\38 350dae0 { width: 80px; height: auto; max-width: 100%; order: 1; } #widget_b34 { width: 280px; height: auto; max-width: 100%; order: 4; align-self: flex-start; margin-left: 0px; margin-right: 0px; margin-top: 7px; } #\31 cdd7043 { width: 63.27%; height: auto; max-width: none; justify-self: auto; align-self: auto; order: 4; margin: 14px 0% 0px 0%; grid-area: auto / auto / auto / auto; } } @media (min-width: 768px) and (max-width: 1024px) { #\32 feca992 { min-height: 240px; flex-direction: row; flex-wrap: wrap; column-gap: 4%; } #\31 4f45595 { width: 48%; min-height: 80px; flex: 1 1 auto; margin: 0% 0% 0% 0%; } #dcb1d224 { width: 48%; min-height: 80px; flex: 1 1 auto; margin: 0% 0% 0% 0%; } #\31 0d6af2d { width: 48%; flex-direction: column; flex-wrap: nowrap; min-height: 80px; flex: 1 1 auto; margin: 0% 0% 0% 0%; } #\31 cdd7043 { width: 98.61%; } #widget_b34 { width: 100%; } #d1c098a2 { min-width: 32px; margin: 0px 0% 0px 0%; } #efce0b4a { min-width: 32px; margin: 0px 0% 0px 0%; } #group_7m3 { min-width: 32px; margin: 0px 0% 0px 0%; } } @media (max-width: 767px) { #\35 0182487 { margin-top: 10px; } #dcb1d224 { width: 100%; min-height: 71px; align-items: center; row-gap: 10px; } #\31 0d6af2d { width: 100%; min-height: 199px; align-items: center; } #af098da6 { margin-top: 10px; } #\32 feca992 { min-height: unset; flex-direction: column; row-gap: 15px; } #\31 4f45595 { width: 100%; min-height: 115px; align-items: center; row-gap: 15px; } #\39 4a9ec62 { margin-top: 10px; } #\31 cdd7043 { margin-right: 0px; width: 74.48%; margin-top: 15px; } #widget_1r8 { width: 100%; } }