/* ── from head ── */
body {
	overflow: hidden;
}
.loader-wrap {
	display: flex;
}
.split .line {
  display: block;
  overflow: hidden;  /* recorta mientras animamos */
}

/* ── from head ── */
/* Si el usuario ya ha visto el loader, ocultamos TODO el overlay */
  .block-animation-seen #block_animation {
    display: none !important;
  }

/* ── from head ── */
.split .line {
  opacity: 0;
}

/* ── CSS Variables Grid (:root) ── */
:root {
  --site--column-count: 12;
  --site--width-inner: calc(var(--site--width) - (var(--site--margin) * 2));
  --site--gutter-total: calc(var(--site--gutter) * (var(--site--column-count) - 1));
  --site--grid-width: min(var(--site--width-inner), var(--container--full));
  --container--full: calc(100vw - (var(--site--margin) * 2));
  --container--small: calc(var(--column-width) * (var(--site--column-count) - 2) - var(--site--gutter));
  --container--main: calc(var(--column-width) * var(--site--column-count) - var(--site--gutter));
  --column-width: calc((var(--site--grid-width) - var(--site--gutter-total)) / var(--site--column-count) + var(--site--gutter));
  --column-width--1: calc(var(--column-width) * 1 - var(--site--gutter));
  --column-width--2: calc(var(--column-width) * 2 - var(--site--gutter));
  --column-width--3: calc(var(--column-width) * 3 - var(--site--gutter));
  --column-width--4: calc(var(--column-width) * 4 - var(--site--gutter));
  --column-width--5: calc(var(--column-width) * 5 - var(--site--gutter));
  --column-width--6: calc(var(--column-width) * 6 - var(--site--gutter));
  --column-width--7: calc(var(--column-width) * 7 - var(--site--gutter));
  --column-width--8: calc(var(--column-width) * 8 - var(--site--gutter));
  --column-width--9: calc(var(--column-width) * 9 - var(--site--gutter));
  --column-width--10: calc(var(--column-width) * 10 - var(--site--gutter));
  --column-width--11: calc(var(--column-width) * 11 - var(--site--gutter));
  --column-width--12: calc(var(--column-width) * 12 - var(--site--gutter));
  --column-margin--1: calc(var(--column-width) * 1);
  --column-margin--2: calc(var(--column-width) * 2);
  --column-margin--3: calc(var(--column-width) * 3);
  --column-margin--4: calc(var(--column-width) * 4);
  --column-margin--5: calc(var(--column-width) * 5);
  --column-margin--6: calc(var(--column-width) * 6);
  --column-margin--7: calc(var(--column-width) * 7);
  --column-margin--8: calc(var(--column-width) * 8);
  --column-margin--9: calc(var(--column-width) * 9);
  --column-margin--10: calc(var(--column-width) * 10);
  --column-margin--11: calc(var(--column-width) * 11);
  --column-margin--12: calc(var(--column-width) * 12);
  --breakout-start: [full-start] minmax(0, 1fr) [content-start];
  --breakout-end: [content-end] minmax(0, 1fr) [full-end];
  --grid-breakout-single: var(--breakout-start) minmax(0, var(--site--grid-width)) var(--breakout-end);
  --grid-breakout: var(--breakout-start) repeat(var(--site--column-count), minmax(0, calc((var(--site--grid-width) - var(--site--gutter-total)) / var(--site--column-count)))) var(--breakout-end);
  --grid-main: repeat(var(--site--column-count), minmax(0, 1fr));
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --font-weight--inherit: inherit;
  --font-weight--100: 100;
  --font-weight--200: 200;
  --font-weight--300: 300;
  --font-weight--400: 400;
  --font-weight--500: 500;
  --font-weight--600: 600;
  --font-weight--700: 700;
  --font-weight--800: 800;
  --font-weight--900: 900;
  --text-transform--none: none;
  --text-transform--uppercase: uppercase;
  --text-transform--capitalize: capitalize;
  --text-transform--lowercase: lowercase;
  --text-transform--inherit: inherit;
}
* {
	vertical-align: bottom;
}
body {
	font-weight: var(--text-main--font-weight);
	text-transform: var(--text-main--text-transform);
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
}
label {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	margin-top: 0;
	margin-bottom: 0;
}
button {
	background-color: unset;
	padding: unset;
	text-align: inherit;
}
button:not(:disabled) {
	cursor: pointer;
}
video {
	width: 100%;
	object-fit: cover;
}
video.wf-empty {
	padding: 0;
}
svg {
	max-width: 100%;
}
section, header, footer {
	position: relative;
}
@media (prefers-color-scheme: light) {
	option {
		color: black;
	}
}
img::selection {
	background: transparent;
}
a:not([class]) {
	text-decoration: underline;
}
ul:where([class]),
ol:where([class]) {
	list-style: "";
	margin-bottom: 0;
	padding-left: 0;
}
li:where([class]) {
	margin-bottom: 0;
}
.w-richtext a {
	position: relative;
	z-index: 4;
}
[class*="u-text-style-"] > :where(h1,h2,h3,h4,h5,h6,p,blockquote) {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-wrap: inherit;
	margin-top: inherit;
	margin-bottom: inherit;
}
:not(.u-margin-trim-off, .u-block-gap) > :first-child,
:not(.u-margin-trim-off, .u-block-gap) > :not(:not(.w-condition-invisible) ~ :not(.w-condition-invisible)) {
	margin-top: 0;
}
:not(.u-margin-trim-off, .u-block-gap) > :last-child,
:not(.u-margin-trim-off, .u-block-gap) > :not(:has(~ :not(.w-condition-invisible))) {
	margin-bottom: 0;
}
.u-hide-if-empty:empty,
.u-hide-if-empty:not(:has(> :not(.w-condition-invisible))),
.u-hide-if-empty-cms:not(:has(.w-dyn-item)),
.w-richtext[class*="u-text-style-"] > :not(h1,h2,h3,h4,h5,h6,p,blockquote),
.u-embed-js,
.u-embed-css {
	display: none !important;
}
.u-line-clamp-1, .u-line-clamp-2, .u-line-clamp-3, .u-line-clamp-4 {
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.u-line-clamp-2 { -webkit-line-clamp: 2; }
.u-line-clamp-3 { -webkit-line-clamp: 3; }
.u-line-clamp-4 { -webkit-line-clamp: 4; }
[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible,
.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
	outline: 0.125rem solid var(--theme--text);
	outline-offset: 0.25rem;
}
.w-checkbox-input--inputType-custom.w--redirected-focus,
.w-form-formradioinput--inputType-custom.w--redirected-focus {
	box-shadow: none;
}
.u-block-gap {
	--gap: var(--space--2);
	--gap-x: var(--gap);
	--gap-y: var(--gap);
}
.u-block-gap > * {
	margin-inline: calc(var(--gap-x) / 2);
	margin-top: var(--gap-y);
	vertical-align: inherit;
}
:where(.u-block-gap > *) {
	display: inline-block;
}
.u-block-gap::before {
	content: "";
	display: block;
	margin-bottom: calc(var(--gap-y) * -1);
}
.u-block-gap-vertical {
	--gap: 0;
	--margin: var(--gap);
}
.u-block-gap-vertical > * {
	margin-top: var(--margin);
	margin-bottom: 0;
}
.u-gap-0 { --gap: 0; }
.u-gap-1 { --gap: var(--space--1); }
.u-gap-2 { --gap: var(--space--2); }
.u-gap-3 { --gap: var(--space--3); }
.u-gap-4 { --gap: var(--space--4); }
.u-gap-5 { --gap: var(--space--5); }
.u-gap-6 { --gap: var(--space--6); }
.u-gap-7 { --gap: var(--space--7); }
.u-gap-8 { --gap: var(--space--8); }
.u-gap-gutter { --gap: var(--site--gutter); }
.u-gap-row-0 { --gap-y: 0; }
.u-gap-row-1 { --gap-y: var(--space--1); }
.u-gap-row-2 { --gap-y: var(--space--2); }
.u-gap-row-3 { --gap-y: var(--space--3); }
.u-gap-row-4 { --gap-y: var(--space--4); }
.u-gap-row-5 { --gap-y: var(--space--5); }
.u-gap-row-6 { --gap-y: var(--space--6); }
.u-gap-row-7 { --gap-y: var(--space--7); }
.u-gap-row-8 { --gap-y: var(--space--8); }
.u-gap-row-gutter { --gap-y: var(--site--gutter); }
.u-child-contain > * {
	display: inline-block;
	width: 100%;
	max-width: inherit;
	margin-top: 0;
}
[data-padding-top="none"] { padding-top: var(--section-space--none); }
[data-padding-bottom="none"] { padding-bottom: var(--section-space--none); }
[data-padding-top="small"] { padding-top: var(--section-space--small); }
[data-padding-bottom="small"] { padding-bottom: var(--section-space--small); }
[data-padding-top="main"] { padding-top: var(--section-space--main); }
[data-padding-bottom="main"] { padding-bottom: var(--section-space--main); }
[data-padding-top="large"] { padding-top: var(--section-space--large); }
[data-padding-bottom="large"] { padding-bottom: var(--section-space--large); }
.wf-design-mode .g_clickable_wrap {
	z-index: 0;
}
.g_clickable_wrap a[href="#"] {
	display: none;
}
.g_clickable_wrap a[href="#"] ~ button {
	display: block;
}

/* ── Theme colors light/dark ── */
/* theme light */
:root,
[data-theme="light"],
[data-theme="dark"] [data-theme="invert"] {
	--theme--background: var(--swatch--light);
  --theme--text: var(--swatch--dark);
  --theme--border: var(--swatch--dark-fade);
  /* button solid */
	--button--background: var(--swatch--transparent);
  --button--text: var(--swatch--acent);
  --button--border: var(--swatch--acent);
	--button--background-hover: var(--swatch--acent);
  --button--text-hover: var(--swatch--light);
  --button--border-hover: var(--swatch--transparent);
  /* button outlined */
	--button-outlined--background: var(--swatch--transparent);
  --button-outlined--text: var(--swatch--acent);
  --button-outlined--border: var(--swatch--acent);
	--button-outlined--background-hover: var(--swatch--acent);
  --button-outlined--text-hover: var(--swatch--light);
  --button-outlined--border-hover: var(--swatch--transparent);
	/* link */
	--link--text: var(--swatch--dark);
	--link--text-hover: var(--swatch--dark-fade);
	--link--text-active: var(--swatch--brand);
}
/* theme dark */
[data-theme="dark"],
[data-theme="invert"],
[data-theme="light"] [data-theme="invert"] {
	--theme--background: var(--swatch--dark);
  --theme--text: var(--swatch--light);
  --theme--border: var(--swatch--light-fade);
  /* button solid */
	--button--background: var(--swatch--brand);
  --button--text: var(--swatch--light);
  --button--border: var(--swatch--brand);
	--button--background-hover: var(--swatch--light);
  --button--text-hover: var(--swatch--dark);
  --button--border-hover: var(--swatch--light);
  /* button outlined */
	--button-outlined--background: var(--swatch--transparent);
  --button-outlined--text: var(--swatch--light);
  --button-outlined--border: var(--swatch--brand);
	--button-outlined--background-hover: var(--swatch--brand);
  --button-outlined--text-hover: var(--swatch--light);
  --button-outlined--border-hover: var(--swatch--brand);
	/* link */
	--link--text: var(--swatch--light);
	--link--text-hover: var(--swatch--light-fade);
	--link--text-active: var(--swatch--brand);
}
/* button outlined */
[data-button-style="outlined"] {
	--button--background: var(--button-outlined--background);
	--button--text: var(--button-outlined--text);
	--button--border: var(--button-outlined--border);
	--button--background-hover: var(--button-outlined--background-hover);
	--button--text-hover: var(--button-outlined--text-hover);
	--button--border-hover: var(--button-outlined--border-hover);
}
/* apply colors */
:is(c, :where([data-theme]:not([data-theme="inherit"]))) {
	background-color: var(--theme--background);
	color: var(--theme--text);
}

/* ── Fluid typography/spacing ── */
/* https://fluidbuilder.webflow.io/?design=108&max=140&min=20&f&g=--site--margin,3,1_--size--2rem,2,1.75_--size--2-5rem,2.5,2_--size--3rem,3,2.25_--size--3-5rem,3.5,2.375_--size--4rem,4,2.5_--size--4-5rem,4.5,2.75_--size--5rem,5,3_--size--5-5rem,5.5,3.25_--size--6rem,6,3.5_--size--6-5rem,6.5,3.75_--size--7rem,7,4_--size--7-5rem,7.5,4.25_--size--8rem,8,4.5_--size--8-5rem,8.5,4.75_--size--9rem,9,5_--size--9-5rem,9.5,5.25_--size--10rem,10,5.5_--size--11rem,11,5.75_--size--12rem,12,6_--size--13rem,13,6.5_--size--14rem,14,7_--size--15rem,15,7.5_--size--16rem,16,8&g=:1.37,1.26:--display--font-size,8.26,4_--h1--font-size,6.03,3.18_--h2--font-size,4.4,2.52_--h3--font-size,3.21,2_--h4--font-size,2.35,1.59_--h5--font-size,1.71,1.26_--h6--font-size,1.25,1,t&g=:1.2,1.14:--text-large--font-size,1.26,1.14_--text-main--font-size,1.05,1_--text-small--font-size,0.875,0.875,t&g=:1.49,1.4:--section-space--large,13.48,7.23_--section-space--main,9.05,5.17_--section-space--small,6.07,3.69_--space--8,4.08,2.64_--space--7,2.74,1.88_--space--6,1.84,1.34_--space--5,1.23,0.96_--space--4,0.83,0.69_--space--3,0.56,0.49_--space--2,0.37,0.35_--space--1,0.25,0.25,t */
:root {
	--site--margin: clamp(1rem, 0.546rem + 2.27vw, 3.7264rem);
	--size--2rem: clamp(1.75rem, 1.694rem + 0.28vw, 2.0896rem);
	--size--2-5rem: clamp(2rem, 1.886rem + 0.57vw, 2.6824rem);
	--size--3rem: clamp(2.25rem, 2.08rem + 0.85vw, 3.272rem);
	--size--3-5rem: clamp(2.375rem, 2.119rem + 1.28vw, 3.9096rem);
	--size--4rem: clamp(2.5rem, 2.16rem + 1.7vw, 4.544rem);
	--size--4-5rem: clamp(2.75rem, 2.352rem + 1.99vw, 5.1368rem);
	--size--5rem: clamp(3rem, 2.546rem + 2.27vw, 5.7264rem);
	--size--5-5rem: clamp(3.25rem, 2.738rem + 2.56vw, 6.3192rem);
	--size--6rem: clamp(3.5rem, 2.932rem + 2.84vw, 6.9088rem);
	--size--6-5rem: clamp(3.75rem, 3.124rem + 3.13vw, 7.5016rem);
	--size--7rem: clamp(4rem, 3.318rem + 3.41vw, 8.0912rem);
	--size--7-5rem: clamp(4.25rem, 3.512rem + 3.69vw, 8.6808rem);
	--size--8rem: clamp(4.5rem, 3.704rem + 3.98vw, 9.2736rem);
	--size--8-5rem: clamp(4.75rem, 3.898rem + 4.26vw, 9.8632rem);
	--size--9rem: clamp(5rem, 4.09rem + 4.55vw, 10.456rem);
	--size--9-5rem: clamp(5.25rem, 4.284rem + 4.83vw, 11.0456rem);
	--size--10rem: clamp(5.5rem, 4.478rem + 5.11vw, 11.6352rem);
	--size--11rem: clamp(5.75rem, 4.556rem + 5.97vw, 12.9104rem);
	--size--12rem: clamp(6rem, 4.636rem + 6.82vw, 14.1824rem);
	--size--13rem: clamp(6.5rem, 5.022rem + 7.39vw, 15.3648rem);
	--size--14rem: clamp(7rem, 5.41rem + 7.95vw, 16.544rem);
	--size--15rem: clamp(7.5rem, 5.796rem + 8.52vw, 17.7264rem);
	--size--16rem: clamp(8rem, 6.182rem + 9.09vw, 18.9088rem);
	--display--font-size: clamp(4rem, 3.032rem + 4.84vw, 9.8088rem);
	--h1--font-size: clamp(3.18rem, 2.532rem + 3.24vw, 7.0668rem);
	--h2--font-size: clamp(2.52rem, 2.092rem + 2.14vw, 5.0848rem);
	--h3--font-size: clamp(2rem, 1.724rem + 1.38vw, 3.6516rem);
	--h4--font-size: clamp(1.59rem, 1.418rem + 0.86vw, 2.6252rem);
	--h5--font-size: clamp(1.26rem, 1.158rem + 0.51vw, 1.8732rem);
	--h6--font-size: clamp(1rem, 0.944rem + 0.28vw, 1.3396rem);
	--text-large--font-size: clamp(1.14rem, 1.112rem + 0.14vw, 1.3048rem);
	--text-main--font-size: clamp(1rem, 0.988rem + 0.06vw, 1.0692rem);
	--text-small--font-size: clamp(0.875rem, 0.875rem + 0vw, 0.875rem);
	--section-space--large: clamp(7.23rem, 5.81rem + 7.1vw, 15.752rem);
	--section-space--main: clamp(5.17rem, 4.288rem + 4.41vw, 10.4612rem);
	--section-space--small: clamp(3.69rem, 3.15rem + 2.7vw, 6.934rem);
	--space--8: clamp(2.64rem, 2.312rem + 1.64vw, 4.6048rem);
	--space--7: clamp(1.88rem, 1.684rem + 0.98vw, 3.0536rem);
	--space--6: clamp(1.34rem, 1.226rem + 0.57vw, 2.0224rem);
	--space--5: clamp(0.96rem, 0.898rem + 0.31vw, 1.3292rem);
	--space--4: clamp(0.69rem, 0.658rem + 0.16vw, 0.8812rem);
	--space--3: clamp(0.49rem, 0.474rem + 0.08vw, 0.5856rem);
	--space--2: clamp(0.35rem, 0.346rem + 0.02vw, 0.3764rem);
	--space--1: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
}

/* ── Slider active state ── */
.slider_item.is-active .slider_overlay {
	opacity: 0;
}
.slider_item.is-active .slider_category {
	opacity: 1;
}

/* ── Swiper photos ── */
/* Project CSS */
.swiper-slide.is-photos {
	display: none;
}
.swiper-slide.is-photos:first-child {
	display: block;
}

/* ── ALL PAGES CSS / responsive ── */
/* ALL PAGES CSS */
/* Your max width code replaces the code below */
@media only screen and (min-width: 1440px) {
	body {font-size: 14.4px;}
}
/* Desktop Only CSS (i.e. hover states) */
@media only screen and (min-width: 992px) {
}
/* Main Variables */
:root {
  --main-dark: black;
  --main-light: white;
}
/* Global Styles */
::selection {
	background: #d3fd50;
  color: black;
  text-shadow: none;
}
img::selection, svg::selection {
	background: transparent;
}
/* Link color inherits from parent font color  */
a {
	color: inherit;
}
/* Disable / enable clicking on an element and its children  */
.no-click {
	pointer-events: none;
}
.can-click {
	pointer-events: auto;
}
/* Target any element with a certain "word" in the class name  */
[class*="spacer"] {
}
/* Card Hover */
.team_card:hover .team_underline {
	width: 100%;
  text-color: white;
}
/* Cursor */
body:hover .cursor {
	opacity: 1;
}
.cursor {
	pointer-events: none;
}

/* ── Nav variables ── */
:root {
	--nav--height: 6rem;
	--nav--radius: var(--radius--small);
	--nav--spacing-outer-vertical: var(--site--margin);
	--nav--spacing-inner-horizontal: var(--space--5);
	--nav--container: var(--container--main);
	--nav--icon-thickness: var(--border-width--main);
	--nav--hamburger-thickness: var(--nav--icon-thickness);
	--nav--hamburger-gap: var(--space--2);
	--nav--hamburger-rotate: 45;
	--nav--menu-open-duration: 400ms;
	--nav--menu-close-duration: 400ms;
	--nav--dropdown-duration: 500ms;
	--nav--dropdown-open-duration: 400ms;
	--nav--dropdown-delay: 0ms;
}
/* on smaller screens */
@media (width < 65em) {
	/* disable scroll when mobile menu is open */
	body:has(.nav_component .w-nav-button.w--open) { overflow: hidden; }
}
/* on larger screens */
@container (min-width: 65em) {
	/* show desktop nav & dropdown backdrop */
	.nav_wrap.is-desktop, .nav_dropdown_backdrop { display: block; }
	/* hide mobile nav & mobile menu backdrop */
	.nav_wrap.is-mobile, .nav_menu_backdrop { display: none; }
}
/* dropdown list: initial state */
html:not(.wf-design-mode) .nav_dropdown_component > .w-dropdown-list {
	/* removes display none to enable css transitions */
	display: grid !important;
 grid-template-columns: minmax(0, 1fr);
	/* sets list to 0 height by default */
 grid-template-rows: 0fr;
 transition: grid-template-rows var(--nav--dropdown-duration);
	/* makes list content not focusable when closed */
	visibility: hidden;
	opacity: 0;
}
/* makes list content focusable when opened */
html:not(.wf-design-mode) .nav_dropdown_component > .w-dropdown-list.w--open {
	visibility: visible;
	opacity: 1;
}
/* sets list child to overflow hidden to enable css height transition */
.nav_dropdown_component > .w-dropdown-list > * {
	overflow: hidden;
}
/* set open state of dropdown list */
.nav_dropdown_component:has(> .w-dropdown-toggle[aria-expanded="true"]) > .w-dropdown-list {
	--nav--dropdown-duration: var(--nav--dropdown-open-duration);
	grid-template-rows: 1fr;
}
/* on desktop, delay dropdown opening if another dropdown is open */
.nav_wrap.is-desktop:has(.nav_dropdown_component > .w-dropdown-toggle.w--open[aria-expanded="false"]) .nav_dropdown_component:has(> .w--open[aria-expanded="true"]) > .w-dropdown-list {
	transition-delay: var(--nav--dropdown-duration);
}
/* reveal dropdown backdrop when dropdown open */
.nav_dropdown_backdrop {
	transition: opacity var(--nav--dropdown-duration);
}
body:has(.nav_dropdown_component > [aria-expanded="true"]) .nav_dropdown_backdrop {
	opacity: 1;
}
/* rotate arrow inside open dropdown */
.w-dropdown-toggle[aria-expanded="true"] .nav_links_svg {
	transform: rotate(-180deg);
}
/* fade out other dropdown links when link is hovered */
@media (hover: hover) and (pointer: fine) {
	body:has(.nav_dropdown_item:hover) .nav_dropdown_item:not(:hover) > * > * {
		opacity: 0.5;
	}
}
/* animate first hamburger line when opened */
.nav_component .w-nav-button.w--open > * > :first-child {
	transform: translateY(calc(var(--nav--hamburger-thickness) * 0.5 + var(--nav--hamburger-gap) * 0.5)) rotate(calc(var(--nav--hamburger-rotate) * -1deg));
}
/* animate second hamburger line when opened */
.nav_component .w-nav-button.w--open > * > :last-child {
	transform: translateY(calc(var(--nav--hamburger-thickness) * -0.5 + var(--nav--hamburger-gap) * -0.5)) rotate(calc(var(--nav--hamburger-rotate) * 1deg));
}
/* reveal mobile menu backdrop on menu open */
.nav_menu_backdrop {
	transition: opacity var(--nav--menu-close-duration);
}
.nav_component:has(.w-nav-button.w--open) .nav_menu_backdrop {
	opacity: 1;
}
/* menu animations */
@keyframes menuOpen {
 from { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
 to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes menuClose {
 from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
 to { clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }
}
/* menu open */
.nav_component:has(.w-nav-button.w--open) .w-nav-menu {
	animation: menuOpen var(--nav--menu-open-duration) ease-in-out forwards;
}
/* menu close */
.nav_component:has(.w-nav-button:not(.w--open)) .w-nav-menu {
	animation: menuClose var(--nav--menu-close-duration) ease-in-out forwards;
}
/* position overflow to top of screen */
.nav_component .w-nav-overlay {
 top: 0;
 min-height: 100vh;
}

/* ── Video #1 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

/* ── Video #2 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

/* ── Video #3 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

/* ── Video #4 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

/* ── Video promo ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;        
    }
    .promo-video {
      border-radius: 1rem;
    }

/* ── Video promo #2 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;        
    }
    .promo-video {
      border-radius: 1rem;
    }

/* ── Video border-radius ── */
video {
        object-fit: cover;
        width: 100%;
        height: 101%;
       border-radius: 0px;
    }

/* ── Video border-radius #2 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 101%;
       border-radius: 0px;
    }

/* ── Video #8 ── */
video {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

/* ── Fixes post-migración ── */

/* 1. Body dark background: la variable CSS generada por Webflow está corrupta,
      el navegador la ignora y el body queda blanco. Sobreescribimos directamente. */
.body {
  background-color: #252a1e;
}

/* 2. Secciones hero y servicios: fondo explícito para eliminar cualquier línea
      blanca/gris entre secciones debida a variables CSS corruptas o gaps de herencia. */
.hero_wrap.section.dark,
.servicios_wrap.section.dark {
  background-color: #252a1e;
}

/* 3. Slider: altura fija en viewport units.
      Mantenemos display:flex del .slider para que las flechas y pagination_wrap
      (position:absolute que usan left:-30rem/30rem relativos al centro flex) se
      posicionen correctamente. La altura del mask y slides ya es explícita, no
      depende de herencia porcentual. */
.slider.w-slider {
  background: none;
  height: 95svh;
  min-height: 600px;
}

/* 4. Máscara: altura y anchura explícitas.
      width:100% es crítico: con display:flex en el slider y todos los slides
      siendo position:absolute (sin contenido en flujo), el mask colapsaría a
      0px de ancho sin este override. */
.mask.w-slider-mask {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
  height: 95svh !important;
  min-height: 600px !important;
}

/* 5. Todos los slides: absolutamente posicionados con la misma altura fija.
      Nunca cambia. JS sólo toca opacity. */
.slide.w-slide {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 95svh !important;
  min-height: 600px !important;
  display: block !important;
}

/* 6. Flechas y pagination: suben de bottom:3rem a 5rem para no pegarse al borde
      ni solaparse con el contenido inferior del slide. */
.prev.w-slider-arrow-left {
  bottom: 5rem !important;
}
.next.w-slider-arrow-right {
  bottom: 5rem !important;
}
.pagination_wrap {
  bottom: 5rem !important;
}

/* ── page_wrap overflow fix ──
   main.css pone overflow:clip en page_wrap, lo que convierte a los hijos
   position:fixed en position:absolute (bug Chromium conocido).
   Lo neutralizamos aquí. El slider tiene su propio overflow:hidden. */
.page_wrap {
  overflow: visible !important;
}

/* ── duo-section: panel deslizante (formulario de contacto) ──
   position:fixed en main.css + translateX(100%) lo mantiene fuera de pantalla.
   La transición CSS maneja el slide-in al añadir la clase success-form. */
section.duo-section,
.duo-section {
  position: fixed !important;
  inset: 0% !important;
  z-index: 2000 !important;
  transform: translateX(100%) !important;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
.duo-section.success-form {
  transform: translateX(0%) !important;
}

/* ── faq-answer-wrapper: cascade fix ──
   tanzania.css solo declara overflow:hidden (sin height:0 ni transition),
   lo que aplasta las reglas de main.css. extracted.css carga último → gana. */
.faq-answer-wrapper {
  height: 0;
  transition: height 0.5s ease;
}

/* ── sr-only utility ── */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
/* ════════════════════════════════════════════════════════════════════════════
   BLOQUES REPLICADOS DEL WEBFLOW ORIGINAL (designer + CSS publicado)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Sección blog de la home (oculta en el designer de Webflow) ──────────── */
.post_1 {
  z-index: 1;
  background-color: var(--swatch--dark);
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}
.post_2 {
  z-index: 1;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
  position: relative;
}
.post_3 {
  z-index: 1;
  justify-content: center;
  align-items: flex-end;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}
.link-block {
  z-index: 10;
  cursor: pointer;
  position: absolute;
  inset: 0%;
}
/* Las cards cuadran su altura con la columna del grid */
.blog_content.u-column-12.u-grid-column-3 .blog_inner {
  min-height: 34rem;
}
@media screen and (max-width: 767px) {
  .blog_content.u-column-12.u-grid-column-3 .blog_inner { min-height: 26rem; }
}
.girl-video { object-fit: cover; }
.masai-video { object-fit: cover; margin-left: -30%; }
@media screen and (max-width: 479px) {
  .masai-video { margin-left: 0%; }
}
/* Los vídeos llenan su contenedor con forma (cuart/arc/fullarc) */
.blog_wrap .img_blog_wrap_cuart { height: 75%; }
.blog_wrap .img_blog_wrap_cuart .w-embed,
.blog_wrap .img_blog_wrap_arc .w-embed,
.blog_wrap .img_blog_wrap_fullarc .w-embed,
.blog_wrap .img_blog_wrap_cuart .video-container,
.blog_wrap .img_blog_wrap_arc .video-container,
.blog_wrap .img_blog_wrap_fullarc .video-container {
  width: 100%;
  height: 100%;
}
.blog_wrap .img_blog_wrap_cuart video,
.blog_wrap .img_blog_wrap_arc video,
.blog_wrap .img_blog_wrap_fullarc video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog_wrap .masai-video { margin-left: 0; }

.blog_wrap .btn_blog_wrap {
  grid-column: 1 / -1;
  width: 100%;
  padding-top: 4rem;
}

/* ── Post archive slider (réplica del slick original del blog) ───────────── */
.post_archive_wrap .wrapper { overflow: hidden; }
.post_archive_wrap .list { will-change: transform; }

/* ── Galería Semana Santa: w-slider con animación slide ──────────────────── */
.w-slider-mask { white-space: nowrap; }
.w-slide { white-space: normal; vertical-align: top; }
.w-slider-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: rgba(34, 34, 34, 0.4);
  margin: 0 3px 0.5em;
  cursor: pointer;
  transition: background-color 0.2s;
}
.w-slider-dot.w-active { background-color: #222; }

/* ── Lightbox (réplica del w-lightbox de Webflow) ────────────────────────── */
.tz-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.tz-lightbox.is-open { display: flex; }
.tz-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
}
.tz-lightbox-img {
  position: relative;
  max-width: 86vw;
  max-height: 86vh;
  border-radius: 0.5rem;
  z-index: 1;
}
.tz-lightbox button {
  position: absolute;
  z-index: 2;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  padding: 1rem;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.tz-lightbox button:hover { opacity: 1; }
.tz-lightbox-close { top: 1rem; right: 1.5rem; }
.tz-lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); }
.tz-lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); }

/* ── TripAdvisor — carrusel propio con auto-motion ───────────────────────── */
.trip_carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.trip_track {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  width: max-content;
  will-change: transform;
}
.trip_card {
  flex: 0 0 auto;
  width: 24rem;
  background-color: var(--swatch--light-secondary);
  color: var(--swatch--dark);
  border: 1px solid rgba(37, 42, 30, 0.07);
  border-radius: var(--size--1rem);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.trip_card_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.trip_card_name {
  font-family: Cabinetgrotesk, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
}
.trip_card_meta {
  font-size: 0.78rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.trip_rating { display: flex; gap: 0.28rem; }
.trip_rating span {
  display: block;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: var(--swatch--acent);
}
.trip_card_title {
  font-family: Cabinetgrotesk, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.25;
}
.trip_card_text {
  font-size: 0.93rem;
  line-height: 1.5;
  opacity: 0.8;
}
.trip_card_brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  font-size: 0.8rem;
  opacity: 0.7;
}
.trip_card_brand svg { width: 1.5rem; height: auto; }
.trip_summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding-top: 2.5rem;
  width: 100%;
}
.trip_summary_score {
  font-family: Cabinetgrotesk, sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
}
.trip_summary_link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.trip_summary_link:hover { color: var(--swatch--dark); opacity: 0.75; }
@media screen and (max-width: 479px) {
  .trip_card { width: 80vw; padding: 1.5rem; }
}

/* ── Slider servicios: alinear píldora de paginación con las flechas ────────
   (la píldora cuelga de bottom + margin-bottom 3.1rem y quedaba ~48px más
   alta que los bullets de las flechas; bajamos SOLO la píldora) ──────────── */
.servicios_wrap .pagination_wrap {
  margin-bottom: 0.1rem; /* (6rem flecha − 5.8rem píldora) / 2 */
}
@media screen and (max-width: 767px) {
  .servicios_wrap .pagination_wrap {
    margin-bottom: -0.3rem; /* flechas 50px vs píldora 3.7rem */
  }
}

/* ── Banner Semana Santa (landing eventual) ──────────────────────────────── */
.ss_banner_wrap {
  display: block;
  background-color: var(--swatch--acent);
  color: var(--swatch--dark);
  overflow: hidden;
  text-decoration: none;
  position: relative;
  z-index: 5;
}
.ss_banner_track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: ss-banner-marquee 22s linear infinite;
  will-change: transform;
}
.ss_banner_wrap:hover .ss_banner_track { animation-play-state: paused; }
.ss_banner_item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.65rem 1.2rem;
  font-family: Cabinetgrotesk, sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.ss_banner_item .ss_star { font-weight: 400; }
