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

/* =============== Contenedor general =============== */
#producto-certificados {
    background: #0d315e;
    border-radius: 120px;
    margin: -3rem auto 2rem;
    padding: 2rem 1rem;
    max-width: 1200px;
    font-family: 'Ghino', sans-serif;
}

#producto-certificados .pc-title {
    color: #fff;
    text-align: center;
    font-size: 2.25rem;
    margin-bottom: 1.5rem;
    font-family: 'Ghino';
    font-weight: 700;
    /* usará GhinoBold.otf */
}

/* =============== Flex imagen + texto =============== */
.pc-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

/* =============== Carousel de imágenes =============== */
.pc-carousel {
    flex: 1 1 400px;
    position: relative;
    overflow: hidden;
}

.pc-image-slides {
    display: flex;
    transition: transform 0.6s ease;
    margin-left: 20px;
}

.pc-image-slide {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;

}

.pc-image {
    max-width: 100%;
    opacity: 0;
}

/* Imagen: entra desde la izquierda */
@keyframes slideInImage {
    from {
        opacity: 0;
        transform: translateX(30px);
    }

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

.pc-image--active {
    animation: slideInImage 0.6s ease forwards;
}


/* =============== Texto fuera del slider =============== */
.pc-text-container {
    flex: 1 1 300px;
    overflow: hidden;
    position: relative;
}

/* Estado inicial del texto */
.pc-text {
    opacity: 1;
}

/* Texto sale hacia arriba */
@keyframes slideUpOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100%);
    }
}

.pc-text--exit {
    animation: slideUpOut 0.6s ease forwards;
}

/* Texto entra desde abajo */
@keyframes slideUpIn {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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

.pc-text--enter {
    animation: slideUpIn 0.6s ease forwards;
}

/* Títulos y párrafos */
.pc-text h3 {
    margin: 0 0 .5rem;
    font-size: 1.75rem;
    color: #fff;
    font-family: 'Ghino';
}

.pc-text p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
    color: #fff;
    font-family: 'Ghino';
    font-weight: 400;
    text-align: justify;
}

/* =============== Flechas =============== */
.pc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    padding: .25rem;
    z-index: 10;
    transition: color .2s;
}

.pc-prev {
    left: 1rem;
}

.pc-next {
    right: 1rem;
}

.pc-arrow:hover {
    color: #ffd700;
}


/* =============== Refuerzos para resoluciones clave =============== */
/* Grandes pantallas (HD a WUXGA) */
@media (min-width: 1600px) {
    #producto-certificados {
        padding: 3rem 2rem;
    }
}

/* Resoluciones medias (SXGA a WXGA) */
@media (max-width: 1366px) and (min-width: 1025px) {
    .pc-content {
        gap: 1.5rem;
    }
}

/* Pequeñas (XGA y menores) */
@media (max-width: 1024px) {
    .pc-content {
        flex-direction: column;
    }

    .pc-carousel,
    .pc-text-container {
        flex: 1 1 100%;
    }

    .pc-image {
        max-width: 70%;
    }
}

/* Móviles (SVGA y menores) */
@media (max-width: 800px) {
    #producto-certificados .pc-title {
        font-size: clamp(1.25rem, 6vw, 1.5rem);
    }

    .pc-arrow {
        font-size: 1.5rem;
    }

    .pc-text h3 {
        font-size: clamp(.9rem, 4vw, 1.25rem);
    }

    .pc-text p {
        font-size: clamp(.8rem, 3.5vw, .9rem);
    }
}

@media (max-width: 800px) {
    .pc-text-container {
        height: clamp(18rem, 58vw, 22rem);
    }

    .pc-text {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow-y: auto;
        padding-right: .75rem;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
    }

    .pc-text::-webkit-scrollbar {
        width: 4px;
    }

    .pc-text::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.35);
        border-radius: 999px;
    }
}

@media (max-width: 375px) {
    #producto-certificados {
        background: #0d315e;
        margin: 4rem auto 2rem;
        padding: 2rem 1rem;
        max-width: 1200px;
        font-family: 'Ghino', sans-serif;
        border-radius: 1px;
    }
}


@media (max-width: 1024px) and (min-width: 768px) {
    #producto-certificados {
        background: #0d315e;
        border-radius: 20px;
        margin: 3rem auto 2rem;
        padding: 2rem 1rem;
        max-width: 700px;
        font-family: 'Ghino', sans-serif;
    }
}

/* =============== Pantallas muy grandes: 1920px en adelante =============== */
@media (min-width: 1920px) {
    #conocenos-mas.conocenos-mas {
      padding: 10rem;
      margin-top: 150px;
    }
    .conocenos-text h2 {
      font-size: 5rem;
    }
    .conocenos-text h1 {
      font-size: 8rem;
    }
    .conocenos-video iframe {
      max-width: 800px;
      height: 450px;
    }
  }
  
  /* =============== Pantallas grandes: entre 1200px y 1919px =============== */
  @media (min-width: 1200px) and (max-width: 1919px) {
    #conocenos-mas.conocenos-mas {
      padding: 8rem;
      margin-top: 120px;
    }
    .conocenos-text h2 {
      font-size: 3rem;
    }
    .conocenos-text h1 {
      font-size: 5rem;
    }
    .conocenos-video iframe {
      max-width: 640px;
      height: 360px;
    }
    #producto-certificados{
        background: #0d315e;
    border-radius: 120px;
    margin: -3rem auto 2rem;
    padding: 2rem 1rem;
    max-width: 1200px;
    font-family: 'Ghino', sans-serif;
    }
    
  }
  
  /* =============== Smartphones anchos: hasta 414px =============== */
  @media (max-width: 414px) {
    #conocenos-mas.conocenos-mas {
      flex-direction: column;
      padding: 2.5rem;
      margin-top: 50px;
    }
    .conocenos-text,
    .conocenos-video {
      width: 100%;
      text-align: center;
    }
    .conocenos-text h2 {
      font-size: 2rem;
    }
    .conocenos-text h1 {
      font-size: 2.5rem;
    }
    .conocenos-video {
      margin-top: 1rem;
    }
    .conocenos-video iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
    }
  }
  
  /* =============== Smartphones pequeños: hasta 375px =============== */
  @media (max-width: 375px) {
    #conocenos-mas.conocenos-mas {
      padding: 2rem;
      margin-top: 40px;
    }
    .conocenos-text h2 {
      font-size: 1.8rem;
    }
    .conocenos-text h1 {
      font-size: 2.2rem;
    }
    .conocenos-video iframe {
      height: auto;
    }
  }
  @media (max-width: 1199px){
    #producto-certificados{
        background: #0d315e;
    border-radius: 1px;
    margin: 8rem auto 2rem;
    padding: 5rem 1rem;
    max-width: 1200px;
    font-family: 'Ghino', sans-serif;
    }
    
  }