/* Variante Regular (Normal) */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400; /* 400 corresponde a Regular */
    src: url('/assets/font/poppins/Poppins-Regular.ttf') format('truetype');
}

/* Variante Medium */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500; /* 500 corresponde a Medium */
    src: url('/assets/font/poppins/Poppins-Medium.ttf') format('truetype');
}

/* Variante Semibold */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600; /* 600 corresponde a SemiBold */
    src: url('/assets/font/poppins/Poppins-SemiBold.ttf') format('truetype');
}

/* Variante Bold (Negrita) */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700; /* 700 corresponde a Bold */
    src: url('/assets/font/poppins/Poppins-Bold.ttf') format('truetype');
}

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

/* Esto afectará a todas las imágenes del sitio */
img {
    user-select: none;
    -webkit-user-drag: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    line-height: 1.8;
    /*scrollbar-gutter: stable;*/
}

body {
    background: #171717; /* --color-background-figma-dark: #1E1E1E; */
    /*color font background --color-neutral-linkedin-dark: #1B1F23; */
    /*color: #E3E3E3;!* --color-primary-font-chrome-dark: #E3E3E3; *!*/
    color: #DAE8EA;
    font-family: 'Poppins', sans-serif;
    -webkit-tap-highlight-color: transparent; /* Sets the tap highlight to completely transparent */
    -webkit-touch-callout: none; /* Removes the gray background box on some mobile browsers */
}

body.no-scroll {
    overflow: hidden !important;
}

:root {
    /* ESCALA DE GRISES */
    --color-neutral-100: #ffffff;
    --color-neutral-125: #f7f7f7;
    --color-neutral-150: #efefef;
    --color-neutral-175: #e7e7e7;
    --color-neutral-200: #dfdfdf;
    --color-neutral-225: #d7d7d7;
    --color-neutral-250: #cfcfcf;
    --color-neutral-275: #c7c7c7;
    --color-neutral-300: #bfbfbf;
    --color-neutral-325: #b7b7b7;
    --color-neutral-350: #afafaf;
    --color-neutral-375: #a7a7a7;
    --color-neutral-400: #9f9f9f;
    --color-neutral-425: #979797;
    --color-neutral-450: #8f8f8f;
    --color-neutral-475: #878787;
    --color-neutral-500: #7f7f7f;
    --color-neutral-525: #777777;
    --color-neutral-550: #6f6f6f;
    --color-neutral-575: #676767;
    --color-neutral-600: #5f5f5f;
    --color-neutral-625: #575757;
    --color-neutral-650: #4f4f4f;
    --color-neutral-675: #474747;
    --color-neutral-700: #3f3f3f;
    --color-neutral-725: #373737;
    --color-neutral-750: #2f2f2f;
    --color-neutral-775: #272727;
    --color-neutral-800: #1f1f1f;
    --color-neutral-825: #171717;
    --color-neutral-850: #0f0f0f;
    --color-neutral-875: #070707;
    --color-neutral-900: #000000;

    --color-neutral-chrome-2-dark: #22242A;
    --color-primary-font-chrome-2-dark: #DAE8EA;
    --color-secondary-font-chrome-2-dark: #BFBFBF;
    --color-secondary-font-chrome-22-dark: #BDC1C6;
    --color-secondary-font-chrome-222-dark: #9E9E9E;


    --color-neutral-chrome-dark: #1F1F1F;
    --color-primary-font-chrome-dark: #E3E3E3;
    --color-secondary-font-chrome-dark: #ACBCB1;


    --color-neutral-telegram-dark: #212121;
    --color-primary-font-telegram-dark: #FFFFFF;

    --color-neutral-linkedin-dark: #1B1F23;
    --color-primary-font-linkedin-dark: #E9E9E9;
    --color-background-linkedin-dark: #000000;

    --color-neutral-x-dark: #000000;
    --color-primary-font-x-dark: #E7E9EA;
    --color-background-x-dark: #000000;

    --color-neutral-figma-dark: #2C2C2C;
    --color-primary-font-figma-dark: #FFFFFF;
    --color-background-figma-dark: #1E1E1E;


    /* ESCALA DEL COLOR PRINCIPAL */
    --color-primary-100: #fff5f3;
    --color-primary-125: #ffece7;
    --color-primary-150: #ffe2db;
    --color-primary-175: #ffd9cf;
    --color-primary-200: #ffcfc3;
    --color-primary-225: #ffc6b7;
    --color-primary-250: #ffbcab;
    --color-primary-275: #ffb39f;
    --color-primary-300: #ffa993;
    --color-primary-325: #ffa087;
    --color-primary-350: #ff967b;
    --color-primary-375: #ff8d6f;
    --color-primary-400: #ff8364;
    --color-primary-425: #ff7a58;
    --color-primary-450: #ff704c;
    --color-primary-475: #ff6842;
    --color-primary-500: #ff6740; /* COLOR BASE ORIGINAL */
    --color-primary-525: #ef613c;
    --color-primary-550: #df5a38;
    --color-primary-575: #cf5434;
    --color-primary-600: #bf4d30;
    --color-primary-625: #af472c;
    --color-primary-650: #9f4028;
    --color-primary-675: #8f3a24;
    --color-primary-700: #7f3320;
    --color-primary-725: #6f2d1c;
    --color-primary-750: #5f2618;
    --color-primary-775: #4f2014;
    --color-primary-800: #401a10;
    --color-primary-825: #30130c;
    --color-primary-850: #200d08;
    --color-primary-875: #100604;
    --color-primary-900: #000000;
}


#header-root{
    position: relative;
    min-height: 100vh;
    width: 100%;
}

#que-es-eletter-root{
    position: relative;
    width: 100%;
}

#nuestra-propuesta-root{
    margin-bottom: 5rem;
    margin-top: 5rem;
    position: relative;
    width: 100%;
}

#sobre-nosotros-root{
    width: 100%;
}

.texto-subrayado {
    position: relative;
    text-decoration: none;
}

.texto-subrayado::after {
    background-color: #ff6740;
    border-radius: 2px;
    bottom: 5px; /* Ajusta este valor para separar más o menos la línea */
    content: ""; /* Crea un elemento vacío necesario para dibujar la línea */
    height: 1px; /* Grosor de la línea */
    left: 0; /* Comienza pegado al borde izquierdo del padre */
    position: absolute; /* Se posiciona libremente dentro del contenedor relativo */
    width: 100%; /* Ocupa todo el ancho disponible del texto */
    /* Lógica de animación */
    transform: scaleX(0); /* Achica la línea a 0% de ancho en el eje horizontal, ocultándola */
    transform-origin: center; /* Fuerza a que el origen del escalado sea el medio de la línea */
    transition: transform 1s ease-out 500ms;
}

/* Clase dinámica que agregaremos con JavaScript */
.texto-subrayado.visible::after {
    transform: scaleX(1); /* Al aplicarse, la línea vuelve a su 100% de tamaño normal */
}