/*

Threme Name: Casa Cejota
Description: Hospedaje y centro cultural
Threme URI: https://casacejota.com/
Author: Buen-Día
Version: 4

*/

/* CSS Resets */


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, rem, img, ins, q, small, strong, sub, sup, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	padding: 0
}
article, aside, figure, figure img, figcaption, hgroup, footer, header, nav, section, video, object {
	display: block
}
a img {	border: 0}
figure {position: relative; margin: 0; width: 100%}
figure img {width: 100%; height: auto; margin: 40px 0; display: block;}

html { margin: 0 !important;}


:root {
/* Colores */
--color-principal: #6bbe9e;
--color-claro: #feeada;
--color-secundario: #ed6914;
--color-encabezados: #111;
--color-contraste: #363538;
--blanco: #fff;


/* Tamaños de letra */
--texto-precio: 16pt;
--texto-desc: 14pt;
--texto-menu: 16px;
--texto-detalle: 10pt;
--iconos: 18pt;

/* Padding */
--pad-sec: 80px 40px;
--pad-boton: 10px 20px;
--pad-caja: 20px;

}

body {
	overflow-x: hidden;
	background-color: var(--color-principal);
	max-width: 100vw;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-style: normal;
	color: var(--color-texto);
	min-height: 100vh;
	line-height: 1.5;
	letter-spacing: 1px;
	margin: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	font-size: 16pt;
	align-content: center
}



h1, h2, h3, h4, h5,h6 {margin: 0;}
h1.display,
h2.display,
h3.display,
h4.display {text-transform: none; font-weight: 400; letter-spacing: 2px; font-family: "Playfair Display", serif; line-height: 1.2;}
h1.display {font-style: italic; }

h1 {font-weight: 700; font-size: 36pt; line-height: 1; }
h2 {font-weight: 700; font-size: 32pt; line-height: 1;  }
h3 {font-weight: 500; font-size: 24pt; margin: 0}
h4 {font-weight: 500; font-size: 16pt; color: var(--color-contraste)}
h5 {font-weight: 600; font-size: 12px; text-transform: uppercase; }
h6 {font-weight: 700; font-size: 10pt; }

ul, ol {font-size: var(--texto-detalle); font-weight: 300; font-size: 14pt}
ul { list-style: none; margin: 0;}
ol {margin-left: 40px; margin-bottom: 40px;}
ol li {margin-bottom: 20px;}
ul.children { margin-left: 15px;}
ul.children li:last-child {padding: 0 0 0 0 !important;}
a, a:hover { text-decoration: none;
	cursor: pointer;
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;}
a:hover {font-weight: 600}
a, .nav li a {
	-webkit-transition: all 0.3s ease-in;
	-o-transition: all 0.3s ease-in;
	transition: all 0.3s ease-in;
	-ms-transition: all 0.3s ease-in;
	color: var(--color-contraste);
}

hr {border: 0; border-top: 3px solid var(--color-contraste); display: inline-block; width: 100%; margin: 2rem 0}

p {line-height: 2;font-weight: 300; font-size: 14pt;  margin: 0 0 0px;}



.flex {display: flex; width: 100%}
.wrap {flex-wrap: wrap;}
.flex.col {flex-direction: column;}
.flex.row {flex-direction: row;}
.flex.rev {flex-direction: row-reverse;}
.flex.center {align-items: center; justify-content: center;}
.flex.start {align-items: start;}
.flex.row.end {align-items: flex-end;}
.flex.col.end {align-items: center; justify-content: flex-end;}
.flex.row.end {justify-content: flex-end;}
.flex.space {justify-content: space-between;}
.flex.col.space.end {align-items: flex-end;justify-content: space-between; }
.flex.col.center.end {align-items: flex-end; justify-content: center; }

.g1 {gap: 1rem !important}
.g2 {gap: 2rem !important}
.g3 {gap: 3rem !important}
.g4 {gap: 4rem !important}
.g8 {gap: 8rem !important}




/* Filtros */

