/* --------------------- */

.seccion-botonera {
  background: var(--tinte-oscuro);
  display: grid;
  padding: var(--gap-1) var(--gap-2);
  gap: var(--gap-1);
  justify-content: space-around;

  grid-template-areas: "izquierda centro derecha";
}

.seccion-botonera__izquierda {
  grid-area: izquierda;
  display: grid;
  grid-auto-flow: column;
  justify-content: center;
  gap: var(--gap-2);
}

.seccion-botonera__derecha {
  display: grid;
  grid-area: derecha;
  grid-auto-flow: column;
  justify-content: center;
  display: flex;
  gap: var(--gap-1);
}

.seccion-navegacion__enlaces {
  display: flex;
  align-items: center;
  grid-area: centro;
  gap: var(--gap-2);
}

/* --------------------- */

.seccion-navegacion {
  display: flex;
  padding: var(--gap-2) var(--gap-2);
}

.seccion-navegacion__logo {
  filter: drop-shadow(2px 4px 1px rgba(0, 0, 0, 1));
  width: 15rem;
}

.seccion-navegacion__enlace {
}

/* --------------------- */

.seccion-hero {
  display: grid;
  padding: var(--gap-4) var(--gap-3);
  align-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-block: var(--borde);
}

.seccion-hero__contenedor {
  display: grid;
  width: var(--width-maximo);
  margin: auto;
  gap: var(--gap-4);
  justify-items: start;
}

.seccion-hero__eslogan {
  text-align: left;
  width: 50%;
  text-shadow: var(--sombra-texto);
}

.seccion-hero__botones {
  display: flex;
  gap: var(--gap-1);
}

.seccion-hero__mensajes {
  display: grid;
  justify-items: end;
}

.seccion-hero__medios {
  display: flex;
  gap: var(--gap-1);
}

.seccion-hero__medio__imagen {
  width: 8rem;
  border-radius: var(--gap-1);
}

/* --------------------- */

.seccion--razones {
  display: grid;
  gap: var(--gap-4);
  background: var(--tinte-oscuro);
  justify-items: center;
  border-block: var(--borde);
}

.razones__cards {
  display: grid;
  grid-template-columns: repeat(var(--columnas-4), 1fr);
  gap: var(--gap-3);
  width: var(--width-maximo);
}

.razones__card {
  display: grid;
  justify-items: center;
  gap: var(--gap-2);
  align-content: start;
  grid-template-areas:
    "imagen"
    "titulo"
    "descripcion";
}

.razones__imagen {
  grid-area: imagen;
  height: 6rem;
}
.razones__titulo {
  grid-area: titulo;
}
.razones__descripcion {
  grid-area: descripcion;
}

/* --------------------- */

.seccion-testimonios {
}

.testimonios__cards {
  display: grid;
  grid-template-columns: repeat(var(--columnas-3), 1fr);
  gap: var(--gap-2) var(--gap-2);
  width: var(--width-maximo);
  margin: auto;
  align-items: start;
}

.card-testimonio {
  display: grid;
  gap: var(--gap-1);
  justify-items: center;
  background: var(--tinte-oscuro);
  padding: var(--gap-2);
  border-radius: var(--gap-2);
  height: 100%;
  align-content: start;
  box-shadow: var(--white-glow);

  grid-template-areas:
    "imagen enlace"
    "imagen puntuacion"
    "titulo titulo"
    "descripcion descripcion";
}

.card-testimonio__imagen {
  grid-area: imagen;
  width: 6rem;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 100%;
}

.card-testimonio__titulo {
  grid-area: titulo;
}

.card-testimonio__puntuacion {
  grid-area: puntuacion;
  display: flex;
  gap: var(--gap-1);
}

.card-testimonio__estrella {
  grid-area: estrella;
  width: var(--gap-4);
  height: var(--gap-4);
}

.card-testimonio__descripcion {
  grid-area: descripcion;
  font-style: italic;
}

.card-testimonio__enlace {
  align-self: end;
  grid-area: enlace;
  color: var(--color-claro);
  display: block;
  font-weight: bold;
}

/* --------------------- */

.seccion-servicios {
  background: var(--tinte-oscuro);
}

.servicios__cards {
  display: grid;
  grid-template-columns: repeat(var(--columnas-3), 1fr);
  gap: var(--gap-4) var(--gap-2);
  width: var(--width-maximo);
  margin: auto;
  align-items: start;
}

.card-servicios {
  display: grid;
  justify-items: center;
  background: var(--tinte-oscuro);
  grid-template-rows: auto auto 1fr auto;
  height: 100%;

  gap: var(--gap-1);
  padding: var(--gap-2);
  box-shadow: var(--white-glow);
  border-radius: var(--gap-2);
}

.card-servicios__titulo {
}

.card-servicios__enlace {
  color: black;
  background: var(--color-claro);
  padding: var(--gap-1) var(--gap-3);
  border-radius: var(--gap-2);
  font-weight: bold;
  order: 1;
}

.card-servicios__descripcion {
}

.card-servicios__imagen {
  border-radius: var(--gap-1);
  width: 100%;
  height: auto;
}

/* --------------------- */

.seccion-proyectos {
}

.seccion-proyectos .titular {
}

