/* ==========================================================================
   TIENDA AITANA TOUR · tema público
   Misma línea que la web: negro, blanco y rojo #cc3300, titulares en
   Barlow Condensed, etiquetas en IBM Plex Mono y esquinas rectas.
   Se carga después de Bootstrap y de los estilos de la web.
   ========================================================================== */

body.tn {
    --tn-rojo: #cc3300;
    --tn-rojo-oscuro: #a32900;
    --tn-negro: #0a0a0a;
    --tn-blanco: #ffffff;
    --tn-gris: #f3f2ef;
    --tn-linea: #dddddd;
    --tn-texto: #4a4a4a;
    --tn-display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --tn-sans: 'Barlow', 'Poppins', system-ui, sans-serif;
    --tn-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    --tn-gutter: clamp(16px, 4vw, 48px);

    /* tokens que usan los estilos compartidos (menú, botones) */
    --ai-rojo: #cc3300;
    --ai-rojo-oscuro: #a32900;
    --ai-negro: #0a0a0a;
    --ai-blanco: #ffffff;
    --ai-f-display: var(--tn-display);
    --ai-f-mono: var(--tn-mono);

    background: var(--tn-blanco) !important;
    color: var(--tn-negro) !important;
    font-family: var(--tn-sans);
    font-size: 17px;
    line-height: 1.6;
}

.tn-rojo { color: var(--tn-rojo); }
.tn-wrap { width: 100%; max-width: 1344px; margin: 0 auto; padding: 0 var(--tn-gutter); }
.tn-main { min-height: 60vh; overflow-x: clip; }

/* Los contenedores de Bootstrap siguen el mismo ancho que la web */
body.tn .tn-main .container { max-width: 1344px; padding-left: var(--tn-gutter); padding-right: var(--tn-gutter); }

/* ---------- Cabecera: carrito ---------- */
.tn-header-carrito { position: relative; }
.tn-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: var(--tn-rojo, #cc3300);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
}
.tn-header-carrito .tn-badge { position: absolute; top: -8px; right: -8px; }
@media (max-width: 640px) { .tn-header-carrito__txt { display: none; } }

/* ---------- Barra de la tienda ---------- */
.tn-subnav {
    background: var(--tn-gris);
    border-bottom: 1px solid var(--tn-linea);
}
.tn-subnav__in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    flex-wrap: wrap;
    min-height: 52px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.tn-subnav__marca {
    font-family: var(--tn-display);
    font-weight: 800;
    font-size: 20px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--tn-negro) !important;
    text-decoration: none !important;
}
.tn-subnav__links { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; margin: 0; padding: 0; }
.tn-subnav__links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tn-negro) !important;
    text-decoration: none !important;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.tn-subnav__links a:hover,
.tn-subnav__links a:focus-visible { border-bottom-color: var(--tn-rojo); outline: none; }

/* ==========================================================================
   Piezas comunes
   ========================================================================== */
.tn-kicker {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 0 18px;
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tn-texto);
}
.tn-kicker::before { content: ''; width: 36px; height: 2px; background: var(--tn-rojo); flex: none; }
.tn-display {
    font-family: var(--tn-display) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    line-height: .92 !important;
    letter-spacing: -.005em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
}
.tn-sec { padding: clamp(56px, 8vw, 104px) 0; }
.tn-sec--gris { background: var(--tn-gris); }
.tn-sec--negro { background: var(--tn-negro); color: var(--tn-blanco); }
.tn-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    border-bottom: 3px solid var(--tn-negro);
    padding-bottom: 14px;
    margin-bottom: clamp(24px, 3vw, 36px);
}
.tn-titulo h1, .tn-titulo h2 {
    margin: 0 !important;
    font-family: var(--tn-display) !important;
    font-weight: 800 !important;
    font-size: clamp(30px, 5vw, 60px) !important;
    line-height: .95 !important;
    text-transform: uppercase;
    color: var(--tn-negro) !important;
}
@media (max-width: 400px) { .tn-titulo h1, .tn-titulo h2 { font-size: 26px !important; } }
.tn-titulo__link {
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tn-rojo) !important;
    text-decoration: none !important;
}
.tn-titulo__link:hover { text-decoration: underline !important; }