.deg { background: rgb(0,0,0); background: -moz-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.758140756302521) 99%); background: -webkit-linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.758140756302521) 99%); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.758140756302521) 99%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="var(--color-contraste)000",endColorstr="var(--color-contraste)000",GradientType=1); opacity: .7; z-index: 1; width: 100%; min-height: 100%; position: absolute; top: 0; left: 0; -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; }
.deg.rad {background: #1c1626; background: radial-gradient(circle, rgba(28, 22, 38, 1) 0%, rgba(20, 13, 23, 0) 100%);}
.grayscale { filter: none; -webkit-filter: grayscale(100%); -moz-filter:    grayscale(100%); -ms-filter:     grayscale(100%); -o-filter:      grayscale(100%); -webkit-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; -ms-transition: all 0.3s ease-in; }


/* Loader */

#preloader { position: fixed; top:0; left:0; right:0; bottom:0; background-color:#f0f0f0; /* change if the mask should be a color other than white */ z-index:99; /* makes sure it stays on top */ }
#status { width:240px; height:240px; position:absolute; left:50%; /* centers the loading animation horizontally on the screen */ top:50%; /* centers the loading animation vertically on the screen */ background-image: url(img/loading.gif); /* path to your loading animation */ background-size: 100px; background-repeat:no-repeat; background-position:center; margin:-100px 0 0 -100px; }



/* LOGO */

.logo {display: inline-flex; max-width: 20vw; flex: 1; display: inline-flex; justify-content: flex-start; align-items: center; align-self: stretch; height: min(100%, 80px);}
.logo figure {height: 100%; background-size: contain;}

/*  HEADER */

.topheader {top: 0; left: 0; width: calc(100% - 4rem); padding: 1rem 2rem; position: fixed; z-index: 0; }
.topheader nav {align-items: center; justify-content: flex-start; }
.topheader nav a {font-size:var(--texto-detalle);  font-weight: 500;}

header {
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 auto;
 	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0px;
 	height: 90px;
	z-index: 4;
	background-color:transparent;

	-webkit-transition: 600ms;
	-moz-transition: 600ms;
	-o-transition: 600ms;
	-ms-transition: 600ms;
	transition: 600ms;
}

header a#menu {
	position: relative;
	display: none;
	font-size: 1.5rem;
	text-transform: lowercase;
	font-weight: 200;
	cursor: pointer;
	color: var(--color-contraste);
	z-index: 8;
}


header.act {
	background-color: var(--color-principal);
	min-height: 100vh;
	align-items: flex-start;
	-webkit-transition: 600ms; -moz-transition: 600ms; -o-transition: 600ms; -ms-transition: 600ms; transition: 600ms; }

	header.act a#menu {width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; color: var(--color-claro)}
	header.act a#menu i.fa-bars:before {content: "\58"}


header .espacio {padding: 2rem 4rem; gap: 0rem;  z-index: 3; width: calc(100% - 8rem); max-width: 1440px; display: inline-flex; flex-direction: row; flex-wrap: wrap; justify-content:  space-between; align-items: center; align-content: center;
	flex: 1 1; position: relative;
	-webkit-transition: 600ms;
	-moz-transition: 600ms;
	-o-transition: 600ms;
	-ms-transition: 600ms;
	transition: 600ms;}

header .logo { flex: auto; height: auto; min-height: 180px; flex: auto}
header .logo figure {background-size: cover}

header .espacio .der,
header .espacio .izq {display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2rem;}

header .espacio .izq { flex: 1 1 25% }
header .espacio .der {justify-content: flex-end;  flex: 1 0 75% }



header .menu {display: inline-flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; z-index: 2; justify-content: center; flex: 1 0 100%}
header nav.redes {display: inline-flex; flex-direction: row; gap: 2rem; align-items: flex-start; justify-content: center;}
header nav.redes a:hover {color: var(--color-principal)}

nav.menu a {font-size: var(--texto-menu); color: var(--color-claro); font-weight: 500; padding: .5rem 2rem;}
nav.menu a:hover { background-color: var(--color-principal); color: var(--blanco)}

	/* Header Menú */
header.act .espacio {align-items: flex-start; height: 70%;}
header.act .espacio .logo {flex: 1 0 100%}
header.act .espacio .logo figure {height: 80px}
header.act .espacio nav.menu {flex: 1 0 100%; display: flex; flex-direction: column; gap: 2rem}
header.act .espacio nav.menu a {font-size: 1.5rem}


