* {
  margin-top: 0;
  padding: 0;
  box-sizing: border-box;
}

/* fuentes */
.inter-font {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.karantina-light {
  font-family: "Karantina", system-ui;
  font-weight: 100;
  font-style: normal;
  font-size: 1.8rem;
  letter-spacing: 2px;
}
.fuente-ch {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 0.9rem;
}

.karantina-regular {
  font-family: "Karantina", system-ui;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.9vh;
}

.karantina-bold {
  font-family: "Karantina", system-ui;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 1vh;
}
h1 {
  background-color: #bcbbbb;
}
h3 {
  background-color: #efebeb;
}

.margen {
  margin-left: 2%;
}

.servresp {
  display: none;
}

/* Grid Areas de la pagina - plantilla principal */

.item1 {
  grid-area: header;

}

.item2 {
  grid-area: foto;
  align-content: center;
  justify-content: center;
}

.item3 {
  grid-area: main;
  position:relative;
  width: auto;
  background-color: #ada9a9;
  border-radius: 10px;
  box-shadow: 0px 1px 5px rgb(87, 87, 87);
  margin:auto;
  top: -6vh;
  opacity: 0.9;
  border: 1px;
  border-style: solid;
  border-color: rgb(13, 13, 13);
}
.item4 {
  grid-area: cita; margin:auto; width:85%;
}
.item5 {
  grid-area: servicios; margin:auto; width:90%;
}
.item6 {
  grid-area: bio; background-color: #efebeb; margin:auto; width:82%; text-align: center;
}
.item7 {
  grid-area: trabajos; background-color: #efebeb; margin:auto; width:82%; text-align: center;
}
.item8 {
  grid-area: contactos; background-color: #efebeb; margin:auto; width:82%; text-align: center;
}

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'foto foto foto foto foto foto'
    'main main main main main main'
    'cita cita cita cita cita cita'
    'servicios servicios servicios servicios servicios servicios'
    'bio bio bio bio bio bio'
    'trabajos trabajos trabajos trabajos trabajos trabajos'
    'contactos contactos contactos contactos contactos contactos';
}

.grid-container>div {
  padding: 3px 0;
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 15px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* header  */
header {
  background-color: rgb(0, 0, 0);
  position: fixed;
  display: inline-block;
  width: 100%;
  height: 8vh;
  font-size: 1.2rem;
  box-shadow: 0px 1px 5px rgb(87, 87, 87);
  z-index: 1;
}

/* footer */
footer {
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 5vh;
  box-shadow: 0px 1px 5px rgb(87, 87, 87);
  align-content: center;
  justify-content: center;
  position: relative;
}

/* estilo links */
a:link {
  color: white;
  text-decoration: none;
}

a:visited {
  color: white;
  text-decoration: none;
}

a:hover {
  
  text-decoration: underline;
  text-shadow: 1px 1px 1px rgb(148, 148, 148);
}

a:active {
  color: white;
  text-decoration: underline;
}

/* barra navegacion */

.titulo {
  font-size: 2.2rem;
  color: rgb(255, 255, 255);
  text-shadow: 4px 4px 5px rgb(255, 4, 4);
  margin-left: 10%;
}

/* contenedor del header */
.container_top {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  margin-left: 10px;
}

/* navegador responsive NONE */
.nav_responsive {
  display: none;
}

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  color: #FFF;
  height: 30px;
  padding: 1.8em;
}

.menu {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu>li {
  margin: 0 1rem;
  overflow: hidden;
}

.menu-button-container {
  display: none;
  height: 100%;
  width: 30px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#menu-toggle {
  display: none;
}

.menu-button,
.menu-button::before,
.menu-button::after {
  display: block;
  background-color: #fff;
  position: absolute;
  height: 4px;
  width: 30px;
  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 2px;
}

.menu-button::before {
  content: '';
  margin-top: -8px;
}

.menu-button::after {
  content: '';
  margin-top: 8px;
}

#menu-toggle:checked+.menu-button-container .menu-button::before {
  margin-top: 0px;
  transform: rotate(405deg);
}

#menu-toggle:checked+.menu-button-container .menu-button {
  background: rgba(255, 255, 255, 0);
}

#menu-toggle:checked+.menu-button-container .menu-button::after {
  margin-top: 0px;
  transform: rotate(-405deg);
}

/* imagen principal */
#portada {
  width: 100%;
  margin: auto;
  padding: 0;
  box-shadow: 0px 1px 5px rgb(87, 87, 87);
}

/* grilla seccion info principal (menu) */

.data {
  display: grid;
  height: auto;
  grid-template-columns: auto auto;
  gap: 10px;
  padding: 5px 50px 5px 50px;
  overflow: hidden;
}

.data>div {
  background-color: #ebebeb;
  text-align: left;
  color: rgb(0, 0, 0);
  font-size: 1.2rem;
  border-radius: 10px;
  border: 2px solid #444;
  align-items: center;
  font-weight: bold;
  overflow: hidden;
  padding: 0 10px 0 10px;
  text-shadow: 2px 1px 3px rgb(243, 170, 170);
  box-shadow: 5px 5px #000000;

}
.masinfo {
  position:static;
  font-weight: normal;
  font-size: 1rem;
  text-align: end;
}

