/* Sitio público de Tacotrans (Bootstrap 5 + estilos propios). */

:root {
    --tt-marino: #00283a;
    --tt-marino-oscuro: #001925;
    --tt-verde: #36d900;
    --tt-naranja: #ff8000;
    --tt-gris: #f3f5f7;
    --bs-link-color-rgb: 0, 40, 58;
    --bs-link-hover-color-rgb: 255, 128, 0;
}

body {
    background-color: #fff;
    color: #222;
}

/* Barra de navegación */
.tt-navbar {
    background-color: var(--tt-marino);
}

.tt-logo {
    max-height: 56px;
    width: auto;
}

.tt-navbar .nav-link {
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    font-size: .9rem;
}

.tt-navbar .nav-link.active,
.tt-navbar .nav-link:hover {
    color: var(--tt-verde);
}

.tt-navbar .tt-acceso {
    border: 1px solid var(--tt-verde);
    border-radius: .375rem;
    margin-left: .5rem;
}

/* Carrusel de la portada */
.tt-carrusel .carousel-item {
    height: clamp(260px, 60vh, 560px);
}

.tt-carrusel .carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
    filter: brightness(.65);
}

.tt-carrusel .carousel-caption {
    bottom: 18%;
}

.tt-carrusel .carousel-caption h2 {
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}

/* Secciones */
.tt-titulo-seccion {
    color: var(--tt-marino);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 2rem;
}

.tt-titulo-seccion::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin: .75rem auto 0;
    background-color: var(--tt-verde);
    border-radius: 2px;
}

.tt-seccion-gris {
    background-color: var(--tt-gris);
}

.tt-icono {
    font-size: 2.5rem;
    color: var(--tt-naranja);
}

.tt-tarjeta {
    border: 0;
    box-shadow: 0 2px 10px rgba(0, 40, 58, .08);
    transition: transform .2s ease, box-shadow .2s ease;
}

.tt-tarjeta:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 40, 58, .15);
}

/* Acceso de clientes */
.tt-acceso-fondo {
    min-height: calc(100vh - 200px);
    background: linear-gradient(rgba(0, 25, 37, .55), rgba(0, 25, 37, .55)), url("../../img/third.jpg") center 30% / cover no-repeat;
}

.tt-acceso-tarjeta {
    max-width: 420px;
    background-color: rgba(255, 255, 255, .95);
}

/* Textos legales */
.tt-legal p {
    text-align: justify;
    line-height: 1.7;
}

/* Pie */
.tt-pie {
    background-color: var(--tt-marino-oscuro);
    color: #cfd8dc;
    font-size: .95rem;
}

.tt-pie a {
    color: #fff;
}

.tt-pie a:hover {
    color: var(--tt-verde);
}

.btn-tt {
    --bs-btn-bg: var(--tt-marino);
    --bs-btn-border-color: var(--tt-marino);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: var(--tt-naranja);
    --bs-btn-hover-border-color: var(--tt-naranja);
    --bs-btn-hover-color: #fff;
}