header.scroll {top: calc((25vh - 5px) * -1);border-bottom: 10px solid var(--color-claro); cursor: pointer; position: fixed;
background-color: #fff}
header.scroll:hover {top: 0;}



main {position: relative; width: calc(100% - 0px); display: flex; flex-direction: column; flex-wrap: wrap; z-index: 1; background-color: var(--color-principal); margin-top: .5rem}

section {width: 100%; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0; min-height: auto; position: relative; background-color: var(--color-claro)}
.contenedor {display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; width: min(calc(100% - 6rem), 1440px); padding: 6em 3rem; gap: 2rem;}


section aside {width: 50%; flex: 1 1; align-self: stretch; display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; justify-content: center;}
section blockquote {margin: 0px; font-size: 16pt; font-weight: 700; display: inline-flex; flex-direction: column; gap: 1rem; width: calc(100% - 8rem); padding: 4rem; }



figure {background-position: center; background-repeat: no-repeat; background-size: cover;}
figure.fotograma {min-height: 75vh; }
figure.imagen {height:100%; border-radius: .5rem; min-height: 240px}
figure.thumb {height: min(15vh, 180px); max-width: 120px;}
figure.imagenfondo {position: absolute; z-index: 0; width: 100%; height: 100%;}
figure.portada {position: fixed; top: 0; left: 0; min-width: 100vw; min-height: 100vh}



.columna {width: 100%; margin: 0; position: relative; height: auto; gap: 1rem; display: flex; flex-direction: column;}

.columna.uno {width: calc(100% - 16rem); padding: 0rem 8rem}
.columna.dos {width: calc(50% - 40px); gap: 2rem; flex: 1 1; align-self: stretch; justify-content: center;}
.columna.dos .fotograma {position: relative; display: block; margin: 0 0 40px}

.cajatexto {width: calc(100% - 160px); padding: 80px; position: relative;}

.columna.tres {width: calc((100% / 3) - 2px); flex: 1 1 0}
.columna.tercio {width: calc((100% / 3)*2 - 3px);display: inline-block;}
.columna.cuatro {width: calc((100% / 4) - 2px); flex: 1 1 0}


.encabezado { position: relative; display: inline-flex; flex: 1 1 100%;  width: 100%; z-index: 8; margin: 0; gap: 10px; flex-direction: column; color: var(--color-contraste); text-align: center;}


span.precio {font-size: var(--texto-precio); font-weight: 600}
span.carrito {cursor: pointer; position: relative; color: var(--color-principal); z-index: 4;
		-moz-transition: all 0.2s ease-in;
			-webkit-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			-ms-transition: all 0.2s ease-in;
}
span.carrito:hover,
span.carrito.rempty:hover {color: var(--color-principal);
		-moz-transition: all 0.2s ease-in;
			-webkit-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			-ms-transition: all 0.2s ease-in;
}
span.carrito.rempty {color: var(--color-contraste)}

span.carrito i{font-size: 2rem; }

.cart-action {display: inline-block; flex-direction: row; flex-wrap: nowrap; gap: 10px}
.cart-action select {width: 80px}

span.boton {
		text-align: left;
		padding: 0;
		width: auto;
		display: inline-flex;
		gap: 1rem;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		color: var(--color-encabezados);
		font-size: var(--texto-menu);
		cursor: pointer;
		font-weight: 500;
		background-color: transparent;

-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

span.boton:hover {
	-moz-transition: all 0.2s ease-in;
-webkit-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
}

span.boton a {display: flex; flex-direction: row; gap: 1rem; justify-content: center; text-transform: uppercase; font-size: 10pt; align-items: center; color: var(--color-contraste); background-color: var(--color-principal); border: 1px solid var(--color-contraste); padding: 1rem 2rem; align-items: center; border-radius: .5rem;}
span.boton.alt a {color: var(--color-claro); border: 1px solid var(--color-claro); }
span.boton.alt2 a {background-color: var(--color-claro); border: 0; color: var(--color-encabezados); }

span.boton.alt2:hover a {background-color: var(--color-principal); color: var(--blanco)}


ul.grid {width: 100%; display: grid; list-style: none !important; fit-content; margin: 0; grid-template-columns: repeat(12, 4fr); gap: 2rem;align-items: start;}
ul.grid.uno li {grid-column: span 12;}
ul.grid.dos li { grid-column: span 6; }
ul.grid.tres li { grid-column: span 4; }

ul.grid.cuatro li { grid-column: span 3; gap: 1rem}
ul.grid li {display: inline-flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; margin: 0 !important; gap: 2rem; cursor: pointer;}
ul.grid li a {width: 100%; display: inline-flex; position: relative}

ul.grid li .thumb {min-height: 240px; width: 100%;
background-position: center;
background-repeat: no-repeat;}

/* ul.grid li h2 {font-weight: 700; text-align: center; margin:0 0 10px;} */
ul.grid li span {font-size: 12pt; text-align: left; display: block}


ul.grid figure h4 {color: var(--blanco); z-index: 4;
	-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}

ul.grid li:hover figure h4.display {letter-spacing: 13px;
	-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;}

ul.grid figure .deg.rad {opacity: .5}
ul.grid li:hover figure .deg.rad {background: var(--color-principal); opacity: 1}


ul.grid li .caja {min-height: 16rem; justify-content: space-between; padding: 1rem; width: calc(100% - 2rem); }
ul.grid li .caja p,
ul.grid li .caja p span {font-size: 10pt}
ul.grid li .caja span.boton a {width: calc(100% - 4rem - 2px);}


/* Secciones  */

section#ubicacion {background-color: var(--color-contraste); color: var(--color-claro); align-items: center; justify-content: center; min-height: 70vh}
section#ubicacion h1 {color: var(--color-claro)}
section#ubicacion .contenedor {flex-direction: column; align-items: flex-start; width: min(calc(100% - 2rem), 60vw)}
section#ubicacion .encabezado {text-align: left;}
section#ubicacion h2 {color: var(--color-claro)}
section#ubicacion h5 {text-align: center}


/* Inicia Home */

section#portada {min-height: calc(100vh - 0rem); position: relative; justify-content: center; align-items: center; align-content: center;}
section#portada .contenedor {z-index: 3; align-self: stretch; color: var(--color-claro); width: min(100%, 50vw); text-align: center; font-weight: 400; padding: 2rem 0; }
section#portada .logo {width: 100%; max-width: inherit;}
section#portada .logo figure {min-height: 33vh}
section#portada .contenedor p {font-size: 12pt; font-weight: 300;}

section#portada .slider {
	width: 100%;
	padding: 0;
	/* border: 20px solid var(--color-claro); */
	margin: 0;
	position: absolute;
	height: 100%;
	z-index: 0;
}

.slider .fotograma {min-height: calc(100vh - 0rem)}


.slider figure .caja {width: min(calc(100% - 4rem), 44vw); z-index: 10}
.slider figure h2 {color: var(--blanco); text-align: center; font-size: 32px; line-height: 1.5; letter-spacing: 5px;}
.slider figure h2 p {text-align: center; font-size: 32px; font-weight: 700 }

/* section.slider.portada .fotograma {width: 100%; min-height: 60vh;} */



section.aside figure.imagen {min-height: 60vh}

:is(section#reservaciones, section#resenas) {background-color: var(--color-contraste); }


section .columna.dos.desc {color: var(--color-claro)}
section .columna.dos.form {background-color: var(--blanco); padding: 2rem 3rem; width: calc(100% - 6rem); border-radius: 1rem;}

section#reservaciones .contenedor {gap: 4rem;}
section#reservaciones form {gap: 2rem}
section#reservaciones form h2 {margin-bottom: 2rem}

section#reservaciones form .bloque {flex-wrap: wrap}
section#reservaciones form .bloque h3,
section#reservaciones form .bloque label {flex: 1 0 100%}
section#reservaciones ol li{font-size: 16pt}

section.galeria,
section.post {min-height: calc(100vh - 0)}

section#servicios ul.grid li {border: 1px solid var(--color-contraste); border-radius: .5rem; gap: 0; grid-column: span 6; flex-direction: row}
section#servicios ul.grid li:hover {background-color: var(--color-claro)}
section#servicios ul.grid li .caja {gap: 2rem}
section#servicios ul.grid li .flex.col {min-height: 14rem}
section#servicios ul.grid li figure .deg {border-radius: .5rem}
section#servicios ul.grid li figure:hover .descripcion {opacity: 1;
		-moz-transition: all 0.2s ease-in;
			-webkit-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			-ms-transition: all 0.2s ease-in;
}
section#servicios ul.grid li figure .titulo {z-index: 1;}
section#servicios ul.grid li figure .descripcion {opacity: 0;  color: var(--color-claro); background-color: var(--color-encabezados); padding: 1rem; width: calc(100% - 2rem); height: calc(100% - 2rem); position: absolute; top: 0; left: 0; border-radius: .5rem; z-index: 2;
	-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}

