/* ===== /nosotros — hero de foto a todo lo ancho, texto en el espacio
   libre (oscuro) de la izquierda de la foto. Mismo criterio que /camiones,
   /proveedores: .tc-p-hero-band deja que el navbar flote transparente
   encima y que la foto llegue hasta arriba de la pantalla; el texto SIEMPRE
   en blanco (no usa las variables de tema claro/oscuro de navbar-footer.css)
   porque vive sobre una foto oscura fija, no sobre el fondo de la página. */
.tc-about-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    padding: 140px 0 60px;
    background-image: url('/img/page/aboutUs/nosotros-hero-desktop.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.tc-about-hero-copy { max-width: 480px; color: #fff; }
/* PC: el texto un poco más hacia adentro (a la derecha), sin salirse de la
   parte oscura de la foto. */
@media (min-width: 992px) {
    .tc-about-hero-copy { margin-left: 56px; }
}

.tc-about-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--tc-p-orange, #ff5c00);
    margin-bottom: 10px;
}
.tc-about-title {
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -.02em;
    margin-bottom: 18px;
    color: #fff;
}
.tc-about-title span { color: var(--tc-p-orange, #ff5c00); }

.tc-about-lead {
    font-size: 17px;
    font-weight: 700;
    font-style: italic;
    color: #fff;
    margin-bottom: 18px;
    line-height: 1.5;
}

.tc-about-copy {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .78);
    margin-bottom: 16px;
}

.tc-about-closing {
    font-size: 17px;
    font-weight: 800;
    color: var(--tc-p-orange, #ff5c00);
    margin-top: 24px;
    line-height: 1.4;
}

/* Tablet: foto más cuadrada (1448x1086), el bloque de texto se angosta un
   poco para seguir cayendo dentro de la franja oscura de la imagen. */
@media (max-width: 991.98px) {
    .tc-about-hero {
        background-image: url('/img/page/aboutUs/nosotros-hero-tablet.jpg');
        height: 100vh;
        padding: 120px 0 50px;
    }
    .tc-about-hero-copy { max-width: 420px; }
}

/* Móvil: sin foto de fondo — el bloque toma el color de fondo del tema
   (var(--tc-p-bg); esta página no vive dentro de .tc-p-page, así que hay
   que ponerlo explícito o queda el blanco de <body> también en modo
   oscuro) y la foto va DEBAJO del texto (.tc-about-mobile-photo, solo en
   celular), a todo el ancho y pegada al footer. El texto deja de ser
   blanco fijo y sigue al tema. */
.tc-about-mobile-photo { display: none; }
@media (max-width: 767.98px) {
    .tc-about-hero {
        background-image: none;
        background-color: var(--tc-p-bg, #07070c);
        height: auto;
        flex-direction: column;
        align-items: stretch;
        padding: 110px 0 0;
    }
    /* Aire extra bajo el navbar: el padding-top del bloque lo pisa la
       regla genérica de navbar-footer.css (.tc-whatsapp-fab + *), así
       que va en el texto. */
    .tc-about-hero-copy { max-width: none; padding-top: 40px; }
    .tc-about-mobile-photo {
        display: block;
        width: 100%;
        height: auto;
        margin-top: 24px;
    }
    :root[data-theme="light"] .tc-about-title,
    :root[data-theme="light"] .tc-about-lead { color: #16161c; }
    :root[data-theme="light"] .tc-about-copy { color: #5a5a6a; }
}

/* Celular en modo claro: el bloque ya no tiene foto (fondo claro de la
   página), así que el navbar usa desde el inicio la tarjeta clara — la misma
   que en /medida o el carrito (navbar-footer.css) — en vez del vidrio pensado
   para ir sobre la foto oscura. En PC sigue sobre la foto, sin cambios. */
@media (max-width: 767.98px) {
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-navbar-row { background: var(--tc-p-surface); border-color: var(--tc-p-border); box-shadow: 0 10px 30px rgba(0,0,0,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-navbar-logo { filter: none; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-nav-link.nav-link { color: rgba(20,20,26,.7) !important; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-navbar-search-field { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.1); }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-navbar-search-input { color: #16161c !important; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-rd3-navbar-search-fake-placeholder { color: rgba(20,20,26,.5); }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-nav-icon-btn { background: rgba(0,0,0,.05); color: #16161c; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-nav-track-btn { background: rgba(0,0,0,.05); color: #16161c; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-nav-user-btn { background: rgba(0,0,0,.05); color: #16161c; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-toggler { color: #16161c; }
    :root[data-theme="light"] body:has(.tc-about-hero) .tc-p-navbar .tc-p-burger span { background: #16161c; }
}