@charset "UTF-8";
/*FORMATEO DE ESTILO*/
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  scroll-behavior: smooth; /*SUAVIZA EL SCROLL*/
  user-select: none; /*IMPEDIR LA SELECCIÓN DE TEXTO PARA EL USR*/
  text-align: justify;
}

a:link, a:visited, a:active {
  text-decoration: none;
  transition: 0.5s;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  justify-content: center;
}

/*EDICIÓN DEL MAIN*/
main {
  width: 90%;
  margin: 0 auto;
  margin-top: 100px;
}

header {
  background-color: rgba(0, 0, 0, 0.829);
  position: relative;
  padding: 0 80px;
}
header a {
  color: white;
  font-size: 15px;
}
header a:hover {
  color: orange;
}
header .navbar {
  width: 100%;
  height: 60px;
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header .navbar .logo img {
  height: 50px;
  width: 50px;
  margin-right: 20px;
}
header .navbar .logo a {
  font-size: 25px;
}
header .navbar .logo a span {
  color: aqua;
}
header .navbar .links {
  display: flex;
  gap: 20px;
  margin: 0 auto;
}
header .navbar .toggle_btn {
  color: white;
  font-size: 25px;
  cursor: pointer;
  margin-left: 20px;
  display: none;
}
header .action_btn {
  background-color: orange;
  color: rgb(0, 0, 0);
  padding: 5px 5px;
  border: none;
  outline: none;
  border-radius: 20px;
  font-weight: bold;
  cursor: pointer;
  transition: scale 0.2 ease;
}
header .action_btn:hover {
  scale: 1.05;
  color: white;
}
header .action_btn:active {
  scale: 0.95;
}

.dropdown_menu {
  display: none;
  position: absolute;
  z-index: 10000;
  right: 10px;
  top: 60px;
  width: 300px;
  height: 0;
  background-color: rgba(80, 80, 80, 0.623);
  backdrop-filter: blur(15px);
  border-radius: 10px;
  overflow: hidden;
  transition: height 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open {
  height: 240px;
}

.dropdown_menu li {
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdown_menu .action_btn {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (max-width: 992px) {
  header .navbar .links,
  header .navbar .action_btn {
    display: none;
  }
  header .navbar .toggle_btn {
    display: block;
  }
  .dropdown_menu {
    display: block;
  }
}
@media (max-width: 576px) {
  .dropdown_menu {
    left: 20px;
    width: unset;
  }
  header .navbar .logo a {
    font-size: 20px;
  }
  header .navbar .logo img {
    width: 35px;
    height: 35px;
  }
  header {
    padding: 0 20px;
  }
}
.zona1 {
  position: relative;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  width: 100%;
  height: 100vh;
  background-image: url(../image/IMG-INDEX/HEADER-FITO.jpeg);
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.zona1 h1 {
  color: rgb(201, 207, 107);
}
.zona1 p {
  margin-top: -10px;
  color: rgb(247, 242, 1);
  font-size: 20px;
}

/*
   Algunas concluciones con respecto a las imágenes

   1. Por defecto si no indicamos nada, la imagen aparece por defecto con su tamaño.

   2. Si se establece un size concreto con porcentajes o pixeles, se pierde la relación de aspecto y la calidad.

   3. Con size contain, se le da la propiedad para mostrar la imagen completa en el elemento, manteniendo la relacion de aspecto.

   4. Con size cover, se le da la propiedad para que la imagen cubra al elemento entero, manteniendo la relacion de aspecto.

   Una de las soluciones mas usadas son: Size Cover con attachment fixed y position center.
                                       Size Contain en caso de ser necesario mostrar toda la imagen con background repeat para que se quede el elemento cubierto.
*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////*/
footer {
  backdrop-filter: blur(16px) saturate(176%);
  -webkit-backdrop-filter: blur(16px) saturate(176%);
  background-color: rgba(10, 10, 10, 0.884);
  border: 1px solid rgba(209, 213, 219, 0.3);
  margin-top: auto;
}

.footer__container {
  width: 100%;
  padding: 70px 30px 20px;
}

.footer-container__social-icons {
  display: flex;
  justify-content: center;
}

.footer-container__social-icons a img {
  width: 30px;
  height: 30px;
}

.footer-container__social-icons a {
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.274);
  margin: 10px;
  border-radius: 50%;
}

/*HOVER EFECT EN SOCIAL ICONS*/
.footer__container .footer-container__social-icons a:hover {
  background-color: rgb(255, 255, 255);
  transition: 0.5s;
}

/*/////////////////*/
.footer-container__nav {
  margin: 30px auto;
}

.footer-container__nav ul {
  display: flex;
  justify-content: center;
}

.footer-container__nav ul li a {
  color: white;
  margin: 20px;
  font-size: 1.3em;
  opacity: 0.7;
  transition: 0.5s;
}

/*HOVER EFECT EN NAV*/
.footer-container__nav ul li a:hover {
  opacity: 1;
}

/*/////////////////*/
.footer-container__copyright {
  background-color: black;
  height: 70px;
}

.footer-container__copyright p {
  color: white;
  padding: 20px;
  text-align: center;
}

.footer-container-copyright__creador {
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
  margin: 0px 5px;
}

/*/////////////////*/
/*@mMEDIA FOOTER*/
@media (max-width: 700px) {
  .footer-container__nav ul {
    flex-direction: column;
    align-items: center;
  }
  .footer-container__nav ul li {
    width: 100%;
    text-align: center;
    margin: 10px;
  }
  .footer-container__copyright {
    height: 90px;
  }
}
/*EDICIÓN: 1#SECTION*/
.seccion1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid red;
  margin: 0 auto;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background-color: rgba(189, 228, 118, 0.75);
  border-radius: 12px;
  border: 1px solid rgba(209, 213, 219, 0.3);
}

.seccion1__caracteristicas {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.seccion1-caracteristicas__detalle {
  display: flex;
  justify-content: center;
  align-items: center;
}

.seccion1-portada__imgFito {
  width: 400px;
  height: 280px;
}

@media (max-width: 425px) {
  .seccion1-caracteristicas__detalle {
    flex-direction: column;
  }
}
/*EDICIÓN 2#SECTION*/
.seccion2__p {
  text-align: justify;
}

.form {
  width: 340px;
  height: 440px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 0 40px -10px #000;
  margin: 20px auto;
  padding: 20px 30px;
  max-width: 100%;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  position: relative;
}

.form__h2 {
  margin: 10px 0;
  padding-bottom: 10px;
  width: 180px;
  color: grey;
  border-bottom: 3px solid black;
}

input {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: none;
  outline: none;
  resize: none;
  border: 0;
  font-family: Arial, Helvetica, sans-serif;
  transition: all 0.3s;
  border-bottom: 2px solid grey;
}

input:focus {
  border-bottom: 2px solid lightblue;
}

.form__p:before {
  content: attr(type);
  display: block;
  margin: 28px 0 0;
  font-size: 14px;
  color: gray;
}

.form__boton {
  float: right;
  padding: 8px 12px;
  margin: 8px 0 0;
  font-family: Arial, Helvetica, sans-serif;
  border: 2px solid gray;
  background: 0;
  color: black;
  cursor: pointer;
  transition: all 0.3s;
}

.form__boton:hover {
  background: gray;
  color: white;
}

.form__contacto {
  position: absolute;
  bottom: -15px;
  right: -20px;
  background: black;
  color: white;
  width: 320px;
  padding: 16px 4px 16px 0;
  border-radius: 6px;
  font-size: 13px;
  box-shadow: 10px 10px 40px -14px #000;
}

.form__contacto p {
  text-align: center;
}

@media screen and (max-width: 500px) {
  .form {
    width: 60%;
  }
  .form__contacto {
    width: 80%;
  }
  .form__contacto p {
    font-size: 15px;
  }
}
h1 {
  text-align: center;
}

.gallery__container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 150px;
  padding: 20px;
  grid-gap: 10px;
}
.gallery__container .gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /*HACEMOS QUE LA IMG OCUPE TODO SU ESPACIO EN GRILLAS*/
}
.gallery__container .gallery__item {
  position: relative;
}
.gallery__container .gallery__tittle {
  position: absolute;
  bottom: 0;
  color: white;
  background: linear-gradient(rgba(255, 255, 255, 0), rgb(0, 0, 0));
  width: 100%;
  margin: 0;
  padding: 10px;
  text-align: center;
  font-size: 18px;
}

/*nth-child() es una pseudo-clase que selecciona a los elementos en un grupo de hermanos que coinciden con el patrón especificado*/
.gallery__item:nth-child(3) {
  grid-row-start: span 2;
}

.gallery__item:nth-child(4) {
  grid-column-start: span 2;
}

.gallery__item:nth-child(5) {
  grid-column-start: span 2;
}

@media (min-width: 1024px) {
  .gallery__container {
    grid-template-columns: repeat(4, 1fr);
  }
  .gallery__item:nth-child(3) {
    grid-column-start: span 2;
  }
  .gallery__item:nth-child(6) {
    grid-row-start: span 2;
  }
  .gallery__item:nth-child(7) {
    grid-row-start: span 2;
  }
}
/*PÁGINA IMÁGENES: GRILLAS*/
.grilla-bio .border {
  border: 2px solid red;
}

.cont-grilla__bio {
  margin: 0 auto;
  margin-bottom: 100px;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 50px 100px repeat(4, 1fr) 100px;
  row-gap: 20px;
  column-gap: 200px;
  grid-template-areas: "cont-grilla-bio__h1 cont-grilla-bio__h1" "cont-grilla-bio__p cont-grilla-bio__p" "cont-grilla-bio__produccion cont-grilla-bio-produccion__datos-generales" "IMG-1 IMG-2" "IMG-3 IMG-4" "IMG-5 IMG-6" "cont-grilla-bio__inferior cont-grilla-bio__inferior";
}

.cont-grilla-bio__h1 {
  grid-area: cont-grilla-bio__h1;
  text-align: center;
}

.cont-grilla-bio__p {
  grid-area: cont-grilla-bio__p;
}

.cont-grilla-bio__produccion {
  grid-area: cont-grilla-bio__produccion;
  margin: 0 auto;
}

.cont-grilla-bio-produccion__datos-generales {
  grid-area: cont-grilla-bio-produccion__datos-generales;
  margin: 0 auto;
}

.IMG-1 {
  grid-area: IMG-1;
}

.IMG-2 {
  grid-area: IMG-2;
}

.IMG-3 {
  grid-area: IMG-3;
}

.IMG-4 {
  grid-area: IMG-4;
}

.IMG-5 {
  grid-area: IMG-5;
}

.IMG-6 {
  grid-area: IMG-6;
}

.EDIT-IMG {
  margin: 0 auto;
}

.cont-grilla-bio__inferior {
  grid-area: cont-grilla-bio__inferior;
}

@media (max-width: 800px) {
  .cont-grilla__bio {
    display: flex;
    flex-direction: column;
    column-gap: 0px;
  }
  .EDIT-IMG {
    width: 50%;
  }
}
#container-floating {
  position: fixed;
  width: 70px;
  height: 70px;
  bottom: 30px;
  right: 5px;
  z-index: 22222;
}
#container-floating .nds {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: fixed;
  z-index: 300;
  transform: scale(0);
  cursor: pointer;
}
#container-floating .nds a img {
  width: 25px;
  height: 25px;
}
#container-floating .nd1 {
  background: #d3a411;
  right: 15px;
  bottom: 120px;
  animation-delay: 0.2s;
  animation: bounce-out-nds 0.3s linear;
  animation-fill-mode: forwards;
}
#container-floating .nd3 {
  background: #3c80f6;
  right: 15px;
  bottom: 180px;
  animation-delay: 0.15s;
  animation: bounce-out-nds 0.15s linear;
  animation-fill-mode: forwards;
}
#container-floating .nd4 {
  background: #ba68c8;
  right: 15px;
  bottom: 240px;
  animation-delay: 0.1s;
  animation: bounce-out-nds 0.1s linear;
  animation-fill-mode: forwards;
}