section#servicios ul.grid li figure .descripcion p {font-size: 10pt;}

section#servicios ul.grid li:hover span.boton a {background-color: var(--color-secundario)}
section#servicios blockquote {border-radius: .5rem; border: 1px solid var(--color-contraste); background-color: var(--blanco); flex-direction: row; flex-wrap: wrap;}
section#servicios blockquote h4 {font-weight: 700; flex: 0 1 20%}
section#servicios blockquote ul {list-style-type: disc; flex: 0 1 78%}
section#servicios blockquote ul li {font-weight: 300; margin-bottom: 1rem; line-height: 1.5;}

section.image {min-height: 60vh;}
section.image figure.imagenfondo { background-attachment: fixed;}
section.image .contenedor {z-index: 10; width: min(calc(100% - 4rem), 70vw); padding: 8rem 4rem}
section.image h3 {color: var(--blanco); text-align: center; line-height: 1.5; letter-spacing: 1px;}
section.image h5 {color: var(--blanco); text-transform: uppercase;}


section#resenas .contenedor { padding: 3rem 3rem 6rem; color: var(--color-claro); min-height: 40vh}
section#resenas blockquote {flex: 1;gap: 0} 
section#resenas blockquote i {font-size: 2rem}
section#resenas blockquote p {font-size: 10pt; font-style: italic;}
section#resenas blockquote h6 {font-weight: 400;}
section#resenas   {color: var(--color-principal)}

