@import url('/public/css/fonts.css');

/* ======================= */
/*  Tipografía jerárquica  */
/* ======================= */
.acn-text-wrapper span {
  display: block;
  margin: 0;
  font-family: 'Ghino', sans-serif;
  color: #0d315e;      /* tu color principal */
  line-height: 1;
}

/* — La palabra más importante (APRENDE) — */
.acn-text-wrapper .acn-large {
  font-size: 8rem;
  font-weight: 950;    /* GhinoUltra */
}

/* — Palabra secundaria (NOSOTROS) — */
.acn-text-wrapper .acn-mid {
  font-size: 5rem;
  font-weight: 700;    /* GhinoBold */
  margin-top: 0.2em;
}

/* — Palabra de apoyo (CON) — */
.acn-text-wrapper .acn-small {
  font-size: 3rem;
  font-weight: 400;    /* GhinoBook */
  margin-top: 0.1em;
}

/* ========== Responsive ========== */
@media (max-width: 1024px) {
  .acn-text-wrapper .acn-large { font-size: 6rem; }
  .acn-text-wrapper .acn-mid   { font-size: 4rem; }
  .acn-text-wrapper .acn-small { font-size: 2.5rem; }
}

@media (max-width: 600px) {
  .acn-text-wrapper .acn-large { font-size: 4.5rem; }
  .acn-text-wrapper .acn-mid   { font-size: 3rem; }
  .acn-text-wrapper .acn-small { font-size: 2rem; }
}


/* --- Layout general --- */
.acn-general-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1080px;
    margin: 0 auto;
    padding: 6rem 1rem;
    position: relative;
    font-family: 'Ghino', sans-serif;
    overflow: visible;
}

/* --- Carrusel --- */
.acn-carousel-wrapper {
    position: relative;
    width: 320px;
    height: 568px;
    /* Ya no ocultamos nada verticalmente */
    overflow: visible;
}

.acn-carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Cada “tarjeta” apilada */
.acn-item {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.acn-item img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* — Posiciones “carta apilada” con gradita vertical — */
.acn-item.pos-0 {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    z-index: 3;
}
.acn-item.pos-1 {
    /* un poco a la izquierda, y 40px hacia arriba */
    transform: translateX(-30px) translateY(-40px) scale(0.9);
    opacity: 0.8;
    z-index: 2;
}
.acn-item.pos-2 {
    /* más a la izquierda, y 80px hacia arriba */
    transform: translateX(-60px) translateY(-80px) scale(0.8);
    opacity: 0.6;
    z-index: 1;
}

/* --- Flechas de navegación — */
.acn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.8);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: background 0.3s;
}
.acn-nav:hover {
    background: rgba(255,255,255,1);
}
.acn-prev { left: -80px; }
.acn-next { right: -50px; }

/* Pseudo‐elementos para flechas */
.acn-prev::before,
.acn-next::before {
    content: '';
    display: block;
    width: 0.5em;
    height: 0.5em;
    border-top: 3px solid #0d315e;
    border-right: 3px solid #0d315e;
}
.acn-prev::before { transform: rotate(-135deg); }
.acn-next::before { transform: rotate(45deg); }

/* --- Texto lateral — */
.acn-text-wrapper {
    text-align: left;
    color: #0d315e;
}
.acn-text-wrapper span {
    display: block;
    font-size: 5rem;
    line-height: 1;
    margin: 0;
}


