body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  color: #222;
}

.font-moulpali {
    font-family: 'Moulpali', sans-serif;
}

/* ------------ SWIPER ------------ */
 
.swiper {
    width: 100%;
    height: 100%;
}
 
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #444;
    display: flex;
    justify-content: center;
    align-items: center;
}
 
.swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
   
.swiper-button-prev {
    left: 30px !important;
}
 
.swiper-button-next {
    right: 30px !important;
}
   
.swiper-button-prev::after,
.swiper-button-next::after {
    color: #FFFFFF;
}
   
.swiper-pagination-bullet {
    background: #881230 !important;
    width: 24px;
    height: 24px;
    border: 1px solid #fff;
    opacity: 0.6;
    transition: all 0.3s ease;
}
   
.swiper-pagination-bullet-active {
    background: #9F0F3E;
    opacity: 1;
    transform: scale(1.4);
}
 
.swiper-pagination-bullet-active::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  animation: fill-bullet var(--swiper-autoplay-duration, 4000ms) linear forwards;
}
   
html, body {
    overflow-x: hidden;
}
   
.desktop-only, .mobile-only {
    display: none;
}
   
@media (min-width: 768px) {
    .desktop-only { display: block; }
}
   
@media (max-width: 767px) {
    .mobile-only { display: block; }
}
   
@media (max-width: 767px) {
    .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
      }
}
   
@media (max-width: 767px) {
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important;
      }
}
 
/* Efecto de relleno circular */
@keyframes fill-bullet {
  from { transform: scaleX(0); transform-origin: left; opacity: 0.3; }
  to { transform: scaleX(1); transform-origin: left; opacity: 1; }
}


/* ------------ GRÁFICO CUALIDADES Animaciones Tarjetas ------------ */

/* DESKTOP */
@keyframes slide-in-down {
  0%   { transform: translateY(-64px) scale(.98); opacity: 0 }
  60%  { transform: translateY(6px)  scale(1);    opacity: 1 }
  100% { transform: translateY(0) }
}
.from-top { animation: slide-in-down .9s cubic-bezier(.22,.9,.25,1) forwards }

@keyframes slide-in-up {
  0%   { transform: translateY(64px) scale(.98); opacity: 0 }
  60%  { transform: translateY(-6px) scale(1);  opacity: 1 }
  100% { transform: translateY(0) }
}
.from-bottom { animation: slide-in-up .9s cubic-bezier(.22,.9,.25,1) forwards }


/* PILL Animacion */
/* Segmento visible + gap: 28px visibles, 340px ocultos (ajustable) */
.btn-trace {
  stroke-dasharray: 28 340;
  animation: btn-dash 2.8s linear infinite;
}

@keyframes btn-dash {
  to { stroke-dashoffset: -368; } /* ≈ suma de ambos valores de dasharray */
}

/* Respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .btn-trace { animation: none !important; }
}

/* Animacion de Flechas Girando */
@keyframes spin14 { to { transform: rotate(360deg); } }
  .spin-14s {
    animation: spin14 14s linear infinite;
    transform-origin: center;
  }
@media (prefers-reduced-motion: reduce) {
    .spin-14s { animation: none !important; }
  }

/* MOBILE */
    :root {
    /* Ajustes rápidos */
    --spine-width: 10rem;
    /* ancho de la imagen del conector vertical */
    --spine-offset-top: 1.5rem;
    /* cuánto despegamos la spine de la pastilla */
    --spine-offset-bottom: 1rem;
    /* cuánto despegamos la spine del medallón */
}

/* utilidades ya usadas */
.abs-center {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

.item {
    position: relative;
}

.slot {
    position: relative;
    width: 100%;
}

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

.slot-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 12px 20px;
}

.titulo {
    font-weight: 800;
    font-size: .95rem;
    line-height: 1.1;
    margin: 0 0 2px 0;
}

.detalle {
    font-size: 0.8rem;
    line-height: 1.1rem;
    margin: 0;
}

/* contenedores */
.stack {
    position: relative;
    max-width: 360px;
    width: 100%;
}

.flow {
    position: relative;
    padding-top: var(--spine-offset-top);
}

/* SPINE: ocupa desde debajo de la pastilla hasta antes del medallón */
.spine {
    position: absolute;
    left: 50%;
    height: 35rem;
    transform: translateX(-50%);
    top: 0;
    /* empieza al tope del .flow */
    bottom: calc(260px + var(--spine-offset-bottom));
    /* 260 = alto del medallón */
    width: var(--spine-width);
    object-fit: fill;
    /* estira verticalmente */
    z-index: 0;
    /* DETRÁS de etiquetas y medallón */
    opacity: 1;
}

