@charset "UTF-8";
html { scroll-behavior: smooth;
	} 
* {
	margin: 0;
	padding: 0;
}
body {
	color: #272727;
  font-family: "Switzer";
  background: #f3f3ee;
}
a { 
	text-decoration: none;
	color: #272727;
	}
	
#masthead{
	padding: 65px 0;
}

/* 3 columnas: flecha — título — espacio */
.site-brandign {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

/* Centrado perfecto */
.site-title {
 font-family: "Zodiak";
  font-size: 40px;
  font-style: normal;
  font-weight: 100;
  line-height: 90%;
  letter-spacing: -1px;
  max-width: 120px;
  margin: 0 auto;
  text-align: center;
}

/* Flecha alineada a la izquierda */
.flecha_izq {
  font-size: 3em;
  justify-self: start;
  padding-left: 1em;
  transition: padding-left 900ms ease;
  display: inline-block;
  position: relative;
  z-index: 10;
  cursor: pointer;
}

@keyframes moverFlecha {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-20px); }
  100% { transform: translateX(0); }
}

.flecha_izq:hover {
  animation: moverFlecha 1s ease-in-out infinite;
}

/* Caja vacía solo para equilibrar el centrado */
.right-space {
  justify-self: end;
}

.proyectos {
	text-align:justify;
	margin: 50px;
	padding-left: 80px;
}

.titulo_proyecto {
	font-size: clamp(60px, 12vw, 150px);
    font-weight: 300;
    line-height: 90%;
    letter-spacing: -2px;
	margin: 50px;
	padding-left: 80px;
  opacity: 0;                     /* invisible al inicio */
  animation: aparecer 5s ease forwards;
}

@keyframes aparecer {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.foto_portada {
	display: block;
    margin: 0 auto;
	width: 90%;
}

.slogan {
  font-size: clamp(40px, 5vw, 150px);
  font-weight: 300;
  line-height: 90%;
  letter-spacing: -2px;
  margin: 7vw;
  padding-left: 80px;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity .9s ease, transform 3s ease;
}

.slogan.visible {
  opacity: 1;
  transform: translateY(0);
}


.video_texto {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3vw;         /* espacio entre video y texto */
    width: 100%;
}

/* Video alineado a la izquierda */
.video_kalewche {
    width: 40%;
    flex-shrink: 0;   /* evita que se reduzca demasiado */
	padding-left: 8vw;
}

/* Texto alineado a la derecha */
.sinopsis {
    font-size: 2vw;
    line-height: 1.5em;
    letter-spacing: 0.5px;
    word-spacing: -0.1em;

    max-width: 15em;
    text-align: justify;
    text-indent: 2em;

    margin: 1vw 0 2vw auto;  /* se pega a la derecha */
    padding-right: 10vw;

    flex: 1;  /* ocupa el espacio restante a la derecha */
}
#parrafo {margin-top: 2em;}



/*propuesta expositiva*/

 .headline {
  font-family: "zodiak";
  text-align: center;
  padding-top: 15vw;
  padding-bottom:65px;
  font-weight: lighter;
}

/* Marco que recorta el cubo */
.cubo-marco {
  width: 70vw;          /* 50% del viewport */
  height: 40vw;         /* mitad del cubo */
  margin: 0 auto;
  overflow: hidden;
}

/* Cubo completo */
.swiper-container {
  width: 100%;
  aspect-ratio: 1 / 1;  /* mantiene proporción */
}

/* Cara del cubo */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Imagen encajada */
.swiper-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.tecnica {
	font-size: 1.5vw;
	text-align: center;
	text-justify: auto;
}

/*iphone*/
.iphone-wrapper {
  position: relative;
  width: 40vw;
  max-width: 420px;
  min-width: 220px;
  margin: 0 auto;
  padding-top: 41px;

  /* animación inicial */
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: all 1s cubic-bezier(.22,.61,.36,1);
}

/* Video detrás */
.iphone-video {
  aspect-ratio: 9 / 19.5;
  position: absolute;
  top: -5%;
  left: 8%;
  width: 85%;
  height: auto;
  object-fit: contain;
  transform: scale(0.76);
  transform-origin: center;
  border-radius: 22px;
  z-index: 1;
}

/* Marco del iPhone */
#iphone {
  width: 100%;
  display: block;
  position: relative;
  z-index: 2;
}
@media (max-width: 600px) {
  .iphone-wrapper {
    width: 80vw;
  }
}
.iphone-wrapper.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/*menu el cuerpo*/
.proyectos {
	text-align: center;
	margin: 50px;
	padding: 2vw;
}
.menu {
	margin: 30px;
	text-align: center;
	font-size: 300%;
	line-height: 200%;
	margin-bottom: 10%;
	
}

.menu_item {
      display: block;
      color: #111;
      text-decoration: none;
      padding-left: 20px;
      transition: padding-left 900ms ease;
      position: relative; 
      z-index: 11;        /* por si quieres sobreponer aún más el texto frente a otros adornos */
    }

    .menu_item::after {
      content: "→";
      opacity: 0;
      display: inline-block;
      transition: transform 400ms ease, opacity 200ms ease;
    }

    .menu_item:hover { padding-left: 10px;
		               color:grey;
}

    .menu_item:hover::after {
      opacity: 1;
      transform: translateX(20px);
    }