/* =================>1920px: pantallas muy grandes================= */
@media (min-width: 1921px) {
    .acn-general-wrapper {
      max-width: 1400px;
      padding: 8rem 2rem;
    }
    .acn-carousel-wrapper {
      width: 400px;
      height: 700px;
    }
    .acn-text-wrapper span {
      font-size: 6rem;
    }
    .acn-prev { left: -100px; }
    .acn-next { right: -80px; }
  }
  
  /* ==============1601px–1920px: desktops grandes============== */
  @media (min-width: 1601px) and (max-width: 1920px) {
    .acn-general-wrapper {
      padding: 7rem 2rem;
    }
    .acn-carousel-wrapper {
      width: 360px;
      height: 640px;
    }
    .acn-text-wrapper span {
      font-size: 5.5rem;
    }
    .acn-prev { left: -90px; }
    .acn-next { right: -60px; }
  }
  
  /* ==============1441px–1600px: desktops medianos============== */
  @media (min-width: 1441px) and (max-width: 1600px) {
    .acn-general-wrapper {
      padding: 6.5rem 2rem;
    }
    .acn-carousel-wrapper {
      width: 340px;
      height: 600px;
    }
    .acn-text-wrapper span {
      font-size: 5rem;
    }
    .acn-prev { left: -80px; }
    .acn-next { right: -50px; }
  }
  
  /* ==============1201px–1440px: laptops grandes============== */
  @media (min-width: 1201px) and (max-width: 1440px) {
    .acn-general-wrapper {
      padding: 6rem 1.5rem;
    }
    .acn-carousel-wrapper {
      width: 320px;
      height: 568px;
    }
    .acn-text-wrapper span {
      font-size: 4.5rem;
    }
    .acn-prev { left: -70px; }
    .acn-next { right: -40px; }
  }
  
  /* ==============1025px–1200px: laptops medianas============== */
  @media (min-width: 1025px) and (max-width: 1200px) {
    .acn-general-wrapper {
      padding: 5.5rem 1.5rem;
    }
    .acn-carousel-wrapper {
      width: 280px;
      height: 498px;
    }
    .acn-text-wrapper span {
      font-size: 4rem;
    }
    .acn-prev { left: -60px; }
    .acn-next { right: -35px; }
  }
  
  /* ==============769px–1024px: tablets y laptops pequeñas============== */
  @media (min-width: 769px) and (max-width: 1024px) {
    .acn-general-wrapper {
      flex-direction: column;
      align-items: center;
      padding: 5rem 1rem;
    }
    .acn-carousel-wrapper {
      width: 80vw;
      height: 45vh;
    }
    .acn-text-wrapper {
      margin-top: 2rem;
      text-align: center;
    }
    .acn-text-wrapper span {
      font-size: 3.5rem;
    }
    .acn-nav {
      top: auto;
      bottom: 10%;
    }
    .acn-prev { left: 10%; }
    .acn-next { right: 10%; }
  }
  
  /* ==============415px–768px: móviles horizontales y tablets pequeñas============== */
  @media (min-width: 415px) and (max-width: 768px) {
    .acn-general-wrapper {
      padding: 4rem 1rem;
    }
    .acn-carousel-wrapper {
      width: 90vw;
      height: auto;
      aspect-ratio: 9/16;
    }
    .acn-text-wrapper span {
      font-size: 3rem;
    }
    .acn-nav {
      width: 35px;
      height: 35px;
    }
    .acn-prev { left: 5%; }
    .acn-next { right: 5%; }
  }
  
  /* ==============≤414px: móviles verticales============== */
  @media (max-width: 414px) {
    .acn-general-wrapper {
      padding: 3rem 1rem;
    }
    .acn-carousel-wrapper {
      width: 95vw;
      height: auto;
      aspect-ratio: 9/16;
    }
    .acn-text-wrapper span {
      font-size: 2.5rem;
    }
    .acn-nav {
      width: 30px;
      height: 30px;
    }
    .acn-prev { left: 3%; }
    .acn-next { right: 3%; }
  }
  
  /* ==============≤375px: móviles muy pequeños============== */
  @media (max-width: 375px) {
    .acn-general-wrapper {
      padding: 2.5rem 0.5rem;
    }
    .acn-text-wrapper span {
      font-size: 2rem;
    }
  }
  
  @media (max-width: 768px) {
    .acn-general-wrapper {
      display: flex;
      flex-direction: row !important;
      flex-wrap: nowrap;
      justify-content: space-between;
      overflow-x: hidden;    /* ocultar cualquier sobrante */
      padding: 7rem 1rem;
    }
  
    /* 55% + 45% = 100% sin márgenes extras */
    .acn-carousel-wrapper {
      flex: 0 0 55%;
      width: auto;           /* ancho controlado por flex-basis */
      height: auto;
      aspect-ratio: 9 / 16;
    }
    .acn-carousel-wrapper .acn-item,
    .acn-carousel-wrapper .acn-item img {
      width: 100%;
      height: 100%;
    }
  
    .acn-text-wrapper {
      flex: 0 0 45%;
      margin: 0;             /* quita el margin-left anterior */
      text-align: left;
    }
    .acn-text-wrapper span {
        font-size: 1.9rem;
        padding-left: 10px;
    }
  
    /* Reposiciona ligeramente las flechas */
    .acn-prev { left: 5%; }
    .acn-next { right: 5%; }
  }
  
  @media (max-width: 768px) {
    .acn-general-wrapper {
      display: flex;
      flex-direction: column !important;  /* ahora sí apilará */
      align-items: center;
      padding: 5rem 1rem;
    }
  
    .acn-text-wrapper {
      width: 100%;
      text-align: center;
      margin-bottom: 4.5rem;
    }
  
    .acn-carousel-wrapper {
      width: 100%;
      max-width: 360px;
      aspect-ratio: 9/16;
    }
  
    .acn-nav {
      bottom: 10%;
      top: 250px;
      width: 30px;
      height: 30px;
    }
    .acn-prev { left: 5%; }
    .acn-next { right: 5%; }
  }
  

/* ===== MÓVILES MUY PEQUEÑOS: ≤400px ⇒ font aún más pequeña ===== */
@media (max-width: 400px) {
  .acn-text-wrapper .acn-large { font-size: 2.5rem; }
  .acn-text-wrapper .acn-mid   { font-size: 2rem; }
  .acn-text-wrapper .acn-small { font-size: 1.2rem; }
  .acn-general-wrapper {
    padding: 1.5rem 0.5rem;
  }
  .acn-carousel-wrapper {
    max-width: 280px;
  }
}

/* ===== MÓVILES EXTREMOS: ≤320px ⇒ ajustes mínimos ===== */
@media (max-width: 320px) {
  .acn-text-wrapper .acn-large { font-size: 2rem; }
  .acn-text-wrapper .acn-mid   { font-size: 1.8rem; }
  .acn-text-wrapper .acn-small { font-size: 1rem; }
  .acn-carousel-wrapper {
    max-width: 240px;
  }
}