/* ---------------------------------------------------------------------------------------------
   La tienda (work item 889): la home y el catálogo por categorías. Diseño en el lienzo de Design
   «TechTailor — Home y catálogo por categorías». Solo tokens --tt-*: un color nuevo es un token
   nuevo en tema-techtailor.css, en los dos temas.
   --------------------------------------------------------------------------------------------- */

/* Un ícono de iconos-tipo/ pintado con máscara: toma el color de su contenedor (ver el LEEME.md). */
.tt-icono {
    display: inline-block;
    width: 28px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask: var(--icono) no-repeat center / contain;
    mask: var(--icono) no-repeat center / contain;
}

.tt-icono-caja {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 13px;
    background: var(--tt-verde-tenue);
    color: var(--tt-verde-texto);
    display: grid;
    place-items: center;
}

/* ---------- la portada: una foto con el perfilador encima ---------- */
.tt-portada {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid var(--tt-linea);
    background: rgb(var(--tt-foto-velo-rgb));
    min-height: 520px;
    display: flex;
    align-items: center;
}

.tt-portada picture img {
    position: absolute;
    top: 0;
    right: 0;
    width: 72%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.tt-portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(var(--tt-foto-velo-rgb)) 0%,
        rgb(var(--tt-foto-velo-rgb)) 30%,
        rgba(var(--tt-foto-velo-rgb), .85) 45%,
        rgba(var(--tt-foto-velo-rgb), 0) 70%);
}

.tt-portada-texto {
    position: relative;
    z-index: 1;
    padding: 56px;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--tt-foto-tx);
}

.tt-portada-texto h1 {
    /* Sobre la foto, que es de noche en los dos temas: el h1 de Bootstrap toma --bs-heading-color, que en claro es
       oscuro y no se leía (wi 1250). El color fijo de lo que va encima de una foto. */
    color: var(--tt-foto-tx);
    margin: 0;
    font-size: 50px;
    line-height: 1.06;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tt-portada-texto h1 span {
    color: var(--tt-verde2);
}

.tt-portada-texto p {
    margin: 0;
    color: var(--tt-foto-tx2);
    font-size: 18px;
}

.tt-antetitulo {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tt-verde-texto);
}

.tt-portada .tt-antetitulo {
    color: var(--tt-verde2);
}

.tt-portada-accion {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.tt-portada-accion span {
    font-size: 13px;
    color: var(--tt-foto-tx2);
}

/* «Continuar mi cotización» (wi 1888): un enlace junto al botón, solo si el navegador tiene un carrito (carrito.js). */
.tt-continuar {
    font-size: 14px;
    font-weight: 600;
    color: var(--tt-foto-tx2);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tt-continuar:hover {
    color: #fff;
}

.tt-continuar[hidden] {
    display: none;
}

.tt-boton-grande {
    font-weight: 700;
    border-radius: 11px;
    padding: 15px 30px;
    font-size: 16px;
}

/* ---------- la franja del catálogo ---------- */
.tt-franja {
    margin-top: 16px;
    background: var(--tt-sup);
    border: 1px solid var(--tt-linea);
    border-radius: 16px;
    padding: 22px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 24px;
}

.tt-franja .tt-icono-caja {
    width: 48px;
    height: 48px;
    background: var(--tt-azul-tenue);
    color: var(--tt-azul-texto);
}

.tt-franja-texto {
    flex: 1 1 360px;
}

.tt-franja-texto b {
    display: block;
    font-size: 20px;
    font-weight: 800;
}

.tt-franja-texto span {
    color: var(--tt-tx2);
}

/* ---------- las categorías ---------- */
.tt-seccion {
    padding: 40px 0 8px;
}

.tt-seccion-h {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
}

.tt-seccion-h h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.tt-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 16px;
}

/* En el carrito la tarjeta es un botón (wi 1680): sin los estilos del navegador, igual que la del enlace. */
button.tt-cat {
    font: inherit;
    text-align: left;
    width: 100%;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.tt-cat {
    text-decoration: none;
    color: var(--tt-tx);
    background: var(--tt-sup);
    border: 1px solid var(--tt-linea);
    border-radius: 14px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 168px;
    transition: border-color .15s;
}

.tt-cat:hover,
.tt-cat:focus-visible {
    border-color: var(--tt-verde);
    color: var(--tt-tx);
}

.tt-cat b {
    font-size: 17px;
}

.tt-cat .tt-cat-d {
    font-size: 13.5px;
    color: var(--tt-tx2);
}

/* El índice de /catalogo (wi 1250): la foto de la categoría como franja arriba, más baja que su cabecera, con un
   degradado hacia el cuerpo de la tarjeta y el ícono encima. El degradado termina en --tt-sup, el fondo de la
   tarjeta: en claro se aclara solo y el texto nunca queda sobre la foto. Tres por renglón, dos en tableta, uno en
   el teléfono. */
.tt-cats.tt-cats-foto {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tt-cat.tt-cat-foto {
    padding: 0;
    gap: 0;
    overflow: hidden;
    min-height: 0;
}

.tt-cat-franja {
    position: relative;
    display: block;
    height: 150px;
    background: var(--tt-sup2);
}

.tt-cat-franja img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: right 45%;
}

.tt-cat-franja::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 30%, var(--tt-sup) 100%);
}