.proyectos__cards {
  display: grid;
  align-content: center;
  gap: var(--gap-2);
  width: var(--width-maximo);
  grid-template-columns: repeat(var(--columnas-3), 1fr);
  margin: auto;
}

.proyectos__card {
  align-content: center;
  margin: auto;
  display: grid;
  grid-template-areas:
    "superior"
    "antes"
    "despues";

  gap: var(--gap-1);
  box-shadow: var(--sombra);
  padding: var(--gap-2);
  background: var(--tinte-oscuro);
  border-radius: var(--gap-2);
  box-shadow: var(--sombra);
  box-shadow: var(--white-glow);
}

.proyectos__superior {
  grid-area: superior;
  text-align: center;
}

/* Título del proyecto */
.proyectos__titulo {
  color: var(--color-claro);
}

.proyectos__descripcion {
}

.proyectos__zona {
  display: grid;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--gap-2);
  position: relative;
}

.proyectos__zona--antes {
  grid-area: antes;
}

.proyectos__zona--despues {
  grid-area: despues;
}

.proyectos__subtitulo {
  position: absolute;
  bottom: var(--gap-1);
  right: var(--gap-1);
  color: var(--color-claro);
  background: black;
  width: 30%;
  border-radius: var(--gap-1);
  border: var(--borde);
}

.proyectos__imagen {
  width: 100%;
}

/* --------------------- */

.seccion-nosotros {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: grid;

  justify-content: center;
  border-block: var(--borde);
  text-shadow: var(--sombra-texto);
}

.seccion-nosotros__contenedor {
  display: grid;
  margin: auto;
  justify-content: center;
  grid-template-areas: "nosotros mision vision";
  width: var(--width-maximo);
  gap: var(--gap-2);
}

.seccion-nosotros__eslogan {
  display: flex;

  gap: var(--gap-1);
}

.seccion-nosotros__panel {
}

.seccion-nosotros__subtitulo {
  text-align: left;
  color: var(--color-claro);
}

.seccion-nosotros__panel--nosotros {
  grid-area: nosotros;
}

.seccion-nosotros__panel--vision,
.seccion-nosotros__panel--mision {
  display: grid;
  background: #0008;
  gap: var(--gap-1);
  border-radius: var(--gap-2);
  padding: var(--gap-3);
  border: var(--borde);
}

.seccion-nosotros__panel--mision {
  grid-area: mision;
}

.seccion-nosotros__panel--vision {
  grid-area: vision;
}

/* --------------------- */

.seccion {
}

.seccion-marcas {
}

.seccion__titular {
}

.seccion-marcas__contenedor {
  display: flex;
  gap: var(--gap-3);
  justify-content: center;
  flex-wrap: wrap;
  width: var(--width-maximo);
  margin: auto;
}

.seccion-marcas__imagen {
  width: 5rem;
}

/* --------------------- */
.seccion-misc {
  display: grid;
  align-items: start;
  grid-template-columns: auto 1fr auto;
  gap: var(--gap-3);
  width: var(--width-maximo);
  margin: auto;
  grid-template-areas: "reserva mapa escribenos";
}

/* --------------------- */
.misc-reserva {
  grid-area: reserva;
  display: grid;
  align-content: start;
  gap: var(--gap-1);
}

.misc-reserva__subtitulo {
}

.misc-reserva__cards {
  display: grid;
  gap: var(--gap-1);
  justify-content: center;
}

.misc-reserva__card {
  display: flex;
  gap: var(--gap-1);
  align-items: center;
  background: var(--tinte-claro);
  border-radius: var(--gap-1);
  padding: var(--gap-1) var(--gap-2);
}

.misc-reserva__imagen {
  width: 1rem;
  height: 1rem;
}

/* --------------------- */

.misc-escribenos {
  display: grid;
  grid-area: escribenos;
  align-content: center;
  gap: var(--gap-1);
}

.misc-escribenos__subtitulo {
}

.misc-escribenos__cards {
  display: grid;
  gap: var(--gap-1);
  justify-content: center;
}

/* --------------------- */

.misc-mapa {
  display: grid;
  grid-area: mapa;
  align-content: center;
  gap: var(--gap-1);
}

.misc-mapa__subtitulo {
}

.misc-mapa__iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: var(--gap-1);
  box-shadow: var(--sombra);
}

.misc-mapa__ubicacion {
}

/* --------------------- */

.seccion-footer {
}

.seccion-footer__container {
  display: grid;

  gap: var(--gap-4);
  align-items: center;
  margin: auto;
  background: var(--tinte-oscuro);
  justify-items: center;
  justify-content: center;
  padding: var(--gap-2);

  grid-template-areas: "sercotec contactos mensajes";
}

.seccion-footer__contactos {
  grid-area: contactos;
  display: grid;
  gap: var(--gap-1);
  text-align: center;
}

.seccion-footer__contacto {
}

.seccion-footer__mensajes {
  grid-area: mensajes;
  text-align: center;
}

.seccion-footer__container .sercotec {
  grid-area: sercotec;
}

.seccion-footer__mensaje {
}

.seccion-footer__copyright {
}

.seccion-footer__credito {
  border: 1px solid white;
  justify-self: center;
  padding: 0.2rem var(--gap-2);
  border-radius: var(--gap-2);
}

/* --------------------- */