/* Fade-in optimizado que NO bloquea FCP de Lighthouse */
/* El contenido comienza semi-visible para permitir FCP */
main,
.grid {
  opacity: 0.3;
  transition: opacity 0.6s ease-out;
}

/* Cuando el contenido está listo, fade-in completo */
body.content-ready main,
body.content-ready .grid {
  opacity: 1;
}

/* Las imágenes ya tienen width/height para prevenir layout shifts */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

* {
  /* border:1px solid red; */
  box-sizing: border-box;
}
img {
  width: 100%;
  height: 100%;
}

.title {
  color: #4d4d4d;
}

.playfair-display-400 {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  line-height: 1;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

p.lato-regular {
  line-height: 1.8;
}

.line-height {
  line-height: 1.2;
}
.z-index-top {
  z-index: 2000;
}

/* nosotros */

.main-nosotros {
  background-image: url("../src/nosotros/Main.png");
  background-image: image-set(
    url("../src/nosotros/Main.webp") type("image/webp"),
    url("../src/nosotros/Main.png") type("image/png")
  );
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
}

/* ===== ANIMACIONES ===== */

/* Animación de fade-in para imágenes */
.fade-in-image {
  opacity: 0;
  transform: translateY(30px) scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-image.animate-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Animación de fade-in para textos */
.fade-in-text {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.fade-in-text.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Escalonar las animaciones de texto */
.fade-in-text:nth-child(1) {
  transition-delay: 0.1s;
}
.fade-in-text:nth-child(2) {
  transition-delay: 0.2s;
}
.fade-in-text:nth-child(3) {
  transition-delay: 0.3s;
}
.fade-in-text:nth-child(4) {
  transition-delay: 0.4s;
}

/* Animación de slide-in desde la derecha para tarjetas */
.slide-in-card {
  opacity: 0;
  transform: translateX(100px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.slide-in-card.animate-in {
  opacity: 1;
  transform: translateX(0);
}

/* Escalonar las animaciones de tarjetas */
.slide-in-card:nth-child(1) {
  transition-delay: 0.1s;
}
.slide-in-card:nth-child(2) {
  transition-delay: 0.3s;
}
.slide-in-card:nth-child(3) {
  transition-delay: 0.5s;
}

/* Efecto de máquina de escribir */
.typewriter-text,
.typewriter-paragraph {
  visibility: hidden;
  display: inline-block;
  border-right: 2px solid #d6af43;
  animation: blink 0.7s step-end infinite;
  max-width: 100%;
}

.typewriter-text {
  white-space: nowrap;
}

.typewriter-paragraph {
  white-space: normal;
}

.typewriter-text.typed,
.typewriter-paragraph.typed {
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: #d6af43;
  }
}

/* Cuando termina de escribir, removemos el cursor parpadeante */
.typewriter-text.complete,
.typewriter-paragraph.complete {
  border-right: none;
  animation: none;
}

/* ===== PUZZLE REVEAL ANIMATION ===== */

.puzzle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  transition: opacity 0.3s ease;
}

.puzzle-tile {
  position: absolute;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translate(var(--random-x), var(--random-y))
    rotate(var(--random-rotate)) scale(var(--random-scale));
  animation: none;
}

.puzzle-tile.assemble {
  animation: assembleTile 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes assembleTile {
  0% {
    opacity: 0;
    transform: translate(var(--random-x), var(--random-y)) 
               rotate(var(--random-rotate)) 
               scale(var(--random-scale));
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* ===== SOLUCIONES ANIMATIONS ===== */

/* 1. Main Image Focus Effect */
.solutions-hero-reveal {
  opacity: 0;
  transform: translateY(24px) scale(1.06);
  filter: blur(10px);
  will-change: opacity, transform, filter;
  transition: opacity 1.2s ease-out, transform 1.2s ease-out,
    filter 1.2s ease-out;
}

.solutions-hero-reveal.in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* 2. Solution Blocks Entrance Effect */
/* 2. Solution Blocks Entrance Effect (Pop Up) */
.solution-block-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: opacity, transform;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.solution-block-reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .solutions-hero-reveal,
  .solution-block-reveal {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
}