/* Encima de la foto el verde tenue no se leía: la caja lleva el fondo de la tarjeta. */
.tt-cat-franja .tt-icono-caja {
    position: absolute;
    left: 18px;
    bottom: -14px;
    z-index: 1;
    background: var(--tt-sup);
    border: 1px solid var(--tt-linea);
}

.tt-cat-cuerpo {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 26px 22px 22px;
}

.tt-cat.tt-cat-foto:focus-visible {
    outline: 2px solid var(--tt-verde);
    outline-offset: 2px;
}

@media (max-width: 991.98px) {
    .tt-cats.tt-cats-foto {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------- lo que nos distingue ---------- */
.tt-ventajas {
    padding: 32px 0 8px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 16px;
}

.tt-ventajas > div {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 20px;
    border-radius: 14px;
    background: var(--tt-sup);
    border: 1px solid var(--tt-linea);
}

.tt-ventajas svg {
    flex: none;
    color: var(--tt-verde-texto);
}

.tt-ventajas span {
    display: block;
    font-size: 13.5px;
    color: var(--tt-tx2);
}

/* ---------- la cabecera de una categoría en el catálogo ---------- */
.tt-cab-cat {
    position: relative;
    overflow: hidden;
    /* Las fotos son de 1916×821 (2.33:1). A 190 px fijos sobre casi 1,900 de ancho, el cover dejaba ver
       una tira de un cuarto de su altura y cortaba el producto. Más alta en pantallas anchas, y la foto
       con su proporción a la derecha (ver img). */
    height: clamp(200px, 15vw, 290px);
    border-radius: 16px;
    border: 1px solid var(--tt-linea);
    background: rgb(var(--tt-foto-velo-rgb));
    margin-bottom: 16px;
}

.tt-cab-cat img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: auto;
    /* Al menos 55% del ancho: entera, a la derecha y sin estirarse, en una pantalla ancha dejaba vacío el
       centro. Llenar más recorta un poco arriba y abajo, que en estas fotos es fondo. */
    min-width: 55%;
    max-width: 100%;
    object-fit: cover;
    object-position: right 45%;
    /* La foto entera, anclada a la derecha; su orilla izquierda se funde con el fondo donde va el texto.
       Las fotos ya traen libre su lado izquierdo (estilo homologado de las cabeceras). */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 35%);
    mask-image: linear-gradient(90deg, transparent 0, #000 35%);
}

.tt-cab-cat::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(var(--tt-foto-velo-rgb)) 0%,
        rgba(var(--tt-foto-velo-rgb), .7) 25%,
        rgba(var(--tt-foto-velo-rgb), 0) 50%);
}

