/*!
Theme Name: fractalArg
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: fractalarg
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

fractalArg is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

html {
/*   overflow-x: hidden; */
  line-height: 1.4;
  -webkit-text-size-adjust: 100%;
}



.vertical-slider {
  height: 100vh;
/*   width: 100vw; */
  width: 100%;
  position: relative;
}

.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* Tu diseño aquí */
}


.slide-content {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s, transform 0.4s;
}

.slide-content.visible {
  opacity: 1;
  transform: translateY(0);
}

.slider-indicators {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  /* Si querés asegurarte que el espacio siempre está, agregá:
  min-height: 40px; // o el alto de tus dots
  */
}

.swiper-slide-active .slider-indicators {
  opacity: 1;
  pointer-events: auto;
}


.slide-content .section__title {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}

.slide-content .section__text {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}

.slide-content .slide-img {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}

.slide-content .button {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s 0.7s, transform 0.6s 0.7s;
}

.slide-content.visible .section__title,
.slide-content.visible .section__text,
.slide-content.visible .slide-img,
.slide-content.visible .button {
  opacity: 1;
  transform: translateY(0);
}



/* Backdrop y contenedor (ya tenés estilos base, sumamos transiciones) */
/* Estado base oculto */
.popup-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(241, 242, 237, 0.98);
  z-index: 9999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .35s ease;
  /* sólo opacity */
}

/* Abierto (visible) */
.popup-backdrop.mostrar {
  visibility: visible;
  /* se hace visible al abrir */
  opacity: 1;
  /* y el fade ocurre aquí */
  pointer-events: auto;
}

/* Cerrando: hacemos fade-out pero mantenemos visible hasta que termine */
.popup-backdrop.closing {
  opacity: 0;
  pointer-events: none;
  /* evitamos interacción durante el fade-out */
}

/* Animar el contenido interno también */
.popup-container {
  height: 100%;
  width: 100%;
  /* display: grid;
  grid-template-rows: auto 1fr auto; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.popup-content {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 25s ease, transform 25s ease;
}

.popup-backdrop.mostrar .popup-content {
  opacity: 1;
  transform: translateY(0);
}

/* Arrows / close (ajustá a tu diseño) */
.popup-arrows {
  position: absolute;
  inset-inline: 1rem;
  bottom: 1rem;
  display: flex;
  justify-content: space-between;
}

.popup-arrow,
.popup-close {
  cursor: pointer;
  outline: none;
}

/* Evita scroll del body cuando hay un popup abierto */
body.popup-open {
  overflow: hidden;
}

/* --- Animaciones de switch entre popups (fade + slide) --- */
.popup-container {
  will-change: transform, opacity;
}

/* Entrada desde la izquierda (aparece viniendo de la izq) */
.anim-in-left {
  animation: pp-in-left 0.45s ease both;
}

/* Entrada desde la derecha (aparece viniendo de la der) */
.anim-in-right {
  animation: pp-in-right 0.45s ease both;
}

/* Salida hacia la izquierda (se va hacia la izq) */
.anim-out-left {
  animation: pp-out-left 0.35s ease both;
}

/* Salida hacia la derecha (se va hacia la der) */
.anim-out-right {
  animation: pp-out-right 0.35s ease both;
}

@keyframes pp-in-left {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pp-in-right {
  from {
    opacity: 0;
    transform: translateX(40px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pp-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(-40px);
  }
}

@keyframes pp-out-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(40px);
  }
}

/* (Opcional) bloquear clicks durante animación */
.popup-backdrop.is-animating .popup-container {
  pointer-events: none;
}
/* Quitamos transición en h2 para no pelear con la animación */
.popup-backdrop .section__title h2 {
  opacity: 0;
  transform: translateY(20px);
  transition: none;
}

/* Cuando el popup está visible, ejecutamos la animación con delay */
@keyframes fadeSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeSlideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.popup-backdrop .section__title h2         { opacity:0; transform:translateY(20px); }
.popup-backdrop .section__subtitle             { opacity:0; transform:translateX(-20px); }
.popup-backdrop .section-hero_casos__title:nth-of-type(1) { opacity:0; transform:translateY(20px); }
.popup-backdrop .section-hero_casos__title:nth-of-type(2) { opacity:0; transform:translateY(20px); }
.popup-backdrop .button                    { opacity:0; transform:translateY(20px); }
.popup-backdrop .popup-page.bold                    { opacity:0; transform:translateY(20px); }

.popup-backdrop.mostrar .section__title h2 { animation: fadeSlideUp .45s ease .15s both; }
.popup-backdrop.mostrar .section__subtitle     { animation: fadeSlideRight .45s ease .30s both; }
.popup-backdrop.mostrar .section-hero_casos__title:nth-of-type(1)  { animation: fadeSlideUp .45s ease .45s both; }
.popup-backdrop.mostrar .section-hero_casos__title:nth-of-type(2) { animation: fadeSlideUp .45s ease .60s both; }
.popup-backdrop.mostrar .button            { animation: fadeSlideUp .50s ease .70s both; }
.popup-backdrop.mostrar .popup-page.bold            { animation: fadeSlideUp .50s ease .75s both; }