#floating-button {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #db4437;
  position: fixed;
  bottom: 30px;
  right: 5px;
  cursor: pointer;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}
#floating-button .plus {
  color: white;
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 0;
  margin: 0;
  line-height: 55px;
  font-size: 38px;
  font-family: "Roboto";
  font-weight: 300;
  animation: plus-out 0.3s;
  transition: all 0.3s;
}
#floating-button .edit {
  position: absolute;
  top: 0;
  display: block;
  bottom: 0;
  left: 0;
  display: block;
  right: 0;
  padding: 0;
  opacity: 0;
  margin: auto;
  line-height: 65px;
  transform: rotateZ(-70deg);
  transition: all 0.3s;
  animation: edit-out 0.3s;
}

#container-floating:hover {
  height: 400px;
  width: 90px;
  padding: 30px;
}

#container-floating:hover .plus {
  animation: plus-in 0.15s linear;
  animation-fill-mode: forwards;
}

#container-floating:hover .edit {
  animation: edit-in 0.2s;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

#container-floating:hover .nds {
  animation: bounce-nds 0.1s linear;
  animation-fill-mode: forwards;
}

#container-floating:hover .nd3 {
  animation-delay: 0.08s;
}

#container-floating:hover .nd4 {
  animation-delay: 0.15s;
}

@keyframes edit-in {
  from {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes edit-out {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(-70deg);
  }
}
@keyframes plus-in {
  from {
    opacity: 1;
    transform: rotateZ(0deg);
  }
  to {
    opacity: 0;
    transform: rotateZ(180deg);
  }
}
@keyframes plus-out {
  from {
    opacity: 0;
    transform: rotateZ(180deg);
  }
  to {
    opacity: 1;
    transform: rotateZ(0deg);
  }
}
@keyframes bounce-nds {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes bounce-out-nds {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0);
  }
}
.reminder {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
  line-height: 40px;
}

.mostrar {
  transition: 400ms;
  visibility: visible !important;
  opacity: 1 !important;
}

.carousel {
  height: 90vh;
}

/*# sourceMappingURL=style.css.map */