@charset utf-8;
/*
Theme Name: Catapulta
Author: Code by Ricardo Juárez Design by Andrea López
Author URI: http://rjvv.com/
Version: 1.0
License: GNU/GPL Version 2 or later. http://www.gnu.org/licenses/gpl.html
Copyright: (c) 2025 Ricardo Juárez
*/

:root {
  /* Colors */
  --primary: #ffffff;
  --contrast: #000000;
  --orange: #FF6000;
  --blue: #0055B9;
  --green: #A8EBCB;

  --alert: #FF6000;
  --success: #0055B9;

  /* Typography scale */
  --huge: 156.7px;
  --lhuge: 0.84;
  --lshuge: -0.03em;

  --big: 110px;
  --lbig: 0.84;
  --lsbig: -0.03em;

  --medium: 42px;
  --lmedium: 1.1;
  --lsmedium: -0.01em;

  --quote: 56.8px;
  --lquote: 0.91;
  --lsquote: -0.03em;

  --body: 28px;
  --lbody: 1.1;
  --lsbody: -0.01em;

  --nav: 22px;
  --lnav: 1;
  --lsnav: -0.05em;

  --small: 18px;
  --lsmall: 1.1;
  --lssmall: -0.02em;

  --xsmall: 18px;
  --lxsmall: 1.15;
  --lsxsmall: -0.02em;

  --credits: 14.3px;
  --lcredits: 1.05;
  --lscredits: -0.02em;

  /* Font family */
  --sans: 'GT Planar', Arial, sans-serif;

  /* Layout spacing */
  --pad: 30px;
  --padb: 50px;
  --padh:115px;
  
  --slice-pos: -30px;
  
  
  --border: 3px solid var(--contrast);
}



*{
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
     -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;

}
html, body
{
	overscroll-behavior-block: none;
overscroll-behavior: none;
margin:0;
font-size:100%;
width:100%;
     }
     
     	html { margin-top: 0px !important; }
	* html body { margin-top: 0px !important; }
	@media screen and ( max-width: 782px ) {
		html { margin-top: 0px !important; }
		* html body { margin-top: 0px !important; }
	}

body {
display: flex;
min-height: 100vh;
flex-direction: column;     
margin:0;
-moz-osx-font-smoothing: grayscale; 
text-rendering:geometricPrecision;
-webkit-font-smoothing: antialiased;
font-size: var(--body);
line-height: var(--linebody);
letter-spacing: var(--lsbody);
font-family: var(--sans);
color: var(--contrast);
background-color: var(--primary);
font-weight: 300;
}


.cover-media-full{
position: absolute;
height: 100vh;
width: 100vw;
top:0;
left: 0;}

.cover-media-full *{
	object-fit:cover;
	height: 100%;
	width: 100%;
}



/* Typography classes */
.huge {
  font-size: var(--huge);
  line-height: var(--lhuge);
  letter-spacing: var(--lshuge);
  font-family: var(--sans);
}

.big {
  font-size: var(--big);
  line-height: var(--lbig);
  letter-spacing: var(--lsbig);
  font-family: var(--sans);
}

.post-content a{
  text-decoration-line: underline;
text-decoration-thickness: 3px;
font-style: italic;
	
}

.medium {
  font-size: var(--medium);
  line-height: var(--lmedium);
  letter-spacing: var(--lsmedium);
  font-family: var(--sans);
  text-decoration-line: underline;
text-decoration-thickness: 3px;
font-style: italic;
}

.quote {
  font-size: var(--quote);
  line-height: var(--lquote);
  letter-spacing: var(--lsquote);
  font-family: var(--sans);
}

#legal .post-content strong{
	font-family: var(--sans);
}
#legal .post-content a,
.body {
  font-size: var(--body);
  line-height: var(--lbody);
  letter-spacing: var(--lsbody);
  font-family: var(--sans);
}

.nav {
  font-size: var(--nav);
  line-height: var(--lnav);
  letter-spacing: var(--lsnav);
  font-family: var(--sans);
}

.small {
  font-size: var(--small);
  line-height: var(--lsmall);
  letter-spacing: var(--lssmall);
  font-family: var(--sans);
}

