.elementor-kit-5{--e-global-color-primary:#006E9B;--e-global-color-secondary:#BE1622;--e-global-color-text:#323232;--e-global-color-accent:#F3F4F6;--e-global-color-075d9fd:#FFFFFF;--e-global-color-31de58d:#970D0D;--e-global-color-2bbdbdd:#002B49;--e-global-color-383f408:#F3F4F6;--e-global-color-056c0e9:#E5E7EB;--e-global-color-4f06b57:#F9FAFB;--e-global-color-82a6831:#22C55E;--e-global-color-f5101c8:#EAB308;--e-global-color-f4971b6:#EF4444;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-size:3.75rem;--e-global-typography-primary-font-weight:800;--e-global-typography-primary-line-height:1em;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:2.25rem;--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:2.5rem;--e-global-typography-text-font-family:"Outfit";--e-global-typography-text-font-size:1.125rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.75rem;--e-global-typography-accent-font-family:"Outfit";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:600;--e-global-typography-accent-line-height:1.5rem;background-color:var( --e-global-color-075d9fd );color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 button,.elementor-kit-5 input[type="button"],.elementor-kit-5 input[type="submit"],.elementor-kit-5 .elementor-button{background-color:var( --e-global-color-4f06b57 );color:var( --e-global-color-primary );padding:0.5rem 0.75rem 0.5rem 0.75rem;}.elementor-kit-5 button:hover,.elementor-kit-5 button:focus,.elementor-kit-5 input[type="button"]:hover,.elementor-kit-5 input[type="button"]:focus,.elementor-kit-5 input[type="submit"]:hover,.elementor-kit-5 input[type="submit"]:focus,.elementor-kit-5 .elementor-button:hover,.elementor-kit-5 .elementor-button:focus{background-color:var( --e-global-color-primary );color:var( --e-global-color-075d9fd );border-radius:0rem 0rem 0rem 0.5rem;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 h1{color:var( --e-global-color-075d9fd );font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-kit-5 h2{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:2.25rem;font-weight:700;line-height:2.5rem;}.elementor-kit-5 h3{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:1.25rem;font-weight:700;line-height:1.75rem;}.elementor-kit-5 h4{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:0.875rem;font-weight:700;line-height:1.25rem;}.elementor-kit-5 h5{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:0.8rem;font-weight:700;line-height:1rem;}.elementor-kit-5 h6{color:var( --e-global-color-primary );font-family:"Montserrat", Sans-serif;font-size:0.75rem;font-weight:700;line-height:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1023px){.elementor-kit-5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-5{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-kit-5 h1{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =============================================================================
Obycat v2 — Kit Custom CSS (Post 5 → _elementor_page_settings.custom_css)
=============================================================================
Source-of-truth lives here. Deploy:
wp eval-file deploy/deploy_kit_custom_css.php
Auto-replaces the Kit's custom_css with this file's contents.
GOVERNANCE: every block must be commented with WHY and WHERE it's used.
Don't add anything that can be expressed via globale Brand-Tokens.
============================================================================= */
/* Widescreen container max-width — matches v1 brand spec.
Without this, .e-con-inner caps at kit container_width (1280px),
producing ~100px content shift on viewports >= 1536px. */
@media (min-width: 1536px) {
.e-con > .e-con-inner { max-width: 1536px !important; }
}
/* WPML Language Switcher — compact dropdown style (matches v1 brand spec).
Hides native+translated text + arrow, shows only flag in the collapsed state.
Sub-menu items get full text styling. */
.lang-switcher .wpml-ls {
display: flex;
justify-content: flex-end;
margin-right: 14px;
}
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after,
.elementor-widget-wpml-language-switcher .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle .wpml-ls-native {
display: none;
}
.wpml-ls-legacy-dropdown .wpml-ls-flag {
height: 28px;
width: 22px;
}
.wpml-ls-legacy-dropdown .wpml-ls-item .wpml-ls-link .wpml-ls-display {
display: none;
}
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a .wpml-ls-native {
font-family: "Outfit", sans-serif;
font-weight: 500;
font-size: 0.875rem;
line-height: 1.25rem;
margin-left: 12px;
margin-right: 0;
}
/* Menu-Item highlight ".menu-red" — assigned as WP menu item class to CTA items
(currently Tarjeta Regalo). Brand-secondary color, bold. Works with Standard Elementor
nav-menu (.elementor-item) markup. */
header .elementor-element .elementor-nav-menu li.menu-red > a.elementor-item,
header .elementor-element .elementor-nav-menu li.menu-red > a.elementor-item:focus,
header .elementor-element .elementor-nav-menu li.menu-red > a.elementor-item:hover {
color: #BE1622 !important;
font-weight: 700 !important;
}
/* Inline color accent for headings (e.g. Hero "All-Inclusive" highlight).
Used as .... Tailwind yellow-500. */
.text-yellow {
color: #EAB308;
}
/* =============================================================================
Section 3 (Elige tu Experiencia) — pill-tab heading + product card visual style
=============================================================================
These styles wrap the nested-tabs widget (.tabs-products class set in section
PHP) and the loop-grid'd product cards inside it. Ported 1:1 from v1's
Customizer Additional CSS (theme=hello-elementor, post 471).
WHY in Kit CSS and not via widget settings:
- The .elementor-kit-5 chain (.tabs-products .e-n-tabs-content .woocommerce .e-loop-item)
reaches into Elementor's loop-item wrapper which isn't directly editable per-widget
- tab-heading container (.e-n-tabs-heading) has no widget-setting for the pill
background + inset shadow combo
- Same pattern v1 uses — keeps our v1-parity audit trail straightforward
============================================================================= */
/* Tab-heading container (the gray pill around the 2 tab buttons) */
.tabs-products.elementor-widget-n-tabs .e-n-tabs-heading button.e-n-tab-title {
padding: 0.5rem 1.5rem;
}
.tabs-products.elementor-widget-n-tabs .e-n-tabs-heading {
background-color: #f3f4f6 !important;
align-self: center;
padding: 0.5rem !important;
border-radius: 50px;
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
}
.tabs-products .e-n-tabs-heading button.e-n-tab-title {
cursor: pointer;
border-radius: 50px;
}
.tabs-products.elementor-widget-n-tabs .e-n-tabs-heading .e-n-tab-title[aria-selected="true"] {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
/* Product cards — outer border-radius + soft shadow, hover-lift */
.tabs-products .e-n-tabs-content .woocommerce .e-loop-item {
border-top-left-radius: 0.75rem;
border-radius: 0.75rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
transition-property: box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.tabs-products .e-n-tabs-content .woocommerce .e-loop-item:hover {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
/* Image inside the card — fixed height, top corners rounded to match card */
.tabs-products .e-n-tabs-content .woocommerce .e-loop-item .elementor-widget-image img {
object-fit: cover;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
height: 12rem;
max-width: 100%;
}
.tabs-products .e-n-tabs-content .woocommerce .e-loop-item .elementor-widget-image a {
display: block;
overflow: hidden;
border-top-left-radius: 0.75rem;
border-top-right-radius: 0.75rem;
}
.tabs-products .e-n-tabs-content .woocommerce .e-loop-item .elementor-widget-image {
height: 14rem;
}
/* =============================================================================
Section 1 (Hero — "Headvisiol" in v1) — drop-shadow on heading + text, gift-icon
=============================================================================
Source: v1 Customizer Additional CSS (post 471, "Headvisiol" block).
.text-yellow was already above; here are the rest.
v2-spec: hero-heading uses v2 container `.video-wrapper` (already in DOM).
============================================================================= */
.video-wrapper {
right: 1rem;
}
.video-wrapper h1 {
filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
}
.video-wrapper .elementor-widget-text-editor {
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.icon-gift {
position: relative;
display: table;
margin: auto;
}
.icon-gift .elementor-icon {
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
border: 4px solid rgb(255 255 255 / 0.2);
}
.icon-gift .elementor-icon-wrapper:before {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: rgb(255 255 255 / 0.2);
border-radius: 50%;
filter: blur(24px);
}
#text-link:hover {
text-decoration: underline;
}
/* =============================================================================
Section 4 (Regala experiencias inolvidables / Tarjeta Regalo banner)
=============================================================================
Source: v1 Customizer Additional CSS (post 471, "Regala experiencias" block).
Decorative radial-blur backdrops (top-right white, bottom-left yellow),
button hover scale, list checkmarks, gallery aspect-ratio.
v2-Spec: section uses `.section-regalo` outer container class.
============================================================================= */
.section-regalo {
position: relative;
}
.section-regalo:before {
content: '';
position: absolute;
height: 24rem;
width: 24rem;
border-radius: 9999px;
margin-top: -5rem;
margin-right: -5rem;
top: 0;
right: 0;
background-color: #ffffff;
filter: blur(64px);
opacity: 0.1;
display: flex;
justify-self: flex-end;
}
.section-regalo:after {
content: '';
position: absolute;
height: 18rem;
width: 18rem;
border-radius: 9999px;
margin-left: -5rem;
margin-bottom: -5rem;
left: 0;
bottom: 0;
background-color: #eab308;
filter: blur(64px);
opacity: 0.1;
}
.section-regalo .btn-regalo .elementor-button:hover {
transform: scale(1.05);
}
.section-regalo .btn-regalo .elementor-button .elementor-button-icon {
font-size: 1.5rem;
line-height: 2rem;
}
.icon-content .elementor-widget-icon-box {
padding: 1rem;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
background-color: #fff;
border-radius: 0.25rem;
width: 8rem;
}
.caption-picture {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
/* Text-Editor lists with green checkmark bullets — used across multiple sections */
main#content .elementor-widget-text-editor ul {
list-style: none;
margin: 0;
padding: 0;
}
main#content .elementor-widget-text-editor ul li {
position: relative;
padding: 0;
font-weight: 600;
}
main#content .elementor-widget-text-editor ul li::before {
content: "f00c";
font-family: "Font Awesome 5 Free";
font-size: 16px;
font-weight: 900;
margin-right: 0.75rem;
color: #22c55e;
}
/* Image-gallery cells: square aspect-ratio + cover-fit */
figure.gallery-item {
aspect-ratio: 1 / 1;
}
.gallery-spacing-custom .elementor-image-gallery .gallery-icon {
height: 100%;
}
.elementor-image-gallery .gallery-item img {
height: 100%;
object-fit: cover;
}
/* =============================================================================
Section 9 (Reviews carousel) — quote-mark accent + reorder testimonial blocks
=============================================================================
Source: v1 Customizer Additional CSS (post 471, "Reviews Carousel Placeholder").
v2-spec: reviews container uses `.custom-reviews` class.
============================================================================= */
.custom-reviews .elementor-main-swiper {
position: relative !important; /* Elementor sets position:static on swiper outer — override so :before can position absolutely */
}
.custom-reviews .elementor-main-swiper:before {
content: '"';
position: absolute;
top: 1rem;
left: 1rem;
color: #e5e7eb;
z-index: 2;
font-size: 3rem;
line-height: 1;
}
.custom-reviews .elementor-testimonial {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem;
}
.custom-reviews .elementor-testimonial .elementor-testimonial__header {
order: 2;
padding: 0;
}
.custom-reviews .elementor-testimonial .elementor-testimonial__content {
order: 1;
padding: 0;
margin-bottom: 1rem;
}
.custom-reviews .elementor-testimonial .elementor-testimonial__header .elementor-testimonial__cite .elementor-star-rating {
margin-top: 0.25rem;
margin-bottom: 1rem;
}
/* =============================================================================
Footer — social icons hover-red + CTA button polish
=============================================================================
Source: v1 Customizer Additional CSS (post 471, "footer" block).
v2-spec: CTA button uses #btn-footer id.
============================================================================= */
.elementor-social-icon:hover {
background-color: #BE1622 !important;
}
.elementor-social-icon svg {
font-size: 18px;
}
footer .elementor-icon.elementor-social-icon {
width: 40px;
height: 40px;
}
#btn-footer {
min-width: 168px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
#btn-footer .elementor-button-content-wrapper {
align-items: center;
}
#btn-footer .elementor-button-icon svg {
width: 20px;
height: 20px;
}
/* =============================================================================
Single-Product Page (Custom Product Template, Post 27)
=============================================================================
Source: v1 Customizer Additional CSS — "Detail Product" + "Products" + "Accordion".
Product-ID-specific rules below use v2 IDs (mapped from v1):
v1 1055 → v2 28 (obycat-experience)
v1 1067 → v2 87 (obycat-gran-canaria)
v1 1370 → v2 93 (dune-buggy-safari)
v1 1447 → v2 99 (barco-con-vision-submarina)
v1 1466 → v2 105 (discover-fuerteventura)
v1 1491 → v2 111 (obycat-grancanaria-adults-only)
v1 6305 → v2 117 (sabores-del-norte)
============================================================================= */
/* Hero text-editor + small description */
.video-wrapper-product .elementor-widget-text-editor {
position: relative;
filter: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
}
.video-wrapper-product p { margin: 0; }
.video-wrapper-product .small-description i {
color: #BE1622;
margin-right: 0.5rem;
}
.video-description .elementor-widget-text-editor i {
color: #BE1622;
margin-right: 0.5rem;
}
.video-description .elementor-widget-text-editor .far.fa-clock { display: none; }
/* Left content block — soft shadow + typography */
.bloc-left {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}
.bloc-left h2 {
font-size: 1.25rem;
line-height: 1.75rem;
margin-top: 0;
margin-bottom: 1rem;
font-family: "Outfit", Sans-serif;
}
.bloc-left p {
font-size: 1rem;
line-height: 1.6rem;
margin-bottom: 1rem;
}
.bloc-left h3 {
color: #1f2937;
font-family: Outfit, sans-serif;
font-size: 1.125rem;
line-height: 1.75rem;
margin-bottom: 1rem;
}
/* "Excursión incluye" block (red heading + grey text) */
.product-excursion h3 {
color: #BE1622 !important;
margin-bottom: 0.25rem !important;
margin-top: 0;
}
.product-excursion h3 i { margin-right: 0.5rem; }
.product-excursion p {
font-size: 0.875rem;
line-height: 1.25rem;
color: #374151;
margin: 0;
}
/* WooCommerce product gallery — fixed height, rounded, thumb hover-zoom */
.woocommerce div.product .product-home p.price del { display: none; }
.woocommerce div.product div.images { margin-bottom: 2rem; }
.woocommerce div.product div.images .woocommerce-product-gallery__trigger { display: none; }
.woocommerce div.product div.images.woocommerce-product-gallery .flex-viewport {
margin-bottom: 1rem;
height: 24rem !important;
border-radius: 0.5rem;
}
.woocommerce div.product div.images .flex-control-thumbs {
display: flex;
gap: 0.5rem;
}
div.product div.images .woocommerce-product-gallery__wrapper,
.woocommerce div.product div.images .woocommerce-product-gallery__image,
.woocommerce div.product div.images .woocommerce-product-gallery__image a,
.woocommerce div.product div.images img { height: 100%; }
.woocommerce div.product div.images .flex-control-thumbs li {
height: 5rem;
width: 19.5%;
overflow: hidden;
border-radius: 0.375rem;
}
.woocommerce div.product div.images .flex-control-thumbs li img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs li img:hover {
transform: scale(1.1);
}
.woocommerce div.product div.images .flex-control-thumbs li img {
opacity: 1;
object-fit: cover;
transition: all .4s;
overflow: hidden;
}
.woocommerce div.product div.images .woocommerce-product-gallery__wrapper .zoomImg {
opacity: 0 !important;
}
.woocommerce div.product div.images img {
border-radius: 0.5rem;
object-fit: cover;
}
/* Lists — bullet alternatives with check/number icons + blue/red color variants */
.list-product { margin: 0; padding: 0; }
.list-product li {
display: flex;
align-items: flex-start;
gap: 0.75rem;
margin: 0 0 12px;
padding: 0;
list-style: none;
color: #4b5563;
font-size: 1rem;
line-height: 1.75rem;
}
.list-product li i {
width: 1.5rem;
font-size: 1.125rem;
line-height: 1.75rem;
text-align: center;
}
.list-product.blue-color li i { color: #006E9B; }
.list-product.red-color li i { color: #BE1622; }
.list-product li .number-list {
width: 1.5rem;
height: 1.5rem;
font-size: 0.75rem;
line-height: 1rem;
background-color: #BE1622;
color: #fff;
display: flex;
justify-content: center;
border-radius: 50%;
align-items: center;
margin-right: 0.5rem;
margin-top: 0.25rem;
}
ul.blue-color { margin-bottom: 2rem; }
ul.red-color { margin-bottom: 1.5rem; }
.product-dunny li { font-size: 0.875rem; line-height: 1.25rem; }
.product-dunny li i { font-size: 1.25rem; line-height: 1.75rem; }
.product-dunny li strong { font-size: 1rem; line-height: 1.75rem; color: #1f2937; }
/* Price (Single-Product Hero — white text, large, with del strike + ins price) */
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product p.price,
.woocommerce:where(body:not(.woocommerce-uses-block-theme)) div.product span.price {
color: #ffffff;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
margin: 0;
}
.woocommerce .elementor-widget-woocommerce-product-price .price {
display: flex;
gap: 0.5rem;
align-items: center;
}
.woocommerce .elementor-widget-woocommerce-product-price .price del {
order: 2;
color: #d1d5db;
opacity: 1;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 400;
}
.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
text-decoration: none;
}
/* Inline product meta blocks (spots/fire, informations, reviews) */
.product-spots p { align-items: center; display: flex; gap: 0.25rem; }
.product-spots .fa-fire { font-size: 20px; }
.product-informations p { font-size: 0.875rem; line-height: 1.25rem; color: #4b5563; }
.product-informations p i { color: #006E9B; width: 1.25rem; margin-right: 0.75rem; }
.product-reviews {
background: #f9fafb;
padding: 0.75rem;
border-radius: 0.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #6b7280;
font-size: 0.75rem;
line-height: 1rem;
}
.product-reviews .star-reviews {
color: #facc15;
font-size: 0.875rem;
line-height: 1.25rem;
}
.product-reviews .reviews-perc {
font-weight: 700;
color: #1f2937;
font-size: 0.875rem;
line-height: 1.25rem;
}
.product-residents p { color: #006E9B; }
#phone-product { display: block; }
/* Booking column (Turitop widget) + info-block — soft shadow */
.product-book,
.bloc-info {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.product-turitop { text-align: center; }
.product-turitop .turitop-widget {
background-color: #fff;
padding: 1rem;
border-style: solid;
border-width: 1px;
border-color: #E5E7EB;
border-radius: 0.25rem;
}
.product-turitop i.fa-calendar-alt {
color: #d1d5db;
font-size: 2.25rem;
line-height: 2.5rem;
margin-bottom: 0.5rem;
}
.product-turitop .turitop-title {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #9ca3af;
margin-bottom: 1rem;
}
.secure-ssl {
color: #9ca3af;
font-size: 0.75rem;
line-height: 1rem;
margin-top: 0.75rem;
}
.secure-ssl i { opacity: 0.5; }
/* Logistik row (2 info-boxes side by side) */
.logistik-bloc {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
}
.logistik-bloc .bloc-wrap {
padding: 1rem;
background-color: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 0.25rem;
flex: 1;
}
.logistik-bloc .bloc-wrap strong { color: #006E9B; }
.logistik-bloc .bloc-wrap .text-por {
font-size: 0.875rem;
line-height: 1.25rem;
color: #6b7280;
}
/* Requirement block (dark-red heading) */
.product-requirement h3 {
font-size: 1.125rem;
line-height: 1.75rem;
color: #970D0D !important;
margin-bottom: 0.5rem;
margin-top: 0;
font-family: Outfit, sans-serif;
}
.product-requirement p {
font-size: 1rem;
line-height: 1.5rem;
color: #374151;
margin: 0;
}
/* Bottom cross-sell teasers (4 link-blocks with gradient icon + text) */
.bottom-product a.link-bloc .elementor-widget-icon {
height: 3.5rem;
width: 152px;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
background-image: linear-gradient(to bottom right, #ef4444, #dc2626);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
border-radius: 0.25rem;
}
.bottom-product a.link-bloc .elementor-widget-icon .elementor-icon { display: block; }
.bottom-product a.link-bloc .text-page { font-weight: 700; color: #1f2937; }
.bottom-product a.link-bloc {
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.bottom-product a.link-bloc:hover .elementor-widget-icon .elementor-icon svg {
transform: scale(1.1);
}
.bottom-product a.link-bloc:hover .elementor-heading-title { color: #BE1622; }
/* Accordion: globally hidden, per-product unlock + styling */
.section-accordion.e-con > .e-con-inner { max-width: 56rem !important; }
.accordion-global {
display: none;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.accordion-global .e-n-accordion-item {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
border-radius: 0.5rem;
}
.accordion-fuerteventura .e-n-accordion-item:hover {
border-radius: 0.5rem;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.accordion-global .e-n-accordion .e-n-accordion-item .e-n-accordion-item-title {
justify-content: space-between;
border-color: #e5e7eb;
}
.accordion-global .e-n-accordion-item[open] .e-n-accordion-item-title {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.accordion-fuerteventura .e-n-accordion-item[open] .e-con-full.e-flex { border: none; }
.accordion-global .e-n-accordion-item[open] .e-con-full.e-flex { border-top: none; }
/* =============================================================================
Product-ID-specific overrides — uses .postid-NN body class
=============================================================================
v1 used .product-NN body class (set by WooCommerce/theme on v1). On v2 the
body only has `.postid-NN` (WordPress core), no `.product-NN`. Both v1 and v2
have `.postid-NN`, so we use that .elementor-kit-5 for universal portability.
============================================================================= */
/* 111 (Adults Only) — black type-badge with white age-badge + red experience-badge */
.postid-111 .elementor-element.product-type { background: transparent; }
.postid-111 .elementor-element.product-type .condition-age {
color: #fff;
padding: 0.25rem 0.5rem;
background-color: #000;
border: 1px solid #fff;
border-radius: 0.25rem;
}
.postid-111 .elementor-element.product-type .type-experience {
padding: 0.25rem 0.5rem;
background-color: #BE1622;
color: #fff;
border-radius: 0.25rem;
margin-left: 0.5rem;
}
.postid-111 .elementor-element .product-excursion {
background-color: #000;
border: none;
border-radius: 0.25rem;
}
.postid-111 .elementor-element.bloc-left .product-excursion h3 { color: #BE1622 !important; }
.postid-111 .elementor-element.bloc-left .product-excursion p { color: #d1d5db; }
/* 99 (Barco Visión Submarina) — light-blue type badge + lighter water icon */
.postid-99 .video-wrapper-product .product-type {
background-color: #60a5fa;
color: #fff;
}
.postid-99 .video-wrapper-product .small-description i.fas.fa-water {
color: #93c5fd;
}
/* 105 (Discover Fuerteventura) — blue type badge */
.postid-105 .video-wrapper-product .product-type {
background-color: #2563eb;
color: #fff;
}
/* Per-product accordion unlock (visibility) */
.postid-28 .accordion-fuerteventura { display: block; } /* obycat-experience */
.postid-87 .accordion-grancanaria { display: block; } /* gran-canaria */
.postid-93 .accordion-buggy { display: block; } /* dune-buggy */
.postid-99 .accordion-submarina { display: block; } /* submarina */
.postid-105 .accordion-discover { display: block; } /* discover */
.postid-111 .accordion-adults { display: block; } /* adults-only */
/* 117 (sabores-del-norte) had hide-rule on v1, kept hidden */
.postid-117 .section-accordion { display: none; }
/* =============================================================================
Cross-sell self-link suppression — current product wird nicht als eigener teaser angezeigt.
v1 had this bug (current product showed up in its own "También te puede interesar").
v2 fix: hide the self-teaser per postid.
============================================================================= */
.postid-28 .bottom-product .cs-experience { display: none !important; }
.postid-87 .bottom-product .cs-gc { display: none !important; }
.postid-93 .bottom-product .cs-buggy { display: none !important; }
.postid-99 .bottom-product .cs-glasboat { display: none !important; }
.postid-105 .bottom-product .cs-discover { display: none !important; }
.postid-111 .bottom-product .cs-gc-adults { display: none !important; }
/* OBY-MEGA-MENU START */
/* Dropdown trigger on hover (top-level items with submenu) */
.elementor-nav-menu .menu-item-has-children { position: relative; }
.elementor-nav-menu .menu-item-has-children > .sub-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 620px;
background: #fff;
box-shadow: 0 10px 40px rgba(0,0,0,0.12);
border-radius: 0.5rem;
padding: 1.25rem 0.75rem;
z-index: 1000;
display: none;
grid-template-columns: 1fr 1fr;
gap: 0.5rem 1rem;
list-style: none;
margin: 0;
}
/* Single-column dropdowns (Sobre Obycat — short list of pages, no icons) */
.elementor-nav-menu .menu-item-25.menu-item-has-children > .sub-menu,
.elementor-nav-menu .menu-item-140.menu-item-has-children > .sub-menu {
min-width: 280px;
grid-template-columns: 1fr;
}
.elementor-nav-menu .menu-item-has-children:hover > .sub-menu,
.elementor-nav-menu .menu-item-has-children:focus-within > .sub-menu {
display: grid;
}
/* Sub-menu items */
.elementor-nav-menu .sub-menu li { padding: 0; margin: 0; list-style: none; }
.elementor-nav-menu .sub-menu li a.elementor-sub-item {
display: grid;
grid-template-columns: 2.5rem 1fr;
align-items: start;
gap: 0.625rem;
padding: 0.625rem 0.75rem;
color: #1f2937;
font-weight: 600;
font-size: 0.875rem;
line-height: 1.25rem;
text-decoration: none;
border-radius: 0.375rem;
transition: background 0.15s;
}
.elementor-nav-menu .sub-menu li a.elementor-sub-item:hover {
background: #f3f4f6;
color: #006E9B;
}
/* Icon circle */
.elementor-nav-menu .sub-menu i.emicons {
color: #006E9B;
background: #dbeafe;
border-radius: 9999px;
width: 2.5rem;
height: 2.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
grid-row: 1 / span 2;
}
/* When there is NO icon (Gran Canaria items), title spans full width */
.elementor-nav-menu .sub-menu li a.elementor-sub-item:not(:has(i.emicons)) {
grid-template-columns: 1fr;
}
/* Suppress the inline
between title and description so grid layout flows */
.elementor-nav-menu .sub-menu li a.elementor-sub-item br { display: none; }
.elementor-nav-menu .sub-menu .menu-description {
display: block;
font-size: 0.75rem;
line-height: 1.1rem;
color: #6b7280;
font-weight: 400;
margin-top: 0.125rem;
}
.elementor-nav-menu .menu-item-has-children > .sub-menu > li:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:100%;max-width:320px;}
/* OBY-MEGA-MENU END */
/* OBY-HERO-HEADING START */
/* Hero heading on Single-Product (headvisuel-section): white text over hero image */
.headvisuel-section .elementor-heading-title,
.headvisuel-section h1.elementor-heading-title,
.headvisuel-section h2.elementor-heading-title {
color: #fff;
}
/* Island name with gradient (cyan -> light blue), bg-clip: text reveals gradient */
.headvisuel-section .txt-gradient,
.txt-gradient {
background: linear-gradient(to right, #67E8F9, #BFDBFE);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
}
/* OBY-HERO-HEADING END *//* End custom CSS */