@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Google+Sans+Flex:opsz,wght@6..144,1..1000&family=Jura:wght@300..700&family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Poiret+One&display=swap');

* {
	word-break: normal !important;
	word-wrap: normal !important;
	overflow-wrap: normal !important;
	-webkit-hyphens: none !important;
	-moz-hyphens: none !important;
	-ms-hyphens: none !important;
	hyphens: none !important;
}

:root {

	--ink-black: #1a1a1a;
	--ink-grey: #3a3a3a;

	--dark-bg: #1a1a1a;
	--text-light: #ffffff;
	--wine-color: #ab174dff;
	--champagne-gold: #ffc84a;
	--border-style: 2px solid var(--ink-black);
	--sepia-accent: #7a6e5d;
	--paper-bg: #ffffff;

	--button-bg-dark: var(--wine-color);
	--button-bg-light: var(--champagne-gold);

	--line-subt: 6px;
	--line-body: 2px;
	--whatsapp-green: #188c43ff;

	/* Variables Centralizadas de Tipografías */
	--font-body: 'Google Sans Flex', sans-serif;
	--font-title: 'Playfair Display', serif;
	--font-subtitle: 'Poiret One', cursive;
	--font-button: 'Poiret One', cursive;
	--font-nav: 'Poiret One', cursive;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	font-family: var(--font-body);
	color: var(--ink-black);
}

/*header.....................................................*/

header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;

	/* White header background */
	background-color: #fff;
	border-bottom: var(--line-body) solid var(--wine-color);

	justify-content: center;
	align-items: center;
	transition: 0.6s;
	padding: 0vh 0vw 0vh 0vw;
	z-index: 100000;
}


.header__line {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 0 0 0;
}


.separador {
	height: 2px;
	width: 100vw;
	background: var(--ink-black);
	display: none;
	/* Hide original separator as we use border-bottom */
}

.header_logo {
	height: 6vh;
	/* Logo solid black by default as requested */
	transition: filter 0.4s ease;
}

.header__nav--divlogo:hover .header_logo {
	filter: brightness(0) invert(1);
}


.header__nav {
	display: flex;
	flex-wrap: wrap;

	position: relative;

	justify-content: center;
	align-items: stretch;
	gap: 0;
}

/* Mobile and Tablet (Vertical) + Mobile (Landscape) */
@media (max-width: 768px),
(max-height: 500px) and (max-width: 950px) {

	header,
	header.sticky {
		background: transparent;
		border: none;
		height: 0;
		/* Collapsed bar */
	}

	.header__nav {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100vh;
		background: #fff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 10001;
		opacity: 0;
		visibility: hidden;
		transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		pointer-events: none;
	}

	.header__nav.active {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
	}

	.header_logo {
		height: 4vh;
	}

	/* Logo floating independently on mobile */
	#logo-mobile-container {
		position: fixed;
		top: 2.5vh;
		left: 5vw;
		z-index: 10003;
		margin: 0;
		padding: 0;
		display: block !important;
	}

	.header__nav-- {
		margin: 2vh 0;
		width: 80%;
		display: flex;
		justify-content: center;
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.4s ease;
	}

	.header__nav.active .header__nav-- {
		opacity: 1;
		transform: translateY(0);
	}

	/* Delay effects for nav items for sophisticated feel */
	.header__nav.active .header__nav--:nth-child(1) {
		transition-delay: 0.1s;
	}

	.header__nav.active .header__nav--:nth-child(2) {
		transition-delay: 0.2s;
	}

	.header__nav.active .header__nav--:nth-child(3) {
		display: none;
	}

	/* Hide duplicate logo in list */
	.header__nav.active .header__nav--:nth-child(4) {
		transition-delay: 0.3s;
	}

	.header__nav.active .header__nav--:nth-child(5) {
		transition-delay: 0.4s;
	}

	.header__nav--div {
		font-size: 3.5vh;
		width: 100%;
		text-align: center;
	}

	/* Responsive Font Size Boost */
	p {
		font-size: 1.15rem !important;
	}

	h3 {
		font-size: 1.25rem !important;
	}

	h5 {
		font-size: 1rem !important;
	}

	.buy,
	.buy2 {
		font-size: 1.1rem !important;
	}
}

/* Hamburger Sophisticated Action Button */
.hamburger-sophisticated {
	display: none;
}