.testimonios { display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; }
  .testimonio { background: #3b393a; padding: 2rem; border-radius: 1rem; flex: 1 1 calc((100% / 3) - 6rem); position: relative; }
  .testimonio:hover {background: var(--color-claro); color: var(--color-encabezados); font-weight: 500;}
  .testimonio i { font-size: 2rem; color: var(--color-principal); margin-bottom: 1rem; }
  .testimonio blockquote { font-style: italic; margin: 0 0 1rem; padding: 0; width: 100%; }
  .testimonio .autor { display: flex; flex-direction: column; }
  .testimonio .nombre { font-weight: bold; font-size: 1.1rem; color: #9fa8a3 }
  .testimonio .detalle { font-size: 0.9rem; color: var(--color-principal); }


  


/* Fin Home */






section.video {background-color: var(--color-contraste);}
section.video .contenedor {padding: 2rem 0; width: 100%; min-height: 540px;}
section.video .contenedor iframe {height: min(80vh,504px) ;width: min(100%,960px); position: relative; object-fit: cover}


/* Página producto */

body.producto,
body.producto header,
section.post.producto {background-color: var(--color-claro)}


section.post.producto figure.fotograma {width: calc(40% - 0rem); min-height: 720px; height: auto; border-radius: 2rem; cursor: pointer; background-color: var(--color-contraste); align-content: stretch}
section.post.producto figure.fotograma:hover {opacity: .7}
section.post article {width: calc(50% - 160px); display: inline-flex; flex-direction: column; gap: 40px; padding: 80px; flex: 1 0 0}

section.post.producto article {width: 50%; padding: 80px 0}
section.post.producto {flex-direction: row; min-height: calc(100vh - 12rem); align-items: flex-start;}

section.post.producto .etiquetas span:nth-child(1){border-right: 1px solid var(--color-contraste); margin-right: .5rem; padding-right: .5rem;}
section.post.producto .contenedor {padding: 0 4rem 4rem}
section.post.producto .contenedor.desc {background-color: var(--color-contraste); color: var(--color-claro); text-align: center; padding: 4rem; width: calc(100% - 8rem)}



section.post.galeria {justify-content: flex-start; background-color: var(--color-neutro)}
section.post.galeria .contenedor {padding: 2rem 0; width: 100%}

section.post.galeria ul.grid li {grid-column: span 6;}
section.post.galeria ul.grid li.full,
section.post.galeria ul.grid li.break {grid-column: span 12; }
section.post.galeria ul.grid li.vertical.break img {width: 50%;}

.galeria li.imagen {width: 100%; }
section.post.galeria ul.grid li.imagen.horizontal {grid-column: span 12;}
.galeria li.imagen img { width: 100%; height: auto; }




section#newsletter.link {position: relative;}
section#newsletter.link figure.imagenfondo {height: 100%; z-index: 0; }
section#newsletter.link figure.imagenfondo svg {opacity: .1; width: 100%;}
section#newsletter.link figure.imagenfondo svg .cls-2 {fill: var(--color-neutro)}
section#newsletter.link figure.imagenfondo svg .cls-3 {fill: var(--color-claro)}




section#about.pagina {align-items: flex-start; min-height: 40vh }
section#about.pagina h4 {color: var(--color-claro)}
section#about.pagina.portada figure.imagenfondo {min-height: 40vh;}
section#about.pagina .contenedor {padding: 3rem; z-index: 8; color: var(--color-claro)}

section#about.pagina aside .columna {padding: 8rem 0rem; width: 100%;}
section#about.pagina figure.fotograma {flex: 1 1 0; min-height: auto; align-self: stretch; display: flex; align-items: flex-end; justify-content: flex-start}


section#historia {background-color: var(--color-contraste); color: var(--color-claro)}
section#historia{flex-direction: row;}
section#historia .contenedor {padding: 0; width: 100%; gap: 0}
section#historia p {font-size: 14pt; line-height: 2;}
section#historia .display p {font-size: 2rem; font-weight: 400; line-height: 1.2;}
section#historia figure.fotograma {width: 50%; flex-wrap: wrap; flex-direction: row; min-height: 100vh; align-self: stretch;}
section#historia aside .columna {flex: 0 1; width: min(100%, calc(50vw - 12rem)); padding: 6rem; }


section#masinfo .contenedor .flex.col {flex: 0 1 50%}


section#servicios.pagina {background-color: var(--color-contraste); color: var(--color-claro)}
section#servicios.pagina .encabezado {color: var(--color-claro)}
section#servicios.pagina figure.imagen {min-height: 50vh;}
section#servicios.pagina figure.imagen .titulo {z-index: 3; text-align: center;}

section#servicios .slider {min-height: auto; margin: 0; width: 50%; border-radius: .5rem; align-self: strecth}
section#servicios .slider figure.imagen {min-height: calc((100vh / 2) - 2rem); border-top-right-radius:0; border-bottom-right-radius:0}

/* Página Catálogo Tienda */

#cart {
background-color: rgba(255, 255, 255, 0.95);
position: absolute;
right: 0rem;
top: 0;
border-radius: 0 0 2rem 2rem;
/* min-height: 50vh; */
width: min(30vw, 420px);
z-index: 3;
}

#cart .contenedor {padding: 6rem 4rem 2rem; gap: 1rem;}
#cart .flex {display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
#cart .flex i {display: none}
#cart.activo { min-width: calc(50vw - 8rem); right: 0; padding: 4rem; background-color: transparent; }
#cart.activo h5 span.carrito {display: none;}
#cart.activo .contenedor { padding: 8rem 0; width: 100% }
#cart .contenedor.hide {display: none;}

body.taller header #cart a {color: #000}


#cart form {display: inline-flex; flex-wrap: wrap; gap: 1rem; flex-direction: column; align-items: flex-start; justify-content: center;}


body.taller header #cart h2 {color: var(--color-contraste)}

.pedido .item {padding: 0 0 1rem; border-bottom: 1px solid var(--color-contraste); display: inline-flex; flex-direction: row; gap: 1rem; width: 100%; margin-bottom: 1rem;  justify-content: space-between; align-items: center;}
.pedido .item h4 { line-height: 1.2; flex: 1 1 70%}
.pedido .item button.remove {border: 0; background-color: transparent; font-size: 18pt; font-weight: 700; cursor: pointer}

.columna.pedido { border-radius: 8px; width: 100%; height: auto; min-height: auto; }

section .columna.pedido,
#cart.activo .columna.pedido {background-color: var(--color-claro); padding: 4rem 2rem; width: calc(100% - 4rem)}

#cart button.nuevaorden {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	background: var(--color-claro);
	border: 0;
	border: 3px solid var(--color-encabezados);
	padding: .5rem 1rem;
	border-radius: 1rem;
	font-size: 16pt;
	font-weight: 700;
	cursor: pointer;		
}





