@charset "UTF-8";
/* Nuclides */
@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400;500;600;700;800;900&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
/**
* Ruta relativa a la carpeta con las fuentes.
*
* @nuclide Fonts-Folder
* @section Configuraciones > Rutas
*/
/**
* Ruta relativa a la carpeta con las imágenes.
*
* @nuclide Images-Folder
* @section Configuraciones > Rutas
*/
/**
* Ruta relativa a la carpeta con los documentos (PDF, DOCX, etc).
*
* @nuclide Documents-Folder
* @section Configuraciones > Rutas
*/
/**
* Prefijo para las clases (CSS, SCSS)
*
* @nuclide Prefijo de clases
* @section Configuraciones > Otros
*/
/* Nuclides */
/**
* Mixin para aplicar la escala tipográfica según el estilo definido.
*
* @mixin
* @section Fuentes
* @param $style-name El nombre del estilo de tipografía a aplicar.
* @example
* @include typography("body");
* @include typography("text-strike");
* @include typography("text-alt");
* @include typography("button");
* @include typography("header");
* @include typography("subtitle");
* @include typography("subtitle-alt");
* @include typography("title");
* @include typography("big-text");
*/
/**
* Success
*
* @color
* @section Status
*/
/**
* Success Alt
*
* @color
* @section Status
*/
/**
* Error
*
* @color
* @section Status
*/
/**
* Error Alt
*
* @color
* @section Status
*/
/**
* Warning
*
* @color
* @section Status
*/
/**
* Warning Alt
*
* @color
* @section Status
*/
/**
* Scrollbar Thumb
*
* @color
* @section Scrollbar
*/
/**
* Scrollbar Thumb (Hover)
*
* @color
* @section Scrollbar
*/
/**
* Scrollbar Track
*
* @color
* @section Scrollbar
*/
/**
* Color primario
*
* @color
* @section Tipografía
*/
/**
* Color secundario
*
* @color
* @section Tipografía
*/
/**
* Color Negro
*
* @color
* @section Tipografía
*/
/**
* Color Blanco
*
* @color
* @section Tipografía
*/
/**
* Color Gris oscuro
*
* @color
* @section Tipografía
*/
/**
* Color deshabilitado
*
* @color
* @section Tipografía
*/
/**
* Color primario
*
* @color
* @section Paleta base de colores
*/
/**
* Color primario oscuro
*
* @color
* @section Paleta base de colores
*/
/**
* Color primario claro
*
* @color
* @section Paleta base de colores
*/
/**
* Color secundario
*
* @color
* @section Paleta base de colores
*/
/**
* Color secundario oscuro
*
* @color
* @section Paleta base de colores
*/
/**
* Color Terciario (negro)
*
* @color
* @section Paleta base de colores
*/
/**
* Color (blanco)
*
* @color
* @section Paleta base de colores
*/
/**
* Color (gris claro)
*
* @color
* @section Paleta base de colores
*/
/**
* Color (gris medio)
*
* @color
* @section Paleta base de colores
*/
/**
* Color (gris oscuro)
*
* @color
* @section Paleta base de colores
*/
/**
* Botón primario
*
* @color
* @section Botones
*/
/**
* Botón primario (Hover)
*
* @color
* @section Botones
*/
/**
* Botón secundario (border and text)
*
* @color
* @section Botones
*/
/**
* Botón secundario
*
* @color
* @section Botones
*/
/**
* Botón secundario (Hover)
*
* @color
* @section Botones
*/
/**
* Botón (disabled)
*
* @color
* @section Botones
*/
/**
* Input border
*
* @color
* @section Inputs
*/
/**
* Input Placeholder
*
* @color
* @section Inputs
*/
/**
* Loader
*
* @color
* @section Loader
*/
/**
* Not found background
*
* @color
* @section Not Found
*/
/**
* Not found error code
*
* @color
* @section Not Found
*/
/**
* Not found title
*
* @color
* @section Not Found
*/
/**
* Not found message
*
* @color
* @section Not Found
*/
/**
* Unauthorized background
*
* @color
* @section Unauthorized
*/
/**
* Unauthorized error code
*
* @color
* @section Unauthorized
*/
/**
* Unauthorized title
*
* @color
* @section Unauthorized
*/
/**
* Unauthorized message
*
* @color
* @section Unauthorized
*/
/**
* Whatsapp background
*
* @color
* @section Whatsapp
*/
/**
* Mixin para aplicar las elevaciones, estas dan profundidad y materialidad.
*
* @mixin
* @section Elevaciones
* @param $elevation-name El nombre de la elevación a aplicar.
* @example
* @include elevation("depth0");
* @include elevation("depth2");
* @include elevation("depth6");
* @include elevation("depth16");
* @include elevation("depth32");
*/
html {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
height: 100%;
font-size: 14px;
}
body {
height: auto;
margin: 0;
display: flex;
flex-direction: column;
}
::-webkit-scrollbar {
scrollbar-width: thin;
width: 0.857rem;
}
::-webkit-scrollbar-track {
background: #18468b;
}
::-webkit-scrollbar-thumb {
background: #4b7aaf;
border-radius: 0.285rem;
}
::-webkit-scrollbar-thumb:hover {
background: #5c9bcf;
}
/* Atoms */
/* Nuclides */
/**
* Estilos de Alert Sucess
*
* @atom Alerts
* @section Alerts > Success
* @markup
*
*
* Success
*
*/
.tecnicosamigos_alert--success {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
padding: 1rem 2rem;
border-radius: 0.75rem;
width: -webkit-fill-available;
height: -moz-max-content;
height: max-content;
line-height: normal;
background-color: #d1fae5;
color: #22c55e;
}
.tecnicosamigos_alert--success .icon {
font-size: 1rem;
display: flex;
align-items: center;
}
/*
* Estilos de Alert Error
*
* @atom Alerts
* @section Alerts > Error
* @markup
*
*
* Error
*
*/
.tecnicosamigos_alert--error {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
padding: 1rem 2rem;
border-radius: 0.75rem;
width: -webkit-fill-available;
height: -moz-max-content;
height: max-content;
line-height: normal;
background-color: #ffd3d0;
color: #ed4438;
}
.tecnicosamigos_alert--error .icon {
font-size: 1rem;
display: flex;
align-items: center;
}
/*
* Estilos de Alert Warning
*
* @atom Alerts
* @section Alerts > Warning
* @markup
*
*
* Warning
*
*/
.tecnicosamigos_alert--warning {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 1.5rem;
padding: 1rem 2rem;
border-radius: 0.75rem;
width: -webkit-fill-available;
height: -moz-max-content;
height: max-content;
line-height: normal;
background-color: #fff4d1;
color: #fbbf24;
}
.tecnicosamigos_alert--warning .icon {
font-size: 1rem;
display: flex;
align-items: center;
}
/* Nuclides */
/**
* Estilo de botón con Fill.
*
* @atom Botón Fill
* @section Botones > Botón Fill
* @markup
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_btn--fill {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.857rem 1.714rem;
border-radius: 0.429rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
background-color: #e52322;
color: #fff;
border: 0.143rem solid transparent;
width: 100%;
}
.tecnicosamigos_btn--fill .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
}
.tecnicosamigos_btn--fill .icon-left {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-right: 0.571rem;
}
.tecnicosamigos_btn--fill .icon-right {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.571rem;
}
.tecnicosamigos_btn--fill:disabled {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.tecnicosamigos_btn--fill:hover:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #4b7aaf;
transform: translateY(-2px);
}
.tecnicosamigos_btn--fill:active:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #4b7aaf;
transform: translateY(0);
}
.tecnicosamigos_btn--fill:disabled {
background-color: #f1f1f1 !important;
color: #d0d3db !important;
}
/**
* Estilo de botón con Outline.
*
* @atom Botón Outline
* @section Botones > Botón Outline
* @markup
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_btn--outline {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.857rem 1.714rem;
border-radius: 0.429rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
background-color: transparent;
color: #fff;
border: 0.143rem solid #fff;
width: 100%;
}
.tecnicosamigos_btn--outline .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
}
.tecnicosamigos_btn--outline .icon-left {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-right: 0.571rem;
}
.tecnicosamigos_btn--outline .icon-right {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.571rem;
}
.tecnicosamigos_btn--outline:disabled {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.tecnicosamigos_btn--outline:hover:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
border-color: #e52322;
color: #e52322;
transform: translateY(-2px);
}
.tecnicosamigos_btn--outline:active:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
border-color: #e52322;
color: #e52322;
transform: translateY(0);
}
.tecnicosamigos_btn--outline:disabled {
border-color: #f1f1f1 !important;
color: #d0d3db !important;
}
/**
* Estilo de botón con Text.
*
* @atom Botón Text
* @section Botones > Botón Text
* @markup
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_btn--text {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.857rem 1.714rem;
border-radius: 0.429rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
background-color: transparent;
border: none;
color: #e52322;
width: 100%;
}
.tecnicosamigos_btn--text .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
}
.tecnicosamigos_btn--text .icon-left {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-right: 0.571rem;
}
.tecnicosamigos_btn--text .icon-right {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.571rem;
}
.tecnicosamigos_btn--text:disabled {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.tecnicosamigos_btn--text:hover:not(:disabled) {
color: #4b7aaf;
border-radius: 0;
border-bottom: 0.107rem solid #4b7aaf;
text-underline-offset: 0.286rem;
transform: translateY(-2px);
}
.tecnicosamigos_btn--text:active:not(:disabled) {
color: #4b7aaf;
border-radius: 0;
border-bottom: 0.107rem solid #4b7aaf;
text-underline-offset: 0.286rem;
transform: translateY(0);
}
.tecnicosamigos_btn--text:disabled {
color: #d0d3db;
}
/**
* Botón flotante fijo en pantalla que abre el chat de WhatsApp en una nueva pestaña.
* Ideal para soporte o contacto rápido con los usuarios.
*
* @atom Botón Flotante WhatsApp
* @section Botones > Botón Flotante WhatsApp
* @markup
*
*
*
*/
.tecnicosamigos_btn--whatsapp-float {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
position: fixed;
bottom: 4.285rem;
right: 2rem;
z-index: 1000;
cursor: pointer;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 3.75rem;
height: 3.75rem;
border-radius: 50px;
background: #25d366;
color: #fff;
font-size: 1.75rem;
overflow: hidden;
transition: all 0.3s ease-in-out;
}
.tecnicosamigos_btn--whatsapp-float span {
display: none;
font-size: 1.2rem;
color: #fff;
white-space: nowrap;
opacity: 0;
transform: translateX(20px);
transition: all 0.3s ease-in-out;
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_btn--whatsapp-float:hover {
width: 15rem;
padding: 0.5rem;
background: rgb(33.1955645161, 189.3044354839, 91.5120967742);
transform: scale(1.05);
}
.tecnicosamigos_btn--whatsapp-float:hover span {
display: block;
opacity: 1;
transform: translateX(0);
}
}
.tecnicosamigos_btn--whatsapp-float:active {
width: 16rem;
background: rgb(33.1955645161, 189.3044354839, 91.5120967742);
transform: scale(1.05);
}
.tecnicosamigos_btn--whatsapp-float:active span {
display: block;
opacity: 1;
transform: translateX(0);
}
.tecnicosamigos_btn--sweetalert-ok {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.857rem 1.714rem;
border-radius: 0.429rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
background-color: #18468b;
color: #fff;
border: 0.143rem solid transparent;
}
.tecnicosamigos_btn--sweetalert-ok .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
}
.tecnicosamigos_btn--sweetalert-ok .icon-left {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-right: 0.571rem;
}
.tecnicosamigos_btn--sweetalert-ok .icon-right {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.571rem;
}
.tecnicosamigos_btn--sweetalert-ok:disabled {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.tecnicosamigos_btn--sweetalert-ok:hover:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #0b203d;
transform: translateY(-2px);
}
.tecnicosamigos_btn--sweetalert-ok:active:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #0b203d;
transform: translateY(0);
}
.tecnicosamigos_btn--sweetalert-cancel {
font-family: "Lato", sans-serif;
text-transform: uppercase;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
display: flex;
align-items: center;
justify-content: center;
padding: 0.857rem 1.714rem;
border-radius: 0.429rem;
text-decoration: none;
text-align: center;
cursor: pointer;
transition: all 0.25s ease;
position: relative;
overflow: hidden;
background-color: #e52322;
color: #fff;
border: 0.143rem solid transparent;
}
.tecnicosamigos_btn--sweetalert-cancel .icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
}
.tecnicosamigos_btn--sweetalert-cancel .icon-left {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-right: 0.571rem;
}
.tecnicosamigos_btn--sweetalert-cancel .icon-right {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
margin-left: 0.571rem;
}
.tecnicosamigos_btn--sweetalert-cancel:disabled {
cursor: not-allowed;
box-shadow: none;
transform: none;
}
.tecnicosamigos_btn--sweetalert-cancel:hover:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #a71a19;
transform: translateY(-2px);
}
.tecnicosamigos_btn--sweetalert-cancel:active:not(:disabled) {
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
background-color: #a71a19;
transform: translateY(0);
}
.swal2-actions-custom {
gap: 15px !important;
display: flex !important;
justify-content: center !important;
width: 100% !important;
}
/* Nuclides */
/**
* Estilo de los Checkboxes cuadrados.
*
* @atom Checkboxes
* @section Checkboxes > Cuadrado
* @markup
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_checkbox--square {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
gap: 0.5rem;
color: #000000;
}
.tecnicosamigos_checkbox--square input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.tecnicosamigos_checkbox--square .checkmark {
width: 1rem;
height: 1rem;
border: 0.142rem solid #a0a09f;
border-radius: 0.214rem;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
position: relative;
}
.tecnicosamigos_checkbox--square .checkmark::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: transparent;
transform: translate(-50%, -50%);
transition: background-color 0.25s ease;
z-index: -1;
}
.tecnicosamigos_checkbox--square .checkmark::after {
content: "";
display: none;
width: 0.19rem;
height: 0.6rem;
border: solid #fff;
border-width: 0 0.143rem 0.143rem 0;
transform: rotate(45deg);
}
.tecnicosamigos_checkbox--square:hover input:not(:disabled) ~ .checkmark::before {
background-color: #ebeef5;
}
.tecnicosamigos_checkbox--square input:checked ~ .checkmark {
background-color: #18468b;
border-color: #18468b;
}
.tecnicosamigos_checkbox--square input:checked ~ .checkmark::after {
display: block;
}
.tecnicosamigos_checkbox--square.disabled {
color: #d0d3db;
cursor: not-allowed;
}
.tecnicosamigos_checkbox--square.disabled .checkmark {
background-color: #f1f1f1;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--square.disabled input:checked ~ .checkmark {
background-color: #f1f1f1;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--square.disabled input:checked ~ .checkmark::after {
display: block;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--square .checkmark {
border-radius: 0.214rem;
}
/**
* Estilo de los Checkboxes círculos.
*
* @atom Checkboxes
* @section Checkboxes > Círculo
* @markup
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_checkbox--circle {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
gap: 0.5rem;
color: #000000;
}
.tecnicosamigos_checkbox--circle input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.tecnicosamigos_checkbox--circle .checkmark {
width: 1rem;
height: 1rem;
border: 0.142rem solid #a0a09f;
border-radius: 0.214rem;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
position: relative;
}
.tecnicosamigos_checkbox--circle .checkmark::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: transparent;
transform: translate(-50%, -50%);
transition: background-color 0.25s ease;
z-index: -1;
}
.tecnicosamigos_checkbox--circle .checkmark::after {
content: "";
display: none;
width: 0.19rem;
height: 0.6rem;
border: solid #fff;
border-width: 0 0.143rem 0.143rem 0;
transform: rotate(45deg);
}
.tecnicosamigos_checkbox--circle:hover input:not(:disabled) ~ .checkmark::before {
background-color: #ebeef5;
}
.tecnicosamigos_checkbox--circle input:checked ~ .checkmark {
background-color: #18468b;
border-color: #18468b;
}
.tecnicosamigos_checkbox--circle input:checked ~ .checkmark::after {
display: block;
}
.tecnicosamigos_checkbox--circle.disabled {
color: #d0d3db;
cursor: not-allowed;
}
.tecnicosamigos_checkbox--circle.disabled .checkmark {
background-color: #f1f1f1;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--circle.disabled input:checked ~ .checkmark {
background-color: #f1f1f1;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--circle.disabled input:checked ~ .checkmark::after {
display: block;
border-color: #d0d3db;
}
.tecnicosamigos_checkbox--circle .checkmark {
border-radius: 50%;
}
/* Nuclides */
.input-error-text {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
margin: 0.5rem;
color: #ed4438;
display: none;
}
input {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
padding: 0.571rem 0.857rem;
border-radius: 0.429rem;
border: 0.071rem solid #a0a09f;
color: #18468b;
transition: all 0.25s ease;
width: 100%;
box-sizing: border-box;
font-size: 1.142rem;
}
input::-moz-placeholder {
color: #858584;
}
input::placeholder {
color: #858584;
}
input:hover:not(:disabled):not(.error) {
border-color: #18468b;
}
input:focus:not(:disabled) {
outline: none;
border-color: #18468b;
box-shadow: 0rem 0.1429rem 0.2857rem rgba(0, 0, 0, 0.14);
}
input:disabled {
background-color: #f1f1f1 !important;
border-color: #f1f1f1 !important;
cursor: not-allowed;
}
input:disabled::-moz-placeholder {
color: #d0d3db;
}
input:disabled::placeholder {
color: #d0d3db;
}
/**
* Estilo del Input básico.
*
* @atom Inputs
* @section Inputs > Input
* @markup
*
*
*/
.tecnicosamigos_input {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
position: relative;
margin-bottom: 0.5rem;
}
.tecnicosamigos_input .input-label {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000000;
font-size: 1.142rem;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.tecnicosamigos_input .input-label:has(+ .input-container input:disabled) {
color: #d0d3db;
}
.tecnicosamigos_input .input-container {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.tecnicosamigos_input.error .input-container input {
border-color: #ed4438;
}
.tecnicosamigos_input.error .input-container input:focus {
color: #18468b;
}
.tecnicosamigos_input.error .input-error-text {
display: block;
}
.tecnicosamigos_input.error .input-label {
color: #ed4438;
}
.tecnicosamigos_input.error input:focus {
color: #18468b;
}
/**
* Input con icono a la izquierda.
*
* @atom Inputs
* @section Inputs > Input Icon Left
* @markup
*
*
*/
.tecnicosamigos_input--icon-left {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
position: relative;
margin-bottom: 0.5rem;
}
.tecnicosamigos_input--icon-left .input-label {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000000;
font-size: 1.142rem;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.tecnicosamigos_input--icon-left .input-label:has(+ .input-container input:disabled) {
color: #d0d3db;
}
.tecnicosamigos_input--icon-left .input-container {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.tecnicosamigos_input--icon-left .input-icon-group {
display: flex;
position: relative;
width: 100%;
}
.tecnicosamigos_input--icon-left .input-icon-group input {
flex: 1;
padding-left: 2.5rem;
}
.tecnicosamigos_input--icon-left .input-icon-group .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #858584;
font-size: 1rem;
left: 0.857rem;
pointer-events: none;
}
.tecnicosamigos_input--icon-left:has(input:hover) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-left:has(input:focus) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-left:has(input:not(:-moz-placeholder)) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-left:has(input:not(:placeholder-shown)) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-left:has(input:disabled) .input-container .input-icon-group .icon {
color: #d0d3db;
}
.tecnicosamigos_input--icon-left.error .input-container input {
border-color: #ed4438;
}
.tecnicosamigos_input--icon-left.error .input-container input:focus {
color: #18468b;
}
.tecnicosamigos_input--icon-left.error .input-error-text {
display: block;
}
.tecnicosamigos_input--icon-left.error .input-label {
color: #ed4438;
}
/**
* Input con icono a la derecha.
*
* @atom Inputs
* @section Inputs > Input Icon Right
* @markup
*
*
*/
.tecnicosamigos_input--icon-right {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
position: relative;
margin-bottom: 0.5rem;
}
.tecnicosamigos_input--icon-right .input-label {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
color: #000000;
font-size: 1.142rem;
font-weight: 500;
margin-bottom: 0.5rem;
display: block;
}
.tecnicosamigos_input--icon-right .input-label:has(+ .input-container input:disabled) {
color: #d0d3db;
}
.tecnicosamigos_input--icon-right .input-container {
display: flex;
flex-direction: column;
position: relative;
width: 100%;
}
.tecnicosamigos_input--icon-right .input-icon-group {
display: flex;
position: relative;
width: 100%;
}
.tecnicosamigos_input--icon-right .input-icon-group input {
flex: 1;
padding-right: 2.5rem;
}
.tecnicosamigos_input--icon-right .input-icon-group .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
color: #858584;
font-size: 1rem;
right: 0.857rem;
pointer-events: auto;
cursor: pointer;
}
.tecnicosamigos_input--icon-right:has(input:hover) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-right:has(input:focus) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-right:has(input:not(:-moz-placeholder)) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-right:has(input:not(:placeholder-shown)) .input-container .input-icon-group .icon {
color: #18468b;
}
.tecnicosamigos_input--icon-right:has(input:disabled) .input-container .input-icon-group .icon {
color: #d0d3db;
}
.tecnicosamigos_input--icon-right.error .input-container input {
border-color: #ed4438;
}
.tecnicosamigos_input--icon-right.error .input-container input:focus {
color: #18468b;
}
.tecnicosamigos_input--icon-right.error .input-error-text {
display: block;
}
.tecnicosamigos_input--icon-right.error .input-label {
color: #ed4438;
}
/* Nuclides */
/**
* Loader de aplicación - Dots Bounce
*
* @atom Loaders
* @section Loaders > Loader Dots
* @markup
*
*/
.tecnicosamigos_loader--dots {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: 1rem;
margin: 0.5rem;
}
.tecnicosamigos_loader--dots .dots {
display: flex;
gap: 0.4rem;
}
.tecnicosamigos_loader--dots .dots span {
width: 0.6rem;
height: 0.6rem;
background-color: #0b203d;
border-radius: 50%;
animation: bounce 0.6s infinite alternate;
}
.tecnicosamigos_loader--dots .dots span:nth-child(2) {
animation-delay: 0.2s;
}
.tecnicosamigos_loader--dots .dots span:nth-child(3) {
animation-delay: 0.4s;
}
.tecnicosamigos_loader--dots .text {
margin-top: 0.6rem;
font-size: 1rem;
color: #0b203d;
}
@keyframes bounce {
from {
transform: translateY(0);
opacity: 0.4;
}
to {
transform: translateY(-0.6rem);
opacity: 1;
}
}
/**
* Loader de aplicación - Barra Progresiva
*
* @atom Loaders
* @section Loaders > Loader Bar
* @markup
*
*/
.tecnicosamigos_loader--bar {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
margin: 0.5rem;
}
.tecnicosamigos_loader--bar .bar {
position: relative;
height: 0.4rem;
width: 8rem;
background: rgba(11, 32, 61, 0.2);
border-radius: 1rem;
overflow: hidden;
}
.tecnicosamigos_loader--bar .bar::after {
content: "";
position: absolute;
height: 100%;
width: 40%;
background: #0b203d;
border-radius: 1rem;
animation: loadingBar 1.5s infinite;
}
.tecnicosamigos_loader--bar .text {
margin-top: 0.6rem;
font-size: 1rem;
color: #0b203d;
}
@keyframes loadingBar {
0% {
left: -40%;
}
50% {
left: 30%;
}
100% {
left: 100%;
}
}
/**
* Loader de aplicación - Pulso
*
* @atom Loaders
* @section Loaders > Loader Pulse
* @markup
*
*/
.tecnicosamigos_loader--pulse {
display: flex;
flex-direction: column;
align-items: center;
margin: 0.5rem;
}
.tecnicosamigos_loader--pulse .pulse {
width: 2.5rem;
height: 2.5rem;
background: #0b203d;
border-radius: 50%;
animation: pulse 1.5s infinite ease-in-out;
}
.tecnicosamigos_loader--pulse .text {
margin-top: 0.6rem;
font-size: 1rem;
color: #0b203d;
}
@keyframes pulse {
0% {
transform: scale(1);
opacity: 0.8;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
100% {
transform: scale(1);
opacity: 0.8;
}
}
/* Nuclides */
/*
* Estilo del logo pequeño.
*
* @atom Logo Pequeño
* @section Logos > Logo Pequeño
* @markup
*
*/
.tecnicosamigos_logo--small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-tecnicosamigos.png");
width: 5rem;
height: 5rem;
}
.tecnicosamigos_logo--small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/**
* Estilo del logo mediano.
*
* @atom Logo Mediano
* @section Logos > Logo Mediano
* @markup
*
*/
.tecnicosamigos_logo--medium {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-tecnicosamigos.png");
width: 7.143rem;
height: 7.143rem;
}
.tecnicosamigos_logo--medium:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--medium:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo grande.
*
* @atom Logo Grande
* @section Logos > Logo Grande
* @markup
*
*/
.tecnicosamigos_logo--large {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-tecnicosamigos.png");
width: 22rem;
height: 22rem;
}
.tecnicosamigos_logo--large:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--large:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Auteco pequeño.
*
* @atom Logo Auteco Pequeño
* @section Logos > Logo Auteco Pequeño
* @markup
*
*/
.tecnicosamigos_logo--auteco-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-auteco.png");
width: 5rem;
height: 5rem;
}
.tecnicosamigos_logo--auteco-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--auteco-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Victory pequeño.
*
* @atom Logo Victory Pequeño
* @section Logos > Logo Victory Pequeño
* @markup
*
*/
.tecnicosamigos_logo--victory-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-victory.png");
width: 13rem;
height: 6rem;
}
.tecnicosamigos_logo--victory-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--victory-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo TVS pequeño.
*
* @atom Logo TVS Pequeño
* @section Logos > Logo TVS Pequeño
* @markup
*
*/
.tecnicosamigos_logo--tvs-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-tvs.png");
width: 10rem;
height: 6rem;
}
.tecnicosamigos_logo--tvs-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--tvs-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Benelli pequeño.
*
* @atom Logo Benelli Pequeño
* @section Logos > Logo Benelli Pequeño
* @markup
*
*/
.tecnicosamigos_logo--benelli-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-benelli.png");
width: 7rem;
height: 6rem;
}
.tecnicosamigos_logo--benelli-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--benelli-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Ceronte pequeño.
*
* @atom Logo Ceronte Pequeño
* @section Logos > Logo Ceronte Pequeño
* @markup
*
*/
.tecnicosamigos_logo--ceronte-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-ceronte.png");
width: 10rem;
height: 6rem;
}
.tecnicosamigos_logo--ceronte-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--ceronte-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Kawasaki pequeño.
*
* @atom Logo Kawasaki Pequeño
* @section Logos > Logo Kawasaki Pequeño
* @markup
*
*/
.tecnicosamigos_logo--kawasaki-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-kawasaki.png");
width: 10rem;
height: 6rem;
}
.tecnicosamigos_logo--kawasaki-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--kawasaki-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Kymco pequeño.
*
* @atom Logo Kymco Pequeño
* @section Logos > Logo Kymco Pequeño
* @markup
*
*/
.tecnicosamigos_logo--kymco-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-kymco.png");
width: 10rem;
height: 6rem;
}
.tecnicosamigos_logo--kymco-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--kymco-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/*
* Estilo del logo Zontes pequeño.
*
* @atom Logo Zontes Pequeño
* @section Logos > Logo Zontes Pequeño
* @markup
*
*/
.tecnicosamigos_logo--zontes-small {
display: inline-block;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
transition: all 0.25s ease;
background-image: url("../images//logo-zontes.png");
width: 10rem;
height: 6rem;
}
.tecnicosamigos_logo--zontes-small:active {
cursor: pointer;
transform: translateY(-2px);
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_logo--zontes-small:hover {
cursor: pointer;
transform: translateY(-2px);
}
}
/* Nuclides */
/**
* Estilo de los Radio Buttons
*
* @atom Radios
* @section Radios > Radio Button
* @markup
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_radio {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
display: inline-flex;
align-items: center;
cursor: pointer;
position: relative;
gap: 0.5rem;
color: #000000;
}
.tecnicosamigos_radio input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
margin: -1px;
clip: rect(0 0 0 0);
clip-path: inset(50%);
overflow: hidden;
white-space: nowrap;
}
.tecnicosamigos_radio .radiomark {
width: 1rem;
height: 1rem;
border: 0.142rem solid #a0a09f;
border-radius: 50%;
background-color: white;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
position: relative;
}
.tecnicosamigos_radio .radiomark::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 2rem;
height: 2rem;
border-radius: 50%;
background-color: transparent;
transform: translate(-50%, -50%);
transition: background-color 0.25s ease;
z-index: -1;
}
.tecnicosamigos_radio .radiomark::after {
content: "";
display: none;
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background-color: #18468b;
}
.tecnicosamigos_radio:hover input:not(:disabled) ~ .radiomark::before {
background-color: #ebeef5;
}
.tecnicosamigos_radio input:checked ~ .radiomark {
border-color: #18468b;
}
.tecnicosamigos_radio input:checked ~ .radiomark::after {
display: block;
}
.tecnicosamigos_radio.disabled {
color: #d0d3db;
cursor: not-allowed;
}
.tecnicosamigos_radio.disabled .radiomark {
background-color: #f1f1f1;
border-color: #f1f1f1;
}
.tecnicosamigos_radio.disabled .radiomark::before {
background-color: transparent;
}
.tecnicosamigos_radio.disabled .radiomark::after {
background-color: #d0d3db;
}
.tecnicosamigos_radio.disabled input:checked ~ .radiomark {
background-color: #f1f1f1;
border-color: #f1f1f1;
}
.tecnicosamigos_radio.disabled input:checked ~ .radiomark::after {
display: block;
border-color: #d0d3db;
}
/* Nuclides */
.select-error-text {
font-family: "Lato", sans-serif;
font-size: 1rem;
font-weight: 400;
margin: 0.5rem 0 0;
color: #ed4438;
display: none;
}
/**
* Estilo del Select básico.
*
* @atom Selects
* @section Selects > Default
* @markup
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
*
*
*
*
*
Texto de error
*
*
*
*
H
*
*
Hardy Mauricio Castro
*
hardy.castro@example.com
*
*
*
*
*
*
*
Título del Conferencia
*
Descripción corta del Conferencia
*
*
*
*
*
En vivo por Youtube
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*
*/
.tecnicosamigos_icon--menu {
text-decoration: none;
color: #808080;
font-size: 1.285rem;
}
/*
* Iconos de Multimedia
* @molecule Iconos
* @section Iconos > Multimedia Icons
* @markup
*
*/
.tecnicosamigos_icon--card {
text-decoration: none;
color: #808080;
font-size: 2rem;
}
/*
* Iconos de historial
* @molecule Iconos
* @section Iconos > Historial Icons
* @markup
*
*/
.tecnicosamigos_icon--historial {
display: flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
background-color: #c4c4c4;
color: #000000;
font-size: 1.25rem;
text-decoration: none;
}
/* Nuclides */
/*
* Menú lateral izquierdo de navegación
*
* @molecule Menus
* @section Menus > Menú Lateral
* @markup
*
*
*/
.tecnicosamigos_menu-izquierda {
background-color: #fff;
width: 18rem;
display: flex;
flex-direction: column;
padding: 2rem 1rem 5rem 1rem;
transition: transform 0.3s ease-in-out;
}
.tecnicosamigos_menu-izquierda .menu-links {
display: flex;
flex-direction: column;
gap: 1rem;
}
.tecnicosamigos_menu-izquierda .menu-links .menu-item {
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.8rem 1rem;
border-radius: 0.6rem;
cursor: pointer;
font-size: 1.285rem;
font-weight: 500;
color: #808080;
}
.tecnicosamigos_menu-izquierda .menu-links .menu-item .tecnicosamigos_icon--menu {
font-size: 1.2rem;
}
.tecnicosamigos_menu-izquierda .menu-links .menu-item:hover {
background-color: rgba(24, 70, 139, 0.1);
}
.tecnicosamigos_menu-izquierda .menu-links .menu-item.active {
background-color: #18468b;
color: #fff;
}
.tecnicosamigos_menu-izquierda .menu-links .menu-item.active .tecnicosamigos_icon--menu {
color: #fff;
}
@media (max-width: 768px) {
.tecnicosamigos_menu-izquierda {
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 1000;
transform: translateX(-100%);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.tecnicosamigos_menu-izquierda.open {
transform: translateX(0);
}
}
.menu-toggle {
display: none;
background: none;
border: none;
font-size: 2rem;
color: #e52322;
cursor: pointer;
position: absolute;
top: 2.5rem;
left: 1rem;
z-index: 1100;
}
@media (hover: hover) and (pointer: fine) {
.menu-toggle:hover {
color: #18468b;
transform: translateY(-2px);
}
}
.menu-toggle:active {
color: #18468b;
transform: translateY(-2px);
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
}
.menu-toggle.open {
position: fixed;
color: #18468b;
}
@media (hover: hover) and (pointer: fine) {
.menu-toggle.open:hover {
color: #e52322;
transform: translateY(-2px);
}
}
.menu-toggle.open:active {
color: #e52322;
transform: translateY(-2px);
}
/* Nuclides */
/* Atoms */
/* Nuclides */
/*
* Buscador principal
*
* @molecule Buscadores
* @section Buscadores > Buscador principal
* @markup
*
*/
.tecnicosamigos_search {
display: flex;
align-items: center;
gap: 0.857rem;
width: 100%;
}
.tecnicosamigos_search .tecnicosamigos_btn--fill {
padding: 0.642rem 1.285rem;
width: 10rem;
}
.tecnicosamigos_search .tecnicosamigos_input--icon-right {
margin-bottom: 0;
}
/* Structures */
/* Nuclides */
/**
* Footer principal de la aplicación
*
* @structure Footers
* @section Footers > Footer principal
* @markup
*
*/
.tecnicosamigos_footer {
background-color: #18468b;
color: #fff;
padding: 4rem 4rem 2rem 4rem;
}
.tecnicosamigos_footer .menu {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-bottom: 2rem;
gap: 2rem;
}
.tecnicosamigos_footer .menu .menu-logo {
max-width: 20rem;
}
.tecnicosamigos_footer .menu .menu-logo .texto {
font-size: 1.214rem;
line-height: 1.4;
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8);
}
.tecnicosamigos_footer .menu .menu-logo .redes-sociales {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.tecnicosamigos_footer .menu .menu-logo .redes-sociales a {
width: 2rem;
height: 2rem;
font-size: 1rem;
border: 0.1rem solid #fff;
background-color: transparent;
}
.tecnicosamigos_footer .menu .menu-logo .redes-sociales a:hover {
background-color: #e52322;
}
.tecnicosamigos_footer .menu .menu-links1,
.tecnicosamigos_footer .menu .menu-links2,
.tecnicosamigos_footer .menu .menu-links3 {
min-width: 12rem;
}
.tecnicosamigos_footer .menu .menu-links1 .titulo,
.tecnicosamigos_footer .menu .menu-links2 .titulo,
.tecnicosamigos_footer .menu .menu-links3 .titulo {
font-weight: 700;
margin-bottom: 3rem;
font-size: 1.428rem;
}
.tecnicosamigos_footer .menu .menu-links1 .link,
.tecnicosamigos_footer .menu .menu-links2 .link,
.tecnicosamigos_footer .menu .menu-links3 .link {
display: flex;
align-items: center;
font-size: 1.214rem;
margin-bottom: 1.2rem;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: color 0.3s ease;
text-decoration: none;
}
.tecnicosamigos_footer .menu .menu-links1 .link::before,
.tecnicosamigos_footer .menu .menu-links2 .link::before,
.tecnicosamigos_footer .menu .menu-links3 .link::before {
content: "▶";
font-size: 0.8rem;
margin-right: 1rem;
color: #fff;
}
.tecnicosamigos_footer .menu .menu-links1 .link:hover,
.tecnicosamigos_footer .menu .menu-links2 .link:hover,
.tecnicosamigos_footer .menu .menu-links3 .link:hover {
color: #e52322;
}
.tecnicosamigos_footer .menu .menu-links1 .link:hover::before,
.tecnicosamigos_footer .menu .menu-links2 .link:hover::before,
.tecnicosamigos_footer .menu .menu-links3 .link:hover::before {
color: #e52322;
}
.tecnicosamigos_footer .linea-horizontal {
border-top: 0.142rem solid rgba(255, 255, 255, 0.35);
margin-bottom: 2rem;
}
.tecnicosamigos_footer .footer {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
font-size: 0.928rem;
font-weight: 600;
text-align: center;
letter-spacing: 0.1rem;
text-decoration: none;
}
.tecnicosamigos_footer .footer .left {
margin: 0 0.5rem;
}
.tecnicosamigos_footer .footer .separator {
margin: 0 0.5rem;
opacity: 0.5;
}
.tecnicosamigos_footer .footer .right {
margin: 0 0.5rem;
}
.tecnicosamigos_footer .footer .right a {
color: #fff;
text-decoration: none;
transition: color 0.3s ease;
}
.tecnicosamigos_footer .footer .right a:hover {
color: #e52322;
}
/* Nuclides */
/**
* Header principal de la aplicación
*
* @structure Headers
* @section Headers > Header principal
* @markup
*
*/
.tecnicosamigos_header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
background-color: #000;
padding: 1rem 4rem;
}
@media (max-width: 768px) {
.tecnicosamigos_header {
justify-content: center;
padding: 2rem 3rem;
}
}
.tecnicosamigos_header .tecnicosamigos_logo--small {
margin-right: 2rem;
margin-left: 2rem;
}
.tecnicosamigos_header .contenedor-2 {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 4rem;
}
@media (max-width: 768px) {
.tecnicosamigos_header .contenedor-2 {
margin-top: 1rem;
gap: 2rem;
}
}
.tecnicosamigos_header .contenedor-2 .contenerdor-registro {
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-registro .texto {
color: #fff;
font-size: 0.928rem;
font-weight: 600;
letter-spacing: 0.1rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
text-align: center;
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_header .contenedor-2 .contenerdor-registro .texto:hover {
color: #fff;
border-bottom: 0.142rem solid #fff;
}
}
.tecnicosamigos_header .contenedor-2 .contenerdor-registro .texto:active {
color: #fff;
border-bottom: 0.142rem solid #fff;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-registro .texto.activo {
border-bottom: 0.142rem solid #fff;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-redes {
display: flex;
justify-content: center;
gap: 1.5rem;
}
.tecnicosamigos_header .contenedor-2 .tecnicosamigos_btn--fill {
background-color: #18468b;
width: auto;
max-width: 17rem;
}
.tecnicosamigos_header .contenedor-2 .tecnicosamigos_btn--fill:hover:not(:disabled) {
background-color: #e52322;
}
.tecnicosamigos_header .contenedor-2 .tecnicosamigos_btn--fill:active:not(:disabled) {
background-color: #e52322;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login .texto {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.928rem;
font-weight: 600;
color: #fff;
letter-spacing: 0.1rem;
height: 4.5rem;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login .tecnicosamigos_icon {
color: #fff;
background-color: #18468b;
}
@media (hover: hover) and (pointer: fine) {
.tecnicosamigos_header .contenedor-2 .contenerdor-login:hover .tecnicosamigos_icon {
background-color: #e52322;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login:hover .texto {
color: #fff;
border-bottom: 0.142rem solid #fff;
}
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login:active .tecnicosamigos_icon {
background-color: #e52322;
}
.tecnicosamigos_header .contenedor-2 .contenerdor-login:active .texto {
color: #fff;
border-bottom: 0.142rem solid #fff;
}
/* Nuclides */
/**
* Not Found
*
* Componente para mostrar un mensaje de error 404 cuando la página no se encuentra.
*
* @structure Others
* @section Others > Not Found
* @markup
*
*
404
*
¡Ups!, algo no ha ido bien
*
No podemos encontrar la página que buscas.
*
*
*
*
*
401
*
Acceso no autorizado
*
No tienes permisos para acceder a este recurso.
*
*
*
*
*
*
*