:root {
  /* Fuentes */
  --fuenteRoboto: "Roboto", serif;
  --fuenteRalewey: "Raleway", serif;
  --fuenteInter: "Inter", serif;
  --fuenteBonaNova: "Bona Nova", serif;
  --fuenteBeVietnam: "Be Vietnam Pro", serif;

  /* Colores */
  --primario-oscuro: #121826; /* Un color muy oscuro */
  --primario-claro: #F8FAFC; /* Un color muy claro */
  --blanco: #FFFFFF; /* Blanco puro */
  --neutro-claro: #E5E7EB; /* Gris claro */
  --neutro-oscuro: #4D5562; /* Gris oscuro */
  --secundario: #263FA9; /* Azul primario */
  --acento: #7C4F1E; /* Marrón (usado como color de acento) */
  --neutro-transparente: #4D556233; /* Gris oscuro con opacidad */
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
}

body {
  background-color: var(--blanco);
  font-family: var(--fuenteBeVietnam);
}

*, *::before, *::after {
  box-sizing: inherit;
}

.contenedor {
  max-width: 128rem;
  width: 90%;
  margin: 0 auto;
}

h1, h2, h3, p {
  margin: 0;
}

img {
  max-width: 100%;
  display: block;
}

.navegacion {
  padding: 5rem 0;
  background-color: var(--primario-claro);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid var(--neutro-claro);
}

.navegacion__encabezado {
  font-size: 3.2rem;
  margin-bottom: 1.2rem;
  font-weight: 700;
}

.navegacion__parrafo {
  color: var(--neutro-oscuro);
  font-size: 1.6rem;
  max-width: 45rem;
  text-align: center;
  line-height: 2rem;
}

.precios {
  display: grid;
  grid-template-columns: auto 120px 120px;
  margin: 3rem 0;
}

.precios__caracteristicas {
  display: grid;
  grid-template-rows: auto repeat(8, 4rem) 60px;
}

.precios__empresarial {
  text-align: center;
}

.precios__popular {
  background-color: var(--primario-oscuro);
  color: var(--blanco);
  text-align: center;
  border-radius: 1rem;
}

.precios__gratis {
  text-align: center;
  display: none;
}

.precios__equipo {
  text-align: center;
  display: none;
}

.caracteristicas__encabezado {
  font-size: 1.2rem; /* Se ajusta con media query */
  padding-top: calc((40px - 12px) / 2);
  padding-left: 1rem;
  padding-right: 1rem;
  border-bottom: 1px solid var(--neutro-claro);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: var(--primario-claro);
}

.caracteristicas__encabezado:first-of-type {
  border-top-left-radius: 2rem;
}

.caracteristicas__encabezado:last-of-type {
  border-bottom-left-radius: 2rem;
}

.precios__contenedor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-weight: 600;   
  margin: 2rem 0 4rem 0;
}

.precios__encabezado {
  color: var(--secundario);
  font-size: 1.2rem;
  padding: 0.2rem
}

.precios__encabezado--popular {
  color: var(--blanco);
  font-size: 1.2rem;
  background-color: var(--secundario);
  padding: 0.2rem 1rem;
  border-radius: 1rem;
}

.precios__precio {
  font-size: 2.2rem;
  font-weight: 600;
  margin: 1rem 0;
}

.precios__parrafo {
  color: var(--neutro-oscuro);
  font-size: 1.2rem;
  font-weight: 400;
}

.precios__parrafo--popular {
  font-size: 1.2rem;
  font-weight: 400;
}

.precios__propiedad {
  font-size: 1.2rem;
  color: var(--primario-oscuro);
  height: 4rem;
  border-bottom: 1px solid var(--neutro-claro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.precios__propiedad--popular {
  font-size: 1.2rem;
  height: 4rem;
  border-bottom: 1px solid var(--neutro-transparente);
  display: flex;
  align-items: center;
  justify-content: center;
}

.precios__verificacion {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-bottom: 1px solid var(--neutro-claro);
}

.precios__verificacion--popular {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
  border-bottom: 1px solid var(--neutro-transparente);
}

.precios__texto-adicional {
  text-align: center;
  font-size: 1.6rem;
  color: var(--primario-oscuro);
  height: 4rem;
  border-bottom: 1px solid var(--neutro-claro);
  display: flex;
  align-items: center;
  justify-content: center;
}

.precios__obtener {
  display: flex;
  justify-content: center;
  height: 6rem;
}

.precios__obtener--popular {
  display: flex;
  justify-content: center;
  height: 6rem;
  background-color: var(--acento);
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

.precios__boton {
  border: none;
  background-color: var(--blanco);
  font-size: 1.2rem;
  color: var(--secundario);
  font-weight: 600;
  padding: 2rem 0;
  display: flex;
  align-items: center;
}

.precios__boton--popular {
  border: none;
  background-color: var(--acento);
  color: var(--blanco);
  font-size: 1.2rem;
  font-weight: 600;
  padding: 2rem 0;
  display: flex;
  align-items: center;
}

/* Media Queries */

@media (min-width: 412px) {
    .precios {
        grid-template-columns: auto repeat(2, minmax(9rem, 30rem));
    }

    .precios__empresarial {
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
}

@media (min-width: 768px) {
    .caracteristicas__encabezado {
        font-size: 1.6rem;
        padding-top: calc((40px - 16px) / 2);
    }

    .precios__encabezado,
    .precios__encabezado--popular,
    .precios__parrafo,
    .precios__parrafo--popular,
    .precios__propiedad,
    .precios__propiedad--popular,
    .precios__boton,
    .precios__boton--popular {
        font-size: 1.6rem;
    }

    .precios__precio {
        font-size: 6.4rem;
    }

    .precios__boton::after {
        content: '';
        display: block;
        width: 2.4rem;
        height: 2.4rem;
        background-image: url('/resources/down arrow-1.svg');
    }

    .precios__boton--popular::after {
        content: '';
        display: block;
        width: 2.4rem;
        height: 2.4rem;
        background-image: url('/resources/down arrow.svg');
    }
}

@media (min-width: 1024px) {
    .precios {
        grid-template-columns: auto repeat(3, 25rem);
        margin: 5rem 0;
    }

    .precios__empresarial {
        grid-column: 4 / 5;
        grid-row: 1 / 2;
    }

    .precios__equipo {
        display: block;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }
}

@media (min-width: 1350px) {
    .precios {
        grid-template-columns: auto repeat(4, 25rem);
    }

    .precios__empresarial {
        grid-column: 5 / 6;
        grid-row: 1 / 2;
    }

    .precios__gratis {
        display: block;
        grid-column: 2 / 3;
        grid-row: 1 / 2;
    }

    .precios__equipo {
        grid-column: 3 / 4;
        grid-row: 1 / 2;
    }
}