.xsmall {
  font-size: var(--xsmall);
  line-height: var(--lxsmall);
  letter-spacing: var(--lsxsmall);
  font-family: var(--sans);
}

.credits {
  font-size: var(--credits);
  line-height: var(--lcredits);
  letter-spacing: var(--lscredits);
  font-family: var(--sans);
}



.italic{
	font-style: italic;
}
strong, b{
	font-weight: normal !important;
	text-transform: none !important;
}

.text-block,
.post-content{
	max-width: 900px;
}
.post-content p, .post-content ul, .post-content ol, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6, .post-content blockquote{
	margin-bottom: calc(var(--body) * var(--lbody));
}
.small.post-content *:last-child,
.post-content *:last-child{
	margin-bottom: 0;
}
.news-gallery{
	margin: var(--padb) 0;
	
}

.post-content.columned p{
	margin: 0;
	  font-size: var(--small);
  line-height: var(--lsmall);
  letter-spacing: var(--lssmall);
  font-family: var(--sans);
	}
	
	.post-content.columned strong {
  font-size: var(--body);
  display: inline-block;
  margin-bottom: 10px;
  line-height: var(--lbody);
  letter-spacing: var(--lsbody);
}

	
	
	.post-content.columned{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap:20px;
	max-width: 100%;
}


.swiper-news{
	position: relative;
	width: 75%;
	overflow: hidden;
}
.text-block.centered .huge{
	margin-bottom: 40px;
}

.text-block.centered{
	margin: var(--padh) auto;
	text-align: center;	
	max-width: 1200px;
}
.text-block.centered .post-content{

margin: 0px auto;
}
.grid-block,
.image-block,
.text-block{
	margin: var(--padh) 0;
}
.post-content.small p, .woocommerce-product-details__short-description h2, .post-content.small h2, .woocommerce-product-details__short-description h3, .post-content.small h3, .woocommerce-product-details__short-description h4, .post-content.small h4, .woocommerce-product-details__short-description p, .post-content.small h5, .woocommerce-product-details__short-description h5, .post-content.small ul,  .post-content.small ol, .woocommerce-product-details__short-description ul{
	margin-bottom: calc(var(--small) * var(--lsmall));
}
.post-content strong,
.bold{
	  text-decoration-line: underline;
text-decoration-thickness: 3px;

    font-family: 'GT Planar Italic 45', Arial, sans-serif;
    font-weight: 900;
    font-style: italic;
    }
.uppercase{
	text-transform: uppercase;
}
.smallcase{
	text-transform: lowercase;
}

.primary-bg {
    background-color: var(--primary);
    --color:var(--primary);
}

.contrast-bg {
    background-color: var(--contrast);
 }


.primary {
    color: var(--primary);
}

.contrast {
    color: var(--contrast);
}

.orange-bg{
	background-color: var(--orange);
}
.blue-bg{
	background-color: var(--blue);
}
.green-bg{
	background-color: var(--green);
}
.tcenter{
	text-align: center;
}

.hidden{
	opacity: 0;
}
.justflex{
	display: flex;
}

.flex{
	display: flex;
	justify-content: center;
	align-items: center;
}
.padded{
	padding: var(--pad);
}



#main{
	flex:1;
	background: var(--primary);
}

h1, h2, h3, h4{
	margin-bottom: 0;
	font-size: inherit;
	font-weight: normal;
}

.mpadb{
	margin-bottom: var(--padb);
}
.mpad{
	margin-bottom: var(--pad);
}

.post-content blockquote{
	margin-top: -30px;
  margin-left: 80px;
}

.slice polygon {
  fill: var(--slice-color,--primary);
}

.half{
	max-width: 50%;
}
.threequarter{
	max-width: 75%
}
.centered{
margin-right: auto;
margin-left: auto;
}
.righted{
	margin-left: auto;
}


.image-block {
  position: relative;
}

.text-block .huge{
	margin-bottom: 70px;
}
.text-block .big{
	margin-bottom: 50px;
}

.section-slice.slice-container {
top:calc(100% - 1px);
width: 100%;
}

/* Slice base */
.slice-container {
  position: absolute;
  z-index: 1;
  width: 70%;
  height: auto;
  left: 0;
  top: 0;
  pointer-events: none;
  transform-origin: center;
}





