/* =========================
   CONTENEDOR PRINCIPAL
========================= */


.contenedorP{

  max-width: 1200px;

  margin: 20px auto;

  padding: 40px;

  border-radius: var(--radio);

  background-color: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
}

/* =========================
   TITULOS
========================= */

.contenedorP h2{

  font-size: 40px;

  color: #2d5a5a;

  margin: 50px 0 25px;

  padding-bottom: 8px;

  border-bottom: 2px solid #fd950d;
}

.central h1 {

  font-size: 40px;

  margin-bottom: 25px;

  text-align: center;
}

.central h2 {

  font-size: 28px;

  margin-bottom: 20px;
}

.central p {

  line-height: 1.9;

  font-size: 16px;
}

/* =========================
   GRID
========================= */

.contenedor{

  display: grid;

  grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

  gap: 30px;

  max-width: 1200px;

  margin: auto;
}

/* =========================
   SECCIONES
========================= */

.contenedorP section{

  
  background-image: url("../imagenes/fondo_copia.png");
  background-repeat: no-repeat;
  background-size: cover;

  backdrop-filter: blur(6px);

  border-radius: 20px;

  padding: 30px;

  margin-bottom: 40px;

  box-shadow:
    0 4px 15px rgba(0,0,0,0.08);;
}

/* =========================
   TARJETAS
========================= */

.planta-item{

   
  border-radius: 20px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  width: 100%;

  max-width: 300px;

  margin: auto;



  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.planta-item:hover{

  transform: translateY(-5px);

  box-shadow:
    0 10px 25px rgba(0,0,0,0.15);
}

.planta-item img{

  width: 100%;

  height: 220px;

  object-fit: contain;

  padding: 15px;
}

.planta-text{

  padding: 25px;

  display: flex;

  flex-direction: column;

  flex-grow: 1;
}

.planta-text h3{

  margin: 0 0 12px;

  font-size: 27px;

  color: #2d5a2d;

  text-align: center;
}

.planta-text p{

  margin: 5px 0;

  color: #444;

  line-height: 1.7;

  font-size: 15px;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width:768px){

  .contenedorP{

    padding: 20px 15px;
  }

  .contenedor{

    grid-template-columns: 1fr;
  }

  .contenedorP section{

    padding: 20px;
  }

  .planta-item{

    max-width: 100%;
  }

  .planta-item img{

    height: 180px;
  }
}