/* ==========================================
   PLANTILLA PROYECTO (Hero)
   container: 1066
   alto general: 516
   gap columnas: 109
   slider: 436x436
   ========================================== */

.pp-proyecto{
  background: var(--azul-10, #eaf6ff);
  padding: 200px 0 80px;
}

.pp-proyecto__container{
  max-width: 1066px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Back */
.pp-proyecto__back{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--verde-100, #6bb400);
  
  margin-bottom: 18px;
}

.pp-proyecto__back-ic{
  width: 18px;
  height: 18px;
  display: block;
}

/* Grid principal */
.pp-proyecto__grid{
  min-height: 516px;
  display: grid;
  grid-template-columns: 1fr 436px;
  column-gap: 40px;
  align-items: start;
}

/* Info */
.pp-proyecto__kicker{
  margin: 0 0 10px;
  color: var(--azul-oscuro-100);
}

.pp-proyecto__title{
  margin: 0 0 18px;
  color: var(--azul2-100, #0b63a8);
}

.pp-proyecto__text p{
  margin: 0 0 14px;
  color: var(--texto-100);
  line-height: 1.6;
}

.pp-proyecto__meta{
  margin-top: 18px;
  color: var(--azul2-100);
}

.pp-proyecto__meta p{
  margin: 6px 0;
}

/* Slider */
.pp-proyecto__slider{
  width: 436px;
}

.pp-proyecto__viewport{
  width: 436px;
  height: 436px;
  border-radius: 26px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
}

.pp-proyecto__track{
  height: 100%;
  display: flex;
  transition: transform .35s ease;
  will-change: transform;
}

.pp-proyecto__slide{
  width: 436px;
  height: 436px;
  flex: 0 0 436px;
  margin: 0;
}

.pp-proyecto__slide img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nav debajo */
.pp-proyecto__nav{
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
}

.pp-proyecto__btn{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.pp-proyecto__btn img{
  width: 42px;
  height: 42px;
  display: block;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1100px){
  .pp-proyecto__grid{
    grid-template-columns: 1fr;
    row-gap: 22px;
    min-height: auto;
  }

  .pp-proyecto__media{
    display: grid;
    justify-items: center;
  }
}

@media (max-width: 520px){
  .pp-proyecto__viewport{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* mantiene 436x436 proporcional */
  }

  .pp-proyecto__slider{
    width: 100%;
  }

  .pp-proyecto__slide{
    width: 100%;
    flex: 0 0 100%;
    height: auto;
  }
}

/* ==========================================
   PROYECTO – Nuestro objetivo
   wave: images/wave/wave-proyectos-plantillas.svg
   card: 1060x267
   gap columnas: 32
   ========================================== */

/* 1) Wave transición */
.pp-obj-wave{
  height: 210px; /* ajusta si tu wave necesita más/menos */
  background: #fff url("../images/wave/wave-proyectos-plantilla.svg") no-repeat center top;
  background-size: cover;
  /* Si tu sección de arriba es azul-10, esta transición funciona bien.
     Si necesitas “pegar” más, usa margin-top negativo aquí. */
  margin-bottom: -70px; /* ✅ “funde” el wave con la tarjeta */
}

/* 2) Sección base */
.pp-obj{
  background: #fff;
  padding: 0 0 70px;
}

.pp-obj__container{
  max-width: 1066px; /* tus plantillas usan 1066 */
  margin: 0 auto;
  padding: 0 24px;
}

/* 3) Card azul */
.pp-obj__card{
  width: 1060px;
  min-height: 267px;
  margin: 0 auto;

  background: #0b6fc2; /* ajusta a tu azul exacto */
  border-radius: 26px;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);

  padding: 44px 56px;
  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
  top: -100px;
}

/* adornos SVG (curvas) como before/after */
.pp-obj__card::before,
.pp-obj__card::after{
  content: "";
  position: absolute;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: .35;
}

/* esquina superior izquierda */
.pp-obj__card::before{
  left: -14px;
  top: -18px;
  width: 345px;
  height: 337px;
  background-image: url("../images/curvas_formacion_before.svg"); /* cambia a tu SVG real */
}

/* esquina inferior derecha */
.pp-obj__card::after{
  right: -22px;
  bottom: -28px;
  width: 427px;
  height: 337px;
  background-image: url("../images/curvas_formacion_after.svg"); /* cambia a tu SVG real */
}

/* contenido encima de los adornos */
.pp-obj__left,
.pp-obj__right{
  position: relative;
  z-index: 2;
}

.pp-obj__title{
  margin: 0 0 18px;
  color: #fff;
}

/* icons */
.pp-obj__icons{
  display: flex;
  gap: 16px;
}

.pp-obj__icon{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pp-obj__icon img{
  width: 36px;
  height: 36px;
  display: block;
}

/* texto derecha */
.pp-obj__text{
  margin: 0;
  color: #fff;
 
  max-width: 430px;
}

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1100px){
  .pp-obj__card{
    width: 100%;
    grid-template-columns: 1fr;
    padding: 28px 24px;
    gap: 18px;
  }

  .pp-obj-wave{
    margin-bottom: -30px;
    height: 160px;
  }
}

/* ==========================================
   PROYECTO – Metas alcanzadas
   container: 1284
   SVGs: images/number/1.svg ... 6.svg
   ========================================== */

.pp-metas{
  padding: 72px 0;
  background: #fff;
}

.pp-metas__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.pp-metas__head{
  text-align: center;
  margin-bottom: 34px;
}

.pp-metas__title{
  margin: 0;
  color: var(--azul2-100);
}

/* Grid */
.pp-metas__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 46px 32px; /* vertical / horizontal */
  align-items: start;
}

/* Item */
.pp-metas__item{
  text-align: center;
}

.pp-metas__num{
  width: 150px;       /* ajusta si tu SVG es más grande/chico */
  height: 150px;
  margin: 0 auto 16px;
}

.pp-metas__num img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.pp-metas__text{
  margin: 0 auto;
  max-width: 320px;
  color: var(--azul2-100);
  
}

.pp-metas__text strong{
  font-weight: 800;
}

/* Responsive */
@media (max-width: 980px){
  .pp-metas__grid{
    grid-template-columns: repeat(2, 1fr);
    gap: 38px 24px;
  }
}

@media (max-width: 560px){
  .pp-metas{
    padding: 56px 0;
  }

  .pp-metas__grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .pp-metas__num{
    width: 132px;
    height: 132px;
  }

  .pp-metas__text{
    max-width: 340px;
  }
}

/* ==========================================
   PROYECTO – ODS + Apoyo
   container: 1284
   cards: 630x390
   gap: 24
   ========================================== */

.pp-ods-apoyo{
  padding: 72px 0;
  background: #fff;
}

.pp-ods-apoyo__container{
  max-width: 1284px;
  margin: 0 auto;
  padding: 0 24px;
}

.pp-ods-apoyo__grid{
  display: grid;
  grid-template-columns: 630px 630px;
  gap: 24px;
  justify-content: space-between;
}

.pp-ods-apoyo__card{
  width: 630px;
  height: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);
  padding: 44px 48px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* La card: NO uses space-between porque empuja el contenido */
.pp-ods-apoyo__card{
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* 👈 importante */
}

/* Título arriba centrado */
.pp-ods-apoyo__title{
  margin: 0 0 26px;
  text-align: center;
}

/* Contenedor de logos: ocupa el resto del alto y centra */
.pp-ods-apoyo__logos{
  flex: 1;                     /* 👈 ocupa el espacio restante */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 24px 32px;
  align-items: center;
  justify-items: center;
  align-content: center;       /* 👈 centra verticalmente cuando hay pocos */
}

/* Item logo 255x91 */
.pp-ods-apoyo__item{
  width: 100%;
  max-width: 255px;
  height: 91px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-ods-apoyo__item img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


.pp-ods-apoyo__title{
  margin: 0 0 26px;
  color: var(--azul2-100);
  text-align: center;
}

/* Espacio para tu SVG dentro de cada card */
.pp-ods-apoyo__slot{
  height: calc(390px - 44px - 44px - 26px - 44px); /* (alto card - paddings - margen título aprox) */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Cuando metas el SVG como <img> */
.pp-ods-apoyo__slot img{
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

/* Responsive */
@media (max-width: 1320px){
  .pp-ods-apoyo__grid{
    grid-template-columns: 1fr;
    justify-content: center;
  }

  .pp-ods-apoyo__card{
    width: min(630px, 100%);
  }
}




/* Cada logo */
.pp-ods-apoyo__item {
  width: 100%;
  max-width: 255px;
  height: 91px;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Imagen del logo */
.pp-ods-apoyo__item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}


/* ===========================
   ODS + APOYO – MÓVIL
   =========================== */

@media (max-width: 768px){

  /* Grid principal: una sola columna */
  .pp-ods-apoyo__grid{
    grid-template-columns: 1fr;
    gap: 28px;
    justify-content: center;
  }

  /* Card */
  .pp-ods-apoyo__card{
    width: 100%;
    height: auto;               /* 👈 deja respirar */
    padding: 28px 22px;
  }

  /* Título */
  .pp-ods-apoyo__title{
    margin-bottom: 20px;
    text-align: center;
  }

  /* Logos: máximo 2 por fila */
  .pp-ods-apoyo__logos{
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  /* Logo */
  .pp-ods-apoyo__item{
    max-width: 100%;
    height: 72px;
  }
}


/* ==========================================
   ODS CARD (independiente)
   ========================================== */
/* ==========================================
   ODS CARD – Independiente
   cuadrados: 116x116
   soporte: 1 a 8 ítems
   ========================================== */

.pp-ods-card{
  width: 630px;
  height: 390px;

  background: #fff;
  border-radius: 24px;
  box-shadow: 0 22px 45px rgba(0,0,0,.12);

  padding: 44px 48px;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Título */
.pp-ods-card__title{
  margin: 0 0 32px;
  color: var(--azul2-100);
  text-align: center;
}

/* GRID de ODS */
.pp-ods-card__grid{
  width: 100%;
  flex: 1;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
  gap: 24px 20px;

  justify-items: center;
  align-content: center;
}

/* Cada ODS */
.pp-ods-card__item{
  width: 116px;
  height: 116px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;
  background: transparent;
}

/* Imagen ODS */
.pp-ods-card__item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* ==========================================
   Responsive – ODS Card
   ========================================== */

@media (max-width: 1320px){
  .pp-ods-card{
    width: 100%;
    max-width: 630px;
  }
}

@media (max-width: 980px){
  .pp-ods-card{
    height: auto;
    padding: 36px 28px 40px;
  }

  .pp-ods-card__title{
    margin-bottom: 28px;
  }

  .pp-ods-card__grid{
    grid-template-columns: repeat(auto-fit, minmax(116px, 1fr));
    gap: 22px;
  }
}

@media (max-width: 560px){
  .pp-ods-card{
    padding: 32px 20px 36px;
  }

  .pp-ods-card__grid{
    grid-template-columns: repeat(2, 116px);
    justify-content: center;
    gap: 20px;
  }
}

@media (max-width: 360px){
  .pp-ods-card__grid{
    grid-template-columns: 116px;
  }
}

.tproyecto{
  font-size: 36px !important;
    line-height: 44px !important;
}