@charset "UTF-8";
/* Definimos colores también como variables SASS para poder precomputar variantes (oscuro/claro/rgba)
   Se aplica floor() a los componentes RGB para evitar decimales dentro de rgb()/rgba() en el CSS resultante.
*/
:root {
  /* Colors stored as integer RGB tuples only (use rgb(var(--clrN)) or rgba(var(--clrN), alpha)) */
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr1: 0, 51, 102;
  /* precomputed helpers (hex and computed variants) */
  --clr1-hex: #003366;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr1-dark-hex: rgb(0, 13, 26);
  --clr1-light-hex: rgb(64, 102, 140);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr1-dark: 0, 13, 26;
  --clr1-light: 64, 102, 140;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr1-rgba-50: rgba(0, 51, 102, 0.5);
  --clr1-dark-rgba-50: rgba(0, 13, 26, 0.5);
  --clr1-light-rgba-50: rgba(64, 102, 140, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr2: 239, 187, 12;
  /* precomputed helpers (hex and computed variants) */
  --clr2-hex: #EFBB0C;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr2-dark-hex: rgb(60, 47, 3);
  --clr2-light-hex: rgb(243, 204, 73);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr2-dark: 60, 47, 3;
  --clr2-light: 243, 204, 73;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr2-rgba-50: rgba(239, 187, 12, 0.5);
  --clr2-dark-rgba-50: rgba(60, 47, 3, 0.5);
  --clr2-light-rgba-50: rgba(243, 204, 73, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr3: 221, 221, 221;
  /* precomputed helpers (hex and computed variants) */
  --clr3-hex: #DDDDDD;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr3-dark-hex: rgb(55, 55, 55);
  --clr3-light-hex: rgb(230, 230, 230);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr3-dark: 55, 55, 55;
  --clr3-light: 230, 230, 230;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr3-rgba-50: rgba(221, 221, 221, 0.5);
  --clr3-dark-rgba-50: rgba(55, 55, 55, 0.5);
  --clr3-light-rgba-50: rgba(230, 230, 230, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr4: 250, 0, 0;
  /* precomputed helpers (hex and computed variants) */
  --clr4-hex: #FA0000;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr4-dark-hex: rgb(63, 0, 0);
  --clr4-light-hex: rgb(251, 64, 64);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr4-dark: 63, 0, 0;
  --clr4-light: 251, 64, 64;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr4-rgba-50: rgba(250, 0, 0, 0.5);
  --clr4-dark-rgba-50: rgba(63, 0, 0, 0.5);
  --clr4-light-rgba-50: rgba(251, 64, 64, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr5: 0, 32, 64;
  /* precomputed helpers (hex and computed variants) */
  --clr5-hex: #002040;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr5-dark-hex: rgb(0, 8, 16);
  --clr5-light-hex: rgb(64, 88, 112);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr5-dark: 0, 8, 16;
  --clr5-light: 64, 88, 112;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr5-rgba-50: rgba(0, 32, 64, 0.5);
  --clr5-dark-rgba-50: rgba(0, 8, 16, 0.5);
  --clr5-light-rgba-50: rgba(64, 88, 112, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr6: 51, 105, 30;
  /* precomputed helpers (hex and computed variants) */
  --clr6-hex: #33691E;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr6-dark-hex: rgb(13, 26, 8);
  --clr6-light-hex: rgb(102, 143, 86);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr6-dark: 13, 26, 8;
  --clr6-light: 102, 143, 86;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr6-rgba-50: rgba(51, 105, 30, 0.5);
  --clr6-dark-rgba-50: rgba(13, 26, 8, 0.5);
  --clr6-light-rgba-50: rgba(102, 143, 86, 0.5);
  /* original RGB tuple used throughout the file (integer values guaranteed) */
  --clr7: 229, 57, 53;
  /* precomputed helpers (hex and computed variants) */
  --clr7-hex: #E53935;
  /* dark/light helpers: usar rgb() con componentes enteros para evitar decimales en la salida */
  --clr7-dark-hex: rgb(57, 14, 13);
  --clr7-light-hex: rgb(236, 107, 104);
  /* integer RGB tuples for dark/light variants (useful if you need rgb(var(--clrN-dark))) */
  --clr7-dark: 57, 14, 13;
  --clr7-light: 236, 107, 104;
  /* rgba variants with alpha precomputed (alphas sanas, y sin decimales en los canales RGB) */
  --clr7-rgba-50: rgba(229, 57, 53, 0.5);
  --clr7-dark-rgba-50: rgba(57, 14, 13, 0.5);
  --clr7-light-rgba-50: rgba(236, 107, 104, 0.5);
}

/* GENERAL */
* {
  border: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*
*
* ETIQUETAS PURAS
*
*/
/* IMAGENES */
img, object, embed, video {
  max-width: 100%;
}

/* PAGINA */
html body {
  background: rgb(var(--clr3));
  color: rgb(var(--clr1));
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* ENLACES  #818181*/
a, a:link, a:visited, a:hover, a:active,
a.claro, a.claro:link, a.claro:visited, a.claro:hover, a.claro:active,
a.oscuro, a.oscuro:link, a.oscuro:visited, a.oscuro:hover, a.oscuro:active {
  color: rgb(var(--clr1));
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  color: rgb(var(--clr1));
}

/* BOTONES */
a.boton {
  text-decoration: none;
  color: rgb(var(--clr2));
  background-color: rgb(var(--clr3));
  text-align: center;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  padding: 0.5em 1em;
  margin: 0.5em;
  border-radius: 0.2em;
  box-shadow: 0.08em 0.08em 0.15em #000;
}
a.boton:hover {
  background-color: rgb(var(--clr3));
  color: rgb(var(--clr3));
}
a.boton:active {
  box-shadow: 0 0 0.15em #000;
}

.btn {
  text-decoration: none;
  color: rgb(var(--clr5));
  background-color: rgb(var(--clr3));
  text-align: center;
  letter-spacing: 0.5px;
  transition: background-color 0.2s ease-out;
  cursor: pointer;
  padding: 0.5em 1em;
  margin: 0.5em;
  border-radius: 0.2em;
  box-shadow: 0.08em 0.08em 0.15em #000;
}
.btn:hover {
  background-color: var(--clr1-dark-hex);
  color: var(--clr3-light-hex);
}
.btn:active {
  box-shadow: 0 0 0.15em #000;
}

/* LISTAS */
ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
ul.bton li {
  transition: background-color 0.3s;
  display: inline table;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 2px 2px 4px 0 #000;
  margin: 5px 2px 10px;
  width: 160px;
  min-height: 180px;
  color: rgb(var(--clr2));
  background-color: rgb(var(--clr2));
  cursor: pointer;
  text-transform: uppercase;
}
ul.bton li:hover {
  background-color: rgb(var(--clr2));
  color: rgb(var(--clr3));
}
ul.bton li i.material-icons {
  font-size: 5em;
  display: block;
  margin-bottom: 0.2em;
}
ul.bton2 li {
  transition: background-color 0.3s;
  display: inline table;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 2px 2px 4px 0 #000;
  margin: 5px 2px 10px;
  width: 160px;
  min-height: 90px;
  color: rgb(var(--clr3));
  background-color: rgb(var(--clr2));
  cursor: pointer;
  text-transform: uppercase;
}
ul.bton2 li:hover {
  background-color: rgb(var(--clr2));
  color: rgb(var(--clr3));
}
ul.bton2 li i.material-icons {
  font-size: 2em;
  display: block;
  margin-bottom: 0.2em;
}
ul.bton3 li {
  transition: background-color 0.3s;
  display: inline table;
  padding: 1em;
  border-radius: 0.5em;
  box-shadow: 2px 2px 4px 0 #000;
  margin: 5px 2px 10px;
  width: 30%;
  min-height: 63px;
  color: rgb(var(--clr2));
  background-color: rgb(var(--clr2));
  cursor: pointer;
  text-transform: uppercase;
  font-size: 0.6em;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}
ul.bton3 li:hover {
  background-color: rgb(var(--clr2));
  color: rgb(var(--clr3));
}
ul.bton3 li i.material-icons {
  font-size: 2.8em;
  display: block;
  margin-bottom: 0.2em;
}

/* ENCABEZADOS */
h1 {
  font-size: 2em;
  margin: 0.1em 0 0.3em 0.1em;
}

h2 {
  font-size: 1.8em;
  margin: 0.5em 0 0.5em 0.5em;
}

h3 {
  font-size: 1.6em;
  margin: 0.4em 0 0.4em 0.4em;
}

h4 {
  font-size: 1.4em;
  margin: 0.3em 0 0.3em 0.3em;
}

h5 {
  font-size: 1.2em;
  margin: 0.2em 0 0.2em 0.2em;
}

h6 {
  font-size: 1.1em;
  margin: 0.1em 0 0.1em 0.1em;
}

/* LINEA HORIZONTAL */
hr {
  background-color: rgb(var(--clr2));
  height: 1px;
  overflow: hidden;
  margin: 1em 0;
}

/* CAMPOS */
blockquote {
  margin: 2em;
}

fieldset {
  border: 2px solid;
  padding: 0.5em;
  border-radius: 0.3em;
}

legend {
  font-size: 1.2em;
  font-weight: bold;
  margin-left: 0.5em;
  padding: 0.5em;
  text-align: left;
  text-transform: uppercase;
}

/**
*   Imagen principal "Logo"
*/
.logo {
  max-width: 300px;
  max-height: 60px;
}

footer {
  color: white;
  padding: 40px 0;
  margin-top: 40px;
  line-height: 1.5;
}

footer .container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}

footer h4 {
  color: var(--red);
  font-size: 1.2em;
}

footer a {
  color: white;
}

footer a:hover {
  color: var(--red);
}

footer a:active {
  color: var(--red-dark);
}

footer p, footer a {
  color: var(--white);
}

#copyr {
  display: block;
}

/*
*
* CLASES CSS
*
*/
/* TAMAÑO DE TEXTO */
.tipo1 {
  font-size: 2.4em;
}

.tipo2 {
  font-size: 1.8em;
}

.tipo3 {
  font-size: 1.4em;
}

.tipo4 {
  font-size: 0.8em;
}

.tipo5 {
  font-size: 0.6em;
}

.notas {
  font-style: italic;
}

small, .notas {
  font-size: 0.9em;
  text-decoration: none;
}

/*  LETRAS */
.letra1 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 300;
}

.letra2 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 400;
}

.letra3 {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
}

.letra4 {
  font-family: "Roboto", sans-serif;
  font-weight: 100;
}

.letra5 {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

/* INLINE */
.noLista, .noDiv {
  display: inline-block;
  vertical-align: text-top;
  width: auto;
}

.noLista, .noVin {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ALINEACIÓN HORIZONTAL */
.izq {
  text-align: left;
}

.der {
  text-align: right;
}

.cen {
  text-align: center;
}

.jus {
  text-align: justify;
}

.bCen {
  margin: 0 auto;
}

/* ALINEACIÓN VERTICAL */
/* PADDING */
.eInt {
  padding: 0.5em;
}

.eInt10 {
  padding: 1em;
}

.eInt2 {
  padding: 0 0.5em;
}

.eInt3 {
  padding: 0.5em 0;
}

/* MARGENES */
.mCompleto {
  margin: 0.5em;
}

.mCompleto10 {
  margin: 1em;
}

.mArriba {
  margin-top: 0.5em;
}

.mAbajo {
  margin-bottom: 0.5em;
}

.mDer {
  margin-right: 0.5em;
}

.mIzq {
  margin-left: 0.5em;
}

.mArriba10 {
  margin-top: 1em;
}

.mAbajo10 {
  margin-bottom: 1em;
}

.mDer10 {
  margin-right: 1em;
}

.mIzq10 {
  margin-left: 1em;
}

.mAA {
  margin: 0.5em 0 0.5em;
}

.mAA10 {
  margin: 1em 0 1em;
}

/* DESPLAZAMIENTO */
.fDer {
  float: right;
}

.fIzq {
  float: left;
}

.clear {
  clear: both;
  font-size: 1px;
}

.clearDer {
  clear: right;
}

.clearIzq {
  clear: left;
}

/* VISIBILIDAD */
.oculto {
  display: none;
}

.transOscuro {
  background-color: rgba(0, 0, 0, 0.4);
  color: rgb(var(--clr3));
}

.transClaro {
  background-color: rgba(255, 255, 255, 0.4);
  color: rgb(0, 0, 0);
}

/* TAMAÑO HORIZONTAL */
.wcuarto1 {
  width: 24%;
}

.wtercio1 {
  width: 32.5%;
}

.wmedio {
  width: 49%;
}

.wtercio2 {
  width: 66%;
}

.wcuarto3 {
  width: 74%;
}

.wtodo {
  width: 100%;
}

.wcuarto1, .wtercio1, .wmedio, .wtercio2, .wcuarto3 {
  min-width: 10px;
}

/* SOMBREADO */
.sombraTexto {
  text-shadow: 0.04em 0.04em 0.14em #000;
}

.sombraTexto5 {
  text-shadow: 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.05em #000, 0 0 0.1em #000;
}

.sombraTexto10 {
  text-shadow: 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.1em #000, 0 0 0.3em #000;
}

.sombraBox {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

.sombraDer {
  box-shadow: 0.2em 0 0.4em rgba(0, 0, 0, 0.5);
}

.sombraIzq {
  box-shadow: 0.2em 0 0.4em rgba(0, 0, 0, 0.5);
}

.sombraArriba {
  box-shadow: 0 -0.2em 0.4em rgba(0, 0, 0, 0.5);
}

.sombraAbajo {
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.5);
}

.sombraBoxIn {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5) inset;
}

.sombraDerIn {
  box-shadow: 0.2em 0 0.4em rgba(0, 0, 0, 0.5) inset;
}

.sombraIzqIn {
  box-shadow: 0.2em 0 0.4em rgba(0, 0, 0, 0.5) inset;
}

.sombraArribaIn {
  box-shadow: 0 0.2em 0.4em rgba(0, 0, 0, 0.5) inset;
}

.sombraAbajoIn {
  box-shadow: 0 -0.2em 0.4em rgba(0, 0, 0, 0.5) inset;
}

/*  ESQUINAS REDONDEADAS */
.esquina5 {
  border-radius: 0.5em;
}

.esquina10 {
  border-radius: 1em;
}

/*  BORDE EN FORMATO DE SOMBRA */
.bBox {
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5) inset;
  border-radius: 0.5em;
  padding: 0.5em;
}

/* ENLACES */
.link {
  cursor: pointer;
}

/* LÍNEA HORIZONTAL */
.sHor {
  background-color: #000;
  height: 1px;
  overflow: hidden;
}

.sVer {
  border-left: #000 solid 1px;
  width: 10px;
  height: 100%;
  display: inline;
  margin-left: 0.5em;
  padding-left: 0.5em;
}

.filaColor {
  background-color: #E1F5FE;
}

/* POSICIÓN */
.pAbs {
  position: absolute;
}

.pRel {
  position: relative;
}

/*  PARADA DE MENÚ SUPERIOR */
.parada {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/*  ICONOS DE REDES SOCIALESV */
.socialNT {
  border-radius: 16%;
  width: 1.5em;
  box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
}

/* label color */
.input-field label {
  color: #000;
}

/* label focus color */
.input-field input[type=text]:focus + label {
  color: #000;
}

/* label underline focus color */
.input-field input[type=text]:focus {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}

/* valid color */
.input-field input[type=text].valid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}

/* invalid color */
.input-field input[type=text].invalid {
  border-bottom: 1px solid #000;
  box-shadow: 0 1px 0 0 #000;
}

/* icon prefix focus color */
.input-field .prefix.active {
  color: #000;
}

/* -----------------------------------------
   Custom color utility classes
   fColorN      -> solid background using --clrN-hex
   fColorN_O    -> darker (uses --clrN-dark tuple)
   fColorN_C    -> lighter (uses --clrN-light tuple)
   fColorN_T    -> translucent background (50% opacity, uses precomputed rgba variable)
   ftColorN     -> retained for backward compatibility (50% opacity)
   bColorN      -> 1px solid border with color --clrN-hex
   tColorN      -> text color using --clrN-hex
   ----------------------------------------- */
.fColor1 {
  background-color: var(--clr1-hex) !important;
}

.fColor1_T {
  background-color: var(--clr1-rgba-50) !important;
}

.ftColor1 {
  background-color: var(--clr1-rgba-50) !important;
}

.fColor1_O {
  background-color: rgb(var(--clr1-dark)) !important;
}

.fColor1_C {
  background-color: rgb(var(--clr1-light)) !important;
}

.bColor1 {
  border: 1px solid var(--clr1-hex) !important;
}

.bColor1_T {
  border: 1px solid var(--clr1-rgba-50) !important;
}

.bColor1_25 {
  border: 1px solid rgba(var(--clr1), 0.25) !important;
}

.bColor1_O {
  border: 1px solid rgb(var(--clr1-dark)) !important;
}

.bColor1_C {
  border: 1px solid rgb(var(--clr1-light)) !important;
}

.tColor1 {
  color: var(--clr1-hex) !important;
}

.fColor2 {
  background-color: var(--clr2-hex) !important;
}

.fColor2_T {
  background-color: var(--clr2-rgba-50) !important;
}

.ftColor2 {
  background-color: var(--clr2-rgba-50) !important;
}

.fColor2_O {
  background-color: rgb(var(--clr2-dark)) !important;
}

.fColor2_C {
  background-color: rgb(var(--clr2-light)) !important;
}

.bColor2 {
  border: 1px solid var(--clr2-hex) !important;
}

.bColor2_T {
  border: 1px solid var(--clr2-rgba-50) !important;
}

.bColor2_25 {
  border: 1px solid rgba(var(--clr2), 0.25) !important;
}

.bColor2_O {
  border: 1px solid rgb(var(--clr2-dark)) !important;
}

.bColor2_C {
  border: 1px solid rgb(var(--clr2-light)) !important;
}

.tColor2 {
  color: var(--clr2-hex) !important;
}

.fColor3 {
  background-color: var(--clr3-hex) !important;
}

.fColor3_T {
  background-color: var(--clr3-rgba-50) !important;
}

.ftColor3 {
  background-color: var(--clr3-rgba-50) !important;
}

.fColor3_O {
  background-color: rgb(var(--clr3-dark)) !important;
}

.fColor3_C {
  background-color: rgb(var(--clr3-light)) !important;
}

.bColor3 {
  border: 1px solid var(--clr3-hex) !important;
}

.bColor3_T {
  border: 1px solid var(--clr3-rgba-50) !important;
}

.bColor3_25 {
  border: 1px solid rgba(var(--clr3), 0.25) !important;
}

.bColor3_O {
  border: 1px solid rgb(var(--clr3-dark)) !important;
}

.bColor3_C {
  border: 1px solid rgb(var(--clr3-light)) !important;
}

.tColor3 {
  color: var(--clr3-hex) !important;
}

.fColor4 {
  background-color: var(--clr4-hex) !important;
}

.fColor4_T {
  background-color: var(--clr4-rgba-50) !important;
}

.ftColor4 {
  background-color: var(--clr4-rgba-50) !important;
}

.fColor4_O {
  background-color: rgb(var(--clr4-dark)) !important;
}

.fColor4_C {
  background-color: rgb(var(--clr4-light)) !important;
}

.bColor4 {
  border: 1px solid var(--clr4-hex) !important;
}

.bColor4_T {
  border: 1px solid var(--clr4-rgba-50) !important;
}

.bColor4_25 {
  border: 1px solid rgba(var(--clr4), 0.25) !important;
}

.bColor4_O {
  border: 1px solid rgb(var(--clr4-dark)) !important;
}

.bColor4_C {
  border: 1px solid rgb(var(--clr4-light)) !important;
}

.tColor4 {
  color: var(--clr4-hex) !important;
}

.fColor5 {
  background-color: var(--clr5-hex) !important;
}

.fColor5_T {
  background-color: var(--clr5-rgba-50) !important;
}

.ftColor5 {
  background-color: var(--clr5-rgba-50) !important;
}

.fColor5_O {
  background-color: rgb(var(--clr5-dark)) !important;
}

.fColor5_C {
  background-color: rgb(var(--clr5-light)) !important;
}

.bColor5 {
  border: 1px solid var(--clr5-hex) !important;
}

.bColor5_T {
  border: 1px solid var(--clr5-rgba-50) !important;
}

.bColor5_25 {
  border: 1px solid rgba(var(--clr5), 0.25) !important;
}

.bColor5_O {
  border: 1px solid rgb(var(--clr5-dark)) !important;
}

.bColor5_C {
  border: 1px solid rgb(var(--clr5-light)) !important;
}

.tColor5 {
  color: var(--clr5-hex) !important;
}

.fColor6 {
  background-color: var(--clr6-hex) !important;
}

.fColor6_T {
  background-color: var(--clr6-rgba-50) !important;
}

.ftColor6 {
  background-color: var(--clr6-rgba-50) !important;
}

.fColor6_O {
  background-color: rgb(var(--clr6-dark)) !important;
}

.fColor6_C {
  background-color: rgb(var(--clr6-light)) !important;
}

.bColor6 {
  border: 1px solid var(--clr6-hex) !important;
}

.bColor6_T {
  border: 1px solid var(--clr6-rgba-50) !important;
}

.bColor6_25 {
  border: 1px solid rgba(var(--clr6), 0.25) !important;
}

.bColor6_O {
  border: 1px solid rgb(var(--clr6-dark)) !important;
}

.bColor6_C {
  border: 1px solid rgb(var(--clr6-light)) !important;
}

.tColor6 {
  color: var(--clr6-hex) !important;
}

.fColor7 {
  background-color: var(--clr7-hex) !important;
}

.fColor7_T {
  background-color: var(--clr7-rgba-50) !important;
}

.ftColor7 {
  background-color: var(--clr7-rgba-50) !important;
}

.fColor7_O {
  background-color: rgb(var(--clr7-dark)) !important;
}

.fColor7_C {
  background-color: rgb(var(--clr7-light)) !important;
}

.bColor7 {
  border: 1px solid var(--clr7-hex) !important;
}

.bColor7_T {
  border: 1px solid var(--clr7-rgba-50) !important;
}

.bColor7_25 {
  border: 1px solid rgba(var(--clr7), 0.25) !important;
}

.bColor7_O {
  border: 1px solid rgb(var(--clr7-dark)) !important;
}

.bColor7_C {
  border: 1px solid rgb(var(--clr7-light)) !important;
}

.tColor7 {
  color: var(--clr7-hex) !important;
}

/* Optional: helper to ensure contrast when using translucent background */
.bg-contrast-on-ft {
  /* Use this class on text elements placed over ftColor* or fColor*_T backgrounds to increase readability */
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* End of custom color utilities */
.header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#header-publico img {
  max-height: 58px;
}

#header-publico {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 999;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
  backdrop-filter: blur(6px);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

#header-publico .headerIn {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
}

#header-publico nav a {
  margin-left: 18px;
  font-weight: 700;
  color: var(--clr1-hex);
  text-decoration: none;
}

#header-publico nav a:hover {
  color: var(--clr2);
}

#header-publico .login-btn {
  border-radius: 8px;
  padding: 6px 12px;
  border-color: var(--clr1-light-rgba-50);
  border-width: 0.01rem;
  border-style: solid;
}

#header-publico .cta-small {
  background-color: var(--clr4-hex);
  color: var(--clr3-hex);
  border-radius: 8px;
  padding: 6px 12px;
}
#header-publico .cta-small:hover {
  background-color: var(--clr4-light-hex);
  color: var(--clr3-light-hex);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.whatsapp {
    position: fixed;
    right: 20px;
    bottom: 90px;
    background: #25d366;
    color: white;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18);
    z-index: 999;
}