@media (max-width: 768px),
(max-height: 500px) and (max-width: 950px) {
	.hamburger-sophisticated {
		display: flex;
		position: fixed;
		top: 2vh;
		right: 5vw;
		width: 55px;
		height: 55px;
		background: #fff;
		border: 2px solid var(--ink-black);
		border-radius: 50%;
		/* CIRCLE */
		justify-content: center;
		align-items: center;
		z-index: 10005;
		cursor: pointer;
		box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		padding: 0;
	}

	.hamburger-sophisticated:active {
		transform: scale(0.95);
	}

	.hamburger-box {
		width: 22px;
		height: 14px;
		position: relative;
	}

	.hamburger-box span {
		display: block;
		position: absolute;
		width: 100%;
		height: 2px;
		background: var(--ink-black);
		transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.line-1 {
		top: 0;
	}

	.line-2 {
		top: 6.5px;
	}

	.line-3 {
		top: 13px;
	}

	.hamburger-sophisticated.active .line-1 {
		transform: translateY(6.5px) rotate(45deg);
	}

	.hamburger-sophisticated.active .line-2 {
		opacity: 0;
	}

	.hamburger-sophisticated.active .line-3 {
		transform: translateY(-6.5px) rotate(-45deg);
	}
}

.header__nav-- {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
}

.header__nav--divlogo {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.5vh 3vmin 1.5vh 4vmin;

	color: var(--ink-black);
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 2.15vh;
	transition: 0.6s;
	text-transform: lowercase;
}

.header__nav--divlogo:hover {
	background-color: var(--wine-color);
	color: #fff;
}


.header__nav--div {
	position: relative;
	display: flex;
	align-items: center;
	padding: 1.5vh 3vmin;

	color: #000;
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: clamp(18px, 2.75vh, 26px);
	transition: 0.6s;
	text-transform: lowercase;
}

.header__nav--div:last-child {
	padding-right: 4vmin;
}

.header__nav--div:hover {
	background-color: var(--ink-black);
	color: #fff;
}



header.sticky {
	padding: 0vh;
	background: #fff;
	border-bottom: var(--line-body) solid var(--wine-color);
}

header.sticky .header__nav--div {
	color: var(--ink-black);
}

header.sticky .header__nav--div:hover {
	background-color: var(--ink-black);
	color: #fff;
}

header.sticky .header__nav--divlogo {
	color: var(--ink-black);
}

header.sticky .header__nav--divlogo:hover {
	background-color: var(--wine-color);
}

header.sticky .header__line {
	padding: 0;
}

header.sticky .separador {
	background: var(--ink-black);
	height: 2px;
	display: none;
}


.whatsapp-button {
	position: fixed;
	bottom: 16vh;
	/* Puedes ajustar la distancia desde la parte inferior */
	right: 20px;
	/* Puedes ajustar la distancia desde la parte derecha */
	z-index: 1000;


	padding: 0.7vmax;

	background-color: #fff;
	border: 2px solid #000;
	backdrop-filter: blur(3px);

	transition-duration: 0.4s;
}



.whatsapp-button:hover {
	background-color: var(--whatsapp-green);
	border: 2px solid var(--whatsapp-green);
}

.whatsapp-button:hover img {
	filter: brightness(0) invert(1);
	/* Invert to white on hover since background turns black */
}

.whatsapp-button img {
	width: 4.5vmax;
	/* Ajusta el tamaño del ícono según sea necesario */
	height: auto;
	margin: auto;
	filter: brightness(0);
	/* Make WhatsApp icon total black */
}



.hidden {
	display: none;
}

/*header.....................................................*/



/*body........................................................*/

body {
	justify-content: center;
	align-items: center;
	width: 100%;
	background: #fff;
	/* White background as requested */

	background-size: cover;
	background-repeat: repeat;
	background-attachment: fixed;
}

.body-line {
	position: fixed;
	left: 5vw;
}

.body-line__line {
	height: 100vh;
	width: var(--line-body);
	background: var(--ink-black);
	/* Reverted dashed to solid if "original thickness" implied original style, but original was solid. Solid is cleaner. */
}

@media (max-width: 768px) {
	.body-line {
		display: none;
	}
}

h1 {
	position: relative;
	margin: 0 0 1.5vh 0 !important;
	color: var(--ink-black);
	letter-spacing: 0.1vw;
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(32px, 5vmin, 60px);
	text-transform: uppercase;
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

h2 {
	position: relative;
	margin: 0 0 1.5vh 0 !important;
	color: var(--ink-black);
	font-family: var(--font-title);
	font-weight: 700;
	font-size: clamp(26px, 4vmin, 48px);
	text-transform: uppercase;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

@media (max-width: 768px) {
	h2 {
		font-size: 7vw;
	}
}

h3 {
	position: relative;
	margin: 0 0 5vh 0 !important;
	padding: 0 0 0 2.5vw;
	color: var(--ink-black);
	letter-spacing: 0.1vw;
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(20px, 3vmin, 32px);
	font-style: normal;
	border-left: var(--line-subt) solid var(--wine-color);
	text-transform: none;
}

h4 {
	position: relative;
	margin: 0 0 1.5vh 0 !important;
	color: var(--ink-black);
	letter-spacing: 0.2vw;
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(18px, 3vmin, 30px);
	border-bottom: none;
	text-transform: none;
}

h5 {
	position: relative;
	margin: 0 0 3vh 0 !important;
	color: var(--ink-black);
	letter-spacing: 0.2vw;
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-size: clamp(16px, 2.4vmin, 26px);
	text-transform: none;
}

p {
	position: relative;
	margin: 0 0 3vh 0 !important;
	color: var(--ink-black);
	letter-spacing: 0.02vw;
	font-family: var(--font-body);
	font-weight: 200;
	font-size: clamp(18px, 3.2vmin, 28px);
	line-height: 1.25;
	text-align: left;
}

ul {
	list-style-type: none;
	/* Puedes cambiar 'disc' por 'circle' o 'square' según tus preferencias */
}


.bl

/*black*/
	{
	color: var(--ink-black);
}

.dg

/*dark gray*/
	{
	color: var(--ink-grey);
}

.g

/*gray*/
	{
	color: var(--sepia-accent);
}

.y

/*veish*/
	{
	color: var(--ink-black);
	text-decoration: underline;
}

.dgreen {
	color: var(--sepia-accent);
}

.br

/* brown*/
	{
	color: var(--sepia-accent);
}


.button_w,
.button_br {
	position: relative;
	display: inline-table;
	padding: 0.7vmax;
	margin: 3vmin 0vmin 0vmin 3vmin;
	background-color: transparent;
	text-align: center;
	color: #000;
	letter-spacing: 0.2vw;
	font-family: var(--font-button);
	font-weight: 700;
	font-size: 3.3vmin;
	border: 2px solid #000;
	transition-duration: 0.4s;
	text-transform: lowercase;
}


.button_w:hover,
.button_br:hover {
	background-color: var(--button-bg-dark);
	border: 2px solid var(--button-bg-dark);
	color: #fff;
}

.button_redes {
	display: flex;
	justify-content: center;
	align-items: center;

	background-color: transparent;
	border: 2px solid var(--ink-black);

	margin: 1vmax 0 1vmax 0;
	padding: 0.7vmax;

	text-align: center;
	letter-spacing: normal;
	font-family: var(--font-button);
	font-weight: 700;
	font-size: 2.5vmin;
	color: var(--ink-black);
	text-transform: lowercase;

	transition-duration: 0.4s;
}

.button_redes:hover {
	background-color: var(--button-bg-dark);
	color: var(--paper-bg);
	border: 2px solid var(--button-bg-dark);
	backdrop-filter: none;
}

.button_redes:hover .img_redes {
	filter: brightness(0) invert(1);
}

.button_redes span {
	color: inherit;
	font-family: var(--font-button);
	font-weight: 700;
	font-size: inherit;
	letter-spacing: normal;
}




/* boxes design ...................................................*/

.totalbox {
	display: flex;
	flex-wrap: wrap;

	position: relative;

	width: 100%;

	height: auto;
	justify-content: center;
	align-items: center;

	padding: clamp(100px, 20vmin, 300px) 10vw;
	background-color: transparent;
}



.totalbox-dark {
	display: flex;
	flex-wrap: wrap;

	/* Texture for boxes - maintained as 'clipping' background */
	background-color: var(--dark-bg);
	color: var(--text-light);
	opacity: 1;

	position: relative;

	width: 100%;

	height: auto;
	justify-content: center;
	align-items: center;
	padding: clamp(100px, 20vmin, 300px) 10vw;

	border: none;
	box-shadow: none;

	/* background vector*/
	background-image: url('img/patron.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.totalbox-dark h2,
.totalbox-dark p,
.totalbox-dark .dg,
.totalbox-dark .g,
.totalbox-dark .bl {
	color: var(--text-light) !important;
}

.totalbox-dark h3 {
	color: var(--champagne-gold) !important;
	border-left: var(--line-subt) solid var(--champagne-gold);
}

.totalbox-dark .button_w,
.totalbox-dark .button_br {
	color: var(--text-light) !important;
	border-color: var(--text-light) !important;
}

.totalbox-dark .button_w:hover,
.totalbox-dark .button_br:hover {
	background-color: var(--button-bg-light) !important;
	border: 2px solid var(--button-bg-light)!important;
	color: var(--dark-bg) !important;
}


.totalbox-step {
	display: flex;
	flex-wrap: wrap;

	position: relative;

	width: 100%;

	height: auto;
	justify-content: center;
	align-items: center;

	padding: 3.9vmin 5vw 3.9vmin 5vw;
}

.totalbox-grid {
	display: flex;
	flex-wrap: wrap;

	position: relative;

	width: 100%;

	height: auto;
	justify-content: center;
	align-items: flex-start;

	padding: 3.9vmin 5vw 3.9vmin 5vw;
}






.totalbox-anchoreducido {
	display: flex;
	flex-wrap: wrap;

	/* Texture for boxes */
	background-color: var(--dark-bg);
	color: var(--text-light);

	/* Removed double border effect */
	border: none;
	box-shadow: none;

	position: relative;

	width: 80%;

	height: auto;
	justify-content: center;
	align-items: center;
	padding: clamp(78px, 15.6vmin, 234px) 2vw;
	margin: 0 10vw 0 10vw;

	/* background vector*/
	background-image: url('img/patron.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

}

.totalbox-anchoreducido h2,
.totalbox-anchoreducido p,
.totalbox-anchoreducido .dg,
.totalbox-anchoreducido .g,
.totalbox-anchoreducido .bl {
	color: var(--text-light) !important;
}

.totalbox-anchoreducido h3 {
	color: var(--champagne-gold) !important;
	border-left: var(--line-subt) solid var(--champagne-gold);
}

.totalbox-anchoreducido .button_w,
.totalbox-anchoreducido .button_br {
	color: var(--text-light) !important;
	border-color: var(--text-light) !important;
}

.totalbox-anchoreducido .button_w:hover,
.totalbox-anchoreducido .button_br:hover {
	background-color: var(--button-bg-light) !important;
	border: 2px solid var(--button-bg-light)!important;
	color: var(--dark-bg) !important;
}



.totalbox-anchoreducido2 {
	display: flex;
	flex-direction: column;
	align-items: center;

	background-color: transparent;

	position: relative;

	width: 80%;

	height: auto;
	padding: clamp(78px, 15.6vmin, 234px) 0;
	margin: 0 10vw 0 10vw;
}





.totalbox__1 {
	position: relative;
	flex: 1;
	justify-content: center;
	align-items: center;
	height: auto;
	width: auto;

	margin: 3vh 3%;
	min-width: 250px;
}

.totalbox__2 {
	position: relative;
	flex: 2;
	justify-content: center;
	align-items: center;
	height: auto;
	width: auto;

	margin: 2vh 2%;
	min-width: 250px;
}

/* Portfolio specific: 1/3 text, 2/3 images */
.portfolio .totalbox__1 {
	flex: 0 0 33.333%;
	margin: 0;
	padding: 2vh 3vw;
}

.portfolio .totalbox__2 {
	flex: 0 0 66.666%;
	margin: 0;
	padding: 2vh 3vw;
}

/* Isolated 2x2 grid ONLY for the Service Info SVG section */
.totalbox-step .totalbox__1,
.totalbox-grid .totalbox__1 {
	flex: 0 0 45%;
	margin: 2vh 2%;
	justify-content: flex-start;
	align-items: flex-start;
}

/* Responsive adjustments for generic blocks (Home) */
@media (max-width: 900px) {

	.totalbox-step .totalbox__1,
	.totalbox-grid .totalbox__1 {
		flex: 0 0 100%;
	}
}

/* Portfolio Layout: Text 1/3, Image 2/3. Stacked on mobile with text on top */
@media (max-width: 1024px) {

	.totalbox,
	.totalbox-dark,
	.totalbox-anchoreducido,
	.totalbox-anchoreducido2 {
		flex-direction: column !important;
		padding: 12vh 5vw;
	}

	.totalbox__1,
	.totalbox__2 {
		flex: 0 0 100%;
		width: 100%;
		padding: 2vh 0;
		text-align: center;
	}
}

/* Specific adjustment for blocks that only have text (totalbox__0) */
.totalbox__0 {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: auto;
	width: auto;
	flex: 1 1 100%;
	/* Removed text-align center to allow inherited alignment or specific element alignment */
	text-align: center;

	margin: 3vh 3%;
	min-width: 250px;
}

.totalbox__0 h2,
.totalbox__0 h3,
.totalbox__0 p {
	text-align: inherit;
	/* Allow them to behave like standard boxes if needed, or force left/center */
	width: 100%;
	/* Ensure they take full width for proper spacing */
}

/* Ensure totalbox__0 uses same margins as standard elements */
.totalbox__0 h2 {
	margin-bottom: 1.5vh !important;
}

.totalbox__0 h3 {
	margin-top: 0 !important;
	margin-bottom: 5vh !important;
	padding-left: 0 !important;
	border-left: none !important;
	border-bottom: var(--line-body) solid var(--wine-color);
	display: inline-block;
	/* Make border span only text width */
	width: auto !important;
	/* Override width: 100% */
	padding-bottom: 1vh;
}

.totalbox__0 p {
	margin-top: 0 !important;
	margin-bottom: 3vh !important;
}


.totalbox__0 p {
	text-align: center;
}





.buy-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5vw;
	width: 100%;
	margin-bottom: 2.5vw;
}

.totalbox__1_buy {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;

	padding: 6vh 2vw;

	/* Texture but no border */
	background-color: var(--dark-bg);
	background-image: url('img/patron.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 200% auto;
	color: var(--text-light);
	border: none;
	box-shadow: none;
}

/* Responsive adjustments for the service grid */
@media (max-width: 900px) {
	.buy-pair {
		grid-template-columns: 1fr;
	}

	.totalbox-anchoreducido,
	.totalbox-anchoreducido2 {
		width: 95%;
		margin: 0 2.5vw;
	}
}

@media (max-width: 600px) {
	.totalbox-anchoreducido,
	.totalbox-anchoreducido2 {
		width: 100%;
		margin: 0;
	}
}

.totalbox__1_buy h4 {
	width: 100%;
	padding: 0 10px;
	word-wrap: normal;
	margin-bottom: 2vh;
	font-size: clamp(18px, 3vmin, 28px);
}

.totalbox__1_buy h5 {
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.1vw;
	font-size: clamp(16px, 2.4vmin, 24px);
}

.totalbox__1_buy ul {
	width: 100%;
	padding-left: 20px;
	margin-top: 2vh;
	list-style-type: disc;
}

.totalbox__1_buy ul li {
	font-family: var(--font-body);
	font-weight: 200;
	font-size: clamp(16px, 2.2vmin, 22px);
	text-align: left;
}

.buy-btn {
	display: inline-block;
	width: auto;
	padding: 0.7vmax 1.5vmax;
	margin-top: 3vh;
	text-align: center;
	color: var(--text-light) !important;
	background-color: transparent;
	border: 2px solid var(--text-light) !important;
	font-family: var(--font-button);
	font-weight: 700;
	font-size: clamp(16px, 2.2vmin, 22px);
	letter-spacing: 0.1vw;
	cursor: pointer;
	transition-duration: 0.4s;
	text-transform: lowercase;
}

.buy-btn:hover {
	background-color: var(--button-bg-light) !important;
	border: 2px solid var(--button-bg-light)!important;
	color: var(--dark-bg) !important;
}

.totalbox__1_buy h4,
.totalbox__1_buy h5,
.totalbox__1_buy .dg,
.totalbox__1_buy .dgreen,
.totalbox__1_buy .buy,
.totalbox__1_buy .buy2 {
	color: var(--text-light) !important;
}



.totalbox__1_buy img {
	/* Sin filtro: mostrar los colores originales del SVG */
}





.buy {
	font-family: var(--font-body);
	font-weight: 200;
	position: relative;
	margin: 10px 0;
	color: var(--ink-black);
	letter-spacing: 0.1vw;
	font-size: 2.20vmin;
	text-align: left;
	min-height: auto;
}

.buy2 {
	font-family: var(--font-body);
	font-weight: 200;
	position: relative;
	margin: 10px 0;
	color: var(--sepia-accent);
	letter-spacing: 0.1vw;
	font-size: 2.30vmin;
	text-align: left;
	min-height: auto;
}





.img_svg3

/*buy*/
	{
	position: relative;

	width: 2.5vmax;
	margin: 20px;
}






/*.....body.....................................*/


/*.....footer.....................................*/

footer {
	display: flex;
	flex-wrap: nowrap;
	/* Forced horizontal on desktop */
	position: relative;
	width: 100%;
	min-height: auto;
	/* Removed excessive height */
	height: auto;
	justify-content: space-between;
	align-items: center;
	padding: 29.25vh 9vw;
	background-color: transparent;
}

.footer-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 1vw;
}

.footer-col h5 {
	text-align: center;
	margin: 0;
	font-family: var(--font-subtitle);
	font-weight: 700;
	font-style: normal;
	letter-spacing: 0.1vw;
	font-size: clamp(14px, 2.2vmin, 22px);
}

.footer-col p {
	text-align: center;
	font-family: var(--font-body);
	font-weight: 200;
	font-style: normal;
	letter-spacing: 0.02vw;
	font-size: clamp(12px, 1.8vmin, 18px);
	line-height: 1.25;
	margin: 0 !important;
}

@media (max-width: 900px) {
	footer {
		flex-wrap: wrap;
		/* Only wrap on tablet/mobile */
		padding: 5vh 5vw;
	}

	.footer-col {
		flex: 0 0 100%;
		margin: 2vh 0;
	}
}


.footer-line-up {
	position: relative;
	top: 5vw;
}

.footer-line-down {
	position: relative;
	bottom: 5vw;
}

.line {
	height: var(--line-body);
	width: 100%;
	background: var(--ink-black);
	border-bottom: none;
}


/*......................................................*/



.img_vertical {
	position: relative;

	width: 100%;
	min-width: 250px;

	border: 2px solid var(--ink-black);
	padding: 28px;
	background-color: #fff;
}

.img_svg {
	position: relative;

	width: 13vmax;
}

.img_svg2 {
	position: relative;
	padding: 28px;
	background-color: #fff;
	border: 2px solid var(--ink-black);
	/*margin:5vmax 0 0 0;*/
	width: 100%;
	justify-content: center;
	/*min-width: 250px;*/
}


.logo_footer {
	position: relative;
	width: 13vmax;
	transition: filter 0.4s ease;
}

.footer-col a:has(.logo_footer) {
	display: inline-block;
	padding: 2vh 2vw;
	transition: background-color 0.4s ease;
}

.footer-col a:has(.logo_footer):hover {
	background-color: var(--wine-color);
}

.footer-col a:has(.logo_footer):hover .logo_footer {
	filter: brightness(0) invert(1);
}

.img_redes {
	position: relative;
	width: 2vmax;
	margin: 0 1vw 0 0;
	/* Make total black as requested */
}


img {
	scroll-margin-top: 11vh
		/*!important*/
	;
}
















/*slider_pro....................................................................
.................................................................
...................................................................
.....................................................................
....................................................................*/









/*..................................................
....................................................
...................................................*/




.galeria {
	position: relative;
	width: 100%;
	/* Ancho deseado de la imagen */
	margin: 0 auto;
	/* Centra la galería */
}

.galeria img {
	max-width: 100%;
	height: auto;
	/* Universal frame style */
	border: 2px solid var(--ink-black);
	padding: 28px;
	background-color: #fff;
}

/* Reduce height of portfolio images */
.portfolio .galeria img {
	max-height: 65vh;
	object-fit: cover;
}

.slick-slider {
	position: relative;

}

.slick-dots {
	position: absolute;
	bottom: 0.5vh;
	/* Moved up slightly into the image */
	width: 100%;
	text-align: center;
	list-style: none;
	padding: 0;
	margin: 0;
}

.slick-dots li {
	display: inline-block;
	margin: 0 5px;
}

.slick-prev {
	left: 0.3vw;
	/* Moved slightly more in */
	/* Ajusta la posición izquierda de la flecha previa */
	z-index: 1;
	color: var(--ink-black);
	/* Cambia el color aquí */
	font-size: 0;
}

.slick-prev:before {
	content: '‹';
	color: var(--ink-black);
	font-size: 40px;
	font-family: 'Cinzel', serif;
	opacity: 1;
	line-height: 1;
}

.slick-prev:hover:before {
	color: var(--sepia-accent);
}

.slick-next {
	right: 0.3vw;
	/* Moved slightly more in */
	/* Ajusta la posición derecha de la flecha siguiente */
	z-index: 1;
	color: var(--ink-black);
	/* Cambia el color aquí */
	font-size: 0;
}

.slick-next:before {
	content: '›';
	color: var(--ink-black);
	font-size: 40px;
	font-family: 'Cinzel', serif;
	opacity: 1;
	line-height: 1;
}

.slick-next:hover:before {
	color: var(--sepia-accent);
}

.slick-dots li button:before {
	color: var(--ink-black);
	/* Cambia el color aquí */
	font-size: 10px;
	/* Cambia el tamaño de los puntos */
}

/* Estilo para el punto de selección */
.slick-dots li.slick-active button:before {
	color: var(--sepia-accent);
	/* Cambia el color del punto de selección */
	font-size: 12px;
}














/*slider_auto....................................................................
.................................................................
...................................................................
.....................................................................
....................................................................*/


/*slider...................................*/

.sliderbajo1 {
	position: relative;
	background-image: url(largo.png);
	background-size: cover;

	width: 100%;

	height: 70vh;
	border: none;
	animation: animate_slider01 10s infinite;
}

.sliderbajo2 {
	position: relative;
	background-image: url(largo.png);
	background-size: cover;

	width: 100%;

	height: 70vh;
	border: none;
	animation: animate_slider02 10s infinite;
}

.sliderbajo3 {
	position: relative;
	background-image: url(largo.png);
	background-size: cover;

	width: 100%;

	height: 70vh;
	border: none;
	animation: animate_slider03 10s infinite;
}

.sliderbajo4 {
	position: relative;
	background-image: url(largo.png);
	background-size: cover;

	width: 100%;

	height: 70vh;
	border: none;
	animation: animate_slider04 10s infinite;
}

.sliderbajo5 {
	position: relative;
	background-image: url(largo.png);
	background-size: cover;

	width: 100%;

	height: 70vh;
	border: none;
	animation: animate_slider05 10s infinite;
}


/*........................................
..........................................
.........................................*/


.slideralto1 {
	position: relative;
	background-image: url(img/pry01/a3_1.jpg);
	background-size: cover;

	width: 100%;

	height: 100vh;
	border: none;
	animation: animate_slider1 40s infinite;
}






.sliderbox_bajo {
	position: relative;
	display: flex;
	flex-wrap: wrap;

	background-color: transparent;

	justify-content: center;
	align-items: center;

	width: 100%;
	height: auto;

	margin: 0;
	padding: 0 0 0 30vmin;
	top: 40%;
}

.sliderbox_alto {
	position: relative;
	display: flex;
	flex-wrap: wrap;

	background-color: transparent;

	justify-content: center;
	align-items: center;

	width: 100%;
	height: auto;

	margin: 0;
	padding: 0 0 0 40vmin;
	top: 40%;
}

/* Mobile fix for sliders */
@media (max-width: 768px) {

	.sliderbox_alto,
	.sliderbox_bajo {
		padding: 5vh 5vw 0 5vw;
		/* Remove huge side padding, add top breathing room */
		top: 20%;
		/* Sit near the top of the slider */
		text-align: center;
	}
}


.sliderbox__into--green,
.sliderbox__into--purple,
.sliderbox__into--cyan,
.sliderbox__into--violet,
.sliderbox__into--orange,
.sliderbox__into--blue {
	position: relative;
	justify-content: center;
	align-items: center;

	height: auto;
	width: 100%;

	/* Semi-transparent white background */
	background-color: rgba(255, 255, 255, 0.56);

	/* No border */
	border: none;
	box-shadow: none;

	margin: 0;
	padding: 2.925vmax 10vmax 2.925vmax 4vmax;

	min-width: 250px;
	backdrop-filter: blur(10px);
	/* Glass effect */
}

.totalbox__1>*:first-child,
.totalbox__2>*:first-child,
.totalbox__0>*:first-child,
.totalbox__1_buy>*:first-child,
.sliderbox__into--green>*:first-child,
.sliderbox__into--purple>*:first-child,
.sliderbox__into--cyan>*:first-child,
.sliderbox__into--violet>*:first-child,
.sliderbox__into--orange>*:first-child,
.sliderbox__into--blue>*:first-child {
	margin-top: 0 !important;
}

.totalbox__1>*:last-child,
.totalbox__2>*:last-child,
.totalbox__0>*:last-child,
.totalbox__1_buy>*:last-child,
.sliderbox__into--green>*:last-child,
.sliderbox__into--purple>*:last-child,
.sliderbox__into--cyan>*:last-child,
.sliderbox__into--violet>*:last-child,
.sliderbox__into--orange>*:last-child,
.sliderbox__into--blue>*:last-child {
	margin-bottom: 0 !important;
}

.sliderbox__into--green *:not(.button_w):not(.button_br),
.sliderbox__into--purple *:not(.button_w):not(.button_br),
.sliderbox__into--cyan *:not(.button_w):not(.button_br),
.sliderbox__into--violet *:not(.button_w):not(.button_br),
.sliderbox__into--orange *:not(.button_w):not(.button_br),
.sliderbox__into--blue *:not(.button_w):not(.button_br) {
	color: var(--ink-black) !important;
}

.sliderbox__into--green h3,
.sliderbox__into--purple h3,
.sliderbox__into--cyan h3,
.sliderbox__into--violet h3,
.sliderbox__into--orange h3,
.sliderbox__into--blue h3 {
	border-left: var(--line-subt) solid var(--wine-color) !important;
}

/* Redundant classes mapped to the same style above to overwrite them */

/* Merged into above */


/* Merged into above */

/* Merged into above */

/* Merged into above */


/*................................................*/

@keyframes animate_slider1 {
	0% {
		background-image: url(img/5panel_1.webp);
		background-size: cover;
		background-position: center;
	}

	12% {
		background-position: right;
	}

	25% {
		background-image: url(img/5panel_2.webp);
		background-size: cover;
	}

	37% {
		background-position: left;
	}

	50% {
		background-image: url(img/5panel_3.webp);
		background-size: cover;
	}

	62% {
		background-position: right;
	}

	75% {
		background-image: url(img/5panel_4.webp);
		background-size: cover;
	}

	87% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_1.webp);
		background-size: cover;
	}
}

/*...................................
.....................................
....................................
....................................*/

@keyframes animate_slider01 {
	0% {
		background-image: url(img/5panel_7.webp);
		background-size: cover;
		background-position: center;
	}

	25% {
		background-position: right;
	}

	50% {
		background-image: url(img/5panel_7.webp);
		background-size: cover;
	}

	75% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_7.webp);
		background-size: cover;
		background-position: center;
	}
}

@keyframes animate_slider02 {
	0% {
		background-image: url(img/5panel_6.webp);
		background-size: cover;
		background-position: center;
	}

	25% {
		background-position: right;
	}

	50% {
		background-image: url(img/5panel_6.webp);
		background-size: cover;
	}

	75% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_6.webp);
		background-size: cover;
		background-position: center;
	}
}