/* --- Base structure --- */
.loop {
  position: relative;
  cursor: pointer;
  transition: all 0.4s ease;
}

.loop .post-content {
  position: relative;
  max-height: 100px; /* visible height before expand */
  overflow: hidden;
  transition: max-height 0.5s ease;
}

/* --- Gradient overlay --- */
.loop .gradient {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background: linear-gradient(to bottom, transparent, var(--bg, white));
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* --- Expanded state --- */
.loop.expanded .post-content {
  max-height: 1000px; /* large enough for full content */
}

.loop.expanded .gradient {
  opacity: 0;
  visibility: hidden;
}

.masonry-grid {
  position: relative; /* required for Isotope */
}

.masonry-item {
  position: absolute; /* Isotope will manage positions */
  width: calc((100% - 40px) / 2); /* two columns with gutter */
  margin-bottom: 40px;
}

/* Fix for small screens */
@media (max-width: 768px) {
  .masonry-item {
    width: 100%;
  }
}

.masonry-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.masonry-thumb img{
  max-height: 70vh;
  width: auto;
	
}

.masonry-thumb {
	width: fit-content;
  position: relative;
  margin-bottom: var(--pad, 40px);
}


.right-slice {
  transform: rotateY(180deg);
}

/* Ocultar si no hay slice */
.no-slice {
  display: none;
}
.slice-top-left {
  top: var(--slice-pos);
  left: var(--slice-pos);
  transform: rotate(0deg);
}
.slice-top-right {
  top: var(--slice-pos);
  right: var(--slice-pos);
  left: auto;
  transform: rotateY(180deg);
}
.slice-bottom-left {
  bottom: var(--slice-pos);
  left: var(--slice-pos);
  top: auto;
  transform: rotateX(180deg);
}
.slice-bottom-right {
  bottom: var(--slice-pos);
  right: var(--slice-pos);
  top: auto;
  left: auto;
  transform: rotate(180deg);
}
header{
	transition: all 0.3s ease;
border-bottom: 3px solid;
background-color: var(--primary);
position: sticky;
top: 0;
z-index: 9999;

}


.header{
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
padding: 16.5px 15px;
display: flex;
justify-content: space-between;
width: 100%;
color: var(--contrast);
}

.nav-up {
    top: -var(--padb2);
	background-color: var(--color);
}

.nav-fixed{
	top:0 !important;
}

.grid-3{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap:calc(var(--pad) * 2);
}

.nav-down{
	background-color: var(--color);
}


footer .logo img{
	width: 400px;
	height: auto;
}


.logo img{
	width: 200px;
	height: auto;
}

.slice-container svg {
  overflow: visible;
}

#founding-members {
  scroll-margin-top: 100px; /* e.g. header height */
}

	footer{
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap:var(--pad);
		align-items: flex-end;
		justify-content: space-between;
	padding: 90px var(--pad) var(--pad);
}
.grid-thumb{
	aspect-ratio:1;
	position: relative;
	margin-bottom: var(--pad);
}

.cover-img *{
	height: 100%;
	object-fit:cover;
}

section.notpad{
	padding: 0;
}

.single section{
	padding: 0 var(--pad);
}

section{
	padding: var(--pad);
	position: relative;
}

section.sliced{
}
section:not(.sliced) > :last-child,
section.sliced > :nth-last-child(2) {
     margin-bottom: 0;
}


.wp-caption-text{
	margin-top: 8px;
	max-width: 75%;
}

.video-container *{
	width: 100%;
	height: 100%;
	object-fit:cover;
}

.video-container iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

.video-container {
    position: relative;
    aspect-ratio: var(--proportion);
    overflow: hidden;
}
.cover-image img, .cover-image video{
	width: 100%;
	height: 100%;
	object-fit:cover;
}






.overflowhidden{
	overflow: hidden;
}






video{
	width: 100%;
	height: 100%;
	object-fit:cover;
}
.caption{
	margin-top: 7px;
}