@keyframes ss-banner-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ss_banner_track { animation: none; }
  .trip_track { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   HERO MÓVIL — rediseño (feedback Nacho): h1 más grande, animales más grandes,
   card de texto más abajo, composición general más cuidada.
   ════════════════════════════════════════════════════════════════════════════ */
@media screen and (max-width: 479px) {
  /* El hero ocupa toda la altura; el layout reparte h1 (arriba) y card (abajo) */
  .hero_wrap.section.dark.u-vflex-center-center {
    height: 100svh;
    justify-content: flex-start;
    padding-bottom: 0;
    overflow: hidden;
  }
  .hero_layout {
    top: 0;
    flex: 1 1 auto;
    min-height: 0;
    justify-content: space-between;
    padding-top: 5.5rem;     /* deja sitio a la nav */
    padding-bottom: 2.4rem;  /* card un poco más abajo, sin pegarse al borde */
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* H1 más grande (cabía 13vw → subimos a 16vw sin desbordar "AL CORAZÓN") */
  .heading-style-display.display-hero-main {
    font-size: 16.2vw;
    line-height: 0.95em;
  }
  /* "DEL SALÓN" (text-span) en su escala relativa */
  .heading-style-display.display-hero-main .text-span {
    font-size: 0.62em;
  }

  /* Animales (composite elefante+león) mucho más grandes y centrados al fondo */
  .background_hero_phone { z-index: 1; }
  .main_img_phone_hero {
    width: 96%;
    max-width: 30rem;
    left: 50%;
    right: auto;
    bottom: 0;
    transform: translateX(-50%);
  }
  .pattern_phone_hero { opacity: 0.12; }
  /* Degradado inferior: oscurece bajo la card para legibilidad y funde la base */
  .image-7 {
    width: 130%;
    max-width: none;
    left: 50%;
    right: auto;
    bottom: -6%;
    transform: translateX(-50%);
    opacity: 0.95;
  }

  /* Card de texto: pegada abajo, por encima de los animales, glass legible */
  .conetn-hero-cta {
    z-index: 30;
    margin-top: 0;
    width: 100%;
    background-color: rgba(37, 42, 30, 0.32);
    -webkit-backdrop-filter: blur(16px);
            backdrop-filter: blur(16px);
    border: 0.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 1.6rem;
    gap: 0.9rem;
    padding: 1.4rem 1rem 1.2rem;
  }
  .h1-hero-false {
    width: 100%;
    font-size: 1.05rem;
    line-height: 1.3;
    text-align: center;
    color: #fff;
  }
}

/* Pantallas muy estrechas: ablanda el h1 para que nunca desborde */
@media screen and (max-width: 360px) {
  .heading-style-display.display-hero-main { font-size: 15vw; }
}

/* ── Guarda anti scroll-horizontal fantasma en móvil ──
   Elementos decorativos absolutos (blur del hero, marquees) pueden filtrar unos
   px de overflow por debajo de 375px. overflow-x: clip lo corta sin crear scroll
   container (sticky sigue funcionando) ni containing block (el panel fixed va bien). */
html, body { overflow-x: clip; }