@keyframes animate_slider03 {
	0% {
		background-image: url(img/5panel_8.webp);
		background-size: cover;
		background-position: center;
	}

	25% {
		background-position: right;
	}

	50% {
		background-image: url(img/5panel_8.webp);
		background-size: cover;
	}

	75% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_8.webp);
		background-size: cover;
		background-position: center;
	}
}

/* servicio */
@keyframes animate_slider04 {
	0% {
		background-image: url(img/5panel_5.webp);
		background-size: cover;
		background-position: center;
	}

	25% {
		background-position: right;
	}

	50% {
		background-image: url(img/5panel_5.webp);
		background-size: cover;
	}

	75% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_5.webp);
		background-size: cover;
		background-position: center;
	}
}


@keyframes animate_slider05 {
	0% {
		background-image: url(img/5panel_9.webp);
		background-size: cover;
		background-position: center;
	}

	25% {
		background-position: right;
	}

	50% {
		background-image: url(img/5panel_9.webp);
		background-size: cover;
	}

	75% {
		background-position: left;
	}

	100% {
		background-image: url(img/5panel_9.webp);
		background-size: cover;
		background-position: center;
	}
}



/* Responsividad general de botones en vistas móviles verticales */
@media (max-width: 768px) {
	.button_redes {
		font-size: 3.75vmin !important;
		padding: 1.05vmax !important;
	}

	.button_w,
	.button_br {
		font-size: 4.95vmin !important;
		padding: 1.05vmax !important;
	}

	.buy-btn {
		font-size: clamp(20px, 4vmin, 27px) !important;
		padding: 1.05vmax 2.25vmax !important;
	}
}