.cuadro_cita{
  position:relative;
  width: 90%;
  z-index: 2; 
}

.cita {
  font-style: italic;
  font-size: 2rem;
  text-align: center;
  text-shadow: 2px 1px 3px rgb(255, 255, 255);
}

#imgseccion {
  width: auto;
  height: 100px;
  border-radius: 10px;
}

/* contactos  */

.menu-item2 {
  text-decoration: none;
  /* Quita la decoración de los enlaces */
  padding: 1px 1px;
  /* Espaciado interno de cada elemento del menú */
  transition: background-color 0.3s ease;
  /* Transición suave para el cambio de color de fondo */
  align-content: center;
  color:#000000 !important;
}
.social-button {
  display: inline-flex;
  align-items: center;
  padding: 5px;
  text-decoration: none;
  background-color: #000000;
  border-radius: 50px;
  transition: background-color 0.3s ease;
  justify-content: center;
  align-content: center;
}

.social-button:hover {
  background-color: rgb(0, 0, 0);
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  border-radius: 50px;
  margin-left: 1px;
}
.item2resp {
  display: none;
}
.item6resp {
  display:none;
}

/* responsive */
@media only screen and (max-width: 768px) {

  .container_top {
    display: none;
  }
  .serv {
    display: none;
  }
  .item6 {
    display:none;
  }
  .item7 {
    display:none;
  }
  .item6resp {
    display:grid;
    grid-area: bio; background-color: #ffffff; margin:auto; width:82%; text-align: center;
  }
  .servresp {
display: inline-block;
margin:auto; 
width:90%;
}
h2 {
  background-color: #dad9d9;
 
}
.karantina-light {
  font-family: "Karantina", system-ui;
  font-weight: 100;
  font-style: normal;
  font-size: 1.5rem;
  
}
  
  .item2{
   grid-area: foto;
  }
  .item2resp {
    grid-area: foto;
    align-content: center;
    justify-content: center;
  }
  .cita {
    font-style: italic;
    font-size: 1.5rem;
    text-align: center;
    text-shadow: 2px 1px 3px rgb(255, 255, 255);
  }

  .titulo {
    font-size: 1.8rem;
    color: rgb(255, 255, 255);
    margin: auto;
  }
  #imgseccion {
    width: auto;
    height: 60px;
    border-radius: 10px;
  }

  .karantina-regular {
    font-family: "Karantina", system-ui;
    font-weight: 300;
    font-style: normal;
    letter-spacing: 0.5vh;
  }

  #portada {
    width: auto;
    margin: auto;
    padding: 0;
  }

  .data {
    display: grid;
    height: 140px;
    grid-template-columns: auto auto;
    gap: 5px;
    background-color: #000000;
    padding: 5px 10px 5px 10px;
  }
  .item3 {
    grid-area: main;
    position:relative;
    width: auto;
    background-color: #ada9a9;
    border-radius: 10px;
    box-shadow: 0px 1px 5px rgb(87, 87, 87);
    margin:auto;
    top: -4vh;
    opacity: 0.9;
    border: 1px;
    border-style: solid;
    border-color: rgb(13, 13, 13);
    
  
  }
  .imgpad{
    padding-bottom: 20px;
  }

  /* menu navegador responsive */
  .nav_responsive {
    font-size: 1rem;
    align-content: center;
    justify-content: center;
    position: relative;
    display: inline;
    transition: all .5s;
    margin-top: 5px;
    width: 100%;
  }

  .menu-button-container {
    display: flex;
  }

  .menu {
    position: absolute;
    top: 0;
    margin-top: 50px;
    left: 0;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  #menu-toggle~.menu li {
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  #menu-toggle:checked~.menu li {
    border: 1px solid #333;
    height: 2.5em;
    padding: 0.5em;
    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
  }

  .menu>li {
    display: flex;
    justify-content: right;
    margin: 0;
    padding: 0.5em 0;
    width: 100%;
    color: white;
    background-color: #666666;
  }

  .menu>li:not(:last-child) {
    border-bottom: 1px solid #444;
  }
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
  .container {
    border-radius: 5px;
    padding: 10px;
    margin: auto;
    width: 98%;
  }

}

/* botones redes sociales */

.social-buttons {
  display: flex;
  justify-content: center;
  flex-direction: row wrap;
  gap: 20px;
  color:#000000;
}
.social-buttons_left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-direction: row wrap;
  gap: 10px;
}

.creditos {
  font-style: italic;
  font-size: 0.8rem;
  margin: auto;
  text-align: center;
  color: #9d9c9c;
  background-color: #2d2c2c;
}
.floating-button {
  position: fixed;
  top: 60px;
  left: 5px;
  width: 40px;

  border-radius: 50px;

}
/*  form */
input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #808583;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #48484a;
}

.container {
  border-radius: 5px;
  padding: 20px;
  margin: auto;
  width: 90%;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

/* boton dropdown */

.dropbtn {
  background-color: #000000;
  color: white;
  border:#000000;
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #aeadad;
  min-width: 400px;
  z-index: 1;
  
}

.dropdown-content a {
  padding: 10px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #6e6a6a;}

.dropdown:hover .dropdown-content {
  display: block;
  
}

.dropdown:hover .dropbtn {
  background-color: #000000;
}