/* Variables Globales */
:root {
  --background-color: #f7f7f7;
  /* Para toda la web */
  --dark-color: #2a2c39;
  /* Color oscuro */
  --clear-color: #ebebeb;
  /* Color de la superficie */
  --title-color: #b7b7b6;
  --text-color: #383737;
  /* Color del texto */
  --accent-color: #FFC03D;
  /* Resaltado para botones, enlaces, etc */
  --contrast-color: #ffff;
  /* Color de contraste para el texto */
  --resalt-color: #FFAE00;
  /* Color de contraste para el texto */
  --verde-color: #8cc63f;
  /* Azul #1967D2 */
}

/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');

/* Desplazamiento */
:root {
  scroll-behavior: smooth;
}

/* Limpiar el estilo del navegador */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Mostrar el menú fijo en la parte superior */
body {
  /* min-height: 75rem;
  padding-top: 4rem; */
  background-color: var(--background-color);
}

/* Fuentes */
.roboto-thin {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.roboto-light {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.roboto-regular {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.roboto-medium {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.roboto-bold {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.roboto-black {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.roboto-thin-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.roboto-light-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.roboto-regular-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.roboto-medium-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-style: italic;
}

.roboto-bold-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.roboto-black-italic {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* Tarjetas con código */
.section-title {
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-style: normal;
  font-size: 8vh;
  color: var(--text-color);
}

.code-font {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
}

.code-title {
  background-color: var(--title-color);
}

.code-card {
  /* width: 38rem;  */
  background-color: var(--clear-color);
}

/* fuente de código resaltado */
.hljs {
  background-color: #282727;
  /* Fondo oscuro, estilo Visual Studio Code */
  color: var(--clear-color);
  /* Color del texto base */
  font-family: "Source Code Pro", monospace;
  /* Cambiar la fuente */
  font-size: 1rem;
  /* Cambiar el tamaño de la fuente (opcional) */
  border-radius: 5px;
}

/* Animación de las olas */
.hero .hero-waves {
  display: block;
  width: 100%;
  height: 3rem;
  position: relative;
}

.hero .wave1 use {
  animation: move-forever1 10s linear infinite;
  animation-delay: -2s;
  fill: var(--accent-color);
  opacity: 0.6;
}

.hero .wave2 use {
  animation: move-forever2 8s linear infinite;
  animation-delay: -2s;
  fill: var(--accent-color);
  opacity: 0.4;
}

.hero .wave3 use {
  animation: move-forever3 6s linear infinite;
  animation-delay: -2s;
  fill: var(--background-color);
}

@keyframes move-forever1 {
  0% {
    transform: translate(85px, 0%);
  }

  100% {
    transform: translate(-90px, 0%);
  }
}

@keyframes move-forever2 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

@keyframes move-forever3 {
  0% {
    transform: translate(-90px, 0%);
  }

  100% {
    transform: translate(85px, 0%);
  }
}

/* Fin animación olas */

/* Viñetas personalizadas */
.custom-bullets {
  list-style-type: none;
  /* Elimina las viñetas predeterminadas */
}

.custom-bullets li::before {
  content: "—";
  /* Agrega el guion como viñeta */
  margin-right: 8px;
  /* Espacio entre el guion y el texto */
  color: black;
  /* Cambia el color si es necesario */
}

/* Fin viñetas */

/* Citas */
.cita {
  font-style: italic;
  font-size: 1.5rem;
  text-align: right;
  color: #222;
  padding: 1.5rem;
  border: 1px solid var(--clear-color);
  background-color: #f9f9f9;
  margin: 1rem 0;
  border-radius: 5px;
}

.cita p {
  margin-bottom: 1rem;
}

.cita footer {
  text-align: right;
  font-size: 0.9rem;
  color: #666;
}

.cita footer::before {
  content: "— ";
}

/* fin citas */

/* tablas */
/* Estilos base para la tabla */
.table {
  width: 90%;
  border-collapse: collapse; /* Elimina espacios entre celdas */
  margin: 2rem auto;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra sutil */
}

/* Cabecera de la tabla */
.table thead tr th{
  background-color: var(--title-color);
  color: var(--dark-color);
  text-align: left;
  font-weight: bold;
}

/* Celdas y cabeceras */
.table tr th,
.table tr td {
  padding: 0.6rem 0.8rem;
  border: 1px solid #dddddd;
}

/* Efecto zebra - Filas pares */
.table tbody tr td:nth-child(even) {
  background-color: #f8f9fa;
}

/* Efecto hover para interactividad */
.table tbody tr td:hover {
  background-color: #fefde2;
  transition: background-color 0.3s ease;
}

/* Bordes redondeados en esquinas */
.table thead tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.table thead tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

.table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

.table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* fin tablas */



/*  footer */
.social-links {
  margin: 0 0 1.9rem 0;
}

.social-links a {
  margin: 0 4px;
  width: 2.25rem;
  height: 2.25rem;
  background: #faae12;
  color: var(--contrast-color);
  font-size: 1rem;
  line-height: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  transition: 0.3s;
}

.social-links a:hover {
  background: color-mix(in srgb, var(--resalt-color), transparent 20%);
  text-decoration: none;
}

.licencia {
  padding: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--contrast-color), transparent 90%);
  color: var(--clear-color);
  font-size: 1rem;
  font-style: italic;
}

/* Fin footer */