@import url(../../../css/style.css);

.summary-section {
    margin: 3%; padding:1%;  border: 2px solid #e95389; padding-top:10px; display: flex; flex-direction: row;
  }
  .summary-section .left-part {width: 33%; padding: 1%;}
  .summary-section .right-part {width: 63%; padding: 1%;}

  .high-lights {
    margin: 0% 3%; padding:1%; border-radius: 10px; text-align: center; 
    background: linear-gradient(360deg, rgba(255,255,255,1) 0%, #e9538a2b,  #e9538a53 100%);}
  .high-lights p {
    color: #e95389; font-weight: 600; font-size: 1.75rem; letter-spacing: 0rem;}


  .workshop-section { margin: 1% 3%; padding:1%; display: flex; flex-direction: row;}
  .workshop-section .L{width: 25%;}
  .workshop-section .R{width: 75%;}

  .workshop-section .R .workshop-section-blue {margin: 1.5%; padding: 2.5% 0; background-color: #0ab5f81f; border-radius: 0 50px 30px 0;}
  .workshop-section .R .workshop-section-blue h2 {font-size: 1.6rem; font-weight: 600; color:  #0ab5f8; text-align: justify; padding-top: 2%; margin-bottom: 3%; margin-left: 3%;}
  .workshop-section .R .workshop-section-blue p {margin-bottom: 2%; margin-left: 3%;}

  .workshop-section .R .workshop-section-green {margin: 1.5%; padding: 2.5% 0; background-color: #45b83d1e; border-radius: 0 50px 30px 0;;}
  .workshop-section .R .workshop-section-green h2 {font-size: 1.6rem; font-weight: 600; color:  #46b83d; text-align:justify; padding-top: 2%;  margin-bottom: 3%; margin-left: 3%;}
  .workshop-section .R .workshop-section-green p {margin-bottom: 2%; margin-left: 3%;}
  




/*  .workshop-section .left-part {width: 48%; padding: 0.5%; margin: 0.5%; border-radius: 50px 10px; background-color: #0ab5f81f;}
      .workshop-section .left-part h2 {font-size: 1.6rem; font-weight: 600; color:  #0ab5f8; text-align: center; padding-top: 10%}
  .workshop-section .right-part {width: 48%;  padding: 0.5%; margin: 0.5%; border-radius: 10px 50px; background-color: #45b83d1e;} 
      .workshop-section .right-part h2 {font-size: 1.6rem; font-weight: 600; color:  #46b83d;  text-align: center; padding-top: 10%;} */
  
  .workshop-content {
    border-radius: 10px; margin: 1% 3%; padding:1%; display: flex; flex-direction: column; background-color: #9175ca18;}
    .workshop-content img {border-radius: 20px; margin: 3%;}
    .workshop-content .title-h2 {text-align: right; color: #875ddb; font-weight: 900; letter-spacing: 0rem; font-size: 2.3rem; padding-top: 2%;}
    .workshop-content .colum-2 {display: flex; flex-direction: row;}
    .workshop-content .colum-2 .colum-2-L {width: 47%; padding: 1%;}
    .workshop-content .colum-2 .colum-2-L .cont-list {padding: 2%;}
    .workshop-content .colum-2 .colum-2-L .cont-list dl hr {margin: 3% 0; border-top: 1px dotted #875ddb;}
    .workshop-content .colum-2 .colum-2-L .cont-list dt {color: #875ddb; font-weight: 600; }
    .workshop-content .colum-2 .colum-2-R {width: 47%; padding: 1%;}

    .tips{width: 20%;}
    .tips img {border-radius: 50%; padding: 20% 0;}
    .tips-main{width: 80%; background: linear-gradient(270deg, rgba(255,255,255,1) 0%, #e9538a2b,  #e9538a53 100%); border-radius: 10px;}
    .tips-main h2 {font-size: 1.6rem; font-weight: 600; color: #e95389; text-align: justify; padding-top: 2%; margin-bottom: 3%; margin-left: 3%;}

   


  @media screen and (max-width: 880px){
    .summary-section {flex-direction: column;}
    .summary-section .left-part {width: 100%; padding: 0%;}
    .summary-section .right-part {width: 100%; padding: 0%; margin-top: 5%;}

    /*.workshop-section {flex-direction: column;}
    .workshop-section .left-part {width: 100%; padding: 0%;  margin: 2% 0;}
    .workshop-section .right-part {width: 100%; padding: 0%;  margin: 2% 0;}
    .workshop-section .left-part h2 {padding-top: 5%;}
    .workshop-section .right-part h2 {padding-top: 5%;}
    .workshop-section p {padding-bottom: 5%;}*/

  .workshop-section {flex-direction: column;}
  .workshop-section .L{width: 100%;}
  .workshop-section .R{width: 100%;}
  .workshop-content .colum-2 {flex-direction: column;}
  .workshop-content .colum-2 .colum-2-L , .workshop-content .colum-2 .colum-2-R {width: 100%;}

  .tips{width: 25%; padding: 0; margin: auto;}
  .tips-main{width: 100%; }
  }

  @media screen and (max-width: 480px){
    .summary-section {flex-direction: column;}
    .summary-section .left-part {width: 100%; padding: 0%;}
    .summary-section .right-part {width: 100%; padding: 0%; margin-top: 5%;}

    .high-lights p {letter-spacing: 0;}

    .workshop-content .title-h2 {text-align: left;}
  }

.caption-block {
    text-align: right;
    margin-bottom: 30px;
}
.caption-block-nuevo {
    text-align: center;
    margin-bottom: 30px;
}

.img-right {
    max-height: 500px;
    max-width: 100%;
    display: block;
    margin-left:auto; /* esto empuja la imagen hacia la derecha */
}
@media (max-width: 768px) {
    .img-right {
        margin-left: auto!important;
        margin-right: auto!important; /* centrado horizontal */
    }
}


.caption-text {
    font-size: 9px;
    line-height: 1.4;
    margin-top: 8px;
    color: #606060;
    margin-left: auto;/* esto empuja la imagen hacia la derecha */
}

/* Contenedor general: apilado vertical y centrado */
.kyodai-promo-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

/* Caja rosada rectangular arriba */
.kyodai-side-box {
  background-color: #fdd9e5;
  border-radius: 12px;
  padding: 2rem;
  width: 90%;
  max-width: 800px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Contenido dividido en dos columnas */
.kyodai-side-content {
  display: flex;
  width: 100%;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Columna izquierda */
.kyodai-side-left {
  flex: 1;
  min-width: 180px;
  text-align: center;
}

.kyodai-side-title {
  display: block;
  font-weight: bold;
  font-size: 2rem;
  color: #d2407e;
  margin-bottom: 0.5rem;
}

.kyodai-side-subtitle {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.kyodai-school-count {
  background-color: white;
  display: inline-block;
  padding: 0.4rem 0.8rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Columna derecha */
.kyodai-side-right {
  flex: 2;
  font-size: 0.95rem;
  text-align: center;
  color: #d2407e;
}

/* Caja blanca abajo */
.kyodai-main-box {
  position: relative;
  background: #fff;
  border: 2px solid #dfe5f0;
  padding: 2rem;
  padding-top: 3rem;
  width: 50%;
  max-width: 600px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  border-radius: 8px;
  margin-top:20px;
}

/* Cartel azul encima del borde */
.kyodai-banner {
  position: absolute;
  top: -55px;
  left: 5px;
  background: #3a84d7;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 2rem;
  transform: rotate(-5deg);
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  z-index: 2;
  width: 150px;
  height: 60px;
}

/* Texto del mensaje */
.kyodai-message p {
  font-size: 22px;
  line-height: 1.6;
  color: #333;
  text-align: center;
  margin: 0;
}

/* Línea inferior de puntos de colores */
.kyodai-border-dots {
  margin-top: 1rem;
  height: 12px;
  background-image: repeating-linear-gradient(
    to right,
    #f8b5c4 0, #f8b5c4 6px,
    transparent 6px, transparent 12px,
    #b5d7f8 12px, #b5d7f8 18px,
    transparent 18px, transparent 24px,
    #d5f8b5 24px, #d5f8b5 30px,
    transparent 30px, transparent 36px,
    #e6c5f5 36px, #e6c5f5 42px,
    transparent 42px, transparent 48px
  );
  background-repeat: repeat-x;
  border-radius: 6px;
}

/* Responsive */
@media (max-width: 600px) {
  .kyodai-side-content {
    flex-direction: column;
    align-items: center;
  }

  .kyodai-side-right {
    text-align: center;
  }

  .kyodai-main-box {
    width: 80%;
    max-width: 90vw; /* ya está más pequeña, mantenemos esto */
  }

  .kyodai-side-box {
    width: 80%;
    max-width: 95vw; /* hace la caja rosada más angosta en móvil */
    padding: 1.5rem;  /* opcional: menos relleno para que no se vea tan grande */
  }
}

.kyodai-separator {
  width: 8px;
  min-height: 100%;
  background-image: repeating-linear-gradient(
    to bottom,
    #ec8fa3 0px, #ec8fa3 6px,
    transparent 6px, transparent 12px,
    #83b2e1 12px, #83b2e1 18px,
    transparent 18px, transparent 24px,
    #b7e78b 24px, #b7e78b 30px,
    transparent 30px, transparent 36px,
    #be8dd5 36px, #be8dd5 42px,
    transparent 42px, transparent 48px
  );
  background-repeat: repeat-y;
  border-radius: 2px;
}

@media (max-width: 600px) {
  .kyodai-separator {
    display: none;
  }
}