/* =========================================================
       TECOMSER
       CABECERA GLOBAL
       ========================================================= */

    .tc-cabecera {
        --tc-cabecera-azul: #071457;
        --tc-cabecera-naranja: #ff4b0b;
        --tc-cabecera-naranja-hover: #ff632e;
        --tc-cabecera-texto: #0f172a;
        --tc-cabecera-secundario: #64748b;
        --tc-cabecera-borde: #d7e0ec;

        width: 100%;

        position: relative;
        z-index: 3200;

        background: #ffffff;

        /* La franja azul de arriba la dibuja ahora la barra superior,
           que es del mismo color y va justo encima. Estando en un solo
           elemento, el bloque naranja de Empleos la cubre sin tener que
           sobresalir del encabezado. */
        border-bottom: 1px solid #e8edf4;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
    }

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

    .tc-cabecera a,
    .tc-cabecera a:hover,
    .tc-cabecera a:focus,
    .tc-cabecera a:active,
    .tc-cabecera a:visited {
        text-decoration: none;
    }


    /* =========================================================
       CABECERA PRINCIPAL
       ========================================================= */

    .tc-cabecera-principal {
        width: 100%;
        /* 72 y no 86: la barra de busqueda mide 48 y el logo 48, asi que 86
           era aire por arriba y por abajo. Cada pixel de cabecera es un pixel
           menos de producto en la primera pantalla, que es la que decide si
           alguien sigue bajando. */
        min-height: 72px;

        display: flex;
        align-items: center;

        background: #ffffff;
    }

    /* En pantalla grande manda el botón que va dentro del buscador. */
    .tc-cabecera-menu { display: none; }

    .tc-cabecera-contenedor {
        width: 100%;
        max-width: none;

        margin: 0;
        padding:
            8px
            clamp(18px, 1.45vw, 34px);

        display: grid;
        grid-template-columns:
            auto
            minmax(520px, 1fr)
            auto;
        align-items: center;

        /* Poco hueco: lo que separa el logo del botón de categorías es
           este espacio, y con 14 el botón se quedaba descolgado. */
        column-gap: 10px;
    }


    /* =========================================================
       LOGO REAL TECOMSER
       Archivo público:
       /estaticos/imagenes/logos/tecomser-logo.png
       ========================================================= */

    .tc-cabecera-logo {
        min-width: 0;
        display: inline-flex;
        align-items: center;
        text-decoration: none;
        transition: opacity 0.18s ease;
    }

    .tc-cabecera-logo:hover {
        opacity: 0.90;
    }

    .tc-cabecera-logo-imagen {
        display: block;
        /* El logo baja con la barra: a 56 de alto era el elemento mas alto de
           la fila y marcaba el minimo por su cuenta. Se mantiene la
           proporcion. */
        width: 168px;
        max-width: 100%;
        height: 48px;
        object-fit: contain;
        object-position: left center;
    }


    /* =========================================================
       BUSCADOR
       ========================================================= */

    .tc-cabecera-buscador {
        min-width: 0;
        width: 100%;
    }

    /* Botón Categorías más pegado al logo y buscador con prioridad de ancho */
    .tc-cabecera-buscador [data-tc-megamenu-open] {
        margin-left: 0 !important;
    }

    .tc-cabecera-buscador form,
    .tc-cabecera-buscador [role="search"] {
        min-width: 0;
        width: 100%;
    }


    /* =========================================================
       ACCIONES
       ========================================================= */

    .tc-cabecera-acciones {
        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 10px;

        white-space: nowrap;
    }

    /* LAS ACCIONES, SIN CAJA
       ---------------------------------------------------------
       Cada acceso iba dentro de su propia tarjeta: borde, fondo
       blanco y sombra. Cinco tarjetas seguidas en una barra que
       ya es blanca no ordenan nada; solo meten cinco bordes que
       compiten con el buscador.

       Se quitan. Lo que separa un acceso del siguiente es una
       raya fina —como en las tiendas grandes—, que ocupa un
       píxel en vez de doce y se lee igual de bien. */

    .tc-cabecera-accion {
        position: relative;

        height: 52px;

        padding: 0 12px;

        display: inline-flex;
        align-items: center;
        gap: 9px;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: var(--tc-cabecera-texto);

        transition:
            background-color 0.18s ease;
    }

    .tc-cabecera-accion:hover {
        background: #f1f5f9;
    }

    /* La raya entre accesos. Va como pseudo-elemento y no como
       borde para que no cuente en el alto de la fila ni empuje
       nada al aparecer. */
    .tc-cabecera-accion + .tc-cabecera-accion::before {
        content: "";

        position: absolute;
        left: -5px;
        top: 50%;

        width: 1px;
        height: 26px;

        transform: translateY(-50%);

        background: #dbe3ec;
    }

    /* Entre el corazón y el carrito no: son dos iconos sueltos
       del mismo grupo y una raya en medio los separaría como si
       fueran cosas distintas. */
    .tc-cabecera-accion--icono
    + .tc-cabecera-accion--icono::before {
        display: none;
    }

    .tc-cabecera-accion:focus-visible {
        outline:
            3px solid rgba(7, 20, 87, 0.10);

        outline-offset: 2px;
    }

    /* Sin el cuadrado gris de fondo: el icono se sostiene solo,
       y el cuadrado era otra caja más dentro de la caja. La foto
       del cliente sí conserva su círculo, porque ahí el recorte
       es la forma. */
    .tc-cabecera-accion-icono {
        width: 38px;
        height: 38px;

        flex: 0 0 38px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background: transparent;
        color: #27364d;
    }

    .tc-cabecera-accion-icono svg {
        width: 27px;
        height: 27px;
    }

    .tc-cabecera-accion-texto {
        min-width: 0;

        display: block;
    }

    .tc-cabecera-accion-titulo {
        display: block;

        max-width: 116px;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #0f172a;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.15;
    }

    .tc-cabecera-accion-subtitulo {
        display: block;

        margin-top: 2px;

        color: #64748b;

        /* El segundo renglón es el que de verdad se lee —"Inicia sesión",
           "Pedidos"— y estaba tres puntos por debajo del primero. A 13 se
           leen los dos sin tener que acercarse. */
        font-size: 13px;
        font-weight: 600;
        line-height: 1.1;
    }


    /* =========================================================
       ACCIONES SOLO ICONO
       ========================================================= */

    .tc-cabecera-accion--icono {
        width: 50px;
        min-width: 50px;

        padding: 0;

        position: relative;

        justify-content: center;
    }

    .tc-cabecera-accion--icono
    .tc-cabecera-accion-icono {
        background: transparent;
    }

    .tc-cabecera-badge {
        min-width: 21px;
        height: 21px;

        padding: 0 5px;

        position: absolute;
        top: -7px;
        right: -4px;

        display: none;
        align-items: center;
        justify-content: center;

        border:
            2px solid #ffffff;

        border-radius: 999px;

        background: #e11d48;
        color: #ffffff;

        font-size: 10px;
        font-weight: 850;
        line-height: 1;

        box-shadow:
            0 2px 6px rgba(225, 29, 72, 0.26);
    }

    .tc-cabecera-badge.is-visible {
        display: inline-flex;
    }

    /* La campana se mueve un instante cuando llega un aviso nuevo con la
       página abierta (avisos_cliente.html). Sin movimiento si el sistema
       pide reducirlo: ahí basta el número. */
    .tc-cabecera-campana.is-sonando .tc-cabecera-accion-icono svg {
        animation: tc-campana-mueve .9s ease-in-out;
        transform-origin: 50% 8%;
    }

    @keyframes tc-campana-mueve {
        0%, 100% { transform: rotate(0); }
        15% { transform: rotate(16deg); }
        30% { transform: rotate(-13deg); }
        45% { transform: rotate(9deg); }
        60% { transform: rotate(-6deg); }
        75% { transform: rotate(3deg); }
    }

    @media (prefers-reduced-motion: reduce) {
        .tc-cabecera-campana.is-sonando .tc-cabecera-accion-icono svg { animation: none; }
    }


    /* La foto del cliente ocupa todo el recuadro de la inicial. */
    .tc-cabecera-inicial img {
        width: 100%;
        height: 100%;

        object-fit: cover;
    }


    /* Nivel del cliente: cada uno con su color. */
    .tc-cabecera-nivel {
        display: inline-flex;
        align-items: center;

        padding: 2px 7px;

        border-radius: 999px;

        font-size: 10px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: .04em;
    }

    .tc-cabecera-nivel--BRONCE {
        background: #f4e5d3;
        color: #8a5a24;
    }

    .tc-cabecera-nivel--PLATA {
        background: #e7ebf0;
        color: #4a5563;
    }

    .tc-cabecera-nivel--ORO {
        background: #fbeec2;
        color: #8a6a10;
    }


    /* Inicial del cliente cuando hay sesion abierta. */
    .tc-cabecera-inicial {
        width: 34px;
        height: 34px;

        display: grid;
        place-items: center;

        overflow: hidden;

        /* Redonda. Cuando cada acceso iba dentro de su propia
           tarjeta cuadrada, el cuadrado de esquinas suaves
           acompañaba; ahora que no hay ninguna caja, era el
           único ángulo de la fila y se notaba. */
        border-radius: 50%;

        background: #071457;
        color: #ffffff;

        font-size: 14px;
        font-weight: 700;
        line-height: 1;

        text-transform: uppercase;
    }


    /* =========================================================
       UBICACION EN MOVIL

       En el telefono la barra azul de arriba ya no muestra la
       ubicacion (ahi van "Arma tu PC" y "Arma tu Kit Camaras").
       El selector baja aqui, justo encima de la franja de
       categorias, que es donde el cliente lo busca antes de
       ponerse a mirar productos.
       ========================================================= */

    .tc-cabecera-ubicacion {
        display: none;

        width: 100%;
        min-height: 42px;

        margin: 0;
        padding: 0 14px;

        align-items: center;
        gap: 8px;

        border: 0;
        border-top: 1px solid #eef2f7;

        background: #f7f9fc;
        color: var(--tc-cabecera-texto);

        font: inherit;
        text-align: left;

        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .tc-cabecera-ubicacion:active {
        background: #eef2f8;
    }

    .tc-cabecera-ubicacion-pin {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        color: var(--tc-cabecera-naranja);
    }

    .tc-cabecera-ubicacion-rotulo {
        flex: 0 0 auto;

        font-size: 12.5px;
        font-weight: 600;
        line-height: 1;

        color: var(--tc-cabecera-secundario);
    }

    .tc-cabecera-ubicacion-ciudad {
        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 12.5px;
        font-weight: 800;
        line-height: 1;

        color: var(--tc-cabecera-azul);
    }

    .tc-cabecera-ubicacion-flecha {
        width: 15px;
        height: 15px;

        flex: 0 0 15px;
        margin-left: auto;

        color: var(--tc-cabecera-secundario);
    }


    /* =========================================================
       MEGAMENU
       ========================================================= */

    .tc-cabecera-megamenu {
        width: 100%;

        position: relative;
        z-index: 3100;
    }


    /* =========================================================
       PANTALLAS GRANDES / ULTRAWIDE
       La cabecera utiliza todo el ancho del navegador.
       ========================================================= */

    @media (min-width: 1600px) {

        .tc-cabecera-contenedor {
            width: 100%;
            max-width: none;

            grid-template-columns:
                205px
                minmax(560px, 1fr)
                auto;

            padding:
                10px
                clamp(24px, 1.8vw, 42px);

            column-gap: 12px;
        }

        .tc-cabecera-logo-imagen {
            width: 196px;
            height: 58px;
        }

        .tc-cabecera-acciones {
            gap: 8px;
        }
    }


    /* =========================================================
       FORZAR BARRA SUPERIOR A TODO EL ANCHO
       barra_superior.html tiene su propio max-width.
       Este override evita márgenes grandes en monitores amplios.
       ========================================================= */

    .tc-barra-superior .tc-barra-contenedor {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: clamp(24px, 2vw, 42px) !important;
        padding-right: clamp(24px, 2vw, 42px) !important;
    }


    /* =========================================================
       TABLET GRANDE
       ========================================================= */

    @media (max-width: 1320px) {

        .tc-cabecera-contenedor {
            width: 100%;
            max-width: none;

            grid-template-columns:
                170px
                minmax(380px, 1fr)
                auto;

            padding:
                10px 16px;

            gap: 8px;
        }

        .tc-cabecera-logo-imagen {
            width: 164px;
            height: 50px;
        }

.tc-cabecera-accion {
            padding: 0 10px;
        }

        .tc-cabecera-accion-titulo {
            max-width: 84px;
            font-size: 12px;
        }
    }


    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1120px) {

        .tc-cabecera-contenedor {
            width: 100%;
            max-width: none;

            grid-template-columns:
                140px
                minmax(320px, 1fr)
                auto;

            gap: 8px;
        }

        .tc-cabecera-accion {
            width: 52px;
            min-width: 52px;

            padding: 0;

            justify-content: center;
        }

        .tc-cabecera-accion-texto {
            display: none;
        }

        .tc-cabecera-accion-icono {
            background: transparent;
        }

        /* Sin rayas cuando todo son iconos: separan grupos de
           cosas distintas, y aquí ya no hay grupos —son cuatro
           iconos seguidos y se leen como una fila. */
        .tc-cabecera-accion + .tc-cabecera-accion::before {
            display: none;
        }
    }


    /* =========================================================
       MÓVIL
       ========================================================= */

    @media (max-width: 820px) {



        .tc-cabecera-principal {
            min-height: 0;
        }

        .tc-cabecera-contenedor {
            width: 100%;
            max-width: none;

            padding: 10px 14px 12px;

            /* Tres columnas arriba: menú · logo · accesos. */
            grid-template-columns:
                auto
                minmax(0, 1fr)
                auto;

            gap:
                10px 8px;
        }

        .tc-cabecera-menu {
            display: grid;
            place-items: center;

            grid-column: 1;
            grid-row: 1;

            width: 44px;
            height: 44px;
            padding: 0;

            border: 0;
            border-radius: 10px;
            background: transparent;
            color: #0f172a;
            cursor: pointer;
        }

        .tc-cabecera-menu svg {
            width: 26px;
            height: 26px;
            fill: none;
        }

        .tc-cabecera-menu:active { background: rgba(15, 23, 42, .06); }

        .tc-cabecera-logo {
            grid-column: 2;
            grid-row: 1;
        }

        .tc-cabecera-logo-imagen {
            width: 182px;
            height: 55px;
        }

.tc-cabecera-acciones {
            grid-column: 3;
            grid-row: 1;

            gap: 6px;
        }

        /* Se dejaron chicos cuando cada acceso iba dentro de su
           tarjeta y cuatro tarjetas tenian que caber al lado del
           logo. Sin las cajas sobra sitio, y en el telefono es
           donde mas falta hace que el blanco del icono sea grande:
           se tocan con el dedo, no con un raton. */
        .tc-cabecera-accion {
            width: 48px;
            min-width: 48px;
            height: 48px;

            border-radius: 10px;
        }

        .tc-cabecera-accion-icono {
            width: 40px;
            height: 40px;

            flex-basis: 40px;
        }

        .tc-cabecera-accion-icono svg {
            width: 25px;
            height: 25px;
        }

        .tc-cabecera-buscador {
            grid-column:
                1 / -1;
            grid-row: 2;
        }

        /* EL BUSCADOR, TODO EL ANCHO
           El menú ya está arriba, así que el botón que va dentro del buscador
           sobra. Pero esconderlo no basta: `tc-buscador-wrap` es una rejilla
           de dos columnas —botón y formulario— y al vaciar la primera la
           segunda se quedaba sin ancho de referencia y la caja se encogía
           hasta ser un círculo.

           `display:block` deshace la rejilla: dentro queda un solo elemento
           visible, el formulario, y ocupa el ancho entero. Es lo mismo que
           hacía el modo a pantalla completa que quitamos, por la misma razón. */
        .tc-cabecera-buscador [data-tc-megamenu-open] {
            display: none;
        }

        .tc-cabecera-buscador {
            width: 100%;
            min-width: 0;
        }

        .tc-cabecera-buscador .tc-buscador-wrap {
            display: block;
            width: 100%;
            gap: 0;
        }

        .tc-cabecera-buscador .tc-buscador-wrap form,
        .tc-cabecera-buscador .tc-buscador-wrap [role="search"] {
            width: 100%;
            min-width: 0;
        }

        /* SOLO USUARIO Y CARRITO
           «Mis compras» y «Favoritos» se llegan desde la propia cuenta. En
           una pantalla de teléfono, cuatro iconos dejan el logo sin sitio y
           ninguno se toca bien con el dedo. */
        .tc-cabecera-accion--compras,
        .tc-cabecera-accion--favoritos {
            display: none;
        }

        .tc-cabecera-badge {
            top: -6px;
            right: -5px;
        }

        .tc-cabecera-ubicacion {
            display: flex;
        }
    }


    @media (max-width: 500px) {

        .tc-cabecera-contenedor {
            padding:
                9px 10px 10px;
        }

        .tc-cabecera-logo-imagen {
            width: 165px;
            height: 50px;
        }

.tc-cabecera-acciones {
            gap: 4px;
        }

        .tc-cabecera-accion {
            width: 44px;
            min-width: 44px;
            height: 44px;
        }

        .tc-cabecera-accion-icono {
            width: 36px;
            height: 36px;

            flex-basis: 36px;
        }

        .tc-cabecera-accion-icono svg {
            width: 23px;
            height: 23px;
        }

        .tc-cabecera-ubicacion {
            padding: 0 10px;
        }

        .tc-cabecera-ubicacion-rotulo,
        .tc-cabecera-ubicacion-ciudad {
            font-size: 12px;
        }
    }


    /* En pantallas muy angostas el rotulo y la ciudad no caben en
       una linea: la ciudad pasa debajo. */
    @media (max-width: 370px) {

        .tc-cabecera-ubicacion {
            min-height: 46px;
            flex-wrap: wrap;
            align-content: center;
            row-gap: 2px;
        }

        .tc-cabecera-ubicacion-ciudad {
            flex: 1 0 100%;
            padding-left: 25px;
        }

        .tc-cabecera-ubicacion-flecha {
            order: 3;
        }
    }

    /* =========================================================
       EL DESPLEGABLE DE LA CUENTA

       Se abre al pasar el raton en el monitor y al tocar en el
       telefono. Las dos formas conviven sin pelearse porque lo
       que manda es la clase `is-open`: el raton la pone y la
       quita, el dedo la alterna.
       ========================================================= */

    .tc-cuenta {
        position: relative;
        flex: 0 0 auto;
    }

    /* El boton se dibuja igual que los demas accesos: es uno mas
       de la fila, no un boton de formulario. */
    .tc-cuenta-boton {
        border: 0;
        background: transparent;
        font: inherit;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .tc-cuenta-flecha {
        width: 15px;
        height: 15px;

        flex: 0 0 15px;

        margin-left: -2px;

        color: #64748b;

        transition: transform 0.18s ease;
    }

    .tc-cuenta.is-open .tc-cuenta-flecha {
        transform: rotate(180deg);
    }

    .tc-cuenta.is-open .tc-cuenta-boton {
        background: #f1f5f9;
    }

    .tc-cuenta-panel {
        position: absolute;
        top: calc(100% + 9px);
        right: 0;

        /* POR ENCIMA DE TODO LO QUE CUELGA DEL ENCABEZADO
           -----------------------------------------------------
           El megamenu y su velo se dibujan dentro del encabezado
           y van a 5000. Con un 40 aqui, el panel de la cuenta se
           quedaba por debajo: al abrirlo con el megamenu abierto,
           la tira de categorias le pasaba por encima y le comia
           las dos primeras filas.

           Los dos paneles no deben verse a la vez de todos modos
           —abrir uno cierra el otro, mas abajo— pero el orden de
           apilamiento tiene que ser correcto igual: durante la
           transicion los dos existen. */
        z-index: 5200;

        min-width: 218px;

        padding: 7px;

        border: 1px solid #e2e8f0;
        border-radius: 12px;

        background: #ffffff;

        box-shadow:
            0 14px 38px rgba(8, 13, 30, 0.16);
    }

    .tc-cuenta-panel[hidden] {
        display: none;
    }

    /* EL PUENTE
       -----------------------------------------------------
       Entre el boton y el panel hay nueve pixeles de aire. Ese
       hueco no pertenece ni al uno ni al otro, asi que al bajar
       el raton hacia el panel el puntero salia del grupo, saltaba
       `mouseleave` y el panel se cerraba en la cara.

       Este trozo invisible tapa el hueco. Es hijo del panel, y
       `mouseleave` no salta al pasar a un hijo: el puntero nunca
       llega a salir. El aire se sigue viendo igual —no pinta
       nada— pero deja de ser tierra de nadie. */
    .tc-cuenta-panel::before {
        content: "";

        position: absolute;
        left: 0;
        right: 0;
        top: -13px;

        height: 13px;
    }

    /* El pico que apunta al boton. Va con dos capas —una del
       color del borde y otra blanca encima— porque un cuadrado
       girado no puede tener borde solo en dos lados. */
    .tc-cuenta-pico {
        position: absolute;
        top: -6px;
        right: 26px;

        width: 11px;
        height: 11px;

        transform: rotate(45deg);

        border-left: 1px solid #e2e8f0;
        border-top: 1px solid #e2e8f0;
        border-radius: 2px 0 0 0;

        background: #ffffff;
    }

    /* Quien esta dentro, para no tener que adivinarlo. */
    .tc-cuenta-quien {
        padding: 8px 11px 10px;
        margin-bottom: 5px;

        border-bottom: 1px solid #eef2f7;
    }

    .tc-cuenta-quien strong {
        display: block;

        color: #0f172a;

        font-size: 14px;
        font-weight: 700;
        line-height: 1.2;
    }

    .tc-cuenta-quien small {
        display: block;

        margin-top: 2px;

        max-width: 190px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #64748b;

        font-size: 11.5px;
    }

    .tc-cuenta-opcion,
    .tc-cuenta-opcion:visited {
        display: block;
        width: 100%;

        padding: 9px 11px;

        border: 0;
        border-radius: 8px;

        background: transparent;
        color: #0f172a;

        font-family: inherit;
        font-size: 13.5px;
        font-weight: 600;
        line-height: 1.2;
        text-align: left;

        cursor: pointer;

        transition: background-color 0.14s ease, color 0.14s ease;
    }

    .tc-cuenta-opcion:hover,
    .tc-cuenta-opcion:focus-visible {
        background: #f1f5f9;
        color: var(--tc-cabecera-azul);
    }

    .tc-cuenta-raya {
        display: block;

        height: 1px;
        margin: 5px 7px;

        background: #eef2f7;
    }

    .tc-cuenta-salir {
        margin: 5px 0 0;
        padding-top: 5px;

        border-top: 1px solid #eef2f7;
    }

    .tc-cuenta-opcion--salir {
        color: #b91c1c;
    }

    .tc-cuenta-opcion--salir:hover,
    .tc-cuenta-opcion--salir:focus-visible {
        background: #fef2f2;
        color: #991b1b;
    }

    /* En el telefono el boton se queda solo con el icono —igual
       que los demas accesos— y el panel se pega al borde derecho
       de la pantalla en vez de al del boton, que es de 48 px y
       dejaria el panel colgando fuera. */
    @media (max-width: 1120px) {
        .tc-cuenta-flecha {
            display: none;
        }
    }

    @media (max-width: 820px) {
        .tc-cuenta-panel {
            right: -6px;

            min-width: 208px;
        }
    }


    /* =========================================================
       CABECERA COMPACTA
       Solo en el teléfono y solo donde la pide la página (hoy, la
       ficha de producto: body.tc-compacta).

       Una fila y nada más: menú · logo · lupa · cuenta · carrito.
       La cabecera entera eran cuatro franjas —accesos, logo,
       buscador y ubicación— que se comían la primera pantalla: la
       foto del producto empezaba a media altura, que es justo lo
       que se viene a mirar.

       Se queda pegada arriba al bajar. Con una sola fila cabe sin
       estorbar, y el carrito y la búsqueda siguen a un dedo.
       ========================================================= */

    .tc-cabecera-lupa {
        display: none;
    }

    @media (max-width: 820px) {

        body.tc-compacta .tc-barra-superior,
        body.tc-compacta .tc-cabecera-ubicacion {
            display: none !important;
        }

        body.tc-compacta .tc-cabecera {
            position: sticky;
            top: 0;

            box-shadow: 0 1px 0 #e8edf4;
        }

        /* LO QUE SE ABRE ENCIMA TIENE QUE QUEDAR ENCIMA

           .tc-contenido lleva z-index:1 y con eso abre su propia capa.
           Todo lo que nace dentro —el cajón de filtros del catálogo (6000),
           la ventana de formas de entrega de la ficha (8000)— compite solo
           con lo de dentro, y la cabecera, que está fuera con 3200, le pasa
           por encima. Mientras la cabecera no se quedaba pegada no se veía:
           al abrir el cajón ya había bajado. Pegada arriba, tapaba la X de
           cerrar.

           Aquí la capa se quita. Su motivo era la pestaña del pie, que asoma
           sobre el borde del contenido; el pie tiene z-index:2 y sigue
           ganando igual a un contenido sin capa. */
        body.tc-compacta .tc-contenido {
            z-index: auto;
        }

        /* Las migas de las pantallas compactas. "Inicio / Catálogo" o
           "Inicio / Mi cuenta / Pedidos" eran una línea antes de lo que se
           vino a ver, y la cabecera ya lleva al inicio con el logo. */
        body.tc-compacta .tc-cat-migas,
        body.tc-compacta .tc-comparar-migas,
        body.tc-compacta .tc-fav-migas,
        body.tc-compacta .tc-ped-migas,
        body.tc-compacta .tc-rs-migas,
        body.tc-compacta .tc-sv-migas {
            display: none !important;
        }

        body.tc-compacta .tc-cabecera-contenedor {
            padding: 4px 6px;
            gap: 0 2px;
        }

        body.tc-compacta .tc-cabecera-menu {
            width: 40px;
            height: 40px;
        }

        body.tc-compacta .tc-cabecera-menu svg {
            width: 23px;
            height: 23px;
        }

        body.tc-compacta .tc-cabecera-logo-imagen {
            width: 128px;
            height: 39px;
        }

        body.tc-compacta .tc-cabecera-acciones {
            gap: 0;
        }

        body.tc-compacta .tc-cabecera-accion {
            width: 40px;
            min-width: 40px;
            height: 40px;
        }

        body.tc-compacta .tc-cabecera-accion-icono {
            width: 34px;
            height: 34px;
            flex-basis: 34px;
        }

        body.tc-compacta .tc-cabecera-accion-icono svg {
            width: 22px;
            height: 22px;
        }

        body.tc-compacta .tc-cabecera-inicial {
            width: 28px;
            height: 28px;
            font-size: 13px;
        }

        /* La lupa aparece; el buscador se esconde hasta que la tocan. */
        body.tc-compacta .tc-cabecera-lupa {
            display: inline-flex;
            align-items: center;
            justify-content: center;

            border: 0;
            background: transparent;
            color: var(--tc-cabecera-texto);
            cursor: pointer;
        }

        body.tc-compacta .tc-cabecera-lupa .tc-lupa-cerrar {
            display: none;
        }

        body.tc-compacta .tc-cabecera.is-buscando .tc-lupa-abrir {
            display: none;
        }

        body.tc-compacta .tc-cabecera.is-buscando .tc-lupa-cerrar {
            display: block;
        }

        body.tc-compacta .tc-cabecera-buscador {
            display: none;
        }

        body.tc-compacta .tc-cabecera.is-buscando .tc-cabecera-buscador {
            display: block;

            padding: 2px 0 6px;

            animation: tc-lupa-baja .16s ease-out;
        }
    }

    @keyframes tc-lupa-baja {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        body.tc-compacta .tc-cabecera.is-buscando .tc-cabecera-buscador {
            animation: none;
        }
    }


    /* =========================================================
       TECOMSER
       BARRA SUPERIOR + SELECTOR UBIGEO
       ========================================================= */

    .tc-barra-superior,
    .tc-ubicacion-modal {
        --tc-azul: var(--tc-marca-azul, #071457);
        --tc-azul-hover: #0d1f6f;

        --tc-naranja: #f97316;
        --tc-naranja-oscuro: #ea580c;
        --tc-naranja-suave: #fff3e8;

        --tc-verde: #25d366;

        --tc-texto: #111827;
        --tc-secundario: #64748b;
        --tc-borde: #dfe3e8;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
    }

    .tc-barra-superior *,
    .tc-barra-superior *::before,
    .tc-barra-superior *::after,
    .tc-ubicacion-modal *,
    .tc-ubicacion-modal *::before,
    .tc-ubicacion-modal *::after {
        box-sizing: border-box;
    }


    /* =========================================================
       BARRA SUPERIOR
       ========================================================= */

    .tc-barra-superior {
        width: 100%;

        /* 45px = los 42 de siempre mas los 3 que antes ponia el
           border-top del encabezado. Ese borde era del mismo azul, asi
           que la franja siempre se vio de 45; ahora ademas es un solo
           elemento, y por eso el bloque de Empleos la puede llenar
           entera sin sobresalir ni pelearse con el apilamiento. */
        height: 45px;

        position: relative;

        /* Por debajo del encabezado (3200), y sobre todo por debajo del
           panel del megamenu: ese panel se dibuja dentro del encabezado,
           de modo que cualquier valor por encima de 3200 aqui lo taparia
           al abrirlo. */
        z-index: 1200;

        /* El bloque de Empleos se estira a proposito mas alla del borde
           derecho. Sin recorte eso abriria scroll horizontal. */
        overflow: hidden;

        background: var(--tc-azul);
        color: #ffffff;

        /* La linea de abajo va como sombra interior y no como borde.
           Un borde se dibuja fuera del area que ocupan los hijos, asi
           que asomaba una franja azul por debajo del bloque naranja de
           Empleos. La sombra interior se pinta detras de los hijos: la
           linea sigue viendose sobre el azul y desaparece bajo el
           naranja, que es lo que se quiere. */
        box-shadow:
            inset 0 -1px 0 rgba(255, 255, 255, 0.08);
    }

    .tc-barra-contenedor {
        width: min(100%, 1540px);
        height: 100%;

        margin: 0 auto;
        padding: 0 28px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 28px;
    }


    /* =========================================================
       QUITAR SUBRAYADO
       ========================================================= */

    .tc-barra-superior a,
    .tc-barra-superior a:hover,
    .tc-barra-superior a:focus,
    .tc-barra-superior a:active,
    .tc-barra-superior a:visited {
        text-decoration: none !important;
    }


    /* =========================================================
       UBICACION
       ========================================================= */

    .tc-barra-ubicacion {
        height: 100%;
        min-width: 0;

        padding: 0;
        border: 0;

        display: inline-flex;
        align-items: center;
        gap: 8px;

        background: transparent;
        color: #ffffff;

        font: inherit;
        white-space: nowrap;

        cursor: pointer;

        transition:
            opacity 0.18s ease;
    }

    .tc-barra-ubicacion:hover {
        opacity: 0.88;
    }

    .tc-barra-ubicacion:focus-visible {
        outline:
            2px solid rgba(255, 255, 255, 0.85);

        outline-offset: 2px;
        border-radius: 4px;
    }

    .tc-barra-ubicacion-icono {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        color: #dbe4ff;
    }

    .tc-barra-ubicacion-etiqueta {
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1;

        letter-spacing: 0.025em;
        text-transform: uppercase;

        color: #dce5ff;
    }

    .tc-barra-ubicacion-ciudad {
        max-width: 300px;

        overflow: hidden;
        text-overflow: ellipsis;

        font-size: 14px;
        font-weight: 600;
        line-height: 1;

        color: #ffffff;
    }

    .tc-barra-ubicacion-flecha {
        width: 14px;
        height: 14px;

        flex: 0 0 14px;

        color: #dbe4ff;
    }


    /* =========================================================
       MENU DERECHO
       ========================================================= */

    /* En el monitor caben los cinco accesos: el aviso de arrastre no
       pinta nada y se queda fuera. Lo enciende el bloque de movil. */
    .tc-barra-flecha {
        display: none;
    }

    .tc-barra-menu {
        height: 100%;

        margin-left: auto;

        display: flex;
        align-items: center;
        justify-content: flex-end;

        gap: 24px;
    }


    /* =========================================================
       ENLACES NORMALES
       ========================================================= */

    .tc-barra-link {
        height: 100%;

        padding: 0 2px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        color: #ffffff;

        font-size: 14px;
        font-weight: 500;
        line-height: 1;

        white-space: nowrap;

        border-radius: 6px;

        transition:
            color 0.18s ease,
            background-color 0.18s ease,
            border-color 0.18s ease,
            opacity 0.18s ease;
    }

    .tc-barra-link:hover {
        color: #e7ebff;
    }


    /* =========================================================
       ENLACES ESPECIALES
       ARMA TU PC
       ARMA TU KIT CAMARAS

       Sin fondo permanente.
       Texto naranja.
       En hover: naranja más suave.
       ========================================================= */

    .tc-barra-link--naranja,
    .tc-barra-link--naranja:visited {
        height: 100% !important;
        min-height: 0;

        padding: 0 2px !important;

        flex: 0 0 auto;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        background: transparent !important;
        color: var(--tc-naranja) !important;

        border: 0 !important;
        border-radius: 0;

        font-size: 14px;
        font-weight: 600;
        line-height: 1;

        white-space: nowrap;

        text-decoration: none !important;
        box-shadow: none !important;

        transition:
            color 0.18s ease,
            opacity 0.18s ease;
    }

    .tc-barra-link--naranja:hover,
    .tc-barra-link--naranja:focus {
        height: 100% !important;

        padding: 0 2px !important;

        background: transparent !important;
        color: #ffad73 !important;

        border: 0 !important;

        text-decoration: none !important;
        box-shadow: none !important;
    }

    .tc-barra-link--naranja:active {
        background: transparent !important;
        color: #ffc299 !important;
    }


    /* =========================================================
       WHATSAPP
       ========================================================= */

    /* =========================================================
       EMPLEOS
       =========================================================
       Va anclado en la esquina: toca arriba y abajo porque ocupa
       toda la altura de la barra, y toca la derecha por el relleno
       que se prolonga mas alla del contenedor. Sin ese relleno
       quedaria una franja azul del ancho del padding, y el bloque
       se veria suelto en vez de anclado. */

    .tc-barra-link--empleos,
    .tc-barra-link--empleos:visited {
        position: relative;

        align-self: stretch;

        padding: 0 20px;

        background: var(--tc-naranja);
        color: #ffffff;

        font-weight: 700;
        letter-spacing: 0.2px;

        border-radius: 0;
    }

    .tc-barra-link--empleos::after {
        content: "";

        position: absolute;
        top: 0;
        bottom: 0;
        left: 100%;

        width: 60vw;

        background: var(--tc-naranja);
    }

    .tc-barra-link--empleos:hover,
    .tc-barra-link--empleos:focus,
    .tc-barra-link--empleos:hover::after,
    .tc-barra-link--empleos:focus::after {
        background: var(--tc-naranja-oscuro);
    }


    .tc-barra-whatsapp {
        height: 100%;

        display: inline-flex;
        align-items: center;

        gap: 7px;

        color: #ffffff;

        white-space: nowrap;

        font-size: 14px;
        font-weight: 600;

        transition:
            opacity 0.18s ease;
    }

    .tc-barra-whatsapp:hover {
        opacity: 0.88;
    }

    .tc-barra-whatsapp-icono {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        color: var(--tc-verde);
    }


    /* =========================================================
       MODAL UBICACION
       ========================================================= */

    .tc-ubicacion-modal[hidden] {
        display: none !important;
    }

    .tc-ubicacion-modal {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        z-index: 5000;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 20px;
    }

    .tc-ubicacion-fondo {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        background:
            rgba(15, 23, 42, 0.48);

        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }


    /* =========================================================
       PANEL UBICACION
       ========================================================= */

    .tc-ubicacion-panel {
        width: min(100%, 480px);
        max-height: calc(100vh - 40px);

        position: relative;
        z-index: 1;

        overflow: auto;

        background: #ffffff;
        color: var(--tc-texto);

        border-radius: 14px;

        box-shadow:
            0 24px 60px rgba(15, 23, 42, 0.22),
            0 2px 8px rgba(15, 23, 42, 0.08);
    }


    /* =========================================================
       CABECERA MODAL
       ========================================================= */

    .tc-ubicacion-cabecera {
        min-height: 68px;

        padding: 17px 20px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 16px;

        border-bottom:
            1px solid #eceef1;
    }

    .tc-ubicacion-titulo {
        margin: 0;

        color: #111827;

        font-size: 19px;
        font-weight: 650;
        line-height: 1.25;

        letter-spacing: -0.015em;
    }

    .tc-ubicacion-cerrar {
        width: 34px;
        height: 34px;

        flex: 0 0 34px;

        padding: 0;

        display: grid;
        place-items: center;

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: #4b5563;

        cursor: pointer;

        transition:
            background 0.18s ease,
            color 0.18s ease;
    }

    .tc-ubicacion-cerrar:hover {
        background: #f3f4f6;
        color: #111827;
    }

    .tc-ubicacion-cerrar svg {
        width: 19px;
        height: 19px;
    }


    /* =========================================================
       CUERPO
       ========================================================= */

    .tc-ubicacion-cuerpo {
        padding: 20px;
    }


    /* =========================================================
       GPS
       ========================================================= */

    .tc-ubicacion-gps {
        width: 100%;
        height: 45px;

        padding: 0 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 8px;

        border:
            1px solid #d8dde4;

        border-radius: 8px;

        background: #ffffff;
        color: var(--tc-azul);

        font-size: 13.5px;
        font-weight: 600;

        cursor: pointer;

        transition:
            background 0.18s ease,
            border-color 0.18s ease;
    }

    .tc-ubicacion-gps:hover {
        background: #f7f8fc;
        border-color: #aeb7d5;
    }

    .tc-ubicacion-gps:disabled {
        opacity: 0.6;
        cursor: wait;
    }

    .tc-ubicacion-gps svg {
        width: 18px;
        height: 18px;

        flex: 0 0 18px;
    }

    .tc-ubicacion-gps-info {
        display: none;

        margin: 8px 2px 0;

        color: var(--tc-secundario);

        font-size: 12px;
        line-height: 1.4;
    }

    .tc-ubicacion-gps-info.is-visible {
        display: block;
    }


    /* =========================================================
       SEPARADOR
       ========================================================= */

    .tc-ubicacion-separador {
        margin: 17px 0;

        display: flex;
        align-items: center;

        gap: 10px;

        color: #9ca3af;

        font-size: 11px;
        font-weight: 500;

        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .tc-ubicacion-separador::before,
    .tc-ubicacion-separador::after {
        content: "";

        height: 1px;

        flex: 1;

        background: #e5e7eb;
    }


    /* =========================================================
       UBIGEO CAMPOS
       ========================================================= */

    .tc-ubicacion-grid {
        display: grid;
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .tc-ubicacion-campo {
        width: 100%;
    }

    .tc-ubicacion-label {
        display: block;

        margin: 0 0 6px;

        color: #374151;

        font-size: 12.5px;
        font-weight: 600;
    }

    .tc-ubicacion-select {
        width: 100%;
        height: 44px;

        padding: 0 38px 0 12px;

        border:
            1px solid #d4d8de;

        border-radius: 8px;

        background-color: #ffffff;
        color: #111827;

        font-size: 14px;
        font-weight: 400;

        outline: none;

        cursor: pointer;

        transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }

    .tc-ubicacion-select:hover:not(:disabled) {
        border-color: #aeb4bd;
    }

    .tc-ubicacion-select:focus {
        border-color: var(--tc-azul);

        box-shadow:
            0 0 0 2px rgba(7, 20, 87, 0.08);
    }

    .tc-ubicacion-select:disabled {
        background: #f5f6f7;
        color: #9ca3af;

        cursor: not-allowed;
    }


    /* =========================================================
       RESUMEN
       ========================================================= */

    .tc-ubicacion-resumen {
        display: none;

        margin-top: 16px;
        padding: 11px 13px;

        background: #f7f8fa;

        border:
            1px solid #e5e7eb;

        border-radius: 8px;
    }

    .tc-ubicacion-resumen.is-visible {
        display: flex;

        align-items: center;
        justify-content: space-between;

        gap: 12px;
    }

    .tc-ubicacion-resumen-info {
        min-width: 0;
    }

    .tc-ubicacion-resumen strong {
        display: block;

        overflow: hidden;
        text-overflow: ellipsis;

        color: #111827;

        font-size: 13.5px;
        font-weight: 600;

        white-space: nowrap;
    }

    .tc-ubicacion-resumen span {
        display: block;

        margin-top: 2px;

        color: #8b93a1;

        font-size: 10.5px;
    }

    .tc-ubicacion-resumen-check {
        width: 28px;
        height: 28px;

        flex: 0 0 28px;

        display: grid;
        place-items: center;

        border-radius: 50%;

        background: #ecfdf3;
        color: #16a34a;
    }

    .tc-ubicacion-resumen-check svg {
        width: 15px;
        height: 15px;
    }


    /* =========================================================
       ERROR
       ========================================================= */

    .tc-ubicacion-error {
        display: none;

        margin-top: 12px;
        padding: 10px 12px;

        border-radius: 8px;

        background: #fff1f2;
        color: #b42318;

        font-size: 12px;
        line-height: 1.4;
    }

    .tc-ubicacion-error.is-visible {
        display: block;
    }


    /* =========================================================
       BOTONES MODAL
       ========================================================= */

    .tc-ubicacion-acciones {
        margin-top: 18px;

        display: grid;
        grid-template-columns: 110px 1fr;

        gap: 10px;
    }

    .tc-ubicacion-boton {
        height: 45px;

        padding: 0 15px;

        border-radius: 8px;

        font-size: 13.5px;
        font-weight: 600;

        cursor: pointer;

        transition:
            background 0.18s ease,
            border-color 0.18s ease,
            opacity 0.18s ease;
    }

    .tc-ubicacion-boton--secundario {
        border:
            1px solid #d1d5db;

        background: #ffffff;
        color: #374151;
    }

    .tc-ubicacion-boton--secundario:hover {
        background: #f7f7f8;
    }

    .tc-ubicacion-boton--principal {
        border:
            1px solid var(--tc-azul);

        background: var(--tc-azul);
        color: #ffffff;
    }

    .tc-ubicacion-boton--principal:not(:disabled):hover {
        background: var(--tc-azul-hover);
    }

    .tc-ubicacion-boton--principal:disabled {
        border-color: #d1d5db;

        background: #e5e7eb;
        color: #9ca3af;

        cursor: not-allowed;
    }

    body.tc-modal-abierto {
        overflow: hidden;
    }


    /* =========================================================
       ARMA TU KIT

       El panel va fijo a la ventana, no colgado del boton. La
       barra lleva overflow:hidden —hace falta para que el bloque
       de Empleos no abra scroll horizontal— y eso recorta a
       cualquier hijo que asome por debajo. Un panel absoluto se
       cortaria justo al salir de la barra.

       Fijo no lo recorta nadie, a cambio de que su sitio lo tenga
       que calcular el guion cada vez que se abre.
       ========================================================= */

    .tc-kits {
        position: relative;
        height: 100%;

        display: inline-flex;
        align-items: center;

        flex: 0 0 auto;
    }

    .tc-kits-boton {
        gap: 5px;

        /* Un boton no hereda la letra de la pagina por su cuenta. */
        font-family: inherit;
        -webkit-appearance: none;
        appearance: none;

        cursor: pointer;
    }

    .tc-kits-flecha {
        width: 13px;
        height: 13px;

        transition: transform 0.2s ease;
    }

    .tc-kits[data-abierto] .tc-kits-flecha {
        transform: rotate(180deg);
    }

    .tc-kits-panel {
        position: fixed;
        top: var(--tc-kits-arriba, 50px);
        right: var(--tc-kits-derecha, 16px);

        z-index: 3300;

        /* Mas ancho y en tres columnas: con dos, quince kits eran ocho
           filas y media y siempre quedaba lista por debajo del borde. Con
           tres caben cinco filas y se ven todos de una vez. */
        width: min(94vw, 760px);
        max-height: min(76vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;

        /* La barra de serie parte el panel con una franja gris; esta apenas
           se nota y aparece solo cuando hace falta. */
        scrollbar-width: thin;
        scrollbar-color: #d5dce8 transparent;

        padding: 15px 16px 16px;

        border-radius: 14px;

        background: #ffffff;

        box-shadow:
            0 24px 54px rgba(7, 20, 87, 0.24),
            0 0 0 1px rgba(7, 20, 87, 0.07);
    }

    .tc-kits-panel[hidden] {
        display: none;
    }

    .tc-kits-titulo {
        display: block;

        margin-bottom: 11px;
        padding-bottom: 10px;

        border-bottom: 1px solid #eef2f7;

        color: var(--tc-marca-azul, #071457);

        font-size: 13px;
        font-weight: 750;
        line-height: 1.3;
    }

    .tc-kits-titulo small {
        display: block;

        margin-top: 2px;

        color: #7c8a9d;

        font-size: 11.5px;
        font-weight: 500;
    }

    /* Dos columnas: quince en una sola fila vertical obligaban a
       recorrer un panel mas alto que la pantalla. */
    .tc-kits-lista {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2px 6px;
    }

    /* Con el panel estrecho no caben tres: se pasa a dos antes de que los
       nombres empiecen a partirse en tres renglones. */
    @media (max-width: 780px) {
        .tc-kits-lista {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    .tc-kits-item {
        display: flex;
        align-items: center;
        gap: 9px;

        padding: 7px 9px;

        border: 1px solid transparent;
        border-radius: 10px;

        color: #2b3445;

        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.25;

        text-decoration: none;

        transition:
            background-color 0.15s ease,
            border-color 0.15s ease,
            color 0.15s ease;
    }

    /* LA FOTO DEL KIT

       Una miniatura de verdad en vez de un dibujo de linea: se reconoce el
       kit sin leer. Sobre gris claro y con hueco alrededor porque las fotos
       del catalogo vienen recortadas contra blanco y pegadas al borde se ven
       sucias. */
    .tc-kits-foto {
        flex: 0 0 42px;

        display: grid;
        place-items: center;

        width: 42px;
        height: 42px;
        padding: 3px;

        border: 1px solid #eef1f6;
        border-radius: 9px;
        background: #f7f9fc;

        color: #9aa6b8;

        transition:
            border-color 0.15s ease,
            color 0.15s ease;
    }

    .tc-kits-foto img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .tc-kits-foto svg {
        width: 20px;
        height: 20px;
    }

    .tc-kits-item:hover .tc-kits-foto,
    .tc-kits-item:focus-visible .tc-kits-foto {
        border-color: #d8e0ec;
        color: var(--tc-marca-naranja, #ff4b0b);
    }

    .tc-kits-texto {
        display: grid;
        gap: 1px;
        min-width: 0;
    }

    /* Cuantas piezas lleva. Gris y pequeño: es un dato para comparar, no un
       reclamo. En verde competía con el nombre y los quince gritaban a la
       vez. */
    .tc-kits-texto b {
        color: #94a3b8;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: 0.02em;
    }

    /* EL BORDE, NO SOLO EL FONDO

       En una rejilla de quince, un fondo suave se confunde con el de al lado
       y no queda claro cual se va a abrir. El borde delimita la fila.

       Habia dos reglas de hover para lo mismo y ganaba esta por ir la ultima:
       la de arriba no se veia nunca. Ahora hay una sola. */
    .tc-kits-item:hover,
    .tc-kits-item:focus-visible {
        border-color: #ffd9c4;
        background: #fff7f2;
        color: #0f1b2e;
    }

    /* =========================================================
       EMPRESA

       Mismo mecanismo que el panel de kits —fijo a la ventana,
       colocado por el guion, mudado al body— y por las mismas
       razones, que estan explicadas alli arriba.

       Lo que cambia es la forma de la fila: aqui cada entrada
       lleva un nombre y una linea de explicacion, no una foto y
       un contador de piezas. Dos columnas y no tres: con el
       resumen debajo, tres columnas dejaban los nombres partidos
       en tres renglones.
       ========================================================= */

    .tc-emp {
        position: relative;
        height: 100%;

        display: inline-flex;
        align-items: center;

        flex: 0 0 auto;
    }

    .tc-emp-boton {
        gap: 5px;

        font-family: inherit;
        -webkit-appearance: none;
        appearance: none;

        cursor: pointer;
    }

    .tc-emp-flecha {
        width: 13px;
        height: 13px;

        transition: transform 0.2s ease;
    }

    .tc-emp[data-abierto] .tc-emp-flecha {
        transform: rotate(180deg);
    }

    .tc-emp-panel {
        position: fixed;
        top: var(--tc-emp-arriba, 50px);
        right: var(--tc-emp-derecha, 16px);

        z-index: 3300;

        width: min(94vw, 620px);
        max-height: min(76vh, 620px);
        overflow-y: auto;
        overscroll-behavior: contain;

        scrollbar-width: thin;
        scrollbar-color: #d5dce8 transparent;

        padding: 15px 16px 10px;

        border-radius: 14px;

        background: #ffffff;

        box-shadow:
            0 24px 54px rgba(7, 20, 87, 0.24),
            0 0 0 1px rgba(7, 20, 87, 0.07);
    }

    .tc-emp-panel[hidden] {
        display: none;
    }

    /* EL PANEL NO HEREDA NADA DE LA CABECERA
       
       El guion lo muda al <body> —tiene que hacerlo, si no el encabezado le
       pasa por encima; esta explicado en montarDesplegable—. Al colgar de
       otro padre se sale de ".tc-cabecera", y con ella se queda fuera la
       regla que quita el subrayado de TODOS los enlaces del encabezado.
       
       El resultado es que los diez nombres y sus diez resumenes salen
       subrayados, como un indice de Wikipedia. No es un fallo que de error:
       se ve y punto.
       
       Va sobre el panel entero y no sobre cada clase suya: asi un enlace que
       se agregue manana dentro del panel ya nace sin subrayado. El panel de
       los kits tropezo con lo mismo y lo resolvio enlace por enlace. */
    .tc-emp-panel a,
    .tc-emp-panel a:hover,
    .tc-emp-panel a:focus,
    .tc-emp-panel a:active,
    .tc-emp-panel a:visited {
        text-decoration: none;
    }

    .tc-emp-titulo {
        display: block;

        margin-bottom: 11px;
        padding-bottom: 10px;

        border-bottom: 1px solid #eef2f7;

        color: var(--tc-marca-azul, #071457);

        font-size: 13px;
        font-weight: 750;
        line-height: 1.3;
    }

    .tc-emp-titulo small {
        display: block;

        margin-top: 2px;

        color: #7c8a9d;

        font-size: 11.5px;
        font-weight: 500;
    }

    .tc-emp-lista {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2px 6px;
    }

    /* Con el panel estrecho, dos columnas dejan el resumen en cuatro
       renglones. Una sola columna se lee. */
    @media (max-width: 620px) {
        .tc-emp-lista {
            grid-template-columns: 1fr;
        }
    }

    .tc-emp-item {
        display: flex;
        gap: 10px;
        align-items: flex-start;

        padding: 9px 10px;

        border: 1px solid transparent;
        border-radius: 10px;

        transition:
            background 0.15s ease,
            border-color 0.15s ease;
    }

    .tc-emp-icono {
        flex: 0 0 auto;

        display: grid;
        place-items: center;

        width: 34px;
        height: 34px;

        border-radius: 9px;

        background: #f3f6fb;

        color: var(--tc-marca-azul, #071457);

        transition:
            background 0.15s ease,
            color 0.15s ease;
    }

    .tc-emp-icono svg {
        width: 18px;
        height: 18px;
    }

    .tc-emp-texto {
        min-width: 0;

        color: var(--tc-marca-azul, #071457);

        font-size: 13px;
        font-weight: 680;
        line-height: 1.3;
    }

    .tc-emp-texto small {
        display: block;

        margin-top: 2px;

        color: #7c8a9d;

        font-size: 11.5px;
        font-weight: 500;
        line-height: 1.35;
    }

    /* El mismo borde naranja que delimita la fila de los kits: en una
       rejilla, un fondo suave se confunde con el de al lado. */
    .tc-emp-item:hover,
    .tc-emp-item:focus-visible {
        border-color: #ffd9c4;
        background: #fff7f3;
    }

    .tc-emp-item:hover .tc-emp-icono,
    .tc-emp-item:focus-visible .tc-emp-icono {
        background: var(--tc-marca-naranja, #ff4b0b);
        color: #ffffff;
    }

    .tc-emp-pie {
        display: flex;
        gap: 5px;
        align-items: center;
        justify-content: center;

        margin-top: 8px;
        padding: 11px 10px;

        border-top: 1px solid #eef2f7;

        color: var(--tc-marca-naranja, #ff4b0b);

        font-size: 12.5px;
        font-weight: 700;
    }

    .tc-emp-pie svg {
        width: 14px;
        height: 14px;
    }

    .tc-emp-pie:hover {
        color: var(--tc-marca-azul, #071457);
    }

    .tc-kits-item:hover .tc-kits-texto b,
    .tc-kits-item:focus-visible .tc-kits-texto b {
        color: #ff6a00;
    }


    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1100px) {

        .tc-barra-contenedor {
            padding: 0 20px;
        }

        .tc-barra-menu {
            gap: 17px;
        }

        .tc-barra-link,
        .tc-barra-whatsapp {
            font-size: 13px;
        }

        .tc-barra-link--naranja,
        .tc-barra-link--naranja:visited,
        .tc-barra-link--naranja:hover,
        .tc-barra-link--naranja:focus {
            height: 100% !important;

            padding:
                0 2px !important;

            font-size: 13px;
        }

        .tc-barra-ubicacion-etiqueta {
            display: none;
        }
    }


    /* =========================================================
       MOVIL
       ========================================================= */

    @media (max-width: 820px) {

        .tc-barra-superior {
            /* 40 + los 2px que el encabezado ponia como borde. */
            height: 42px;
        }

        /* cabecera.html fuerza un padding ancho para los monitores
           grandes; en el telefono ese margen se come los botones. */
        .tc-barra-superior .tc-barra-contenedor {
            padding-left: 8px !important;
            padding-right: 8px !important;

            gap: 0;
        }


        /* MOVIL
           La barra azul deja de mostrar la ubicacion y el numero de
           WhatsApp: en una pantalla angosta esos dos datos se comian
           todo el ancho y ninguno se leia completo. En su lugar
           quedan los dos accesos que mas se usan, repartidos a
           mitades. La ubicacion pasa arriba de las categorias
           (ver cabecera.html) y el WhatsApp sigue en el boton
           flotante de la esquina. */

        .tc-barra-ubicacion,
        .tc-barra-whatsapp {
            display: none !important;
        }

        /* LA BARRA SE ARRASTRA DE LADO
           -------------------------------------------------------
           Antes cabian dos accesos —Catalogo y Arma tu Kit— y los
           demas se escondian: Servicio Tecnico y Empleos solo se
           alcanzaban entrando al menu de Categorias, que es un sitio
           donde nadie los va a buscar.

           Ahora estan los cinco y se llega a todos arrastrando con
           el dedo. Se prefiere a que bajen de linea porque la barra
           no crece de alto y la fila sigue leyendose como una.

           Sin barra de desplazamiento a la vista: en el telefono
           estorba mas de lo que informa, y el corte del ultimo
           acceso ya avisa de que hay mas a la derecha. */
        .tc-barra-menu {
            width: 100%;
            height: 100%;

            margin-left: 0;

            display: flex;
            align-items: stretch;
            justify-content: flex-start;

            gap: 0;

            overflow-x: auto;
            overflow-y: hidden;

            -webkit-overflow-scrolling: touch;

            /* El arrastre se frena en cada acceso, no en cualquier
               punto: asi ninguno se queda cortado por la mitad. */
            scroll-snap-type: x proximity;

            scrollbar-width: none;
        }

        .tc-barra-menu::-webkit-scrollbar {
            display: none;
        }

        /* AVISO DE QUE HAY MAS
           -------------------------------------------------------
           Una fila que se arrastra y no lo dice es una fila que
           nadie arrastra: se ve el ultimo acceso cortado y se
           entiende como un defecto, no como una invitacion.

           El aviso es un difuminado en el borde derecho con una
           flecha encima. Va sobre la barra y no dentro de la fila
           porque la fila se mueve: metido dentro, el difuminado
           se iria con ella al primer arrastre.

           Se apaga solo al llegar al final -lo hace el guion, mas
           abajo- para no seguir prometiendo algo que ya no hay. */
        .tc-barra-superior {
            position: relative;
        }

        .tc-barra-superior::after {
            content: "";

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            z-index: 2;

            width: 46px;

            pointer-events: none;

            opacity: 1;
            transition: opacity 0.22s ease;

            background:
                linear-gradient(
                    to right,
                    rgba(7, 20, 87, 0) 0%,
                    var(--tc-azul) 78%
                );
        }

        .tc-barra-flecha {
            display: block;

            position: absolute;
            top: 50%;
            right: 6px;
            z-index: 3;

            width: 18px;
            height: 18px;

            transform: translateY(-50%);

            color: rgba(255, 255, 255, 0.85);

            pointer-events: none;

            opacity: 1;
            transition: opacity 0.22s ease;

            /* Un vaiven corto y espaciado: llama lo justo para que
               se entienda y no tanto como para molestar leyendo. */
            animation: tcAsomar 2.4s ease-in-out infinite;
        }

        /* Al llegar al final, los dos avisos se van. */
        .tc-barra-superior.is-final::after,
        .tc-barra-superior.is-final .tc-barra-flecha {
            opacity: 0;
        }

        @keyframes tcAsomar {
            0%, 62%, 100% { transform: translateY(-50%) translateX(0); }
            76%           { transform: translateY(-50%) translateX(-3px); }
        }

        /* Quien pidio menos movimiento en su sistema no lo ve
           moverse: el difuminado y la flecha siguen ahi quietos, que
           es lo que de verdad informa. */
        @media (prefers-reduced-motion: reduce) {
            .tc-barra-flecha { animation: none; }
        }

        /* Todos a la vista. Antes esta regla escondia los que no
           llevaban la marca de movil. */
        .tc-barra-menu > .tc-barra-link,
        .tc-barra-menu > .tc-kits,
        .tc-barra-menu > .tc-emp {
            flex: 0 0 auto;
            width: auto;
            height: 100%;

            padding: 0 15px;

            display: flex;
            align-items: center;
            justify-content: center;

            scroll-snap-align: center;

            white-space: nowrap;
        }

        .tc-barra-menu > .tc-kits .tc-kits-boton,
        .tc-barra-menu > .tc-emp .tc-emp-boton {
            width: auto;
            justify-content: center;
        }

        /* Una linea fina entre accesos, para que se lean como cosas
           distintas y no como una frase larga. */
        .tc-barra-menu > .tc-barra-link + .tc-barra-link,
        .tc-barra-menu > .tc-barra-link + .tc-kits,
        .tc-barra-menu > .tc-kits + .tc-barra-link,
        .tc-barra-menu > .tc-barra-link + .tc-emp,
        .tc-barra-menu > .tc-emp + .tc-barra-link {
            border-left: 1px solid rgba(255, 255, 255, 0.16);
        }

        .tc-barra-menu > .tc-barra-link,
        .tc-barra-menu > .tc-barra-link:visited {
            color: #ffffff !important;

            font-size: 13.5px;
            font-weight: 700;
        }

        /* A lo ancho de la pantalla: quince nombres en un panel de
           560 px centrado dejaban margenes tontos a los lados. */
        .tc-kits-panel,
        .tc-emp-panel {
            left: 8px;
            right: 8px;

            width: auto;
        }

        .tc-kits-lista,
        .tc-emp-lista {
            grid-template-columns: 1fr;
        }

        /* En el monitor, el bloque naranja de Empleos se alarga 60vw
           por su derecha para llenar la barra hasta el borde; el
           overflow:hidden de la barra recorta lo que sobra.

           En una fila que se arrastra eso es otra cosa: esos 60vw
           pasan a ser ancho de verdad, y el dedo se encontraba con
           media pantalla de naranja vacio despues del ultimo
           acceso. Aqui no hace falta —la fila no tiene que llegar
           a ningun borde— asi que se quita. */
        .tc-barra-link--empleos::after {
            display: none;
        }

        .tc-barra-menu .tc-barra-link--naranja,
        .tc-barra-menu .tc-barra-link--naranja:visited,
        .tc-barra-menu .tc-barra-link--naranja:hover,
        .tc-barra-menu .tc-barra-link--naranja:focus {
            width: auto;
            height: 100% !important;

            padding: 0 18px !important;

            display: flex;
            align-items: center;
            justify-content: center;

            font-size: 13px;
            font-weight: 700;

            white-space: nowrap;
        }



        /* Modal tipo sheet */

        .tc-ubicacion-modal {
            padding: 0;

            align-items: flex-end;
        }

        .tc-ubicacion-panel {
            width: 100%;

            /* 100vh en iPhone incluye la barra de Safari: con 92vh
               el boton "Guardar ubicacion" quedaba debajo del borde
               visible y no se podia tocar. */
            max-height: 92vh;
            max-height: 92dvh;

            border-radius:
                16px 16px 0 0;
        }

        .tc-ubicacion-cabecera {
            padding:
                17px 18px;
        }

        .tc-ubicacion-cuerpo {
            padding: 18px;
        }
    }


    @media (max-width: 420px) {

        .tc-barra-superior .tc-barra-contenedor {
            padding-left: 4px !important;
            padding-right: 4px !important;
        }

        /* "Arma tu Kit Camaras" es el texto mas largo: a 360 px
           necesita bajar de tamano para no cortarse. */
        .tc-barra-menu .tc-barra-link--naranja,
        .tc-barra-menu .tc-barra-link--naranja:visited,
        .tc-barra-menu .tc-barra-link--naranja:hover,
        .tc-barra-menu .tc-barra-link--naranja:focus {
            padding: 0 4px !important;
            font-size: 12px;
        }

        .tc-ubicacion-titulo {
            font-size: 18px;
        }

        .tc-ubicacion-acciones {
            grid-template-columns: 1fr;
        }

        .tc-ubicacion-boton--principal {
            order: 1;
        }

        .tc-ubicacion-boton--secundario {
            order: 2;
        }
    }

    /* El "Pro" del servicio técnico: más chico pero a la misma altura del
       texto, no debajo ni volado. Sube apenas un pelo para que la línea de
       base no se vea hundida al reducir el tamaño. */
    .tc-pro {
        display: inline-block;
        margin-left: 5px;
        padding: 3px 8px 2px;
        border-radius: 999px;
        background: #ff4b0b;
        color: #fff;
        font-size: .82em;
        font-weight: 850;
        letter-spacing: .06em;
        text-transform: uppercase;
        line-height: 1;
        vertical-align: baseline;
        transform: translateY(-1px);
        /* Un halo tenue del propio naranja: lo despega del azul de la barra
           sin agregarle un borde, que a este tamaño se vería sucio. */
        box-shadow: 0 0 0 1px rgba(255, 75, 11, .35),
                    0 1px 4px rgba(255, 75, 11, .35);
    }



    /* =========================================================
       TECOMSER
       BUSCADOR GLOBAL + BOTÓN CATEGORÍAS
       ========================================================= */

    .tc-buscador-wrap {
        /* Ancla del panel de buscar por foto: cuelga de aquí y no del
           formulario porque va fuera de él —un form dentro de otro no es
           HTML válido—. */
        position: relative;

        --tc-buscador-azul: #071457;
        /* El naranja del logo, subido de tono: a 24 px sobre un fondo
           claro, un naranja apagado se lee marrón. Este es el que se ve
           desde lejos y sigue siendo el de la marca. */
        --tc-buscador-naranja: #ff3800;
        --tc-buscador-naranja-hover: #ff5722;
        --tc-buscador-borde: #cfd8e6;
        --tc-buscador-texto: #0f172a;
        --tc-buscador-secundario: #64748b;

        width: 100%;
        min-width: 0;

        display: grid;
        grid-template-columns: auto minmax(260px, 1fr);
        align-items: center;
        gap: 16px;

        /* El boton Categorias arranca pegado al logo: la columna mide lo
           que mide el boton, no un ancho fijo con el texto centrado. */
        padding-left: 0;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
    }

    .tc-buscador-wrap *,
    .tc-buscador-wrap *::before,
    .tc-buscador-wrap *::after {
        box-sizing: border-box;
    }

    /* BOTÓN CATEGORÍAS */

    /* CATEGORÍAS
       ---------------------------------------------------------
       Era un botón naranja macizo con sombra. Llamaba mucho la
       atención, pero competía con el buscador, que es lo que la
       gente viene a usar, y hacía que la cabecera pareciera un
       cartel en vez de una barra de trabajo.

       Ahora es texto con su icono, como en las tiendas grandes.
       Se sigue viendo —es lo segundo que se lee, después del
       logo— y el naranja se guarda para donde de verdad hace
       falta: los precios, las ofertas y el botón de comprar. */

    .tc-buscador-categorias {
        height: 52px;
        padding: 0 12px;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;

        border: 0;
        border-radius: 10px;

        background: transparent;
        color: #0f172a;

        font-size: 16px;
        font-weight: 700;
        line-height: 1;

        cursor: pointer;

        transition:
            background-color 0.18s ease,
            color 0.18s ease;
    }

    .tc-buscador-categorias:hover {
        background: #f1f5f9;
        color: var(--tc-buscador-naranja);
    }

    .tc-buscador-categorias:active {
        background: #e8eef5;
    }

    .tc-buscador-categorias:focus-visible {
        outline: 3px solid rgba(255, 75, 11, 0.20);
        outline-offset: 2px;
    }

    .tc-buscador-categorias-icono {
        width: 25px;
        height: 25px;
        flex: 0 0 25px;
    }

    /* FORMULARIO */

    .tc-buscador-form {
        position: relative;
        width: 100%;
        min-width: 0;
    }

    /* Píldora entera y sin sombra: redondeada solo por la derecha
       parecía media caja rota, y la sombra la separaba del blanco
       de la cabecera en vez de dejarla asentada. */
    .tc-buscador-caja {
        width: 100%;
        /* 48 y no 56: la barra ocupaba mas alto que el logo y empujaba la
           cabecera entera hacia abajo. A 48 sigue siendo comoda de tocar
           —el minimo razonable son 44— y la cabecera respira. */
        height: 48px;

        display: flex;
        align-items: center;

        overflow: hidden;

        border: 1px solid #cfd8e3;
        /* Esquina redondeada, no pastilla. La pastilla completa obliga a que
           el boton de dentro sea un circulo, y un circulo negro grande al
           final de la barra pesa mas que la propia barra. */
        border-radius: 12px;

        background: #ffffff;

        transition:
            border-color 0.18s ease,
            box-shadow 0.18s ease;
    }

    .tc-buscador-caja:hover {
        border-color: #aebbcd;
    }

    .tc-buscador-caja:focus-within {
        border-color: #7f8fa8;

        box-shadow:
            0 0 0 3px rgba(7, 20, 87, 0.07);
    }

    .tc-buscador-input {
        width: 100%;
        min-width: 0;
        height: 100%;

        padding: 0 8px 0 24px;

        border: 0;
        outline: 0;

        background: transparent;
        color: var(--tc-buscador-texto);

        /* 16 px en todos los tamanos: Safari de iPhone y de iPad
           acerca la pagina al enfocar un campo mas pequeno. */
        font-size: 16px;
        font-weight: 400;
    }

    .tc-buscador-input::placeholder {
        color: #64748b;
        opacity: 1;
    }

    .tc-buscador-foto {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* Alto y ancho: es un botón que se toca, y a 34x34 el área táctil
       quedaba justa al lado de la lupa. */
    width: 38px;
    height: 38px;
    align-self: center;
    margin-right: 2px;
    color: #6b7280;
    text-decoration: none;
    border-radius: 10px;
}

.tc-buscador-foto:hover {
    color: #ff6a00;
    background: rgba(255, 106, 0, .08);
}

.tc-buscador-foto svg {
    /* Un poco más grande que la lupa: el marco de enfoque tiene las esquinas
       separadas del dibujo de dentro, así que al mismo tamaño se ve más
       pequeño de lo que es. */
    width: 22px;
    height: 22px;
}

.tc-buscador-submit {
        /* MAS ANCHO QUE ALTO
           Un boton cuadrado de 40 px es un icono con fondo; ensanchado se
           lee como boton y se acierta al tocarlo con el pulgar sin mirar. La
           altura no sube: la marca la caja, y un boton mas alto que su caja
           la deforma. */
        width: 58px;
        height: 40px;

        margin-right: 4px;
        flex: 0 0 58px;

        display: grid;
        place-items: center;

        border: 0;

        /* Del circulo al cuadrado redondeado: acompaña a la esquina de la
           caja en vez de contradecirla. */
        border-radius: 10px;

        /* PLOMO OSCURO, CON LA LUPA EN NARANJA SOLIDO

           Empezo casi blanco y se fundia con la caja: parecia una lupa
           suelta, no algo que se pulsa. Sobre plomo oscuro el naranja de la
           marca es lo unico claro del boton, y a veinticuatro pixeles eso es
           lo que hace que se vea de lejos.

           Plomo y no el azul de la marca: ese azul y el naranja tienen
           parecida claridad, y el icono se emborrona contra el fondo en vez
           de recortarse.

           Ver el <svg> por que la lupa no lleva las tres franjas. */
        border: 1px solid #232a34;
        background: #2f3742;

        /* El naranja de la marca, el mismo del logo. Va aqui y no escrito en
           el <svg> porque el icono sigue a currentColor: cambiar la variable
           cambia la lupa, y no hay dos naranjas que se separen con el
           tiempo. */
        color: var(--tc-buscador-naranja);

        cursor: pointer;

        transition:
            background-color 0.18s ease,
            transform 0.18s ease;
    }

    /* AL PASAR POR ENCIMA NO CAMBIA NADA
       El boton ya se ve de lejos: aclararlo o encenderlo al pasar el raton
       solo hacia parpadear la esquina de la pagina cada vez que el puntero
       la cruzaba camino de otra cosa. Queda el hundido al pulsar, que si
       dice algo -que se pulso-. */
    .tc-buscador-submit:hover {
        border-color: #232a34;
        background: #2f3742;
        color: var(--tc-buscador-naranja);
    }

    .tc-buscador-submit:active {
        transform: scale(0.97);
    }

    .tc-buscador-submit svg {
        width: 24px;
        height: 24px;
    }

    /* El grosor del trazo va en el propio atributo de cada forma: el circulo
       y la manija lo llevan puesto, y un atributo del hijo gana a cualquier
       herencia del padre. Ponerlo aqui no haria nada. */

    /* =========================================================
       PANEL DE SUGERENCIAS
       Tres bloques: accesos (recientes / lo mas buscado), atajos
       (categorias y marcas que coinciden) y productos con su
       precio. Abajo, el enlace para ver todo en el catalogo.
       ========================================================= */

    /* ---------- Panel de buscar por foto ---------- */
    .tc-buscador-foto-panel {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        z-index: 3500;

        width: min(340px, calc(100vw - 24px));
        padding: 14px;

        border: 1px solid #e3e8f0;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 18px 44px rgba(15, 27, 46, .18);
    }

    .tc-bfp-cabeza {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .tc-bfp-cabeza strong {
        font-size: 15px;
        color: #0f1b2e;
    }

    .tc-bfp-cerrar {
        border: 0;
        background: none;
        padding: 2px 4px;
        cursor: pointer;
        color: #94a3b8;
        font-size: 14px;
        line-height: 1;
    }

    .tc-bfp-cerrar:hover { color: #0f1b2e; }

    .tc-bfp-ayuda {
        margin: 4px 0 12px;
        font-size: 12.5px;
        line-height: 1.5;
        color: #5a6675;
    }

    .tc-bfp-zona {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 9px;

        padding: 20px 14px;

        border: 1.6px dashed #cbd5e5;
        border-radius: 12px;
        background: #fbfcfe;
        text-align: center;
    }

    /* Al arrastrar encima, la zona lo dice: sin esta señal no se sabe si
       soltar ahí va a hacer algo. */
    .tc-bfp-zona.es-encima {
        border-color: #ff6a00;
        background: #fff7f1;
    }

    .tc-bfp-zona > svg {
        width: 34px;
        height: 34px;
        color: #b6c2d4;
    }

    .tc-bfp-arrastra {
        font-size: 12.5px;
        color: #5a6675;
    }

    .tc-bfp-boton {
        padding: 9px 20px;
        cursor: pointer;

        border-radius: 99px;
        background: #ff6a00;
        color: #fff;

        font-size: 13.5px;
        font-weight: 700;
    }

    .tc-bfp-boton:hover { background: #e85f00; }

    .tc-bfp-tomar {
        cursor: pointer;
        font-size: 12px;
        font-weight: 700;
        color: #ff6a00;
        text-decoration: underline;
    }

    /* En computadora, "tómala ahora" abriría el explorador de archivos. */
    @media (hover: hover) and (pointer: fine) {
        .tc-bfp-tomar { display: none; }
    }

    /* ---------- Mientras busca ---------- */
    .tc-bfp-zona.es-cargando > svg,
    .tc-bfp-zona.es-cargando .tc-bfp-arrastra,
    .tc-bfp-zona.es-cargando .tc-bfp-boton,
    .tc-bfp-zona.es-cargando .tc-bfp-tomar {
        display: none;
    }

    .tc-bfp-cargando {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .tc-bfp-cargando b {
        font-size: 13.5px;
        color: #0f1b2e;
    }

    .tc-bfp-cargando small {
        font-size: 11.5px;
        color: #8b95a5;
    }

    .tc-bfp-rueda {
        width: 30px;
        height: 30px;
        margin-bottom: 6px;

        border: 3px solid #ffe0cc;
        border-top-color: #ff4b0b;
        border-radius: 50%;

        animation: tc-bfp-gira 0.75s linear infinite;
    }

    @keyframes tc-bfp-gira {
        to { transform: rotate(360deg); }
    }

    /* Quien pidió menos movimiento en su sistema no puede llevarse una rueda
       girando en la cara: se queda quieta y sigue diciendo lo mismo. */
    @media (prefers-reduced-motion: reduce) {
        .tc-bfp-rueda { animation: none; opacity: .65; }
    }

    .tc-bfp-pie {
        margin: 10px 0 0;
        font-size: 11.5px;
        line-height: 1.5;
        color: #8b95a5;
    }

    .tc-bfp-pie kbd {
        padding: 1px 5px;
        border: 1px solid #dbe3ef;
        border-bottom-width: 2px;
        border-radius: 5px;
        background: #f8fafc;
        font-family: inherit;
        font-size: 11px;
        color: #5a6675;
    }

    .tc-buscador-sugerencias {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 3400;

        max-height: min(560px, calc(100vh - 130px));
        overflow-y: auto;
        overscroll-behavior: contain;

        display: none;

        padding: 6px 0;

        border: 1px solid #e3e9f2;
        border-radius: 14px;

        background: #ffffff;

        box-shadow:
            0 18px 46px rgba(15, 23, 42, 0.15);
    }

    .tc-buscador-sugerencias.is-open {
        display: block;
    }

    /* Titulo de cada bloque */

    .tc-buscador-bloque {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;

        padding: 11px 15px 6px;
    }

    .tc-buscador-bloque h4 {
        margin: 0;

        color: #94a3b8;

        font-size: 10.5px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
    }

    .tc-buscador-bloque button {
        padding: 0;

        border: 0;
        background: transparent;
        color: #94a3b8;

        font: inherit;
        font-size: 11.5px;
        font-weight: 600;

        cursor: pointer;
    }

    .tc-buscador-bloque button:hover {
        color: var(--tc-buscador-naranja);
        text-decoration: underline;
    }

    /* Las secciones de la tienda llevan una línea explicando qué son: sus
       nombres —"Arma tu Kit de Cámaras"— no siempre dicen a dónde llevan. */
    .tc-buscador-fila--seccion .tc-buscador-fila-texto {
        display: block;
        line-height: 1.25;
    }

    .tc-buscador-fila--seccion .tc-buscador-fila-texto small {
        display: block;
        margin-top: 2px;

        color: #64748b;

        font-size: 11.5px;
        font-weight: 400;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Fila generica: recientes, populares, categorias y marcas */

    .tc-buscador-fila {
        width: 100%;

        display: flex;
        align-items: center;
        gap: 11px;

        padding: 9px 15px;

        border: 0;
        background: transparent;
        color: var(--tc-buscador-texto);

        font: inherit;
        font-size: 13.5px;
        text-align: left;
        text-decoration: none;

        cursor: pointer;
    }

    .tc-buscador-fila:hover,
    .tc-buscador-fila.is-active {
        background: #f4f7fc;
    }

    .tc-buscador-fila-icono {
        width: 30px;
        height: 30px;
        flex: 0 0 30px;

        display: grid;
        place-items: center;

        border-radius: 9px;

        background: #f1f5fb;
        color: #64748b;
    }

    .tc-buscador-fila-icono svg {
        width: 15px;
        height: 15px;
    }

    .tc-buscador-fila-texto {
        min-width: 0;
        flex: 1;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Cuantos productos hay detras de una categoria o marca */
    .tc-buscador-fila-conteo {
        flex: 0 0 auto;

        color: #94a3b8;

        font-size: 11.5px;
        font-weight: 600;
    }

    /* Quitar una busqueda reciente sin abrirla */
    .tc-buscador-fila-quitar {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;

        display: grid;
        place-items: center;

        border: 0;
        border-radius: 6px;
        background: transparent;
        color: #cbd5e1;

        cursor: pointer;
    }

    .tc-buscador-fila-quitar svg {
        width: 13px;
        height: 13px;
    }

    .tc-buscador-fila-quitar:hover {
        background: #e9eef6;
        color: #475569;
    }

    /* Producto */

    .tc-buscador-resultado {
        display: flex;
        align-items: center;
        gap: 12px;

        padding: 9px 15px;

        color: var(--tc-buscador-texto);
        text-decoration: none;
    }

    .tc-buscador-resultado:hover,
    .tc-buscador-resultado.is-active {
        background: #f4f7fc;
    }

    .tc-buscador-resultado-imagen {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;

        display: grid;
        place-items: center;

        overflow: hidden;
        padding: 3px;

        border: 1px solid #eef2f7;
        border-radius: 9px;

        background: #ffffff;
        color: #cbd5e1;
    }

    .tc-buscador-resultado-imagen img {
        max-width: 100%;
        max-height: 40px;
        object-fit: contain;
    }

    .tc-buscador-resultado-imagen svg {
        width: 20px;
        height: 20px;
    }

    .tc-buscador-resultado-info {
        min-width: 0;
        flex: 1;
    }

    .tc-buscador-resultado-nombre {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;

        color: #1e293b;

        font-size: 13.5px;
        font-weight: 500;
        line-height: 1.35;
    }

    /* La parte que coincide con lo escrito va resaltada. */
    .tc-buscador-resultado-nombre mark {
        background: transparent;
        color: var(--tc-buscador-azul);
        font-weight: 800;
    }

    .tc-buscador-resultado-meta {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;

        margin-top: 3px;
    }

    .tc-buscador-resultado-marca {
        color: #94a3b8;

        font-size: 11.5px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    .tc-buscador-resultado-precio {
        color: #0f172a;

        font-size: 14px;
        font-weight: 800;
    }

    .tc-buscador-resultado-stock {
        padding: 1px 7px;

        border-radius: 999px;

        font-size: 10.5px;
        font-weight: 700;
        line-height: 1.6;
    }

    .tc-buscador-resultado-stock.is-hay {
        background: #eafaf0;
        color: #15803d;
    }

    .tc-buscador-resultado-stock.is-ultimos {
        background: #fff4e5;
        color: #b45309;
    }

    .tc-buscador-resultado-stock.is-agotado {
        background: #f1f5f9;
        color: #64748b;
    }

    /* Pie: ver todo en el catalogo */

    .tc-buscador-pie {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        margin-top: 5px;
        padding: 12px 15px;

        border-top: 1px solid #eef2f7;

        color: var(--tc-buscador-azul);

        font-size: 13px;
        font-weight: 750;
        text-decoration: none;
    }

    .tc-buscador-pie:hover,
    .tc-buscador-pie.is-active {
        background: #f4f7fc;
    }

    .tc-buscador-pie svg {
        width: 15px;
        height: 15px;
    }

    /* Estados: cargando, sin resultados */

    .tc-buscador-estado {
        padding: 22px 16px;

        color: var(--tc-buscador-secundario);

        font-size: 13px;
        text-align: center;
    }

    .tc-buscador-estado strong {
        display: block;
        margin-bottom: 3px;
        color: #334155;
        font-size: 13.5px;
    }

    /* Esqueleto mientras llega la respuesta: evita que el panel
       salte de alto al aparecer los resultados. */
    .tc-buscador-hueso {
        display: flex;
        align-items: center;
        gap: 12px;

        padding: 9px 15px;
    }

    .tc-buscador-hueso span {
        height: 12px;
        border-radius: 6px;
        background: linear-gradient(90deg, #eef2f7 25%, #e2e8f0 37%, #eef2f7 63%);
        background-size: 400% 100%;
        animation: tcBuscadorBrillo 1.2s ease infinite;
    }

    .tc-buscador-hueso span:first-child {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 9px;
    }

    .tc-buscador-hueso span:last-child {
        flex: 1;
    }

    @keyframes tcBuscadorBrillo {
        0%   { background-position: 100% 50%; }
        100% { background-position: 0 50%; }
    }

    /* TABLET */

    @media (max-width: 1050px) {
        /* También aquí la columna mide lo que mide el botón: con 154 fijos
           volvía el hueco entre el logo y "Categorías" en cuanto la pantalla
           bajaba de 1050. */
        .tc-buscador-wrap {
            grid-template-columns: auto minmax(220px, 1fr);
            gap: 12px;
        }

        .tc-buscador-categorias {
            padding: 0 10px;
            font-size: 14px;
        }
    }

    /* MÓVIL */

    @media (max-width: 760px) {
        .tc-buscador-wrap {
            grid-template-columns: 48px minmax(0, 1fr);
            gap: 8px;
        }

        .tc-buscador-categorias {
            width: 44px;
            height: 46px;

            padding: 0;

            border-radius: 10px;
        }

        .tc-buscador-categorias span {
            display: none;
        }

        /* La misma esquina que en escritorio: dos redondeos distintos
           para la misma barra se notan al girar el telefono. */
        .tc-buscador-caja {
            height: 44px;
            border-radius: 11px;
        }

        .tc-buscador-submit {
            /* En el telefono se ensancha menos: ahi el ancho que se le da al
               boton se le quita a lo que se escribe, y el nombre de un
               producto no cabe en cuatro letras. */
            width: 48px;
            height: 36px;
            flex-basis: 48px;
            border-radius: 9px;
        }

        /* 16 px NO es capricho de diseno: por debajo de ese
           tamano el iPhone acerca toda la pagina al tocar el
           campo y ya no vuelve al zoom original. Eso era lo que
           dejaba el buscador "estirado" y el boton de lupa fuera
           de la pantalla. */
        .tc-buscador-input {
            padding-left: 13px;
            font-size: 16px;
        }

        /* Antes el panel se clavaba a 116 px del borde con
           position:fixed. Esa medida solo servia para una altura
           de cabecera concreta: al cambiar de pagina, o cuando el
           iPhone acercaba la pagina, el panel aparecia encima del
           buscador o a media pantalla. Colgado del formulario
           siempre cae justo debajo de la caja.

           La altura se limita a la mitad util de la pantalla para
           que se siga viendo lo que hay detras. */
        .tc-buscador-sugerencias {
            position: absolute;

            top: calc(100% + 6px);
            left: 0;
            right: 0;

            max-height: min(52vh, 380px);
        }

        /* Nombres largos de producto en una sola linea. */
        .tc-buscador-fila-texto,
        .tc-buscador-resultado-nombre {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    /* =========================================================
       EL BUSCADOR A PANTALLA COMPLETA EN EL TELEFONO

       Se enciende con la clase `tc-buscando` que el guion pone en
       <body> al escribir. Todo lo de aqui vive dentro del limite
       de movil: en un monitor no cambia nada.
       ========================================================= */

    @media (max-width: 820px) {

        /* BUSCAR DESDE DONDE ESTA, SIN SALTAR
           Antes, al escribir, el buscador se despegaba y se iba a lo alto de
           la pantalla con un velo oscuro detras. Daba un salto brusco justo
           al empezar a teclear y cambiaba de sitio lo que se estaba mirando.
           Ahora la lista se abre debajo de la caja, donde ya estaba el dedo.

           Queda el limite de altura para que se siga viendo algo de la
           pagina por debajo y quede claro que no se ha ido a otra pantalla. */
        body.tc-buscando .tc-buscador-sugerencias {
            max-height: min(62vh, 460px);
        }
    }


    /* =========================================================
       TECOMSER - MEGAMENU DINAMICO
       Desktop: abre primero solo la columna de categorias.
       Hover sobre una categoria: expande el panel de detalle.
       Movil: tap en categoria abre el detalle como segunda vista.
       ========================================================= */

    .tc-megamenu,
    .tc-mega-overlay {
        --tc-mega-azul: #071457;
        --tc-mega-azul-2: #0b195d;
        --tc-mega-naranja: #ff6a00;
        --tc-mega-naranja-vivo: #ff5200;

        /* EL TERCER COLOR: ORO
       
           El naranja ya significa una cosa —donde estas parado— y no puede
           significar dos.
       
           El verde que estaba antes tampoco servia: un rectangulo verde
           macizo sobre azul es plano, y en el idioma de esta tienda el verde
           es "gratis", no "oferta".
       
           Azul marino y oro es el par de toda la vida de lo caro bien hecho,
           y aqui ademas resuelve el problema: es lo bastante distinto del
           naranja para no confundirse y lo bastante calido para no parecer
           un aviso del sistema.
       
           Con texto OSCURO encima, no blanco. El blanco sobre oro se lee mal
           y es lo que hace que un boton dorado parezca de plantilla. */
        /* EL COLOR DE LAS OFERTAS
         *
         * Rojo, no amarillo. Se eligio midiendo dos cosas a la vez, porque
         * el boton vive sobre el azul del menu:
         *
         *   blanco sobre #d02c2c ....... 5.15:1  (AA pide 4.5)
         *   #d02c2c sobre el azul ...... 3.27:1  (AA pide 3 para un control)
         *
         * Un rojo mas oscuro se lee "mas elegante" pero se hunde en el azul:
         * #991b1b queda en 2.03:1 contra el fondo y el boton deja de
         * distinguirse del menu. #c62828 daba 3.00:1 clavado, justo en el
         * limite; este deja margen para que un monitor malo no se lo coma.
         *
         * El texto pasa a blanco: el azul de la marca sobre rojo da 2.6:1 y
         * seria ilegible. */
        --tc-mega-oferta: #d02c2c;
        --tc-mega-oferta-hondo: #a81f1f;
        --tc-mega-oferta-tinta: #ffffff;
        --tc-mega-fondo-barra: #2e3339;
        --tc-mega-chip: #454b52;
        --tc-mega-chip-hover: #515861;
        --tc-mega-texto: #203652;
        --tc-mega-secundario: #64748b;
        --tc-mega-borde: #e5e7eb;
        --tc-mega-lateral-ancho: 318px;
        --tc-mega-panel-ancho: 1120px;

        font-family:
            Inter,
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            Roboto,
            Arial,
            sans-serif;
    }

    .tc-megamenu *,
    .tc-megamenu *::before,
    .tc-megamenu *::after,
    .tc-mega-overlay *,
    .tc-mega-overlay *::before,
    .tc-mega-overlay *::after {
        box-sizing: border-box;
    }

    .tc-megamenu {
        width: 100%;
        position: relative;
        z-index: 3000;
    }

    /* =========================================================
       BARRA HORIZONTAL
       ========================================================= */

    .tc-mega-barra {
        width: 100%;
        height: 52px;

        display: grid;
        /* 350 px: "¡Mayorista en tecnologia!" mas el boton de Ver
           catalogo necesitan ese ancho. Con menos, el rotulo se corta. */
        grid-template-columns: 350px minmax(0, 1fr);

        background: var(--tc-mega-fondo-barra);
        color: #ffffff;
    }

    .tc-mega-mayorista {
        min-width: 0;
        padding: 0 14px;

        display: flex;
        align-items: center;

        /* Centrado: separados a los extremos, el texto y el boton se
           leian como dos piezas sueltas dentro de la franja. */
        justify-content: center;
        gap: 12px;

        background: var(--tc-mega-naranja-vivo);
        color: #ffffff;

        font-size: 13px;
        font-weight: 700;
        white-space: nowrap;

        text-decoration: none;

        transition: background 0.16s ease;
    }

    .tc-mega-mayorista:hover {
        background: #ff5f22;
    }

    .tc-mega-mayorista-texto {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* "Ver catalogo" es la accion; el rotulo es el reclamo. Se separan
       para que se lea que el bloque lleva a algun sitio. */
    .tc-mega-mayorista-ver {
        flex: 0 0 auto;

        display: inline-flex;
        align-items: center;
        gap: 4px;

        padding: 4px 8px;

        border: 1px solid rgba(255, 255, 255, 0.55);
        border-radius: 6px;

        font-size: 11px;
        font-weight: 800;
    }

    .tc-mega-mayorista-ver svg {
        width: 12px;
        height: 12px;
    }

    .tc-mega-carrusel {
        min-width: 0;

        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) 44px;
        align-items: center;

        overflow: hidden;
    }

    .tc-mega-flecha {
        width: 34px;
        height: 34px;
        margin: auto;
        padding: 0;

        display: grid;
        place-items: center;

        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;

        background: #30363c;
        color: #cbd5e1;

        cursor: pointer;
        text-decoration: none;
        scroll-snap-align: start;

        transition:
            background-color 0.18s ease,
            color 0.18s ease;
    }

    .tc-mega-flecha:hover {
        background: #3a4148;
        color: #ffffff;
    }

    .tc-mega-flecha svg {
        width: 16px;
        height: 16px;
    }

    .tc-mega-lista-horizontal {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 8px;

        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        scroll-behavior: smooth;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .tc-mega-lista-horizontal::-webkit-scrollbar {
        display: none;
    }

    .tc-mega-chip {
        height: 36px;
        padding: 0 13px;

        flex: 0 0 auto;

        display: inline-flex;
        align-items: center;
        gap: 8px;

        border: 1px solid #5b626a;
        border-radius: 7px;

        background: var(--tc-mega-chip);
        color: #ffffff;

        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;

        cursor: pointer;

        transition:
            background-color 0.18s ease,
            border-color 0.18s ease;
    }

    .tc-mega-chip:hover,
    .tc-mega-chip.is-active {
        background: var(--tc-mega-chip-hover);
        border-color: #7a838d;
    }

    .tc-mega-chip-icono {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;

        display: grid;
        place-items: center;

        overflow: hidden;
        border-radius: 6px;

        color: #d7dde4;
    }

    .tc-mega-chip-icono svg {
        width: 17px;
        height: 17px;
    }

    /* Foto real de la categoria, tal cual: PNG con transparencia
       apoyado sobre el chip, sin recuadro ni contorno. */
    .tc-mega-chip-icono img {
        width: 100%;
        height: 100%;

        object-fit: contain;
    }

    .tc-mega-chip-flecha {
        width: 12px;
        height: 12px;
        opacity: 0.8;
    }

    /* =========================================================
       OVERLAY
       ========================================================= */

    .tc-mega-overlay {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 5000;

        display: none;

        /* SIN DESENFOCAR EL FONDO
       
           backdrop-filter obliga al navegador a volver a desenfocar TODA la
           pagina que hay detras cada vez que algo cambia dentro del menu. Con
           un panel de la altura de la pantalla encima, cada cambio de
           categoria costaba un desenfoque de pantalla completa: por eso el
           contenido iba dos y tres categorias por detras del raton.
       
           Un negro un poco mas denso tapa igual y no cuesta nada. */
        background: rgba(3, 8, 35, 0.78);
    }

    .tc-mega-overlay.is-open {
        display: block;
    }

    /* =========================================================
       PANEL GENERAL
       Al inicio solo mide el ancho del lateral.
       Cuando hay categoria seleccionada, se expande.
       ========================================================= */

    .tc-mega-panel {
        width: var(--tc-mega-lateral-ancho);
        height: 100vh;
        height: 100dvh;

        position: fixed;
        top: 0;
        left: 0;

        display: grid;
        grid-template-columns: var(--tc-mega-lateral-ancho) minmax(0, 1fr);

        overflow: hidden;

        background: var(--tc-mega-azul);

        border-radius: 0 14px 14px 0;

        /* 80px de difuminado sobre un panel de la altura de la pantalla es
           una superficie enorme que repintar en cada cambio. A 28 se ve
           igual de separado del fondo y cuesta una fraccion. */
        box-shadow: 0 10px 28px rgba(3, 8, 35, 0.38);

        /* EL ANCHO NO SE ANIMA
       
           Animar `width` de un panel con veinticuatro botones y una ficha
           dentro obliga al navegador a recalcular la posicion de todo en
           cada uno de los trece fotogramas de la animacion. Ese era el
           tiron que se sentia al abrir una categoria.
       
           El ancho cambia de golpe —nadie mira crecer un panel— y lo que se
           anima es el color, que no toca la disposicion de nada. El
           contenido entra con su propia aparicion, mas abajo. */
        transition: background-color 0.16s ease;
    }

    .tc-mega-panel.has-detail {
        width: min(var(--tc-mega-panel-ancho), calc(100vw - 36px));
        background: #ffffff;
    }

    /* =========================================================
       COLUMNA IZQUIERDA
       ========================================================= */

    .tc-mega-lateral {
        width: var(--tc-mega-lateral-ancho);
        height: 100vh;
        height: 100dvh;
        min-height: 0;

        position: relative;

        display: grid;

        /*
         * ESCRITORIO:
         * saludo + titulo + lista flexible.
         * El pie (horario, Ofertas y logo) va DENTRO de la lista, al final:
         * aparece cuando el cliente termina de bajar las categorias, no
         * clavado abajo tapando espacio.
         * El boton movil esta oculto y NO debe reservar una fila.
         */
        grid-template-rows: auto auto minmax(0, 1fr);

        overflow: hidden;

        padding: 18px 14px 14px;

        background: var(--tc-mega-azul);
        color: #ffffff;
    }

    .tc-mega-saludo {
        min-height: 62px;

        margin-bottom: 12px;
        padding: 11px 12px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;

        border-radius: 9px;

        background: #ffffff;
        color: var(--tc-mega-azul);
    }

    .tc-mega-saludo strong {
        display: block;

        font-size: 16px;
        font-weight: 700;
        line-height: 1.2;
    }

    .tc-mega-saludo small {
        display: block;

        margin-top: 4px;

        color: #64748b;

        font-size: 10.5px;
        font-weight: 500;
    }

    .tc-mega-saludo-icono {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;

        display: grid;
        place-items: center;

        border: 1px solid #dbe3ee;
        border-radius: 9px;

        background: #f8fafc;
        color: #57709d;
    }

    .tc-mega-saludo-icono svg {
        width: 19px;
        height: 19px;
    }

    .tc-mega-lateral-titulo {
        margin: 0;
        padding: 5px 8px 14px;

        border-bottom: none;

        color: #ffffff;
        text-align: center;

        font-size: 16px;
        font-weight: 750;
        line-height: 1.2;
        letter-spacing: 0.045em;
        text-transform: uppercase;
    }

    .tc-mega-categorias-scroll {
        min-height: 0;
        overflow-y: auto;

        padding: 10px 0 4px;

        scrollbar-width: thin;
        scrollbar-color: #6371a3 transparent;
    }

    .tc-mega-categorias-scroll::-webkit-scrollbar {
        width: 5px;
    }

    .tc-mega-categorias-scroll::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #6371a3;
    }

    .tc-mega-categorias {
        display: grid;
        gap: 6px;
    }

    .tc-mega-categoria {
        width: 100%;
        min-height: 49px;

        position: relative;

        padding: 5px 8px;

        display: grid;
        grid-template-columns: 39px minmax(0, 1fr) 17px;
        align-items: center;
        gap: 10px;

        border: 1px solid transparent;
        border-radius: 8px;

        background: transparent;
        color: #ffffff;

        text-align: left;

        cursor: pointer;

        transition:
            background-color 0.16s ease,
            border-color 0.16s ease;
    }

    .tc-mega-categoria:hover {
        background: rgba(255, 255, 255, 0.07);
    }

    /* NARANJA MACIZO, NO UN VELO
   
       Era el naranja al 17% sobre el azul: quedaba un morado apagado que no
       se leia como "esta es la que estas viendo". Relleno entero, el mismo
       naranja de la marca, y el texto en blanco encima. */
    .tc-mega-categoria.is-active {
        border-color: var(--tc-mega-naranja);
        background: var(--tc-mega-naranja);
        color: #ffffff;
        box-shadow: none;
    }

    .tc-mega-categoria-icono {
        width: 36px;
        height: 36px;

        display: grid;
        place-items: center;

        border: 1px solid rgba(255, 255, 255, 0.10);
        border-radius: 9px;

        background: rgba(255, 255, 255, 0.075);
        color: #cbd5e1;
    }

    /* Sobre el naranja macizo, el icono se separa con blanco translucido:
       otro naranja encima no se distinguiria del fondo. */
    .tc-mega-categoria.is-active .tc-mega-categoria-icono {
        border-color: rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    .tc-mega-categoria-icono svg {
        width: 20px;
        height: 20px;
    }

    .tc-mega-categoria-nombre {
        min-width: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        font-size: 13.5px;
        font-weight: 650;
    }

    .tc-mega-categoria-chevron {
        width: 14px;
        height: 14px;
        color: #94a3b8;
    }

    /* Sobre el naranja macizo, el gris de la flecha se pierde. */
    .tc-mega-categoria.is-active .tc-mega-categoria-chevron {
        color: #ffffff;
    }

    /* =========================================================
       PIE DEL LATERAL
       Horario + Ofertas + logo. Van al final de la lista y se
       alcanzan desplazando, como el pie de una pagina.
       ========================================================= */

    .tc-mega-lateral-pie {
        margin-top: 14px;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.10);
    }

    /* Horario: lo primero que pregunta el cliente antes de venir.
       Va sobre Ofertas, dentro del pie, para que se vea sin desplazar. */

    .tc-mega-horario {
        margin-bottom: 9px;
        padding: 9px 10px;

        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: center;
        gap: 9px;

        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 9px;

        background: rgba(255, 255, 255, 0.06);
        color: #ffffff;
        text-decoration: none;
    }

    .tc-mega-horario-icono {
        width: 32px;
        height: 32px;

        display: grid;
        place-items: center;

        border: 1px solid rgba(255, 255, 255, 0.18);
        border-radius: 8px;

        background: rgba(255, 255, 255, 0.10);
    }

    .tc-mega-horario-icono svg {
        width: 17px;
        height: 17px;
    }

    .tc-mega-horario-datos {
        min-width: 0;
    }

    .tc-mega-horario-linea {
        display: flex;
        align-items: center;
        gap: 5px 7px;
        flex-wrap: wrap;
    }

    .tc-mega-horario-linea strong {
        font-size: 12.5px;
        font-weight: 700;
        line-height: 1.2;
    }

    /* El punto y el rotulo cambian solos con la hora de Lima. */
    .tc-mega-horario-estado {
        padding: 2px 7px;

        display: inline-flex;
        align-items: center;
        gap: 5px;

        border-radius: 999px;

        /* Verde macizo y letras blancas. El verde translucido con letra
         * verde clara daba 2.4:1 sobre el azul del menu: se leia mal justo
         * el dato que dice si puedes venir ahora.
         *
         * #15803d con blanco da 5.02:1. Es el mismo verde que el panel usa
         * para lo que salio bien, asi que las dos pantallas hablan igual. */
        background: #15803d;
        color: #ffffff;

        font-size: 9.5px;
        font-weight: 750;
        line-height: 1.4;
        letter-spacing: 0.03em;
        text-transform: uppercase;

        white-space: nowrap;
    }

    /* Cuando no hay ninguna promocion. Se dice y se explica cuando volver,
       en vez de dejar el panel en blanco como si estuviera roto. */
    .tc-mega-ofertas-vacio {
        margin: 0;
        padding: 26px 20px;

        border: 1px dashed rgba(148, 163, 184, 0.45);
        border-radius: 10px;

        color: #64748b;

        font-size: 13px;
        line-height: 1.6;
        text-align: center;
    }

    .tc-mega-horario-estado::before {
        content: "";

        width: 6px;
        height: 6px;

        border-radius: 50%;
        background: currentColor;
    }

    /* Cerrado, en el mismo formato: macizo y con letra blanca. Con el verde
       relleno y el gris translucido, los dos estados no parecian el mismo
       distintivo. Gris y no rojo: cerrar a las ocho no es una alarma. */
    .tc-mega-horario-estado[data-abierto="no"] {
        background: #475569;
        color: #ffffff;
    }

    /* "abre mañana a las 8:00 a. m.": al lado del distintivo, sin gritar. */
    .tc-mega-horario-cuando {
        color: rgba(255, 255, 255, 0.82);
        font-size: 11px;
        font-weight: 600;
        white-space: nowrap;
    }

    .tc-mega-horario-datos small {
        display: block;
        margin-top: 3px;

        color: rgba(255, 255, 255, 0.72);

        font-size: 10.5px;
        font-weight: 500;
        line-height: 1.35;
    }

    .tc-mega-horario-online {
        display: block;
        margin-top: 2px;
        color: #ffbb85;
        font-weight: 650;
    }

    .tc-mega-ofertas {
        width: 100%;
        min-height: 50px;

        margin: 0;
        padding: 0 10px;

        appearance: none;
        -webkit-appearance: none;

        display: grid;
        grid-template-columns: 38px minmax(0, 1fr) 18px;
        align-items: center;
        gap: 10px;

        /* UN COLOR Y NADA MAS.
           Ni degradado, ni borde, ni sombra, ni movimiento al pasar por
           encima. Un rectangulo rojo con el texto blanco: sobre el azul del
           menu no hace falta nada mas para que se vea, y cada efecto que se
           le añadia lo ensuciaba. */
        border: 0;
        border-radius: 9px;

        background: var(--tc-mega-oferta);
        color: var(--tc-mega-oferta-tinta);

        font-size: 14px;
        font-weight: 800;
        letter-spacing: .01em;
        text-decoration: none;

        cursor: pointer;
        box-shadow: none;
    }

    /* Al pasar por encima no pasa nada: el boton no se mueve, no se levanta y
       no cambia de color. Es el sitio fijo de las ofertas. */
    .tc-mega-ofertas:hover,
    .tc-mega-ofertas.is-active,
    .tc-mega-ofertas:focus-visible {
        background: var(--tc-mega-oferta);
        transform: none;
        box-shadow: none;
    }

    /* El icono hereda el blanco del boton: un rayo en otro color sobre el
       rojo seria un tercer color en un boton que tiene dos. */
    .tc-mega-ofertas-icono {
        width: 35px;
        height: 35px;

        display: grid;
        place-items: center;

        border: 0;
        border-radius: 0;

        /* Sin cuadrado detras: el rayo va suelto sobre el rojo. */
        background: none;
        color: var(--tc-mega-oferta-tinta);
    }

    .tc-mega-ofertas-icono svg,
    .tc-mega-ofertas-flecha {
        width: 18px;
        height: 18px;
    }

    .tc-mega-logo-pie {
        min-height: 58px;

        margin-top: 8px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tc-mega-logo-pie img {
        width: 150px;
        max-width: 78%;
        height: auto;
        object-fit: contain;
    }

    /* =========================================================
       OFERTAS POR CATEGORIA
       Usa las mismas categorias reales cargadas desde la API.
       ========================================================= */

    .tc-mega-ofertas-intro {
        margin: -3px 0 20px;
        color: #64748b;
        font-size: 13px;
        line-height: 1.5;
    }

    .tc-mega-ofertas-titulo-seccion {
        margin: 0 0 13px;
        color: #203652;
        font-size: 16px;
        font-weight: 700;
    }

    .tc-mega-ofertas-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }

    .tc-mega-oferta-categoria {
        min-width: 0;
        min-height: 76px;

        padding: 12px 12px;

        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) 16px;
        align-items: center;
        gap: 10px;

        border: 1px solid #e5e7eb;
        border-radius: 11px;

        background: #ffffff;
        color: #203652;

        text-decoration: none;

        transition:
            border-color 0.16s ease,
            background-color 0.16s ease,
            box-shadow 0.16s ease,
            transform 0.16s ease;
    }

    .tc-mega-oferta-categoria:hover {
        border-color: rgba(255, 106, 0, 0.48);
        background: #fff9f4;
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.07);
        transform: translateY(-1px);
    }

    .tc-mega-oferta-categoria-icono {
        width: 42px;
        height: 42px;

        display: grid;
        place-items: center;

        border-radius: 10px;
        background: #fff0e4;
        color: #ff6a00;
    }

    .tc-mega-oferta-categoria-icono svg {
        width: 22px;
        height: 22px;
    }

    .tc-mega-oferta-categoria-texto {
        min-width: 0;
    }

    .tc-mega-oferta-categoria-texto strong {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #203652;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.25;
    }

    .tc-mega-oferta-categoria-texto small {
        display: block;
        margin-top: 4px;
        color: #7b8797;
        font-size: 10.5px;
        font-weight: 500;
    }

    .tc-mega-oferta-categoria-flecha {
        width: 15px;
        height: 15px;
        color: #94a3b8;
    }

    .tc-mega-ofertas-destacado {
        margin-top: 20px;
        padding: 16px 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;

        border: 1px solid #fed7aa;
        border-radius: 12px;
        background: linear-gradient(135deg, #fff7ed, #fff);
    }

    .tc-mega-ofertas-destacado strong {
        display: block;
        color: #203652;
        font-size: 14px;
        font-weight: 700;
    }

    .tc-mega-ofertas-destacado span {
        display: block;
        margin-top: 3px;
        color: #64748b;
        font-size: 11.5px;
    }

    .tc-mega-ofertas-destacado a {
        min-height: 38px;
        padding: 0 14px;

        display: inline-flex;
        align-items: center;
        justify-content: center;

        border-radius: 8px;
        /* El mismo rojo plano del boton del lateral: es lo mismo y tiene
           que verse como lo mismo. */
        background: var(--tc-mega-oferta);
        color: var(--tc-mega-oferta-tinta);

        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
        white-space: nowrap;
    }

    /* =========================================================
       CONTENIDO DERECHO
       Oculto hasta hover/click en categoria.
       ========================================================= */

    .tc-mega-contenido {
        min-width: 0;
        height: 100vh;
        height: 100dvh;

        position: relative;

        overflow-y: auto;

        padding: 24px 28px 40px;

        background: #ffffff;
        color: var(--tc-mega-texto);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-10px);

        /* SIN RETARDO Y MAS CORTA
       
           Tenia 50ms de espera ANTES de empezar a aparecer, mas 180ms de
           aparicion. Sumado a lo que tarda el raton en decidir que te
           paraste, eran mas de trescientos milisegundos desde que apuntas
           hasta que lees algo: eso es lo que se siente como lento.
       
           Opacidad y transform son lo unico que el navegador anima sin
           recalcular la disposicion, asi que acortarlas no cuesta nada. */
        transition:
            opacity 0.12s ease,
            visibility 0.12s ease,
            transform 0.14s ease;
    }

    .tc-mega-panel.has-detail .tc-mega-contenido {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
    }

    .tc-mega-contenido-cabecera {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;

        margin-bottom: 20px;
    }

    /* Es un enlace a la categoria completa. */
    .tc-mega-titulo-pill {
        min-height: 58px;

        padding: 0 22px;

        display: flex;
        align-items: center;
        gap: 12px;

        border-radius: 999px;

        /* EL MISMO AZUL DEL MENU LATERAL
       
           En naranja competia con la categoria elegida de la izquierda: dos
           naranjas grandes en la misma pantalla y ninguno mandaba. En el azul
           de la casa, la pastilla ata el area blanca con el lateral y el
           naranja queda para una sola cosa: donde estas parado. */
        background: var(--tc-mega-azul);
        color: #ffffff;

        text-decoration: none;

        box-shadow: 0 8px 20px rgba(7, 20, 87, 0.18);

        transition:
            background .18s ease,
            box-shadow .18s ease,
            transform .18s ease;
    }

    .tc-mega-titulo-pill:hover {
        background: var(--tc-mega-azul-2);
        box-shadow: 0 10px 24px rgba(7, 20, 87, 0.28);
        transform: translateY(-1px);
    }

    .tc-mega-titulo-flecha {
        width: 18px !important;
        height: 18px !important;
        flex: 0 0 18px !important;

        margin-left: auto;

        opacity: .85;
    }

    /* El encabezado de cada grupo abre su subcategoria. */
    .tc-mega-grupo-enlace {
        color: inherit;
        text-decoration: none;
    }

    .tc-mega-grupo-enlace:hover {
        color: #ff6a00;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

    .tc-mega-titulo-pill svg {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .tc-mega-titulo-pill h3 {
        margin: 0;

        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        color: #ffffff;

        font-size: 23px;
        font-weight: 750;
        line-height: 1.2;
    }

    .tc-mega-ver-todos {
        color: #475569;

        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .tc-mega-ver-todos:hover {
        color: var(--tc-mega-naranja);
    }

    .tc-mega-bloque {
        padding-bottom: 18px;
        border-bottom: 1px solid var(--tc-mega-borde);
    }

    .tc-mega-bloque h4 {
        margin: 0 0 11px;

        color: #526782;

        font-size: 15px;
        font-weight: 650;
    }

    .tc-mega-marcas {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px 26px;
    }

    .tc-mega-marca {
        min-width: 0;

        display: flex;
        align-items: center;
        gap: 8px;

        color: #526782;

        font-size: 12.5px;
        font-weight: 450;
        text-decoration: none;
    }

    .tc-mega-marca::before {
        content: "•";
        color: #8ca0c5;
        font-size: 15px;
        line-height: 1;
    }

    .tc-mega-marca:hover {
        color: var(--tc-mega-naranja);
    }

    .tc-mega-grupos {
        padding-top: 20px;

        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
        gap: 24px 28px;
    }

    .tc-mega-grupo {
        min-width: 0;
    }

    .tc-mega-grupo h5 {
        margin: 0 0 8px;

        color: #526782;

        font-size: 15px;
        font-weight: 650;
        line-height: 1.25;
    }

    .tc-mega-subitems {
        display: grid;
        gap: 7px;
    }

    .tc-mega-subitem {
        color: #334155;

        font-size: 12.5px;
        font-weight: 400;
        line-height: 1.35;
        text-decoration: none;
    }

    .tc-mega-subitem:hover {
        color: var(--tc-mega-naranja);
    }

    .tc-mega-vacio,
    .tc-mega-cargando {
        min-height: 260px;

        display: grid;
        place-items: center;

        padding: 30px;

        color: #64748b;

        font-size: 13px;
        line-height: 1.5;
        text-align: center;
    }

    .tc-mega-mobile-exit {
        display: none;
    }

    .tc-mega-mobile-back {
        display: none;
    }

    body.tc-mega-abierto {
        overflow: hidden;
    }

    /* =========================================================
       TABLET
       ========================================================= */

    @media (max-width: 1240px) {
        .tc-mega-barra {
            grid-template-columns: 235px minmax(0, 1fr);
        }

        /* No caben rotulo y boton: se va el boton, pero el bloque entero
           sigue llevando al catalogo. */
        .tc-mega-mayorista-ver {
            display: none;
        }
    }


    @media (max-width: 1100px) {
        .tc-mega-panel {
            --tc-mega-lateral-ancho: 280px;
            --tc-mega-panel-ancho: 940px;
        }

        .tc-mega-grupos {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .tc-mega-marcas {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* =========================================================
       MOVIL
       Primera vista: categorias.
       Tap: detalle como segunda vista con boton volver.
       ========================================================= */

    /* 820 px, igual que la cabecera (cabecera.html) y la barra
       superior. Antes esto cortaba en 760: entre 761 y 820 la
       cabecera ya estaba en modo telefono pero el megamenu seguia
       en modo escritorio, y el panel se abria de apenas 280 px de
       ancho en una pantalla de 800. */
    @media (max-width: 820px) {
        .tc-mega-barra {
            height: 46px;
            grid-template-columns: minmax(0, 1fr);
        }

        .tc-mega-mayorista {
            display: none;
        }

        .tc-mega-carrusel {
            grid-template-columns: 34px minmax(0, 1fr) 34px;
        }

        .tc-mega-flecha {
            width: 28px;
            height: 28px;
        }

        .tc-mega-chip {
            height: 32px;
            padding: 0 10px;
            font-size: 11px;
        }

        .tc-mega-panel,
        .tc-mega-panel.has-detail {
            width: 100%;
            height: 100vh;
            height: 100dvh;

            display: block;

            border-radius: 0;
            background: var(--tc-mega-azul);

            transition: none;
        }

        .tc-mega-lateral {
            width: 100%;
            height: 100vh;
            height: 100dvh;

            /*
             * MOVIL:
             * atras + saludo + titulo + lista flexible (con el pie al final).
             */
            grid-template-rows: auto auto auto minmax(0, 1fr);

            padding: 14px 12px 12px;
        }

        .tc-mega-mobile-exit {
            width: 100%;
            min-height: 46px;

            margin: -2px 0 10px;
            padding: 0 8px;

            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 9px;

            border: 0;
            border-radius: 9px;

            background: rgba(255, 255, 255, 0.08);
            color: #ffffff;

            font-size: 14px;
            font-weight: 650;
            line-height: 1;

            cursor: pointer;
        }

        .tc-mega-mobile-exit:active {
            background: rgba(255, 255, 255, 0.14);
        }

        .tc-mega-mobile-exit svg {
            width: 20px;
            height: 20px;
            flex: 0 0 20px;
        }

        .tc-mega-saludo {
            min-height: 58px;
        }

        .tc-mega-categoria {
            min-height: 52px;
            grid-template-columns: 40px minmax(0, 1fr) 18px;
            gap: 10px;
        }

        .tc-mega-lateral-titulo {
            padding-top: 7px;
            padding-bottom: 14px;
            font-size: 17px;
            letter-spacing: 0.05em;
        }

        .tc-mega-categoria-nombre {
            font-size: 14px;
        }

        .tc-mega-categoria-icono {
            width: 37px;
            height: 37px;
        }

        .tc-mega-categoria-icono svg {
            width: 20px;
            height: 20px;
        }

        .tc-mega-logo-pie {
            min-height: 50px;
        }

        .tc-mega-logo-pie img {
            width: 138px;
        }

        .tc-mega-contenido {
            width: 100%;
            height: 100vh;
            height: 100dvh;

            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 4;

            padding: 14px 16px 28px;

            opacity: 0;
            visibility: hidden;
            pointer-events: none;

            transform: translateX(100%);

            transition:
                transform 0.22s ease,
                opacity 0.18s ease,
                visibility 0.18s ease;
        }

        .tc-mega-panel.has-detail .tc-mega-contenido {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateX(0);
        }

        .tc-mega-mobile-back {
            width: 100%;
            min-height: 44px;

            margin-bottom: 12px;
            padding: 0;

            display: flex;
            align-items: center;
            gap: 8px;

            border: 0;
            background: transparent;
            color: #334155;

            font-size: 14px;
            font-weight: 600;

            cursor: pointer;
        }

        .tc-mega-mobile-back svg {
            width: 18px;
            height: 18px;
        }

        .tc-mega-contenido-cabecera {
            grid-template-columns: 1fr;
            gap: 10px;
        }

        .tc-mega-titulo-pill {
            min-height: 56px;
            border-radius: 13px;
        }

        .tc-mega-titulo-pill h3 {
            font-size: 21px;
        }

        .tc-mega-ver-todos {
            justify-self: start;
            font-size: 13px;
        }

        .tc-mega-marcas,
        .tc-mega-grupos {
            grid-template-columns: 1fr 1fr;
        }

        .tc-mega-ofertas-grid {
            grid-template-columns: 1fr 1fr;
        }

        .tc-mega-ofertas-destacado {
            align-items: stretch;
            flex-direction: column;
        }

        .tc-mega-ofertas-destacado a {
            width: 100%;
        }

        .tc-mega-grupos {
            gap: 22px 18px;
        }
    }

    @media (max-width: 430px) {
        .tc-mega-marcas,
        .tc-mega-grupos,
        .tc-mega-ofertas-grid {
            grid-template-columns: 1fr;
        }
    }


/* =========================================================
   TECOMSER - FICHA DE PRODUCTO

   Solo la estructura: cada pieza vive en su componente y trae
   su propio HTML, CSS y JS.

     componentes/producto/galeria.html           imagenes + lupa
     componentes/producto/informacion.html       marca, nombre, valoracion
     componentes/producto/precio.html            precio y ahorro
     componentes/producto/acciones_compra.html   cantidad y botones
     componentes/producto/entrega.html           recojo, llegada, envio
     componentes/producto/especificaciones.html  caracteristicas
     componentes/producto/descripcion.html       texto y videos
     componentes/producto/relacionados.html      otros productos
   ========================================================= */

.tc-pg{
  /* Paleta de la ficha: tinta oscura para el texto, gris para lo secundario
     y un unico acento. El color fuerte se reserva para el precio rebajado,
     que es lo que de verdad debe saltar. */
  --tc-tinta:#2b2f38;
  --tc-suave:#6b7280;
  --tc-tenue:#9aa3af;
  --tc-linea:#e5e7eb;
  --tc-accion:#22272f;
  --tc-accion-hover:#12161c;
  --tc-oferta:#d92d20;

  width:100%;
  padding:18px 24px 60px;
  /* Mismo fondo que el catalogo: las cajas blancas resaltan sobre el. */
  background:#f4f6f9;
  color:var(--tc-tinta);
}

.tc-pg *{
  box-sizing:border-box;
}

.tc-pg-contenedor{
  width:min(100%,1480px);
  margin:0 auto;
}

.tc-pg-migas{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:18px;
  color:var(--tc-tenue);
  font-size:12.5px;
}

.tc-pg-migas a{
  color:var(--tc-suave);
  text-decoration:none;
}

.tc-pg-migas a:hover{
  color:var(--tc-tinta);
  text-decoration:underline;
}

.tc-pg-migas-actual{
  color:var(--tc-tinta);
  font-weight:600;
  max-width:340px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* ---------- Cabecera: galeria + compra ---------- */

.tc-pg-cabecera{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(360px,.88fr);
  gap:36px;
  align-items:start;
  padding:26px;
  border:1px solid var(--tc-linea);
  border-radius:12px;
  background:#fff;
}

/* Cada seccion de abajo es su propia tarjeta blanca. */
.tc-pg-contenedor > .tc-pg-bloque,
.tc-pg-contenedor > .tc-combo,
.tc-pg-contenedor > .tc-tabs,
.tc-pg-contenedor > .tc-pg-carrusel,
.tc-pg-contenedor > #opiniones{
  margin-top:18px;
  padding:24px 26px;
  border:1px solid var(--tc-linea);
  border-radius:12px;
  background:#fff;
}

.tc-pg-columna-galeria,
.tc-pg-columna-compra{
  min-width:0;
}

@media (max-width:900px){
  .tc-pg{
    padding:12px 16px 44px;
  }

  /* EL ORDEN EN EL TELÉFONO
     Quien entra a un producto quiere ver, en este orden: la foto, qué es,
     cuánto cuesta y si lo hay. Nada más antes de eso.

     Con las dos columnas apiladas sin más, el stock por sede caía ENTRE la
     foto y el nombre —porque en el escritorio va al costado de la imagen— y
     empujaba el precio media pantalla hacia abajo.

     `display:contents` hace desaparecer las dos columnas de la maquetación
     sin tocar el HTML: sus hijos pasan a ser hijos directos de la cabecera y
     entonces `order` los coloca uno a uno. En el escritorio las columnas
     siguen intactas. */
  .tc-pg-cabecera{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:18px;
  }

  .tc-pg-columna-galeria,
  .tc-pg-columna-compra{
    display:contents;
  }

  /* EL COMODÍN VA PRIMERO, NO DESPUÉS
     `.tc-pg-cabecera > *` y `.tc-pg-galeria` tienen la MISMA especificidad
     —una clase cada uno— así que gana la última escrita. Puesto después,
     este `order:20` anulaba los doce de abajo y dejaba todo en el orden del
     HTML, que es justo lo que se está cambiando.

     Aquí arriba hace lo que debe: es el valor por defecto, y cada bloque con
     nombre propio lo pisa. Así un bloque nuevo cae al final en vez de
     colarse antes de la foto. */
  .tc-pg-cabecera > *   { order:20; }

  /* Las dos columnas son `display:contents`, así que el comodín de arriba
     —`.tc-pg-cabecera > *`— no llega hasta aquí: estos bloques son nietos,
     no hijos, y el selector de hijo directo no los ve. Al bloque que no
     aparezca en esta lista le queda el `order:0` por defecto y se sube al
     principio de todo, encima de la imagen. Le pasaba a la disponibilidad y
     al bloque de WhatsApp. Por eso van los catorce nombrados uno a uno. */
  .tc-pg-galeria        { order:1; }
  .tc-pg-marca          { order:2; }
  .tc-pg-nombre         { order:3; }
  .tc-pg-meta           { order:4; }
  .tc-pg-precio         { order:5; }
  .tc-pg-quedan,
  .tc-pg-hay            { order:6; }
  .tc-var               { order:7; }
  .tc-pg-acciones       { order:8; }
  .tc-ss                { order:9; }
  .tc-pg-wsp            { order:10; }
  .tc-regalos           { order:11; }
  .tc-pack              { order:12; }
  .tc-pg-ficha          { order:13; }
  .tc-pg-entrega        { order:14; }

  /* EL NOMBRE, UNA SOLA VEZ
     La última miga del rastro es el nombre completo del producto. En una
     pantalla angosta se parte en dos líneas y parece un título encima de la
     foto — que es justo lo que no se quiere, porque el nombre de verdad va
     debajo. Se queda el camino hasta la categoría, que sí orienta. */
  .tc-pg-migas-actual{ display:none; }
  .tc-pg-migas > span[aria-hidden="true"]:last-of-type{ display:none; }

  .tc-pg-contenedor > .tc-pg-bloque,
  .tc-pg-contenedor > .tc-combo,
  .tc-pg-contenedor > .tc-tabs,
  .tc-pg-contenedor > .tc-pg-carrusel,
  .tc-pg-contenedor > #opiniones{
    padding:18px;
  }
}

@media (max-width:680px){
  .tc-pg{
    padding:10px 10px 34px;
  }

  .tc-pg-cabecera{
    gap:18px;
    padding:14px;
  }

  .tc-pg-contenedor > .tc-pg-bloque,
  .tc-pg-contenedor > .tc-combo,
  .tc-pg-contenedor > .tc-tabs,
  .tc-pg-contenedor > .tc-pg-carrusel,
  .tc-pg-contenedor > #opiniones{
    padding:14px;
  }
}

/* =========================================================
   LA FICHA COMPACTA DEL TELÉFONO

   Lo que se ve bajo la foto era una columna de bloques sueltos, cada uno
   con su margen propio MÁS los 18 px que la ficha pone entre todos: marca,
   aire, nombre, aire, código, raya, aire, precio, un hueco vacío reservado
   para el precio anterior —aunque no hubiera oferta—, aire, "con tarjeta",
   aire, disponible. En la primera pantalla del teléfono no llegaba a verse
   el voltaje.

   Ahora se lee en filas, como en las tiendas grandes:

     Hp  Código 01160 · Modelo 4.5X3.0MM
     Cargador Laptop HP Punta Celeste 4.5X3.0MM
     S/30.00                      Con tarjeta S/31.50 +5%
     ✓ Disponible · entrega inmediata

   LA OFERTA SE ABRE SOLA
   El precio tachado y el -% entran en la fila del precio solo cuando
   existen. Sin oferta no ocupan nada. Con oferta, si no caben junto a
   "Con tarjeta", esta baja a la línea de abajo a la derecha. La frase
   "Ahorras X% sobre el precio regular" se quita: el -% ya lo dice.

   POR QUÉ `.tc-pg` DELANTE DE CADA REGLA
   Los componentes —precio, información, selector— traen su CSS y se
   pintan DESPUÉS que este. Con la misma especificidad ganaría el suyo. Una
   clase más delante y gana este, sin tocar el del escritorio.

   Y POR QUÉ LA CABECERA PASA A FILAS QUE SE PARTEN
   En el teléfono la cabecera es una columna flexible con las dos columnas
   en `display:contents` (ver arriba). Para que marca y código compartan
   fila hace falta que sea una fila que se parte: todo ocupa el 100 %
   salvo esos dos, que se reparten la línea. El orden sigue siendo el de
   la lista de `order`, solo que el código sube antes del nombre.
   ========================================================= */
@media (max-width:900px){
  .tc-pg .tc-pg-cabecera{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
    gap:6px 10px;
  }

  .tc-pg .tc-pg-cabecera > *,
  .tc-pg .tc-pg-columna-galeria > *,
  .tc-pg .tc-pg-columna-compra > *{
    flex:0 0 100%;
    min-width:0;
  }

  /* --- Marca y códigos, en la misma línea --- */
  .tc-pg .tc-pg-marca{
    flex:0 0 auto;
    order:2;
    margin-top:6px;
    color:var(--tc-tinta);
    font-size:12.5px;
    font-weight:700;
    line-height:1.2;
  }

  .tc-pg .tc-pg-meta{
    flex:1 1 0;
    order:3;
    margin:6px 0 0;
    padding:0;
    border:0;
    gap:3px 10px;
    line-height:1.2;
  }

  .tc-pg .tc-pg-codigos{
    gap:2px 10px;
    font-size:11.5px;
  }

  .tc-pg .tc-pg-rating-nota,
  .tc-pg .tc-pg-rating-total{
    font-size:11.5px;
  }

  .tc-pg .tc-pg-estrella{
    font-size:13px;
  }

  /* --- El nombre: dos líneas, y "Ver más" si hay más ---
     Hay nombres de proveedor que son la ficha técnica entera: "Laptop HP
     Victus 15-fa2012la 15.6" FHD IPS 144Hz Intel Core i5-13420H 16GB DDR4
     512GB SSD RTX 3050 6GB Windows 11". En el teléfono eran cinco líneas
     antes del precio. Se cortan en dos; lo demás está a un toque, y además
     en las características de más abajo. */
  .tc-pg .tc-pg-nombre{
    order:4;
    margin:0;
    font-size:16.5px;
    font-weight:600;
    line-height:1.3;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }

  .tc-pg .tc-pg-nombre.is-completo{
    display:block;
    -webkit-line-clamp:unset;
    overflow:visible;
  }

  .tc-pg .tc-pg-nombre-mas{
    order:4;
    flex:0 0 auto;
    margin-top:-4px;
  }

  /* --- Precio y tarjeta, en la misma fila --- */
  .tc-pg .tc-pg-precio{
    order:5;
    margin:2px 0 0;

    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:2px 8px;
  }

  .tc-pg .tc-pg-precio-fila{
    gap:7px;
  }

  .tc-pg .tc-pg-precio-valor{
    font-size:26px;
    font-weight:800;
  }

  .tc-pg .tc-pg-precio-dscto{
    align-self:center;
    padding:2px 6px;
    font-size:11.5px;
  }

  .tc-pg .tc-pg-precio-anterior{
    min-height:0;
    margin:0;
    font-size:13px;
  }

  .tc-pg .tc-pg-ahorro{
    display:none;
  }

  .tc-pg .tc-pg-tarjeta{
    margin:0 0 0 auto;
    gap:5px;
    white-space:nowrap;
  }

  .tc-pg .tc-pg-tarjeta-texto{
    font-size:12px;
  }

  .tc-pg .tc-pg-tarjeta-valor{
    font-size:14.5px;
  }

  .tc-pg .tc-pg-tarjeta-extra{
    font-size:11px;
  }

  /* --- Disponible --- */
  .tc-pg .tc-pg-hay,
  .tc-pg .tc-pg-quedan{
    margin:0;
    font-size:12px;
  }

  .tc-pg .tc-pg-quedan{
    justify-self:start;
    width:auto;
    flex:0 0 auto;
  }

  /* --- El selector, pegado --- */
  .tc-pg .tc-var{
    margin:4px 0 0;
    padding:10px 0 12px;
    gap:10px;
  }

  .tc-pg .tc-var-eje{
    gap:6px;
  }

  .tc-pg .tc-pg-acciones{
    margin-top:2px;
  }
}


/* =========================================================
   TECOMSER - TARJETA DE PRODUCTO
   Datos reales del productCard de Go. Nada esta escrito a mano:
     - Las etiquetas de arriba salen de etiquetas_producto,
       con el color de fondo y de texto que se define en el admin.
     - El aviso de entrega sale del campo "entrega_fecha" del producto.
     - El boton de carrito aparece al pasar el mouse por la tarjeta;
       en pantallas tactiles se muestra siempre.
   ========================================================= */

.tc-producto-card{
  --tc-navy:#071457;
  --tc-orange:#ff4b0b;
  --tc-green:#15803d;
  --tc-red:#e11d48;
  --tc-text:#111827;
  --tc-muted:#64748b;
  --tc-border:#e5e7eb;

  min-width:0;
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--tc-border);
  border-radius:10px;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}

.tc-producto-card:hover{
  border-color:#cbd5e1;
  box-shadow:0 10px 28px rgba(15,23,42,.09);
  transform:translateY(-2px);
}

/* ---------- Imagen ---------- */

.tc-producto-media{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:#fff;
}

.tc-producto-media>a{
  display:block;
  width:100%;
  height:100%;
}

.tc-producto-img{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  padding:16px;
  opacity:0;
  transition:opacity .22s ease,transform .2s ease;
}

.tc-producto-img.is-activa{
  opacity:1;
}

.tc-producto-card:hover .tc-producto-img.is-activa{
  transform:scale(1.025);
}

/* ---------- Puntos de la galeria ---------- */

.tc-producto-puntos{
  position:absolute;
  left:0;
  right:0;
  bottom:9px;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 10px;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease;
}

.tc-producto-card:hover .tc-producto-puntos,
.tc-producto-card:focus-within .tc-producto-puntos{
  opacity:1;
  transform:none;
}

.tc-producto-punto{
  width:8px;
  height:8px;
  padding:0;
  flex:0 0 8px;
  border:0;
  border-radius:50%;
  background:#cbd5e1;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}

.tc-producto-punto:hover{
  transform:scale(1.25);
}

.tc-producto-punto.is-activo{
  width:20px;
  flex:0 0 20px;
  border-radius:999px;
  background:var(--tc-navy);
}

/* En pantallas tactiles los puntos se ven siempre: no hay hover. */
@media(hover:none){
  .tc-producto-puntos{
    opacity:1;
    transform:none;
  }
}

/* ---------- Favorito ---------- */

.tc-producto-fav{
  position:absolute;
  top:10px;
  right:10px;
  z-index:3;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid #e2e8f0;
  border-radius:50%;
  background:rgba(255,255,255,.96);
  color:#475569;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(15,23,42,.08);
  transition:color .18s ease,border-color .18s ease,background .18s ease,transform .18s ease;
}

.tc-producto-fav:hover,
.tc-producto-fav.is-active{
  border-color:#fecdd3;
  background:#fff1f2;
  color:var(--tc-red);
}

.tc-producto-fav:active{
  transform:scale(.95);
}

.tc-producto-fav svg{
  width:19px;
  height:19px;
}

.tc-producto-fav.is-active svg path{
  fill:currentColor;
}

/* ---------- Cuerpo ---------- */

.tc-producto-body{
  flex:1;
  min-width:0;
  padding:11px 13px 13px;
  display:flex;
  flex-direction:column;

  /* Lo que decide si los botones caben no es el tamaño de la pantalla: es el
     ancho de esta tarjeta. En el carrusel de la portada una tarjeta mide
     215 px con la pantalla en 1400, y la regla de móvil no llegaba a saltar:
     "Añadir al carrito" se partía en dos líneas y "Comparar" salía cortado.
     Declarándolo contenedor, los botones de abajo preguntan por su propio
     hueco y no por el del navegador. */
  container-type:inline-size;
  container-name:tarjeta;
}

.tc-producto-brand{
  min-height:16px;
  margin-bottom:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8b98a9;
  font-size:11px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* EL NOMBRE, EN EL AZUL DE LA MARCA

   Estaba en gris pizarra y solo se ponía azul al pasar el ratón por encima.
   En un celular no hay ratón: el nombre no llegaba a tener su color NUNCA, y
   la tarjeta quedaba en gris y negro con el naranja del delivery suelto
   abajo, sin nada que los ate.

   En azul, la tarjeta se lee entera con los dos colores de la casa: el azul
   en el nombre y en el botón, el naranja en el precio con tarjeta y en el
   delivery. Y de paso el nombre se lee como lo que es —un enlace— y no como
   un título suelto. */
.tc-producto-name{
  min-height:42px;
  margin:0;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--tc-navy);
  font-size:14.5px;
  font-weight:700;
  line-height:1.42;
}

.tc-producto-name a{
  color:inherit;
  text-decoration:none;
}

/* SIN SUBRAYADO AL PASAR POR ENCIMA

   No lleva ninguna regla de :hover a propósito. El nombre ya está en el azul
   de la marca, y la tarjeta entera responde al ratón —se levanta, cambia el
   borde y le crece la sombra—, así que el subrayado no añadía información:
   solo ensuciaba dos líneas de texto justo cuando se están leyendo.

   Si alguien vuelve a añadirlo aquí, que sepa que en pantalla táctil se queda
   pegado después de tocar y parece que el nombre está seleccionado.

/* ---------- Valoracion ---------- */

.tc-producto-rating{
  margin-top:7px;
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0;
}

.tc-producto-estrellas{
  display:inline-flex;
  gap:1px;
  line-height:1;
}

.tc-producto-estrella{
  color:#dfe4ea;
  font-size:14px;
  line-height:1;
}

.tc-producto-estrella.is-llena{
  color:#f59e0b;
}

.tc-producto-estrella.is-media{
  color:#f59e0b;
  opacity:.45;
}

.tc-producto-rating-nota{
  color:#334155;
  font-size:12px;
  font-weight:750;
}

.tc-producto-rating-total{
  color:#94a3b8;
  font-size:11.5px;
}

/* ---------- Precio ---------- */

.tc-producto-price-block{
  /* auto y no 10px: desde que la valoración solo sale cuando alguien ha
     votado, en una misma fila conviven tarjetas con ella y sin ella. Con un
     margen fijo, el precio y los botones quedaban a distinta altura en cada
     una y la fila parecía rota.

     Empujándolo al fondo, la mitad de abajo de todas las tarjetas —precio,
     entrega y botones— queda a la misma altura. De paso se arregla lo mismo
     con los nombres de una línea frente a los de dos, que ya pasaba antes. */
  margin-top:auto;
  padding-top:10px;
}

.tc-producto-price-old{
  min-height:18px;
  color:#94a3b8;
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  text-decoration:line-through;
}


.tc-producto-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
}

.tc-producto-price{
  color:var(--tc-text);
  font-size:27px;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.02em;
}

.tc-producto-dscto{
  color:var(--tc-green);
  font-size:13.5px;
  font-weight:750;
  white-space:nowrap;
}

.tc-producto-desde{
  margin-right:4px;
  color:var(--tc-muted);
  font-size:11px;
  font-weight:600;
}

/* ---------- Precio con tarjeta ---------- */

.tc-producto-credit{
  min-height:34px;
  margin-top:9px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
}

.tc-producto-credit>strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#111827;
  font-size:18px;
  font-weight:700;
  line-height:1;
}

.tc-producto-credit-label{
  color:#0f172a;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}


.tc-producto-credit-extra{
  color:#94a3b8;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}

/* ---------- Beneficios de entrega ---------- */

.tc-producto-entrega{
  margin-top:11px;
  padding-top:11px;
  display:grid;
  gap:8px;
  border-top:1px solid #edf0f3;
}

.tc-producto-entrega-fila{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  color:var(--tc-green);
  font-size:13px;
  line-height:1.5;
}

.tc-producto-entrega-fila svg{
  flex:0 0 18px;
  width:18px;
  height:18px;
  margin-top:.5px;
  color:var(--tc-green);
}

.tc-producto-entrega-texto{
  min-width:0;
}

.tc-producto-entrega-texto b{
  color:var(--tc-green);
  font-weight:800;
}

/* ---------- Aviso de delivery por ubicacion ---------- */

.tc-producto-delivery{
  margin-top:11px;
  padding-bottom:2px;
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--tc-orange);
  font-size:13px;
  font-weight:800;
  line-height:1.35;
}

.tc-producto-delivery svg{
  flex:0 0 18px;
  width:18px;
  height:18px;
}

.tc-producto-delivery b{
  font-weight:800;
}

/* ---------- Acciones ---------- */

/* El boton reserva su espacio siempre para que la tarjeta no salte,
   pero solo se ve cuando el usuario apunta la tarjeta o la enfoca
   con el teclado. */
.tc-producto-actions{
  margin-top:auto;
  padding-top:16px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:8px;
  opacity:0;
  transform:translateY(5px);
  transition:opacity .18s ease,transform .18s ease;
}

.tc-producto-card:hover .tc-producto-actions,
.tc-producto-card:focus-within .tc-producto-actions{
  opacity:1;
  transform:none;
}

.tc-producto-cart{
  width:100%;
  min-height:44px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:var(--tc-navy);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:800;
  cursor:pointer;
  transition:background .18s ease,transform .18s ease;
}

.tc-producto-cart:hover{
  background:#050f42;
}

/* "Elegir opciones" es un enlace: se centra y se ve igual que el botón. */
a.tc-producto-cart{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.tc-producto-cart:active{
  transform:scale(.985);
}

.tc-producto-compare{
  width:100%;
  min-height:44px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1.5px solid #cfd8e5;
  border-radius:8px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  font-size:12.5px;
  font-weight:750;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease,color .18s ease;
}

.tc-producto-compare svg{
  flex:0 0 15px;
  width:15px;
  height:15px;
  color:#64748b;
}

.tc-producto-compare:hover{
  border-color:var(--tc-navy);
  color:var(--tc-navy);
}

.tc-producto-compare:hover svg{
  color:var(--tc-navy);
}

/* Ya agregado a la comparacion. */
.tc-producto-compare.is-activo{
  border-color:var(--tc-orange);
  background:#fff4ef;
  color:var(--tc-orange);
}

.tc-producto-compare.is-activo svg{
  color:var(--tc-orange);
}

.tc-producto-card a:focus-visible,
.tc-producto-card button:focus-visible,
.tc-producto-card input:focus-visible{
  outline:3px solid rgba(7,20,87,.14);
  outline-offset:2px;
}

/* En pantallas tactiles no existe el hover: el boton va siempre visible. */
@media(hover:none){
  .tc-producto-actions{
    opacity:1;
    transform:none;
  }
}

/* =====================================================================
   LA TARJETA DEL INICIO ES UN ESCAPARATE, NO UN MOSTRADOR

   Es la misma tarjeta que en el catálogo -una sola pieza, no dos que hay
   que mantener a la par- pero en la portada se le quita todo lo que sirve
   para decidir y comprar:

     · las líneas de recojo y delivery,
     · el aviso de "Delivery a Tarapoto",
     · los botones de Agregar y Comparar.

   POR QUÉ

   En la portada nadie está comparando todavía: está mirando. Repetir en
   cada una de las doce tarjetas de un carrusel que se recoge en Miguel
   Grau #440 llena la pantalla de la misma frase doce veces y empuja el
   precio hacia abajo, que es lo único que se mira de un vistazo. Sin todo
   eso caben más productos en el mismo alto y la fila se lee de corrido.

   Quien quiere comprar entra al catálogo o a la ficha, y ahí sí está todo.

   `.tc-carrusel-celda` es el contenedor que envuelve cada tarjeta en los
   carruseles de la portada, y solo existe ahí: en el catálogo, en el blog
   y en favoritos la tarjeta sigue entera.
   ===================================================================== */

.tc-carrusel-celda .tc-producto-entrega,
.tc-carrusel-celda .tc-producto-delivery,
.tc-carrusel-celda .tc-producto-actions{
  display:none !important;
}


/* ---------- Segun lo ancha que sea la tarjeta ---------- */

.tc-producto-cart-largo{ display:block; }
.tc-producto-cart-corto{ display:none; }

/* Tarjeta estrecha: "Comparar" se queda en su icono y le cede el sitio al
   carrito, que es el botón que importa. El icono conserva su nombre para
   quien navega a ciegas. */
@container tarjeta (max-width:250px){
  .tc-producto-actions{ grid-template-columns:minmax(0,1fr) 40px; gap:6px; }
  .tc-producto-cart{ min-height:38px; padding:0 8px; font-size:11.5px; white-space:nowrap; }
  .tc-producto-compare{ min-height:38px; padding:0; gap:0; }
  .tc-producto-compare svg{ display:block; }
  .tc-producto-compare span{
    /* Fuera de la vista pero no del lector de pantalla: sin texto, el botón
       se anuncia como "botón" a secas. */
    position:absolute; width:1px; height:1px;
    margin:-1px; padding:0; border:0;
    clip-path:inset(50%); overflow:hidden; white-space:nowrap;
  }
}

/* Más estrecha todavía —el carrusel en un teléfono—: ni "Añadir al carrito"
   abreviado entra, así que pasa a "Agregar". */
@container tarjeta (max-width:185px){
  .tc-producto-actions{ grid-template-columns:minmax(0,1fr) 34px; gap:5px; padding-top:12px; }
  .tc-producto-cart{ min-height:34px; padding:0 6px; font-size:11px; }
  .tc-producto-cart-largo{ display:none; }
  .tc-producto-cart-corto{ display:block; }
  .tc-producto-compare{ min-height:34px; }
  .tc-producto-compare svg{ flex:0 0 14px; width:14px; height:14px; }
}

/* Movil: dos productos por fila, con el texto todavia legible. */
@media(max-width:680px){
  .tc-producto-img{padding:10px}
  .tc-producto-puntos{bottom:7px;gap:5px}
  
  .tc-producto-fav{top:7px;right:7px;width:33px;height:33px}
  .tc-producto-body{padding:10px}
  .tc-producto-brand{font-size:10px}
  .tc-producto-name{min-height:38px;font-size:13px}
  .tc-producto-price-old{font-size:11.5px}
  .tc-producto-price{font-size:21px}
  .tc-producto-dscto{font-size:12px}
  /* EL PRECIO CON TARJETA, ENTERO
     En dos columnas no cabían "Tarjeta", "S/3,924.08" y "+5%" en una línea
     y el monto salía como "S/3,924.…": el número cortado justo en los
     céntimos. En la tarjeta del teléfono el "+5%" se va —la ficha lo sigue
     diciendo al lado del precio— y el monto se ajusta al ancho de pantalla
     en vez de un tamaño fijo. */
  .tc-producto-credit{gap:6px;grid-template-columns:auto minmax(0,1fr)}
  .tc-producto-credit>strong{font-size:clamp(13px,3.7vw,15.5px);overflow:visible;text-overflow:clip}
  .tc-producto-credit-label{font-size:10.5px}
  .tc-producto-credit-extra{display:none}
  .tc-producto-entrega-fila{font-size:12px;gap:6px}
  .tc-producto-entrega-fila svg{flex:0 0 14px;width:14px;height:14px}
  .tc-producto-cart,.tc-producto-compare{min-height:40px;font-size:11px;padding:0 6px}
  .tc-producto-delivery{font-size:11px}
  .tc-producto-estrella{font-size:13px}
}


/* =========================================================
   TECOMSER - PRODUCTO / GALERIA
   Imagen grande con miniaturas al costado. Solo la primera se
   descarga al abrir; las demas llegan al elegirlas.
   ========================================================= */

.tc-pg-galeria{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:14px;
  align-items:start;
}

/* SIN NINGÚN MEDIO: la imagen ocupa todo el ancho en lugar de quedar
   encajada en la columna estrecha.

   Ya no aplica a los productos de una sola foto -esos también llevan su
   miniatura, para que la ficha no cambie de forma según cuántas haya-, sino
   solo al que no tiene ninguna. */
.tc-pg-galeria--sola{
  grid-template-columns:minmax(0,1fr);
}

/* ---------- Miniaturas ---------- */

.tc-pg-miniaturas{
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:520px;
  overflow-y:auto;
  padding-right:2px;
}

.tc-pg-miniaturas::-webkit-scrollbar{
  width:5px;
}

.tc-pg-miniaturas::-webkit-scrollbar-thumb{
  border-radius:999px;
  background:#cbd5e1;
}

.tc-pg-miniatura{
  flex:0 0 auto;
  width:74px;
  height:74px;
  padding:4px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:6px;
  background:transparent;
  cursor:pointer;
  overflow:hidden;
  opacity:.55;
  transition:opacity .16s ease;
}

.tc-pg-miniatura:hover{
  opacity:1;
}

/* La imagen que se está viendo queda a plena opacidad, sin marco. */
.tc-pg-miniatura.is-activa{
  opacity:1;
}

.tc-pg-miniatura img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* La miniatura de video se distingue con un triangulo de reproduccion. */
.tc-pg-miniatura--video{
  position:relative;
  border-radius:6px;
  background:#0b1220;
}

.tc-pg-miniatura--video img{
  opacity:.55;
}

.tc-pg-miniatura--video::after{
  content:"";
  position:absolute;
  width:0;
  height:0;
  border-style:solid;
  border-width:7px 0 7px 11px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));
}

/* ---------- Imagen principal ---------- */

.tc-pg-principal{
  position:relative;
  width:100%;
  min-height:360px;
  padding:20px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:10px;
  background:#fff;
}

/* La imagen se muestra entera: se limita por su lado mayor y conserva
   su proporcion, en lugar de rellenar una caja cuadrada y recortarse. */
.tc-pg-principal img{
  max-width:100%;
  max-height:520px;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* El recorte solo hace falta mientras se amplia con la lupa. */
.tc-pg-principal.is-zoom{
  overflow:hidden;
}

/* Reproductor: ocupa el mismo espacio que la imagen grande. */
.tc-pg-video{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:3;
  display:none;
  /* Las mismas esquinas que la caja de la foto: el video tapa el visor entero
     y con las esquinas rectas rompia el redondeo de la tarjeta.

     El redondeo va tambien en el iframe, y no solo aqui: un iframe pinta lo
     suyo por encima y no le importa el overflow del padre. */
  border-radius:10px;
  overflow:hidden;
  background:#0b1220;
}

.tc-pg-video.is-visible{
  display:block;
}

/* EL TELEFONO GIRADO CON EL VIDEO ABIERTO: el video ocupa la pantalla.

   No se puede pedir la pantalla completa del navegador solo por girar
   (el iPhone no la da a un iframe y Chrome la exige tras un toque), asi
   que el reproductor se estira sobre todo lo demas. El iframe no se mueve
   de sitio: moverlo en el DOM lo recargaria y el video volveria a empezar.
   body.tc-sin-scroll sube .tc-contenido por encima de la cabecera y
   esconde los botones flotantes (base.html). */
.tc-pg-video-salir{ display:none; }

body.tc-video-completo .tc-pg-video.is-visible{
  position:fixed !important;
  inset:0 !important;
  z-index:2147483000;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  aspect-ratio:auto !important;
  transform:none !important;
  border-radius:0;
  background:#000;
}

body.tc-video-completo .tc-pg-video.is-visible iframe,
body.tc-video-completo .tc-pg-video.is-visible video{
  border-radius:0;
}

body.tc-video-completo .tc-pg-video-salir{
  position:absolute;
  /* A la derecha: a la izquierda YouTube pone el logo del canal. */
  top:max(10px, env(safe-area-inset-top));
  right:max(10px, env(safe-area-inset-right));
  z-index:2;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.55);
  color:#fff;
  cursor:pointer;
}

.tc-pg-video-salir svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
}

.tc-pg-video iframe,
.tc-pg-video video{
  width:100%;
  height:100%;
  border:0;
  border-radius:10px;
  display:block;
}

/* Al apuntar la imagen se amplia la zona senalada. */
.tc-pg-principal.is-zoom img{
  cursor:zoom-in;
  transform:scale(1.9);
  transition:transform .12s ease-out;
}

.tc-pg-etiquetas{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px;
  pointer-events:none;
}

/* LAS ETIQUETAS DE LA FOTO

   Eran tres rectangulos de esquinas casi rectas, en verde y rojo puros,
   pegados unos sobre otros. Se veian, pero se veian baratos: un color plano
   a tope de saturacion sobre una foto de producto compite con el producto.

   Lo que cambia:

     · Pildora entera en vez de esquina de 4 px. Es la forma que ya usan el
       buscador y las demas etiquetas de la tienda; tres radios distintos en
       la misma pantalla se notan aunque nadie sepa decir por que.

     · Una sombra corta debajo, para que la etiqueta se apoye sobre la foto
       en vez de parecer pegada con cinta. Y un filo claro por dentro, que es
       lo que la separa cuando la foto de detras es del mismo color.

     · Mayusculas pequeñas y bien espaciadas: a este tamaño se leen mejor que
       la minuscula, y es lo que se espera de una etiqueta y no de un boton.

   El color sigue saliendo de la ficha de cada etiqueta —el panel lo
   configura— asi que aqui no se toca ninguno: se toca como se presenta. */
.tc-pg-etiqueta{
  min-height:26px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:var(--tc-tinta);
  color:#fff;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;

  box-shadow:
    0 2px 6px rgba(8,13,30,.22),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* El descuento manda sobre las demas: es el unico numero de los tres y el
   que decide la compra. Va un punto mas grande y con la cifra en ancho fijo,
   que si no "-9%" y "-13%" bailan de tamaño entre una tarjeta y otra. */
.tc-pg-etiqueta--dscto{
  background:var(--tc-oferta);
  font-size:12px;
  letter-spacing:.03em;
  font-variant-numeric:tabular-nums;
}

@media (max-width:900px){
  .tc-pg-galeria{
    grid-template-columns:minmax(0,1fr);
    gap:11px;
  }

  .tc-pg-miniaturas{
    order:2;
    flex-direction:row;
    max-height:none;
    overflow-x:auto;
    padding-bottom:4px;
  }

  .tc-pg-principal{
    order:1;
    min-height:280px;
    padding:12px;
  }

  .tc-pg-principal img{
    max-height:60vh;
  }

  /* En pantalla tactil el zoom estorba mas de lo que ayuda. */
  .tc-pg-principal.is-zoom img{
    transform:none;
  }
}


/* =========================================================
   BOTON DE PANTALLA COMPLETA
   ========================================================= */
.tc-pg-lupa{
  position:absolute; right:12px; bottom:12px; z-index:3;
  display:grid; place-items:center;
  width:40px; height:40px;
  border:1px solid rgba(15,23,42,.10); border-radius:10px;
  background:rgba(255,255,255,.92); color:#334155;
  cursor:pointer; padding:0;
  box-shadow:0 2px 10px rgba(15,23,42,.10);
  transition:background .15s ease, color .15s ease, transform .15s ease;
}
.tc-pg-lupa svg{ width:19px; height:19px; }
.tc-pg-lupa:hover{ background:#ff4b0b; color:#fff; transform:translateY(-1px); }
/* Encima del video no pinta nada: ahi no hay foto que ampliar. */
.tc-pg-principal:has(.tc-pg-video.is-visible) .tc-pg-lupa{ display:none; }


/* =========================================================
   VISOR A PANTALLA COMPLETA

   Fondo casi negro y nada mas en pantalla: es la unica forma de
   que se aprecie el detalle de un equipo. Los controles flotan
   encima con poco contraste hasta que se pasa por ellos.
   ========================================================= */
.tc-pg-visor{
  position:fixed; inset:0;
  /* Tope de la pila. El numero por si solo no bastaba: el visor nacia dentro
     de .tc-contenido, que abre su propio contexto de apilado, y ahi dentro la
     cabecera ganaba igual. Por eso el guion lo mueve al <body> al arrancar
     (ver "SACAR EL VISOR DEL ARBOL" mas abajo); esto es la otra mitad. */
  z-index:2147483000;
  display:grid;
  /* minmax(0,1fr) y no 1fr a secas. El minimo automatico de una celda es el
     tamano de su contenido, asi que con 1fr la fila crecia hasta la altura
     real de la foto y esta se salia por arriba y por abajo en vez de
     encogerse para caber. */
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:auto minmax(0,1fr) auto auto;
  grid-template-areas:
    "barra  barra   barra"
    "izq    lienzo  der"
    "tira   tira    tira"
    "pista  pista   pista";
  /* Gris neutro y opaco. Casi negro daba un contraste duro con las fotos de
     producto, que vienen sobre fondo blanco; el gris las enmarca sin pelearse
     con ellas. Opaco porque el 3% de transparencia de antes dejaba ver las
     pestanas de la ficha. */
  background:#3d424a;
  opacity:0; transition:opacity .18s ease;
}
.tc-pg-visor[hidden]{ display:none; }
.tc-pg-visor.is-abierto{ opacity:1; }

.tc-pg-visor-barra{
  grid-area:barra;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px;
}
.tc-pg-visor-cuenta{
  color:rgba(255,255,255,.72); font-size:.85rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.tc-pg-visor-cerrar,
.tc-pg-visor-flecha{
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.16); border-radius:999px;
  background:rgba(255,255,255,.06); color:#fff;
  cursor:pointer; padding:0;
  transition:background .15s ease, border-color .15s ease;
}
.tc-pg-visor-cerrar:hover,
.tc-pg-visor-flecha:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.36); }
.tc-pg-visor-cerrar{ width:40px; height:40px; }
.tc-pg-visor-cerrar svg{ width:20px; height:20px; }

.tc-pg-visor-flecha{ width:48px; height:48px; margin:0 14px; align-self:center; }
.tc-pg-visor-flecha svg{ width:24px; height:24px; }
.tc-pg-visor-flecha--izq{ grid-area:izq; }
.tc-pg-visor-flecha--der{ grid-area:der; }
/* Con una sola foto las flechas sobran. */
.tc-pg-visor.es-unica .tc-pg-visor-flecha,
.tc-pg-visor.es-unica .tc-pg-visor-tira,
.tc-pg-visor.es-unica .tc-pg-visor-cuenta{ display:none; }

.tc-pg-visor-lienzo{
  grid-area:lienzo;
  /* min-height/min-width en cero: sin esto la celda se niega a ser mas
     pequena que su contenido y crece hasta la altura real de la foto. */
  min-height:0; min-width:0;
  position:relative;
  overflow:hidden;
  cursor:zoom-in;
}

/* La caja de la foto ocupa el hueco entero y "contain" encaja dentro la
   imagen: se agranda o se encoge hasta caber, centrada y sin recortar,
   sea vertical, horizontal o cuadrada.

   width y height van al 100% de forma explicita, no en auto. Una imagen es
   un elemento reemplazado: con width:auto no rellena los anclajes -como
   haria un div- sino que se queda en su tamano natural, y los cuatro lados
   fijados pasan a sobrar. Eso dejaba la foto pequena y pegada arriba a la
   izquierda.

   El aire va como padding del propio <img> con border-box, porque una caja
   posicionada se mide contra la caja de relleno del padre y el padding del
   padre no la afectaria. */
.tc-pg-visor-lienzo img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  padding:14px;
  box-sizing:border-box;
  object-fit:contain;
  transition:transform .22s ease;
  will-change:transform;
  user-select:none; -webkit-user-drag:none;
}
/* Acercado: el punto donde se hizo clic manda, para no perder de vista
   justo lo que se queria mirar. */
.tc-pg-visor-lienzo.es-cerca{ cursor:zoom-out; }
.tc-pg-visor-lienzo.es-cerca img{ transform:scale(2.4); }

.tc-pg-visor-tira{
  grid-area:tira;
  display:flex; gap:8px; justify-content:center; flex-wrap:nowrap;
  overflow-x:auto; padding:10px 16px 4px;
  scrollbar-width:thin;
}
.tc-pg-visor-mini{
  flex:0 0 auto; width:62px; height:62px; padding:3px;
  border:1.6px solid transparent; border-radius:9px;
  background:rgba(255,255,255,.94); cursor:pointer;
  opacity:.55; transition:opacity .15s ease, border-color .15s ease;
}
.tc-pg-visor-mini img{ width:100%; height:100%; object-fit:contain; }
.tc-pg-visor-mini:hover{ opacity:.85; }
.tc-pg-visor-mini.is-activa{ opacity:1; border-color:#ff4b0b; }

.tc-pg-visor-pista{
  grid-area:pista; margin:0; padding:6px 16px 14px;
  text-align:center; color:rgba(255,255,255,.42); font-size:.76rem;
}

@media (max-width:820px){
  /* En el telefono las flechas laterales se comen el ancho de la foto y
     ademas el gesto natural es arrastrar. Se quitan y se deja el arrastre. */
  .tc-pg-visor{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto;
    grid-template-areas:"barra" "lienzo" "tira" "pista";
  }
  .tc-pg-visor-flecha{ display:none; }
  .tc-pg-visor-mini{ width:52px; height:52px; }
  .tc-pg-visor-tira{ justify-content:flex-start; }
  .tc-pg-visor-pista{ font-size:.72rem; }
}


/* EN EL TELÉFONO, PUNTITOS EN VEZ DE MINIATURAS

   Una columna de cuadrados de 74 px al lado de la foto se come un tercio del
   ancho de la pantalla, y en ese tamaño no se distingue una foto de otra:
   solo sirven para saber CUÁNTAS hay y en cuál estás.

   Eso lo dice un puntito. Así que son las mismas miniaturas —los mismos
   botones, el mismo guion, la misma clase `is-activa`— encogidas a un punto
   y puestas debajo. No hay JavaScript nuevo ni marcado nuevo: solo dejan de
   enseñar la imagen que llevan dentro.

   En pantalla grande siguen siendo miniaturas de verdad, que ahí sí caben y
   ahí sí se distinguen. */

@media (max-width: 900px) {

  .tc-pg-galeria{
    display:flex;
    flex-direction:column;
    /* `align-items:start` viene de la regla base, pensada para la rejilla del
       escritorio. En columna el eje cruzado es el horizontal: dejarlo en
       `start` encoge la fila de puntos al ancho de los puntos y la pega a la
       izquierda, y entonces el `justify-content:center` de abajo no tiene
       ancho donde centrar. Estirar es lo que le devuelve el ancho. */
    align-items:stretch;
    gap:10px;
  }

  /* El visor primero, los puntos debajo. */
  .tc-pg-galeria > .tc-pg-miniaturas{ order:2; }

  .tc-pg-miniaturas{
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:7px;
    max-height:none;
    overflow:visible;
    padding:2px 0 0;
  }

  .tc-pg-miniatura{
    width:7px;
    height:7px;
    min-height:0;
    padding:0;
    border-radius:50%;
    background:#cbd5e1;
    /* El área que se toca es mayor que el punto: siete píxeles no se aciertan
       con el dedo. El punto se ve pequeño, el blanco alrededor lo hace
       pulsable. */
    box-shadow:0 0 0 6px transparent;
    transition:background .15s ease, width .15s ease;
  }

  .tc-pg-miniatura img,
  .tc-pg-miniatura video,
  .tc-pg-miniatura svg{ display:none; }

  /* EL VIDEO ES UN TRIANGULITO, NO UN PUNTO: se sabe que ahi hay un video
     antes de llegar. El triangulo es el mismo ::after del escritorio, a la
     escala de los puntos. */
  .tc-pg-miniatura--video{
    width:9px;
    border-radius:0;
    background:transparent;
  }
  .tc-pg-miniatura--video::after{
    border-width:4.5px 0 4.5px 8px;
    border-color:transparent transparent transparent #94a3b8;
    filter:none;
  }
  .tc-pg-miniaturas .tc-pg-miniatura--video.is-activa{
    width:9px;
    background:transparent;
  }
  .tc-pg-miniaturas .tc-pg-miniatura--video.is-activa::after{
    border-color:transparent transparent transparent #071457;
  }

  /* CON EL VIDEO ABIERTO LA CAJA MIDE LO QUE EL VIDEO. Antes guardaba el
     alto de la foto y el video flotaba en medio de un hueco blanco. Ahora
     la foto sale del flujo y el reproductor pone el alto con su 16:9.
     Para seguir pasando a las fotos se desliza sobre los puntos de debajo
     (el iframe de YouTube se queda con los toques que caen encima). */
  .tc-pg-principal:has(.tc-pg-video.is-visible){
    min-height:0;
    padding:0;
    display:block;
    background:#000;
    overflow:hidden;
  }
  .tc-pg-principal:has(.tc-pg-video.is-visible) > img,
  .tc-pg-principal:has(.tc-pg-video.is-visible) .tc-pg-etiquetas{ display:none; }
  .tc-pg-video.is-visible{
    position:relative;
    inset:auto;
    width:100%;
    height:auto;
    aspect-ratio:16 / 9;
  }
  .tc-pg-video.is-visible iframe,
  .tc-pg-video.is-visible video{ height:100%; }

  /* Los puntos se pueden arrastrar: dan mas alto para el dedo. */
  .tc-pg-galeria > .tc-pg-miniaturas{ min-height:30px; touch-action:pan-y; }

  /* El activo se alarga en vez de solo cambiar de color: se distingue aunque
     la pantalla esté al sol. */
  .tc-pg-miniatura.is-activa{
    width:20px;
    border-radius:4px;
    background:#071457;
  }
}