.tt-cab-cat-texto {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--tt-foto-tx);
}

.tt-cab-cat-texto .tt-icono-caja {
    color: var(--tt-verde2);
}

.tt-cab-cat-texto h1 {
    /* Sobre la foto, que es de noche en los dos temas: el h1 de Bootstrap toma --bs-heading-color, que en claro es
       oscuro y no se leía (wi 1250). El color fijo de lo que va encima de una foto. */
    color: var(--tt-foto-tx);
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.tt-cab-cat-texto p {
    margin: 0;
    color: var(--tt-foto-tx2);
}

.tt-ruta {
    font-size: 13px;
    color: var(--tt-tx2);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.tt-ruta a {
    color: var(--tt-tx2);
}

.tt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.tt-chip {
    background: var(--tt-sup2);
    color: var(--tt-tx);
    border: 1px solid var(--tt-linea);
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
}

.tt-chip[aria-pressed=true] {
    background: var(--tt-verde);
    border-color: var(--tt-verde);
    color: var(--tt-sobre-verde);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .tt-portada {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
    }

    .tt-portada picture img {
        position: static;
        width: 100%;
        height: 220px;
        object-position: 72% center;
    }

    .tt-portada::after {
        background: linear-gradient(180deg, rgba(var(--tt-foto-velo-rgb), 0) 40%, rgb(var(--tt-foto-velo-rgb)) 220px);
    }

    .tt-portada-texto {
        padding: 6px 22px 26px;
    }

    .tt-portada-texto h1 {
        font-size: 32px;
    }

    .tt-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tt-cat {
        padding: 16px;
        min-height: 120px;
    }

    .tt-cat .tt-cat-d {
        display: none;
    }

    .tt-cats.tt-cats-foto {
        grid-template-columns: 1fr;
    }

    /* Una por renglón ya tiene ancho para su descripción. */
    .tt-cat.tt-cat-foto .tt-cat-d {
        display: block;
    }

    .tt-cat-franja {
        height: 130px;
    }

    .tt-cab-cat {
        height: 150px;
    }

    .tt-cab-cat-texto {
        padding: 0 18px;
    }

    .tt-cab-cat-texto h1 {
        font-size: 24px;
    }
}

/* La foto y el nombre de un producto abren su ficha (PantallaDelCatalogo con AlVerFicha). */
.tt-proto .catver {
    all: unset;
    display: block;
    cursor: pointer;
    border-radius: 10px;
}

.tt-proto .catver:focus-visible {
    outline: 2px solid var(--tt-azul);
    outline-offset: 2px;
}

.tt-proto .catver:hover .catn {
    color: var(--tt-verde-texto);
}

/* Dentro del botón la foto y el nombre ya no son hijos de .catprod, así que no les toca su gap de 8px y el
   nombre quedaba pegado a la foto (wi 1250). Se le devuelve el mismo aire que hay entre el nombre y la marca;
   todas las tarjetas de la rejilla llevan el botón, así que la fila sigue alineada. */
.tt-proto .catver .catn {
    margin-top: 8px;
}

/* Cuántos llevar, en la ficha de la tienda. */
.tt-cantidad {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--tt-linea);
    border-radius: 11px;
    background: var(--tt-sup2);
}

.tt-cantidad button {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    color: var(--tt-tx);
    font-size: 20px;
    cursor: pointer;
}

.tt-cantidad button:disabled {
    color: var(--tt-tx3);
    cursor: default;
}

.tt-cantidad span {
    min-width: 30px;
    text-align: center;
    font-weight: 700;
}

/* ---------- «Próximamente» en producción (work item 904) ---------- */
.tt-pronto {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: rgb(var(--tt-foto-velo-rgb));
    color: var(--tt-foto-tx);
    display: flex;
    flex-direction: column;
    padding: 32px 56px;
    gap: 24px;
}

.tt-pronto picture img {
    position: absolute;
    top: 0;
    right: 0;
    width: 68%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
}

.tt-pronto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        rgb(var(--tt-foto-velo-rgb)) 0%,
        rgb(var(--tt-foto-velo-rgb)) 34%,
        rgba(var(--tt-foto-velo-rgb), .8) 50%,
        rgba(var(--tt-foto-velo-rgb), 0) 75%);
}