/* Botones */
.tn-btn,
body.tn .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 24px;
    border: 2px solid var(--tn-negro);
    border-radius: 0 !important;
    font-family: var(--tn-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
    text-decoration: none !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
body.tn .btn-sm { min-height: 36px; padding: 6px 14px; font-size: 15px; }
body.tn .btn-lg { min-height: 54px; font-size: 19px; }
.tn-btn--rojo,
body.tn .btn-aitana-primary,
body.tn .btn-primary,
body.tn .btn-success { background: var(--tn-rojo) !important; border-color: var(--tn-rojo) !important; color: #fff !important; }
.tn-btn--rojo:hover,
body.tn .btn-aitana-primary:hover,
body.tn .btn-primary:hover,
body.tn .btn-success:hover { background: var(--tn-rojo-oscuro) !important; border-color: var(--tn-rojo-oscuro) !important; color: #fff !important; }
.tn-btn--negro,
body.tn .btn-dark { background: var(--tn-negro) !important; border-color: var(--tn-negro) !important; color: #fff !important; }
.tn-btn--negro:hover,
body.tn .btn-dark:hover { background: var(--tn-rojo) !important; border-color: var(--tn-rojo) !important; }
.tn-btn--linea,
body.tn .btn-glass,
body.tn .btn-outline-light,
body.tn .btn-outline-secondary,
body.tn .btn-outline-primary,
body.tn .btn-light,
body.tn .btn-secondary { background: transparent !important; border-color: var(--tn-negro) !important; color: var(--tn-negro) !important; }
.tn-btn--linea:hover,
body.tn .btn-glass:hover,
body.tn .btn-outline-light:hover,
body.tn .btn-outline-secondary:hover,
body.tn .btn-outline-primary:hover,
body.tn .btn-light:hover,
body.tn .btn-secondary:hover { background: var(--tn-negro) !important; color: #fff !important; }
body.tn .btn-outline-danger,
body.tn .btn-danger { background: transparent !important; border-color: var(--tn-rojo) !important; color: var(--tn-rojo) !important; }
body.tn .btn-outline-danger:hover,
body.tn .btn-danger:hover { background: var(--tn-rojo) !important; color: #fff !important; }
body.tn .btn:disabled,
body.tn .btn.disabled { opacity: .45; }
body.tn .btn:focus-visible,
.tn-btn:focus-visible { outline: 3px solid var(--tn-rojo); outline-offset: 3px; }
.tn-btn--blanco { background: #fff !important; border-color: #fff !important; color: var(--tn-negro) !important; }
.tn-btn--blanco:hover { background: var(--tn-rojo) !important; border-color: var(--tn-rojo) !important; color: #fff !important; }
.tn-btn--linea-blanca { background: transparent !important; border-color: #fff !important; color: #fff !important; }
.tn-btn--linea-blanca:hover { background: #fff !important; color: var(--tn-negro) !important; }
.tn-botones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ==========================================================================
   Componentes de Bootstrap y clases heredadas de la tienda
   ========================================================================== */
body.tn .glass-card {
    background: #fff !important;
    color: var(--tn-negro);
    border: 1px solid var(--tn-linea) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: clamp(20px, 3vw, 32px);
    opacity: 1 !important;
    transform: none !important;
}
body.tn .tn-main .text-white,
body.tn .tn-main .text-light,
body.tn .tn-main .text-dark { color: var(--tn-negro) !important; }
body.tn .tn-main .text-glass,
body.tn .tn-main .text-white-50,
body.tn .tn-main .text-muted,
body.tn .tn-main .text-secondary { color: var(--tn-texto) !important; }
body.tn .tn-main .text-success { color: var(--tn-negro) !important; }
body.tn .tn-main .text-danger,
body.tn .tn-main .text-warning,
body.tn .tn-main .text-info,
body.tn .tn-main .text-primary { color: var(--tn-rojo) !important; }

body.tn .tn-main h1,
body.tn .tn-main h2,
body.tn .tn-main h3,
body.tn .tn-main h4 {
    font-family: var(--tn-display);
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    letter-spacing: 0;
    color: var(--tn-negro);
}
body.tn .tn-main h1 { font-size: clamp(32px, 5vw, 56px); }
body.tn .tn-main h2 { font-size: clamp(26px, 3.6vw, 40px); }
body.tn .tn-main h3 { font-size: clamp(22px, 2.6vw, 28px); }
body.tn .tn-main h4 { font-size: 22px; }
body.tn .tn-main h5,
body.tn .tn-main h6 {
    font-family: var(--tn-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tn-texto);
}
body.tn .tn-main a { color: var(--tn-negro); }
body.tn .tn-main a:hover { color: var(--tn-rojo); }
body.tn .tn-main .bi { line-height: 1; }

/* Formularios */
body.tn .form-control,
body.tn .form-select,
body.tn .tn-main input[type="text"],
body.tn .tn-main input[type="email"],
body.tn .tn-main input[type="tel"],
body.tn .tn-main input[type="number"],
body.tn .tn-main input[type="password"],
body.tn .tn-main textarea,
body.tn .tn-main select {
    background-color: #fff !important;
    color: var(--tn-negro) !important;
    border: 1px solid var(--tn-negro) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--tn-sans);
    font-size: 16px;
    min-height: 46px;
}
body.tn .form-control::placeholder,
body.tn .tn-main input::placeholder,
body.tn .tn-main textarea::placeholder { color: #8a8a8a !important; }
body.tn .form-control:focus,
body.tn .form-select:focus,
body.tn .tn-main input:focus,
body.tn .tn-main textarea:focus,
body.tn .tn-main select:focus { border-color: var(--tn-rojo) !important; outline: 2px solid var(--tn-rojo); outline-offset: 0; }
body.tn .form-label,
body.tn .tn-main label:not(.form-check-label) {
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tn-texto) !important;
}
body.tn .form-check-label { color: var(--tn-negro) !important; font-size: 15px; }
body.tn .form-check-input { border: 1px solid var(--tn-negro); border-radius: 0; min-height: 0; }
body.tn .form-check-input:checked { background-color: var(--tn-rojo); border-color: var(--tn-rojo); }
body.tn .form-check-input[type="radio"] { border-radius: 50%; }

/* Insignias */
body.tn .badge {
    border-radius: 0 !important;
    font-family: var(--tn-mono);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 8px;
}
body.tn .badge.bg-success,
body.tn .badge.bg-dark,
body.tn .badge.bg-primary { background: var(--tn-negro) !important; color: #fff !important; }
body.tn .badge.bg-danger,
body.tn .badge.bg-warning { background: var(--tn-rojo) !important; color: #fff !important; }
body.tn .badge.bg-info,
body.tn .badge.bg-secondary,
body.tn .badge.bg-light { background: #fff !important; color: var(--tn-negro) !important; border: 1px solid var(--tn-negro); }

/* Tablas */
body.tn .tn-main .table { --bs-table-bg: transparent; --bs-table-color: var(--tn-negro); color: var(--tn-negro); }
body.tn .tn-main .table th {
    font-family: var(--tn-mono);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tn-texto);
    border-bottom: 2px solid var(--tn-negro);
}
body.tn .tn-main .table td { border-color: var(--tn-linea); vertical-align: middle; }
body.tn .tn-main .table-dark { --bs-table-bg: transparent; --bs-table-color: var(--tn-negro); --bs-table-border-color: var(--tn-linea); }

/* Avisos */
body.tn .alert {
    border-radius: 0 !important;
    border: 0;
    border-left: 4px solid var(--tn-negro);
    background: var(--tn-gris) !important;
    color: var(--tn-negro) !important;
}
body.tn .alert-danger,
body.tn .alert-error,
body.tn .alert-warning,
body.tn .product-alert-warning { border-left-color: var(--tn-rojo); }
body.tn .alert-success { border-left-color: var(--tn-negro); }

/* Migas de pan */
body.tn .breadcrumb { margin: 0; padding: 0; background: none; }
body.tn .breadcrumb-item,
body.tn .breadcrumb-item a {
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tn-texto) !important;
    text-decoration: none;
}
body.tn .breadcrumb-item a:hover { color: var(--tn-rojo) !important; }
body.tn .breadcrumb-item + .breadcrumb-item::before { color: var(--tn-texto); content: '/'; }
body.tn .breadcrumb-item.active { color: var(--tn-negro) !important; }

/* Paginación */
body.tn .pagination { display: flex; gap: 6px; flex-wrap: wrap; padding-left: 0; list-style: none; }
body.tn .page-link {
    border-radius: 0 !important;
    border: 1px solid var(--tn-negro) !important;
    background: #fff !important;
    color: var(--tn-negro) !important;
    font-family: var(--tn-mono);
    font-size: 13px;
    min-width: 42px;
    text-align: center;
}
body.tn .page-item.active .page-link,
body.tn .page-link:hover { background: var(--tn-negro) !important; color: #fff !important; }

/* Restos del estilo anterior */
body.tn .bg-secondary { background: var(--tn-gris) !important; color: var(--tn-texto) !important; }
body.tn .rounded,
body.tn .rounded-3,
body.tn .rounded-pill,
body.tn .card,
body.tn .modal-content,
body.tn .list-group-item { border-radius: 0 !important; }
body.tn hr { border-color: var(--tn-negro); opacity: 1; }
body.tn .product-stock-box,
body.tn .product-info-box { background: var(--tn-gris) !important; border: 0 !important; border-radius: 0 !important; color: var(--tn-negro); }
body.tn .product-sku-code { font-family: var(--tn-mono); color: var(--tn-negro); background: none; padding: 0; }
body.tn .product-image-container { padding: 0 !important; background: var(--tn-gris) !important; border: 0 !important; }
body.tn .thumbnail-image { border-radius: 0 !important; border: 2px solid transparent; }
body.tn .thumbnail-image.active,
body.tn .thumbnail-image:hover { border-color: var(--tn-rojo); }

/* ==========================================================================
   Portada de la tienda
   ========================================================================== */
.tn-hero {
    position: relative;
    background: var(--tn-negro);
    color: #fff;
    overflow: hidden;
}
.tn-hero__grid {
    display: grid;
    gap: 32px;
    align-items: center;
    min-height: min(78vh, 760px);
    padding-top: clamp(40px, 6vw, 72px);
    padding-bottom: clamp(40px, 6vw, 72px);
}
@media (min-width: 992px) { .tn-hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.tn-hero .tn-kicker { color: #b8b8b8; }
body.tn .tn-main .tn-hero__titulo {
    margin: 0 0 20px;
    font-size: clamp(44px, 7.4vw, 104px);
    color: #fff;
}
.tn-hero__lead { max-width: 560px; margin: 0 0 28px; font-size: 18px; color: #d6d6d6; }
.tn-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--tn-mono);
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #b8b8b8;
}
.tn-hero__meta li::before { content: '— '; color: var(--tn-rojo); }
.tn-hero__visor { position: relative; min-height: 340px; }
.tn-hero__visor model-viewer { width: 100%; height: min(64vh, 620px); --poster-color: transparent; background: transparent; }
.tn-hero__pista {
    position: absolute;
    left: 0;
    bottom: 0;
    font-family: var(--tn-mono);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a;
}
.tn-hero__cargando { display: flex; align-items: center; justify-content: center; height: 100%; color: #8a8a8a; font-family: var(--tn-mono); font-size: 12px; }

/* Ventajas */
.tn-ventajas { display: grid; gap: 0; border-top: 1px solid var(--tn-linea); }
@media (min-width: 768px) { .tn-ventajas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-ventaja { padding: 24px 0; border-bottom: 1px solid var(--tn-linea); }
@media (min-width: 768px) {
    .tn-ventaja { padding: 28px 28px 28px 0; border-bottom: 0; }
    .tn-ventaja + .tn-ventaja { padding-left: 28px; border-left: 1px solid var(--tn-linea); }
}
.tn-ventaja__n { font-family: var(--tn-display); font-weight: 800; font-size: 28px; color: var(--tn-rojo); line-height: 1; }
body.tn .tn-main .tn-ventaja h3 { margin: 10px 0 8px !important; font-size: 24px !important; }
.tn-ventaja p { margin: 0; color: var(--tn-texto); font-size: 16px; }

/* Categorías */
.tn-categorias { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tn-categorias a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid var(--tn-negro);
    font-family: var(--tn-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tn-negro) !important;
    text-decoration: none !important;
}
.tn-categorias a:hover,
.tn-categorias a.is-activa { background: var(--tn-negro); color: #fff !important; }

@media (min-width: 768px) { .tn-productos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; } }
@media (min-width: 1200px) { .tn-productos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Tarjeta de producto
   ========================================================================== */
.tn-productos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tn-card { display: flex; flex-direction: column; height: 100%; color: var(--tn-negro); }
.tn-card__img {
    position: relative;
    display: block;
    aspect-ratio: 4 / 5;
    background: var(--tn-gris);
    overflow: hidden;
}
.tn-card__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; transition: transform .35s ease; }
.tn-card:hover .tn-card__img img { transform: scale(1.04); }
.tn-card__vacio { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-family: var(--tn-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; }
.tn-card__etiqueta {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 5px 8px;
    background: var(--tn-rojo);
    color: #fff;
    font-family: var(--tn-mono);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.tn-card__etiqueta--agotado { background: var(--tn-negro); }
.tn-card__cuerpo { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; flex: 1; border-bottom: 1px solid var(--tn-linea); padding-bottom: 16px; }
.tn-card__cat { font-family: var(--tn-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tn-texto); }
.tn-card__nombre {
    margin: 0 !important;
    font-family: var(--tn-display) !important;
    font-weight: 800 !important;
    font-size: 24px !important;
    line-height: 1.02 !important;
    text-transform: uppercase;
}
.tn-card__nombre a { color: var(--tn-negro) !important; text-decoration: none !important; }
.tn-card__nombre a:hover { color: var(--tn-rojo) !important; }
.tn-card__precio { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 8px; }
.tn-precio { font-family: var(--tn-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--tn-negro); }
.tn-precio--oferta { color: var(--tn-rojo); }
.tn-precio-antes { font-family: var(--tn-mono); font-size: 13px; color: var(--tn-texto); text-decoration: line-through; }

/* ==========================================================================
   Catálogo
   ========================================================================== */
.tn-filtros {
    display: grid;
    gap: 12px;
    margin-bottom: clamp(24px, 3vw, 36px);
    padding: 20px;
    background: var(--tn-gris);
}
@media (min-width: 768px) { .tn-filtros { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: end; } }
.tn-filtros .form-check { margin: 0; min-height: 46px; display: flex; align-items: center; gap: 8px; padding-left: 1.8em; }
.tn-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 20px; }
.tn-resultados { font-family: var(--tn-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--tn-texto); margin: 0 0 20px; }
.tn-vacio { padding: clamp(40px, 6vw, 72px) 0; text-align: center; border-top: 1px solid var(--tn-linea); border-bottom: 1px solid var(--tn-linea); }
.tn-vacio p { color: var(--tn-texto); }

/* ==========================================================================
   Resultado del pago y páginas de estado
   ========================================================================== */
.tn-estado { max-width: 760px; }
body.tn .tn-main .tn-estado__titulo { font-size: clamp(40px, 7vw, 88px); margin: 0 0 20px; }
.tn-estado__texto { font-size: 18px; color: var(--tn-texto); max-width: 620px; }
.tn-estado__dato {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    margin: 12px 0 28px;
    padding: 14px 20px;
    border-left: 4px solid var(--tn-rojo);
    background: var(--tn-gris);
}
.tn-estado__dato span { font-family: var(--tn-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tn-texto); }
.tn-estado__dato strong { font-family: var(--tn-display); font-weight: 800; font-size: 28px; letter-spacing: .02em; }

/* Redirección a la pasarela */
.tn-redireccion { padding: clamp(64px, 12vw, 140px) 0; text-align: center; }
.tn-redireccion p { color: var(--tn-texto); }
.tn-cargando {
    width: 44px;
    height: 44px;
    margin: 0 auto 24px;
    border: 3px solid var(--tn-linea);
    border-top-color: var(--tn-rojo);
    border-radius: 50%;
    animation: tn-giro .9s linear infinite;
}
@keyframes tn-giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .tn-cargando { animation-duration: 3s; }
    .tn-card__img img { transition: none; }
}

@media (max-width: 575.98px) { .tn-card__nombre { font-size: 17px !important; } .tn-precio { font-size: 20px; } .tn-card__etiqueta { top: 8px; left: 8px; } }
body.tn .form-control, body.tn .form-select { display: block; width: 100%; }
body.tn .tn-filtros .form-label { display: block; }

/* ==========================================================================
   Carrito
   ========================================================================== */
.tn-carrito { display: grid; gap: 40px; align-items: start; }
@media (min-width: 992px) { .tn-carrito { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; } }
.tn-lineas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--tn-negro); }
.tn-linea { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 8px 18px; padding: 20px 0; border-bottom: 1px solid var(--tn-linea); }
.tn-linea__img { grid-row: span 2; aspect-ratio: 4 / 5; background: var(--tn-gris); }
.tn-linea__img img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
body.tn .tn-main .tn-linea__nombre { margin: 0 0 6px; font-size: 20px; }
.tn-linea__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; font-family: var(--tn-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--tn-texto); }
.tn-linea__pack { margin: 0 0 6px; padding-left: 16px; font-size: 14px; color: var(--tn-texto); }
.tn-linea__unidad { margin: 0; font-size: 15px; color: var(--tn-texto); }
.tn-linea__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.tn-linea__total { font-family: var(--tn-display); font-weight: 800; font-size: 22px; margin-left: auto; }
.tn-cantidad { display: flex; align-items: center; gap: 8px; }
body.tn .tn-cantidad .form-control { width: 72px; min-height: 42px; text-align: center; }
.tn-btn--peq { min-height: 42px; padding: 8px 14px; font-size: 13px; }
.tn-linea__quitar { background: none; border: 0; padding: 4px 0; font-family: var(--tn-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--tn-rojo); text-decoration: underline; cursor: pointer; }
@media (min-width: 768px) {
    .tn-linea { grid-template-columns: 110px minmax(0, 1fr) auto; }
    .tn-linea__img { grid-row: auto; }
    .tn-linea__acciones { flex-direction: column; align-items: flex-end; }
    .tn-linea__total { margin-left: 0; }
}
@media (max-width: 767.98px) { .tn-linea__acciones { grid-column: 2; } }
.tn-resumen { padding: 28px; background: var(--tn-gris); }
@media (min-width: 992px) { .tn-resumen { position: sticky; top: 96px; } }
body.tn .tn-main .tn-resumen__titulo { margin: 0 0 18px; font-size: 26px; }
.tn-resumen dl { margin: 0 0 12px; }
.tn-resumen dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--tn-linea); }
.tn-resumen dt { font-weight: 500; }
.tn-resumen dd { margin: 0; text-align: right; }
.tn-resumen__total { border-bottom: 0 !important; padding-top: 14px !important; }
.tn-resumen__total dt, .tn-resumen__total dd { font-family: var(--tn-display); font-weight: 800; font-size: 28px; text-transform: uppercase; }
.tn-resumen__nota { font-size: 13px; color: var(--tn-texto); margin: 0 0 18px; }
.tn-resumen__info { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--tn-linea); font-size: 14px; color: var(--tn-texto); }
body.tn .tn-main .tn-redireccion h1 { font-size: clamp(28px, 4.4vw, 48px); }