.swiper-wrapper{
	display: flex;
}
.slider{
	position: relative;
	overflow: hidden;
	max-width: 100vw;
}
.cover-caption{
	position: absolute;
	bottom: var(--pad);
	left: var(--pad);
	z-index: 2;
	width: fit-content;
	height: auto;
}
.swiper-slide{
	position: relative;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.swiper-slide img{
}
.gallery-wrapper{
	position: relative;
}
.nexter{
	width: 50%;
	height: 100%;
/*     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='52' viewBox='0 0 80 52'%3E%3Cpath d='M53.78 0.35 L79.47 26.05 L53.78 51.74' stroke='black' fill='none'/%3E%3Cpath d='M79.47 26.05 H0' stroke='black' fill='none'/%3E%3C/svg%3E") 80 26, auto; */
	right: 0;
top:0;
position: absolute;
z-index: 99;
}
.prever{
	width: 50%;
	height: 100%;
/*     cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='52' viewBox='0 0 80 52'%3E%3Cpath d='M26.4 0.35 L0.71 26.05 L26.4 51.74' stroke='black' fill='none'/%3E%3Cpath d='M0.71 26.05 H80' stroke='black' fill='none'/%3E%3C/svg%3E") 0 26, auto; */
	left: 0;
top:0;
position: absolute;
z-index: 99;
}

[id^="menu-lang"]{
	display: flex;
}
[id^="menu-lang"] li:first-of-type:after{
	content: '/';
}
[id^="menu-lang"] li{
	display: flex;
}

.header [id^="menu-main"], [id^="menu-social"], [id^="menu-legal"]{
	display: flex;
	gap:18px;
}
[class^="menu-social"]{
	margin-left: auto;
}
 [id^="menu-main"] li a{

}

header [id^="menu-lang"] li a{
	display: flex;
}

.header-right{
	display: flex;
		gap:18px;
		justify-content: flex-end;
}





.menu-hover.appear{
	max-height: 100vh;
	pointer-events: all;
transition: all 0.9s ease;
}
.menu-hover{
transition: all 0.3s ease;
overflow: hidden;
	width: 100%;
	height: auto;
	max-height: 0;
	background-color: var(--primary);
z-index: 99999999
}

.menu-int{
padding: 0 15px 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}




/* INPUTS */
input[type="checkbox"]
{
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     height: 0px;
     border-radius: 0;
     width: 0px;
     outline: none;
     border: none;
     margin: 0;
}

input[type="checkbox"]:checked + label{
	color: #444444;
}
input[type="checkbox"]:hover
{
     background-color: var(--contrast);
}
input[type="checkbox"]:checked
{
background-color: var(--contrast);
}

input[type="submit"]{
	  font-size: var(--body);
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: block;
     width: 100%;
     font-family: var(--sans);
     border: none;
     outline: none;
	padding: 10px 20px 16px 20px;
border-radius: 0px;
text-align: right;
color: var(--primary);
background-color: var(--contrast);
}

input[type="text"],
input[type="tel"], 
input[type="email"], 
input[type="password"],
select,
textarea{

	width: 100%;
	padding: 10px 20px 16px 20px;
border-radius: 0px;
background-color: var(--primary);
transition: all 0.3s ease;
	flex: 1;
	  font-size: var(--body);
	 -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     display: inline-block;
     position: relative;
     font-family: var(--sans);
     color: var(--contrast);
     border: none;
     outline: none;
     margin: 0px auto;
}

form{
	width: 100%;
	max-width: 500px;
	margin: 80px auto 0 !important;
	position: relative;
}


input[type="text"]:focus,
input[type="tel"]:focus, 
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
		background-color: rgba(255,255,255,1);
 border-color:#999;
} 
input[type="text"]:active,
input[type="tel"]:active, 
input[type="email"]:active,
input[type="password"]:active,
select:active,
textarea:active{
		background-color: rgba(255,255,255,1);
 border-color:#fff;
} 
input[type="text"]:not(:placeholder-shown),
input[type="tel"]:not(:placeholder-shown),
input[type="email"]:not(:placeholder-shown),
input[type="password"]:not(:placeholder-shown),
textarea:not(:placeholder-shown) {
    background-color: rgba(255, 255, 255, 1);
    border-color: #fff;
}




@media all and (-ms-high-contrast:none){}