.tt-pronto > header,
.tt-pronto > main,
.tt-pronto > footer {
    position: relative;
    z-index: 1;
}

.tt-pronto-marca .tt-logo {
    height: 34px;
    width: auto;
}

.tt-pronto-texto {
    flex: 1;
    max-width: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
}

.tt-pronto-texto .tt-antetitulo {
    color: var(--tt-verde2);
}

.tt-pronto-texto h1 {
    /* Sobre la foto, que es de noche en los dos temas: el h1 de Bootstrap toma --bs-heading-color, que en claro es
       oscuro y no se leía (wi 1250). El color fijo de lo que va encima de una foto. */
    color: var(--tt-foto-tx);
    margin: 0;
    font-size: 58px;
    line-height: 1.04;
    font-weight: 800;
    letter-spacing: -.02em;
}

.tt-pronto-texto h1 span {
    color: var(--tt-verde2);
}

.tt-pronto-texto p {
    margin: 0;
    font-size: 18px;
    color: var(--tt-foto-tx2);
}

.tt-pronto-texto ul {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--tt-foto-tx2);
}

.tt-pronto-texto li::before {
    content: "✓";
    color: var(--tt-verde2);
    font-weight: 800;
    margin-right: 10px;
}

.tt-pronto-pie {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    font-size: 13.5px;
    color: var(--tt-foto-tx2);
}

.tt-pronto-pie b {
    color: var(--tt-foto-tx);
}

.tt-pronto-pie a {
    color: var(--tt-foto-tx);
}

@media (max-width: 767.98px) {
    .tt-pronto {
        padding: 0 0 24px;
        gap: 0;
    }

    .tt-pronto picture img {
        position: static;
        width: 100%;
        height: 260px;
        object-position: 72% center;
    }

    .tt-pronto::after {
        background: linear-gradient(180deg, rgba(var(--tt-foto-velo-rgb), 0) 120px, rgb(var(--tt-foto-velo-rgb)) 260px);
    }

    .tt-pronto-marca {
        position: absolute !important;
        top: 18px;
        left: 18px;
    }

    .tt-pronto-texto {
        padding: 8px 20px 24px;
    }

    .tt-pronto-texto h1 {
        font-size: 36px;
    }

    .tt-pronto-pie {
        padding: 0 20px;
    }
}

/* ---------- documentos legales: los términos de la cobertura (work item 1671) ---------- */
.tt-legal {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 0 48px;
    color: var(--tt-tx2);
    line-height: 1.65;
}

.tt-legal h1 {
    color: var(--tt-tx);
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 24px;
}

.tt-legal h2,
.tt-legal h3 {
    color: var(--tt-tx);
    font-size: 18px;
    font-weight: 700;
    margin: 28px 0 10px;
}

.tt-legal a {
    color: var(--tt-verde-texto);
    word-break: break-word;
}

/* Las tablas del apéndice se desplazan solas en un celular: la página no. */
.tt-legal-tabla {
    overflow-x: auto;
    margin: 12px 0;
}

.tt-legal-tabla table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tt-legal-tabla th,
.tt-legal-tabla td {
    border: 1px solid var(--tt-linea);
    padding: 8px 10px;
    vertical-align: top;
    text-align: left;
}

.tt-legal-tabla th {
    background: var(--tt-sup2);
    color: var(--tt-tx);
}

.tt-legal-nota {
    font-size: 13px;
}