section form {display: flex; flex-direction: column; gap: 1rem}

section input,
section select,
section button {background-color: transparent; width: auto; padding: .5rem 1rem; border: 1px solid #ccc; min-height: 40px;font-size: 16px; font-weight: 400; border-radius: 0; display: inline-flex; flex: 1 1; color: var(--color-contraste);font-family: "Onest", sans-serif; border-radius: .75rem;}
section textarea {border: 1px solid var(--color-contraste); width: 100%; min-height: 180px; margin: 20px 0}
 {background-color: var(--color-contraste); font-weight: 700; padding: .5rem 1rem; font-size: 18pt; color: var(--color-claro); border-radius: 1rem}

section input::placeholder {
	color: var(--color-contraste); font-family: "Onest", sans-serif;
}

section select {min-height: 40px; cursor: pointer; font-weight: 400; font-size: 16px}

section form button,
section form input[type="submit" i],
section form .cart-action button {
		padding: 1.5rem 2rem;
		font-size: 16px;
		font-weight: 700;
		letter-spacing: 2px;
		color: var(--color-contraste);
		margin: 1rem 0;
		cursor: pointer;
		justify-content: center;
		
		background-color: var(--color-principal);
		font-family: "Onest", sans-serif;
		text-transform: uppercase;
		-moz-transition: all 0.2s ease-in;
		-webkit-transition: all 0.2s ease-in;
		-o-transition: all 0.2s ease-in;
		transition: all 0.2s ease-in;
		-ms-transition: all 0.2s ease-in;
}

section form button:disabled {background-color: var(--color-contraste)}

section form button:hover,
section form input[type="submit" i]:hover,
section form .cart-action button:hover {
	background-color: var(--color-encabezados);
	color: var(--color-claro);

		-moz-transition: all 0.2s ease-in;
			-webkit-transition: all 0.2s ease-in;
			-o-transition: all 0.2s ease-in;
			transition: all 0.2s ease-in;
			-ms-transition: all 0.2s ease-in;

}

section form h1,
section form h2,
section form h4 {flex: 1 1 100%}

form#newsletter_form input.half {max-width: calc(50% - 32px)}



form .custom-radio {
	display: flex;
	align-items: center;
	border: 1px solid #ccc;
	padding: 16px;
	margin-bottom: 8px;
	border-radius: 4px;
	cursor: pointer;
	transition: border 0.2s ease;
	flex: 1 0 calc(100% - 34px);
}

form .custom-radio:hover {
	border-color: var(--color-contraste);
}

form .custom-radio input[type="radio"] {
	display: none;
}

form .radio-button {
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-principal);
	/* Color similar al morado */
	border-radius: 50%;
	margin-right: 12px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

form .radio-button::after {
	content: "";
	width: 10px;
	height: 10px;
	background-color: var(--color-principal);
	border-radius: 50%;
	opacity: 0;
	transition: opacity 0.2s ease;
}

form .custom-radio input[type="radio"]:checked+.radio-button::after {
	opacity: 1;
}

form .label-text {
	font-size: 16px;
	font-weight: 500;
}


/* Checkout */
section#pedido { justify-content: flex-start; }

section#pedido .columna.formatos {background-color: var(--blanco); align-self: stretch;}
section#pedido form input,
section#pedido form select {text-transform: none; letter-spacing: 0;}

section#pedido form input::placeholder {letter-spacing: 0;}

section#pedido h2 {color: var(--color-contraste);  font-size: 24px}
/* section#pedido .contenedor {width: calc(50% - 4rem);} */
section#pedido form {display: inline-flex; flex-direction: column; flex-wrap: wrap; gap: 2rem; font-size: 12pt;}
section#pedido .bloque {display: flex; flex-direction: row; gap: 1rem; width: 100%; flex-wrap: wrap;}
section#pedido .bloque.orden {border: 1px solid var(--color-contraste);padding: 2rem; width: calc(100% - 4rem)}
section#pedido .bloque.orden p,
section#pedido .bloque.orden ol {font-size: 16px; color: #000}
section#pedido .bloque.orden.contacto {gap: 2rem;}
section#pedido .bloque.orden.contacto .columna.dos {padding: 0; gap: .5rem;}
section#pedido .bloque.orden.contacto .columna.dos h2 {flex: auto; margin-top: 2rem}

section#pedido .bloque h2 {flex: 1 0 100%; margin-bottom: 0rem}
section#pedido form .half {width: calc(50% - 42px); flex: inherit}
section#pedido form .full {width: calc(100% - 34px); flex: inherit}
section#pedido form select.half {width: calc(50% - 8px)}

section#pedido form#formato_envio {display: none;}
section#pedido form#formato_envio.ready {display: inline-flex}

section#pedido .contenedor {padding: 0; width: min(100%, 1440px); gap: 0}
section#pedido .columna.dos {padding: 4rem 4rem 2rem;}
section#pedido .columna.pedido {gap: 1rem; position: sticky; top: 0; background-color: var(--color-claro); border-radius: 0; }
.pedido .item h4 { line-height: 1.2; flex: 1 1 70%}
section#pedido .columna.pedido h4.precio {text-align: right; flex: 1 1 15%}
section#pedido .columna.pedido hr {border-top: 0px solid var(--color-contraste); margin: 1rem 0}

section#pedido .metodopago h2 {margin-bottom: 1rem}

section.pagina .columna.dos.pedido h2 {margin: 0 0 10px}


section#pedido .columna.pedido .fila {display: inline-flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; flex-wrap:wrap }
section#pedido .columna.pedido .fila.total {color: #333; font-weight: 700; border-top: 1px solid var(--color-contraste); padding-top: 2rem}
section#pedido .columna.pedido .fila h4 {font-weight: 400;}
section#pedido .columna.pedido .fila.total h4 {font-weight: 700;}
section#pedido .columna.pedido .fila h4 em {font-style: normal; margin-left: 10px; font-size: 12px; font-weight: 700;}

section#confirmacion .columna.pedido.uno {flex-direction: row;}
section#confirmacion .columna.dos {gap: 1rem;}
section#confirmacion .columna.dos.pedido { flex-direction: column; gap:0}


section .pedido label {font-weight: 600; margin-top: 20px; display: inline-block}
/* section .pedido select {max-width: 40%} */



section .columna.formatos a.edit {font-weight: 600; text-decoration: underline;}
section span.total {display: inline-block !important}

section .columna.formatos .formularios {position: relative; vertical-align: top}

.metodopago,
form#formato_envio,
form#formato_pago {display: none; }
span.metodo {display: inline-block !important}




/* Página Proyectos */
section#about.pagina.portada {min-height: 100vh; justify-content: center; align-content: center;}
section#about.pagina.portada figure.imagenfondo {background-attachment: fixed;}
section#about.pagina.portada h4 {color: var(--color-claro); font-weight: 400;}

section#about .contenedor {width: min(calc(100% - 6rem), 1080px)}
section#about .columna.dos {flex: 0 1 50%}

#huautla section#hero {background-color: var(--color-contraste); color: var(--color-claro)}
#huautla section#masinfo {background-color: var(--color-encabezados); color: var(--color-claro)}
section#hero figure.imagen {min-height: 60vh}
#huautla section#hero figure.imagen {background-attachment: fixed;}

#huautla section#historia {background-color: #eee; color: var(--color-encabezados)}
#huautla section#historia aside {order: 1}
#huautla .slider.galeriapag {width: 50%; margin: 0; align-self: stretch; height: 100%; order: 2;}
#huautla section#historia figure.fotograma {width: 100%; justify-content: flex-end; align-items:flex-end;}
#huautla section#historia figure.fotograma .caja {padding: 2rem; width: calc(100% - 4rem)}
#huautla section#historia figure.fotograma .caja h4 {color: var(--color-claro);}

section.pagina {padding-top: 0; height: min(calc(80vh -240px), calc(100vh - 240px));}
section.pagina .contenedor {align-items: flex-start; padding: 6rem 3rem; gap: 4rem; }
section.pagina.std .contenedor {justify-content: flex-start; width: min(100%, 840px)}
section.pagina.destacado .contenedor {padding: 0 4rem 8rem}
section.pagina .encabezado {text-align: left}
section.image.banner {position: relative; min-height: 50vh;}
section.image.banner figure.imagenfondo {height: 100%}

section.pagina iframe {min-width: 100%; display: block; min-height: 540px; margin-bottom: 2rem; position: relative;
    width: 100%;}

section.pagina .cajatexto {display: inline-block; width: calc(100% - 80px); min-height: 100%; font-weight: 700; font-size: 14pt; padding: 40px; color: var(--color-contraste)}
section.pagina .cajatexto h2 {font-size: 18pt; margin-top: 0}
section.pagina ul{list-style: inherit;}
section.pagina ul li {margin-bottom: 10px; margin-left: 20px; font-weight: 400}



footer {background-color: var(--blanco); color: var(--color-contraste);min-height: 50vh; position: relative; bottom: 1rem; display: flex; width: 100%; z-index: 4; justify-content: center;align-items: center; flex-direction: column;}
footer .espacio {position: relative; width: calc(100% - 8rem); max-width: 1440px; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 3rem; padding: 2rem 4rem 2rem}
footer a,
footer h4,
footer nav.menu a {color: var(--color-contraste); font-weight: 400;}


footer iframe {width: 100%; min-height: 60vh}


footer .logopie {align-items: center;}
footer .logo {max-width: inherit;}
footer .logopie figure {min-height: 180px; background-size: contain; }

footer .columna {gap: 1rem;}
footer .columna h4.display {letter-spacing: 1px;}
footer .columna p {line-height: 1.5; font-size: 10pt;color: var(--color-claro)}

footer .columna h2 {color: var(--color-contraste); font-weight: 700; font-size: 32pt}
footer .columna.correo {align-items: flex-end;}

footer nav.redes {display: inline-flex; flex-direction: row; gap: 2rem}
footer nav.redes a {color: var(--color-contraste);}
footer nav.redes i {font-size: 24px}

footer .correo span.boton i {font-size: 32px}


footer nav.menu {display: flex; flex-direction: column; gap: 0; align-items: flex-start}
footer nav.menu a {font-weight: 400; color: var(--color-contraste); padding: .5rem 0}
footer nav.menu a:hover {border: 0; background-color: var(--color-claro); color: var(--color-encabezados)}

footer nav.idiomas {font-size: 10pt}
footer nav.idiomas a {font-size: 10pt}
footer nav.idiomas a.active {border-bottom: 2px solid var(--color-principal)}

.copyright {float: right; position: fixed; bottom: 0; right: 0;}
.copyright p {font-size: 10pt; font-weight: 700; margin-right: 80px}