/* ===== PALETA DE COLORES OFICIAL TRANSCAL ===== */
:root {
    --transcal-dark-blue: #001A44;
    --transcal-orange: #E95A0A;
    --transcal-medium-blue: #0A295C;
    --transcal-light-blue: #7EABF2;
    --transcal-black: #000000;
    --transcal-white: #FFFFFF;
    --transcal-light-gray: #F4F3F3;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* ===== ESTILOS DE BOTONES OFICIALES ===== */
.titulos{
  color: #ffffff;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 50px ;
}

.titulo-nosotros-desktop{
margin-top: 20%;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 50px;
line-height: 55px;
/* identical to box height, or 110% */
text-align: center;

color: #FFFFFF;


}

.textoHome-nosotros-desktop{
/* Más de 40 años conectando empresas a través de las fronteras. */

font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 29px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;

color: #FFFFFF;


}


.textoHome-nosotros-mobile{
  /* Más de 40 años conectando empresas a través de las fronteras. */
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;


}

.titulos-nosotros-mobile{
/* Sobre Nosotros */
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
font-size: 38px;
line-height: 55px;
/* identical to box height, or 138% */
text-align: center;
color: #FFFFFF;
margin-top: 11rem !important;
}


.textoHome{
    font-family: "Montserrat", sans-serif;
    font-size: 24px ;
}



.boton-titulos-mobile{
    color: #ffffff;
  text-align: center !important;
  font-family: "Montserrat", sans-serif;
  font-size: 30px ;
}

.titulos-mobile{
  color: #ffffff;
  text-align: left !important;
  font-family: "Montserrat", sans-serif;
  font-size: 30px ;
  margin-left: 7%;
}

.titulos-mobile-nosotros{
  color: #ffffff;
  text-align: center !important;
  font-family: "Montserrat", sans-serif;
  font-size: 30px ;
  margin-top: 20px;
}

.textoHome-mobile{
  color: #ffffff;
  text-align: left !important;
  font-family: "Montserrat", sans-serif;
  font-size: 18px ;
  margin-left: 7%;
}

.btn-transcal {
    background-color: var(--transcal-orange);
    color: var(--transcal-white);
    border: none;
    border-radius: 25px;
    padding: 12px;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
    width: 265px;

    /* Frame 3 */

    /* Auto layout */   
   
   
   

}

.btn-transcal:hover {
    background-color: #f56a1a;
    color: var(--transcal-white);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(233, 90, 10, 0.3);
}

.btn-transcal:disabled {
    background-color: var(--transcal-light-gray);
    color: #CCCCCC;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-transcal-dark {
    background-color: var(--transcal-orange);
    color: var(--transcal-white);
}

.btn-transcal-dark:hover {
    background-color: #f56a1a;
    color: var(--transcal-white);
}

.btn-transcal-dark:disabled {
    background-color: var(--transcal-white);
    color: #CCCCCC;
}

/* ===== ESTILOS DE TEXTO OFICIALES ===== */
.texto-transcal-naranja {
    color: var(--transcal-orange);
}

.texto-transcal-azul-oscuro {
    color: var(--transcal-dark-blue);
}

.texto-transcal-azul-medio {
    color: var(--transcal-medium-blue);
}

.texto-transcal-azul-claro {
    color: var(--transcal-light-blue);
}

.texto-transcal-negro {
    color: var(--transcal-black);
}

.texto-transcal-blanco {
    color: var(--transcal-white);
}

.texto-transcal-gris-claro {
    color: var(--transcal-light-gray);
}

/* ===== ESTILOS DE FONDOS OFICIALES ===== */
.bg-transparnt{
    background-color: transparent;
}

.bg-transcal-naranja {
    background-color: var(--transcal-orange);
}

.bg-transcal-azul-oscuro {
    background-color: var(--transcal-dark-blue);
}

.bg-transcal-azul-medio {
    background-color: var(--transcal-medium-blue);
}

.bg-transcal-azul-claro {
    background-color: var(--transcal-light-blue);
}

.bg-transcal-negro {
    background-color: var(--transcal-black);
}

.bg-transcal-blanco {
    background-color: var(--transcal-white);
}

.bg-transcal-gris-claro {
    background-color: var(--transcal-light-gray);
}

/* ===== ESTILOS DE BORDES OFICIALES ===== */
.border-transcal-naranja {
    border-color: var(--transcal-orange);
}

.border-transcal-azul-oscuro {
    border-color: var(--transcal-dark-blue);
}

.border-transcal-azul-medio {
    border-color: var(--transcal-medium-blue);
}

.border-transcal-azul-claro {
    border-color: var(--transcal-light-blue);
}

/* ===== ESTILOS DE SEPARADORES OFICIALES ===== */
.separador-transcal {
    width: 60px;
    height: 2px;
    background-color: var(--transcal-orange);
    margin: 1rem 0;
}

.separador-transcal-grande {
    width: 80px;
    height: 3px;
    background-color: var(--transcal-orange);
    margin: 1.5rem 0;
}

/* ===== ESTILOS DE CHECKMARKS OFICIALES ===== */
.checkmark-transcal {
    color: var(--transcal-orange);
    font-size: 1.2rem;
    font-weight: bold;
    margin-right: 1rem;
    min-width: 20px;
}

/* ===== ESTILOS DE TARJETAS OFICIALES ===== */
.tarjeta-transcal {
    background-color: var(--transcal-white);
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.tarjeta-transcal:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

/* ===== ESTILOS DE FORMULARIOS OFICIALES ===== */
.form-control-transcal:focus {
    border-color: var(--transcal-orange);
    box-shadow: 0 0 0 0.2rem rgba(233, 90, 10, 0.25);
}

/* ===== ESTILOS DE ENLACES OFICIALES ===== */
.link-transcal {
    color: var(--transcal-orange);
    text-decoration: none;
    transition: color 0.3s ease;
}

.link-transcal:hover {
    color: #f56a1a;
    text-decoration: underline;
}