/* Medallón */
.circle {
    width: 260px;
    height: 260px;
    margin: 16px auto 0;
    position: relative;
}

/* Animación flechas */
@keyframes spin {
    from {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

.spin-14s {
    animation: spin 14s linear infinite;
}

/* Responsive finos */
@media (min-width: 400px) {
    .stack {
        max-width: 380px;
    }

    .circle {
        width: 280px;
        height: 280px;
    }

    .spine {
        bottom: calc(280px + var(--spine-offset-bottom));
    }

    /* si el medallón crece */
}


/* ------------ GRÁFICO 2 Animaciones Tarjetas ------------ */


    /* ---------- Animaciones ---------- */
    @keyframes slide-in-left {
      0% { transform: translateX(-64px) scale(.98); opacity: 0 }
      60% { transform: translateX(6px) scale(1); opacity: 1 }
      100% { transform: translateX(0) }
    }
    @keyframes slide-in-right {
      0% { transform: translateX(64px) scale(.98); opacity: 0 }
      60% { transform: translateX(-6px) scale(1); opacity: 1 }
      100% { transform: translateX(0) }
    }
    @keyframes slide-in-up {
      0% { transform: translateY(64px) scale(.98); opacity: 0 }
      60% { transform: translateY(-6px) scale(1); opacity: 1 }
      100% { transform: translateY(0) }
    }
    .animate-in { will-change: transform, opacity }
    .from-left  { animation: slide-in-left .9s cubic-bezier(.22,.9,.25,1) forwards }
    .from-right { animation: slide-in-right .9s cubic-bezier(.22,.9,.25,1) forwards }
    .from-bottom{ animation: slide-in-up    .9s cubic-bezier(.22,.9,.25,1) forwards }
    .delay-1 { animation-delay: .12s }
    .delay-2 { animation-delay: .24s }
    .delay-3 { animation-delay: .36s }
    .delay-4 { animation-delay: .48s }

    /* ---------- Helpers visuales ---------- */
    .soft-card { box-shadow: 0 12px 30px rgba(0,0,0,.18); border-radius: 18px }
    .chip-year { box-shadow: 0 6px 18px rgba(0,0,0,.18) }

    /* Gradientes aproximados a tu diseño */
    .g-blue   { background: linear-gradient(135deg,#2B2760 0%, #3D30EA 100%) }
    .g-blue-2 { background: linear-gradient(135deg,#2B2760 0%, #3D30EA 100%) } /* segunda azul */
    .g-cyan   { background: linear-gradient(135deg,#29B2B4 0%, #7CE5E6 100%) }
    .g-magenta{ background: linear-gradient(135deg,#881636 0%, #D33460 100%) }
    .g-last   { background: linear-gradient(180deg,#D33460 0%, #2B2760 100%) }

    /* Triangulito de la tarjeta final */
    .notch:before{
      content:""; position:absolute; top:-12px; left:50%; transform:translateX(-50%);
      width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid #D51B58;
      filter: drop-shadow(0 2px 2px rgba(0,0,0,.15));
    }

    /* Evitar que el PNG se deforme */
    .bg-timeline {
      background-size: contain;
      background-position: center top;
      background-repeat: no-repeat;
    }


    @media (max-width: 768px){
      /* Ocultar el PNG para que no moleste en mobile */
      .bg-timeline{ opacity:.08 !important }
      /* Pasar de absolute a flujo normal: usamos transform y width 100% */
      [data-anim]{
        position: static !important;
        width: calc(100% - 2rem) !important;
        margin: 1rem auto !important;
        transform: none !important;
      }
      /* Remover chips flotantes en mobile si estorban posiciones */
      .chip-year{ transform:none }
    }

    /* Punta a la izquierda (solo 1ª tarjeta) */
    .card-arrow-left{
        /* borde derecho redondeado (lo da tu .soft-card); recorto solo el lado izq en punta */
        clip-path: polygon(0% 50%, 6% 0%, 100% 0%, 100% 100%, 6% 100%);
    }

    /* Conectores en líneas cortadas que “cuelgan” */
    .connector{
        position: absolute;
        bottom: var(--drop, -48px);        /* cuánto cuelga por debajo de la tarjeta */
        height: var(--len, 56px);         /* largo del tramo de línea */
        border-left: 6px dashed rgba(203,213,225,0.95); /* gris claro (tailwind slate-300 aprox) */
        z-index: 0;           /* detrás de las tarjetas */
    }


/* ------------ Linea de Tiempo - Animaciones ------------ */

/* Recorre todo el ancho del contenedor */
@keyframes chevron-run {
  from { left: -40px; }                     /* arranca fuera de la izquierda */
  to   { left: calc(80% + 120px); }         /* sale por la derecha */
}
/* Aplica animación al grupo de flechas */
.chevron {
  left: -120px;
  animation: chevron-run 2.8s linear infinite;
}

/* Respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  .chevron { animation: none !important; }
}

/* ------------ Linea de Tiempo - Animaciones MOBILE ------------ */

/* Recorre todo el ancho del contenedor */
@keyframes chevron-run {
    from {
        top: -40px;
    }

    /* arranca fuera de la izquierda */
    to {
        bottom: calc(80% + 120px);
    }

    /* sale por la derecha */
}

/* Aplica animación al grupo de flechas */
.chevron {
    left: 1.25rem;
    animation: chevron-run 2.8s linear infinite;
}

/* Respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .chevron {
        animation: none !important;
    }
}

/* ------------ Animaciones CARDS ------------ */

  /* Anillo giratorio con degradado blanco→rosa */
  .spin-ring {
    position: relative;
  }
  .spin-ring::before{
    content:"";
    position:absolute; inset:-6px;        /* grosor del aro */
    border-radius:9999px;
    background: conic-gradient(#ffffff, #ff5a9a, #ffffff);
    animation: spin 4s linear infinite;
    /* recorta el relleno, dejando sólo el anillo */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  }
  @keyframes spin{to{transform: rotate(360deg)}}

  /* Glow suave detrás de la foto (opcional) */
  .photo-glow{
    box-shadow: 0 18px 38px rgba(0,0,0,.25), 0 6px 16px rgba(211,52,96,.35);
  }


/* ------------ Animacion Linea de Titulos ------------ */

@keyframes grow {
    from { transform: scaleX(0); transform-origin: center; }
    to { transform: scaleX(1); transform-origin: center; }
}


/* ------------ Animaciones INDEX ------------ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 1s ease-out forwards;
}


/* Más lento y con easing más “elástico” */
.animate-in{
  transition: transform 1100ms cubic-bezier(.16,1,.3,1), opacity 1100ms ease;
  will-change: transform, opacity;
}

/* Más distancia de arranque (se nota más el movimiento) */
.from-top{    transform: translateY(-64px); }   /* antes -40px */
.from-bottom{ transform: translateY( 64px); }   /* antes  40px */
.from-left{   transform: translateX(-64px); }
.from-right{  transform: translateX( 64px); }

/* Si usás delays, podés estirarlos un poco */
.delay-1{ transition-delay: .12s; }
.delay-2{ transition-delay: .24s; }
.delay-3{ transition-delay: .36s; }
.delay-4{ transition-delay: .48s; }



/* ------------ ON CLICK NAVBAR MENU ------------ */

  summary::-webkit-details-marker { display: none; }
  details[open] .summary-arrow { transform: rotate(180deg); }

  @keyframes dropdown {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-dropdown {
    animation: dropdown 0.25s ease forwards;
  }

  /* ================== PAGE: QUE ES SIAC =============== */
  /* ------------ Linea de Tiempo - Animaciones ------------ */

/* El padre de .chevron debe ser relative y si querés ocultar el sobrante: overflow-hidden */
.timeline-row {
    position: relative;
    overflow: hidden;
    /* opcional, pero suele ser lo esperado */
}

/* Recorre todo el ancho del contenedor */
@keyframes chevron-run {
    0% {
        left: -120px;
        /* arranca bien fuera a la izquierda */
        opacity: 0;
    }

    10% {
        opacity: 1;
        /* aparece suavemente */
    }

    90% {
        opacity: 1;
        /* se mantiene visible casi todo el recorrido */
    }

    100% {
        left: calc(90% + 120px);
        /* se va bien fuera a la derecha */
        opacity: 0;
    }
}

/* Aplica animación al grupo de flechas */
.chevron {
    left: -120px;
    /* mismo valor que el 0% del keyframe */
    animation: chevron-run 2.8s linear infinite;
}

/* Respeta reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
    .chevron {
        animation: none !important;
    }
}

/*-- ==== INCISOS ANIMACION FLIP ==== --*/

  .flip-wrapper {
    perspective: 1200px;
  }

  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
  }

  .flip-card-inner.is-flipped {
    transform: rotateY(180deg);
  }

  .flip-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
  }

  .flip-back {
    transform: rotateY(180deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .flip-card-inner {
      transition: none;
      transform: none !important;
    }
  }