/* ===== Navbar y footer "Pulse" (navbar-v3.blade.php / footer-v3.blade.php)
   — compartidos por todo el sitio real vía layouts/app.blade.php, no solo
   por /v1-clean. Extraído de index.css para que cualquier página pueda
   incluir estos partials sin cargar el resto de estilos de esa propuesta. */

:root {
    --tc-p-orange: #ff5c00;
    --tc-p-bg: #07070c;
    --tc-p-surface: #101018;
    --tc-p-border: #1f1f2b;
    --tc-p-input-border: #4a4a5e;
    --tc-p-text-dim: #9a9aab;
    --tc-p-input-text: #f2f2f5;
    /* Texto principal. Varias vistas (p. ej. /pedido/{token}) ya lo usaban
       pero no estaba definido y caían al gris fijo de Bootstrap. */
    --tc-p-text: #f2f2f5;
    /* Campos de formulario: fondo un poco más claro que las tarjetas/modales
       (antes era el mismo --tc-p-surface y el campo se perdía), etiquetas y
       placeholders más claros, y bloqueados (disabled) sin gris claro. */
    --tc-p-field-bg: #1e1e2b;      /* más claro que la tarjeta: el campo "sube" */
    --tc-p-field-border-hover: #6a6a80;
    --tc-p-field-label: #c2c2cf;
    --tc-p-field-disabled-bg: #13131b;
    --tc-p-field-disabled-border: #2e2e3c;
    --tc-p-field-disabled-text: #8c8c9c;
}
:root[data-theme="light"] {
    --tc-p-bg: #f7f7fa;
    --tc-p-surface: #ffffff;
    --tc-p-border: #e6e6ec;
    --tc-p-input-border: #cfd4dc;
    --tc-p-text-dim: #6c6c78;
    --tc-p-input-text: #16161c;
    --tc-p-text: #16161c;
    --tc-p-field-bg: #ffffff;
    --tc-p-field-border-hover: #a9afba;
    --tc-p-field-label: #5f5f6b;
    --tc-p-field-disabled-bg: #ededf1;
    --tc-p-field-disabled-border: #dcdce2;
    --tc-p-field-disabled-text: #8a8a96;
}

/* Envoltorio opcional para que una vista real adopte el fondo oscuro/claro
   de Pulse (no es automático en <body> para no afectar páginas que no lo
   pidan, como checkout o las páginas legales). display:flow-root evita que
   el margin-bottom del último hijo "se escape" del contenedor (margin
   collapsing) y deje ver el fondo blanco de <body> justo antes del footer —
   invisible en /v1-clean porque ahí <body> ya es oscuro, pero visible en
   cualquier otra página. */
.tc-p-page { display: flow-root; background: var(--tc-p-bg); color: #f2f2f5; font-family: inherit; }
:root[data-theme="light"] .tc-p-page { color: #16161c; }
.tc-p-page h1, .tc-p-page h2, .tc-p-page h3 { font-weight: 800; letter-spacing: -.02em; }

/* El navbar es una pastilla flotante y position:fixed — no reserva espacio
   en el flujo del documento. En vez de empujar todo <body> hacia abajo (deja
   un hueco del color de fondo de <body>, casi siempre blanco, encima de la
   sección real de cada página), se empuja solo el primer elemento de
   contenido de cada página — así SU PROPIO fondo sigue llegando hasta arriba
   de la pantalla, detrás del navbar transparente, y solo su contenido
   interno baja lo necesario para no quedar tapado. El FAB de WhatsApp es lo
   último fijo antes de @yield('content') en layouts/app.blade.php, así que
   ese "+" siempre selecciona el primer elemento real de cada vista.
   Se excluye cuando ese elemento contiene un "hero band" marcado con
   .tc-p-hero-band (.tc-p-hero, .tc-brand-hero, .tc-size-hero,
   .tc-brands-hero...) — cada uno ya trae su propio padding-top que cubre
   el navbar, para que su fondo siempre oscuro llegue hasta arriba sin
   depender del fondo de <body> o de .tc-p-page, que sí cambia con el
   tema. Cualquier vista real SIN un hero band (como el listado de
   brandInformation debajo de su propio hero) sí necesita este padding
   genérico. Cualquier hero band nuevo solo necesita agregar esta misma
   clase para quedar excluido automáticamente. */
/* body.tc-rd-standalone = propuestas de rediseño aisladas (/v2, /v3) que
   traen su propio navbar fijo + hero con su propio cálculo de alto
   (calc(100vh - Npx)) y NO usan .tc-p-page/.tc-p-hero-band — este padding
   genérico les duplicaría el espacio del navbar, dejando una franja en
   blanco arriba de todo. */
body:not(.tc-rd-standalone) .tc-whatsapp-fab + *:not(:has(.tc-p-hero-band)) { padding-top: 96px; }
@media (max-width: 991.98px) {
    body:not(.tc-rd-standalone) .tc-whatsapp-fab + *:not(:has(.tc-p-hero-band)) { padding-top: 76px; }
}

/* ---- Navbar ---- */
.tc-p-navbar {
    position: fixed;
    top: 16px; left: 0; right: 0;
    z-index: 1030;
    display: flex;
    justify-content: center;
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: opacity .25s ease, transform .25s ease;
}
/* Franja negra fija detrás de la píldora del navbar, siempre negra sin
   importar el tema claro/oscuro — antes el navbar flotaba directo sobre el
   fondo de cada página (var(--tc-p-bg), que sí cambia con el tema), lo que
   hacía que la píldora de vidrio se viera "recortada"/flotando de forma
   distinta según la página. Un fondo fijo detrás la ancla siempre igual. */
.tc-p-navbar-strip {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 104px;
    background: #000;
    /* Mismo remate naranja que el resto de "heroes" del sitio (tc-cart-hero,
       tc-size-hero, etc.) — antes esta franja genérica se quedaba solo negra
       en las páginas sin hero propio, como el detalle de producto. */
    border-bottom: 3px solid #ff5c00;
    z-index: 1020;
    pointer-events: none;
    opacity: 1;
    transition: opacity .25s ease;
}
/* Se esconde junto con el navbar completo al bajar (navbar-scroll.js agrega
   is-hidden ahí cuando activa .tc-p-navbar--hidden) — solo debe verse
   mientras el navbar sigue arriba, no quedarse flotando sola al hacer
   scroll una vez que el navbar completo ya dio paso a la barra sticky. */
.tc-p-navbar-strip.is-hidden { opacity: 0; }
@media (max-width: 991.98px) {
    .tc-p-navbar-strip { height: 88px; }
}
/* En páginas con hero de foto/color a todo lo ancho (home, marca, medida...)
   la franja taparía la parte superior de esa foto, que antes llegaba hasta
   arriba de la pantalla detrás del navbar transparente — se oculta ahí,
   solo aparece en páginas de contenido plano (carrito, perfil...) que no
   tienen su propio fondo edge-to-edge. */
body:has(.tc-p-hero-band) .tc-p-navbar-strip { display: none; }

/* Solo se agrega en páginas con .tc-p-hero al bajar del cover (ver
   navbar-scroll.js) — el navbar completo deja paso a .tc-p-sticky-search. */
.tc-p-navbar.tc-p-navbar--hidden {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* ---- Barra de búsqueda sticky: lo único que queda fijo arriba al bajar
   del cover del home. Mismo look de vidrio que la pastilla del navbar,
   pero es un botón (no un input real) que abre el buscador "mega". ---- */
.tc-p-sticky-search {
    position: fixed;
    top: 16px; left: 0; right: 0;
    z-index: 1029;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
/* El botón de carrito reusa el mismo ícono/badge que el navbar
   (#cartIconSticky en navbar-v3.blade.php), pero .tc-p-nav-icon-btn está
   pensado para ir ENCIMA del vidrio oscuro del navbar-row — aquí flota solo
   sobre la página, así que necesita su propio fondo de vidrio a juego con
   el botón de búsqueda de al lado, más grande por la misma razón. */
.tc-p-sticky-search .tc-p-sticky-cart-btn {
    flex: none;
    width: 58px;
    height: 58px;
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    font-size: 19px;
}
.tc-p-sticky-cart-btn:hover { background: rgba(16,16,24,.9); }
/* El badge global (app.css) se calculó para el círculo chico de 34px del
   navbar — en este botón de 58px el mismo offset lo deja casi flotando
   fuera del borde en vez de nestled en la curva. Acercarlo un poco. */
.tc-p-sticky-cart-btn .cart-count-badge { top: 2px; right: 2px; }
@media (max-width: 575.98px) {
    .tc-p-sticky-cart-btn .cart-count-badge { top: 0; right: 0; }
}
:root[data-theme="light"] .tc-p-sticky-search .tc-p-sticky-cart-btn {
    background: var(--tc-p-surface);
    border-color: var(--tc-p-border);
    color: #16161c;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@media (max-width: 575.98px) {
    .tc-p-sticky-search .tc-p-sticky-cart-btn { width: 46px; height: 46px; font-size: 16px; }
}
.tc-p-sticky-search.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.tc-p-sticky-search-field {
    /* Mismo look que .tc-p-navbar-row (la pastilla del navbar): vidrio
       oscuro, borde y blur idénticos — es lo que la reemplaza al bajar del
       cover, así que debe leerse como la misma familia visual, solo que
       más grande por ser ahora el único elemento fijo arriba. */
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    padding: 16px 40px;
    min-width: 300px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    color: #fff;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
    transition: box-shadow .15s ease;
}
.tc-p-sticky-search-field:hover { box-shadow: 0 10px 30px rgba(0,0,0,.4), 0 0 0 2px rgba(255,92,0,.35); }
.tc-p-sticky-search-field i { color: var(--tc-p-orange); font-size: 17px; }
/* La palabra que cicla ("marca"/"vehículo"/"medida"/"modelo") tiene largos
   distintos — sin un ancho reservado, el botón entero cambiaba de tamaño
   cada 3.2s. "vehículo" es la más larga, así que el ancho mínimo se calcula
   sobre esa. */
#tcPStickySearchWord { display: inline-block; min-width: 4.6em; text-align: left; }
:root[data-theme="light"] .tc-p-sticky-search-field {
    background: var(--tc-p-surface);
    border-color: var(--tc-p-border);
    color: #16161c;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
@media (max-width: 575.98px) {
    .tc-p-sticky-search-field { padding: 12px 22px; font-size: 14px; gap: 10px; }
    .tc-p-sticky-search-field i { font-size: 14px; }
}
@property --tc-p-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.tc-p-navbar-row {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 10px;
    background: rgba(16,16,24,.78);
    border: 1px solid rgba(255,255,255,.08);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-radius: 999px;
    padding: 14px 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.4);
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
/* Borde con un barrido de luz naranja que gira alrededor de la pastilla —
   "StarBorder" de reactbits.dev, reimplementado en CSS puro con @property
   (degrada con gracia a un borde fijo en navegadores sin soporte). */
.tc-p-navbar-row::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--tc-p-angle), transparent 0deg, transparent 300deg, var(--tc-p-orange) 340deg, #fff 355deg, var(--tc-p-orange) 360deg);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: tcPBorderSpin 5s linear infinite;
}
@keyframes tcPBorderSpin { to { --tc-p-angle: 360deg; } }
.tc-p-navbar-brand {
    flex: none;
    display: flex;
    align-items: center;
    padding: 8px 6px;
}
.tc-p-navbar-logo { height: 22px; filter: brightness(0) invert(1); }

.tc-p-navbar-collapse { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; gap: 16px; padding: 0; margin: 0; }
@media (min-width: 992px) { .tc-p-navbar-collapse { display: flex; } }

.tc-p-navbar-links.navbar-nav { flex-direction: row; flex-wrap: nowrap; gap: 4px; }
.tc-p-nav-link.nav-link {
    color: rgba(255,255,255,.75) !important;
    font-weight: 600;
    font-size: 13.5px;
    padding: 6px 10px !important;
    white-space: nowrap;
    transition: color .15s ease;
}
.tc-p-nav-link.nav-link:hover { color: #fff !important; }

.tc-p-navbar-search { flex: 0 1 240px; min-width: 0; max-width: 280px; margin-left: auto; }
.tc-p-navbar-search-field {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 999px;
    padding: 8px 16px;
    min-width: 0;
    transition: box-shadow .15s ease;
}
.tc-p-navbar-search-field:focus-within { box-shadow: 0 0 0 2px rgba(255,92,0,.35); }
.tc-p-navbar-search-field i { color: var(--tc-p-orange); flex: none; font-size: 13px; }

/* Estructura del buscador (posición, dropdown, placeholder animado). */
.tc-rd3-navbar-search-input-wrap { position: relative; flex: 1 1 auto; min-width: 0; }
.tc-p-navbar-search-input {
    /* app.css pone `input { border:1px solid...!important; background:white!important }`
       globalmente (producción) — se le gana con la misma prioridad y más especificidad. */
    border: none !important;
    background: transparent !important;
    outline: none;
    color: #fff !important;
    font-size: 13px;
    width: 100%;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.tc-rd3-navbar-search-fake-placeholder {
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,.5);
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .2s ease;
}
.tc-rd3-navbar-search-fake-placeholder.is-hidden { opacity: 0; }
.tc-p-search-word { display: inline-block; transition: opacity .5s ease, transform .5s ease; }
.tc-p-search-word.is-swapping { opacity: 0; transform: translateY(8px); }

.tc-rd3-navbar-search-results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: 380px;
    overflow-y: auto;
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
    border-radius: 14px;
    box-shadow: 0 20px 40px rgba(0,0,0,.4);
    padding: 8px;
    z-index: 1000;
}
.tc-rd3-navbar-search-results.is-open { display: block; }
.tc-rd3-navbar-search-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--tc-p-text-dim); padding: 8px 10px 4px; }
.tc-rd3-navbar-search-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}
.tc-rd3-navbar-search-item:hover { background: rgba(255,255,255,.06); }
.tc-rd3-navbar-search-item img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.tc-rd3-navbar-search-empty { padding: 14px 10px; font-size: 13px; color: var(--tc-p-text-dim); text-align: center; }
.tc-rd3-navbar-search-loading {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 16px 10px;
    font-size: 13px;
    color: var(--tc-p-text-dim);
}
.tc-rd3-navbar-search-spinner {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid var(--tc-p-border);
    border-top-color: var(--tc-p-orange);
    animation: tcRd3SearchSpin .6s linear infinite;
}
@keyframes tcRd3SearchSpin { to { transform: rotate(360deg); } }

.tc-p-nav-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    transition: background .15s ease;
    cursor: pointer;
}
.tc-p-nav-icon-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
/* Icono de ubicación con el CP al lado: con CP se vuelve píldora, sin CP queda el círculo de siempre. */
.tc-p-nav-icon-btn--cp:has(.tc-p-nav-cp:not(:empty)) { width: auto; padding: 0 10px; border-radius: 17px; gap: 6px; }
.tc-p-nav-cp { font-size: 12px; font-weight: 700; white-space: nowrap; }

/* Animación "volar al carrito" (deal-add-to-cart.js, flyToCart()) — bolita
   naranja que sale del botón presionado y viaja hasta el ícono del carrito
   visible en ese momento (navbar normal, sticky o menú móvil), estilo
   MercadoLibre. position:fixed + JS fija top/left en px antes de animar
   (no puede saber de antemano dónde está cada botón/ícono), así que aquí
   solo van las propiedades que SÍ son siempre iguales. will-change evita
   popping en Safari al animar transform+opacity juntos. */
.tc-fly-to-cart-dot {
    position: fixed;
    z-index: 2000;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--tc-p-orange);
    box-shadow: 0 2px 8px rgba(255,92,0,.6);
    pointer-events: none;
    will-change: transform, opacity;
    transition: transform .55s cubic-bezier(.3,.1,.3,1), opacity .55s ease .25s;
}
/* "Golpecito" del ícono del carrito cuando la bolita llega — mismo patrón
   que el resto de micro-interacciones del sitio (ver tc-p-btn-glow-pulse). */
.tc-p-nav-icon-btn.tc-cart-bump { animation: tc-cart-bump .4s ease; }
@keyframes tc-cart-bump {
    0%, 100% { transform: scale(1); }
    35% { transform: scale(1.3); }
    60% { transform: scale(.92); }
}
@media (prefers-reduced-motion: reduce) {
    .tc-fly-to-cart-dot { display: none; }
    .tc-p-nav-icon-btn.tc-cart-bump { animation: none; }
}

/* Indicador de ubicación/CP en el navbar — solo visible cuando ya hay
   serviceInfo guardado (ver location.js), da click para reabrir el modal y
   reemplazarla. */
.tc-p-nav-zip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.tc-p-nav-zip-btn:hover { background: rgba(255,255,255,.18); }
.tc-p-nav-zip-btn i { color: var(--tc-p-orange); font-size: 14px; }

/* Modales de Bootstrap (login, rastrear pedido, etc.): sin esto quedaban
   con el fondo blanco de Bootstrap por defecto sin importar el tema — los
   inputs de adentro ya heredaban el tema (regla global en app.css) pero la
   tarjeta y sus textos no. */
.modal-content {
    background: var(--tc-p-surface);
    color: var(--tc-p-input-text);
}
.modal-content .text-muted { color: var(--tc-p-text-dim) !important; }
.modal-content .form-floating > label { color: var(--tc-p-field-label, var(--tc-p-text-dim)); }
:root:not([data-theme="light"]) .modal-content .btn-close {
    filter: invert(1) grayscale(1);
}
:root:not([data-theme="light"]) .modal-content img[src*="menu_logo"] {
    filter: brightness(0) invert(1);
}

/* Botón "Rastrear" (abre #trackOrderModal) — mismo look de píldora que
   .tc-p-nav-zip-btn, con texto para que no se confunda con solo un ícono. */
.tc-p-nav-track-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease;
}
.tc-p-nav-track-btn:hover { background: rgba(255,255,255,.18); }
.tc-p-nav-track-btn i { color: inherit; font-size: 14px; }

/* app.css tiene `i { color: #ff5c00; }` global — un color puesto
   directamente en el propio <i> siempre gana sobre el heredado del padre,
   sin importar la especificidad, así que hay que apuntar al <i> aquí
   también (con más especificidad que ese selector de tag suelto) en vez de
   confiar en la herencia. */
.tc-p-nav-icon-btn i { color: inherit; }
/* Selector de idioma: reemplazó al toggle de tema (que sigue decidiendo
   claro/oscuro por hora del día, solo ya no tiene botón manual). Pastilla en
   vez de círculo porque lleva texto (el código del idioma al que cambiaría). */
/* Oculto a pedido — el sitio se queda en español por default. Se deja el
   markup/ruta de cambio de idioma intactos (no se borra nada) por si se
   quiere reactivar más adelante, solo se esconde el botón. */
.tc-p-lang-btn { display: none; }

/* Toggle claro/oscuro: mismo círculo que el resto de .tc-p-nav-icon-btn.
   Los dos íconos (sol/luna) viven siempre en el HTML; CSS decide cuál se
   ve según [data-theme] en <html> en vez de intercambiar el ícono por JS
   — evita el parpadeo de ícono incorrecto antes de que theme-toggle.js
   corra. Reglas explícitas para los 4 casos (sin depender del display
   default del navegador para <i>) para que nunca se vean los dos a la
   vez. Muestra el sol en modo oscuro (a dónde te lleva el clic) y la luna
   en modo claro — pedido explícito, no "cuál es el tema actual". */
.tc-p-theme-icon-dark { display: none; }
.tc-p-theme-icon-light { display: inline; }
:root[data-theme="light"] .tc-p-theme-icon-dark { display: inline; }
:root[data-theme="light"] .tc-p-theme-icon-light { display: none; }
.tc-p-lang-code { letter-spacing: .3px; }
.tc-p-nav-login-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none; border-radius: 999px;
    background: var(--tc-p-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 8px 18px;
}
.tc-p-nav-login-btn i { color: inherit; font-size: 15px; }
.tc-p-nav-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 14px 0 4px;
    border-radius: 999px;
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
    transition: background .15s ease;
}
.tc-p-nav-user-btn:hover { background: rgba(255,255,255,.18); color: #fff; }
.tc-p-nav-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}
.tc-p-nav-user-name {
    font-size: 13px;
    font-weight: 700;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 1200px) {
    .tc-p-nav-user-name { display: none; }
    .tc-p-nav-user-btn { padding: 0; width: 34px; height: 34px; justify-content: center; }
}
.tc-p-nav-user-btn { border: none; }
/* Botón rojo "Cerrar sesión" al final del desplegable de celular. */
.tc-p-nav-logout-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; margin: 10px 0 4px; padding: 12px 16px;
    border: none; border-radius: 12px;
    background: #dc3545; color: #fff;
    font-size: 15px; font-weight: 800;
}
.tc-p-nav-logout-btn i { color: inherit; }
.tc-p-nav-logout-btn:active { background: #b02a37; }
.tc-p-nav-user-caret { font-size: 10px; opacity: .7; }
@media (max-width: 1200px) { .tc-p-nav-user-caret { display: none; } }

.tc-p-nav-user-menu {
    background: #16161c;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 0;
    margin-top: 12px;
    width: 240px;
    overflow: hidden;
    box-shadow: 0 20px 48px rgba(0,0,0,.5);
}
.tc-p-nav-user-menu-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255,255,255,.03);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.tc-p-nav-user-avatar--lg {
    width: 38px; height: 38px;
    font-size: 13px;
    flex-shrink: 0;
}
.tc-p-nav-user-menu-id { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tc-p-nav-user-menu-id strong {
    font-size: 13.5px;
    color: #fff;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-p-nav-user-menu-id span {
    font-size: 11.5px;
    color: rgba(255,255,255,.5);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tc-p-nav-user-menu-body { padding: 8px; }
.tc-p-nav-user-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #fff;
    border-radius: 10px;
    padding: 10px 10px;
    font-size: 13.5px;
    font-weight: 600;
    width: 100%;
    text-align: left;
}
.tc-p-nav-user-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    font-size: 14px;
    flex-shrink: 0;
}
.tc-p-nav-user-menu .dropdown-item:hover,
.tc-p-nav-user-menu .dropdown-item:focus {
    background: rgba(255,255,255,.08);
    color: #fff;
}
.tc-p-nav-user-item--admin .tc-p-nav-user-item-icon {
    background: rgba(255,92,0,.15);
    color: var(--tc-p-orange);
}
.tc-p-nav-user-item--danger { color: #ff6b6b; }
.tc-p-nav-user-item--danger .tc-p-nav-user-item-icon { color: #ff6b6b; }
.tc-p-nav-user-item--danger:hover,
.tc-p-nav-user-item--danger:focus {
    background: rgba(255,107,107,.12);
    color: #ff6b6b;
}
.tc-p-nav-user-menu-divider { height: 1px; background: rgba(255,255,255,.08); margin: 6px 4px; }

:root[data-theme="light"] .tc-p-nav-user-menu {
    background: #fff;
    border-color: rgba(0,0,0,.08);
}
:root[data-theme="light"] .tc-p-nav-user-menu-header { background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); }
:root[data-theme="light"] .tc-p-nav-user-menu-id strong { color: #16161c; }
:root[data-theme="light"] .tc-p-nav-user-menu-id span { color: rgba(0,0,0,.5); }
:root[data-theme="light"] .tc-p-nav-user-menu .dropdown-item { color: #16161c; }
:root[data-theme="light"] .tc-p-nav-user-item-icon { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tc-p-nav-user-menu .dropdown-item:hover,
:root[data-theme="light"] .tc-p-nav-user-menu .dropdown-item:focus {
    background: rgba(0,0,0,.05);
    color: #16161c;
}
:root[data-theme="light"] .tc-p-nav-user-item--danger { color: #e03131; }
:root[data-theme="light"] .tc-p-nav-user-item--danger .tc-p-nav-user-item-icon { color: #e03131; }
:root[data-theme="light"] .tc-p-nav-user-item--danger:hover { background: rgba(224,49,49,.08); color: #e03131; }
:root[data-theme="light"] .tc-p-nav-user-menu-divider { background: rgba(0,0,0,.08); }
.tc-p-toggler { color: #fff; padding: 4px; }
.tc-p-toggler:focus { box-shadow: none; }
.tc-p-burger { position: relative; display: inline-block; width: 20px; height: 14px; }
.tc-p-burger span {
    position: absolute; left: 0; width: 100%; height: 2px;
    background: #fff; border-radius: 2px;
    transition: transform .25s ease, opacity .2s ease, top .2s ease;
}
.tc-p-burger span:nth-child(1) { top: 0; }
.tc-p-burger span:nth-child(2) { top: 6px; }
.tc-p-burger span:nth-child(3) { top: 12px; }
.tc-p-toggler[aria-expanded="true"] .tc-p-burger span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.tc-p-toggler[aria-expanded="true"] .tc-p-burger span:nth-child(2) { opacity: 0; }
.tc-p-toggler[aria-expanded="true"] .tc-p-burger span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (max-width: 991.98px) {
    .tc-p-navbar-row { border-radius: 22px; padding: 10px 16px; max-width: none; margin: 0 16px; width: calc(100% - 32px); }
    .tc-p-navbar-collapse {
        display: flex;
        position: absolute;
        top: calc(100% + 10px);
        left: 16px; right: 16px;
        z-index: 20;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        max-height: 75vh;
        overflow-y: auto;
        padding: 16px 18px;
        background: #0f0f16;
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 20px;
        box-shadow: 0 16px 30px rgba(0,0,0,.5);
        opacity: 0;
        transition: opacity .2s ease;
    }
    .tc-p-navbar-collapse:not(.show):not(.collapsing) { display: none; }
    .tc-p-navbar-collapse.collapsing,
    .tc-p-navbar-collapse.show { transition: opacity .2s ease; height: auto !important; }
    .tc-p-navbar-collapse.show { opacity: 1; }
    .tc-p-navbar-links.navbar-nav { flex-direction: column; gap: 2px; }
    .tc-p-nav-link.nav-link { padding: 10px 6px !important; font-size: 15px; }
    .tc-p-navbar-search { flex: none; max-width: none; margin-left: 0; order: -1; }
    .tc-p-nav-zip-btn--mobile {
        width: 100%;
        justify-content: center;
        height: 42px;
        border-radius: 12px;
        background: rgba(255,255,255,.06);
        order: -1;
    }
}

/* ---- Navbar en modo claro: vidrio oscuro TODO el tiempo mientras está
   sobre un fondo oscuro (foto de hero, siempre oscura, cambie o no el
   tema); tarjeta clara y sólida (.is-scrolled, activado por
   navbar-scroll.js) en cuanto hay fondo claro de página detrás. En páginas
   sin .tc-p-hero, navbar-scroll.js activa .is-scrolled de una vez, así que
   esta variante clara es la que se ve siempre ahí.
   Carrito/checkout (.tc-cart-hero), búsqueda por medida (.tc-size-hero) y
   el blog y sus artículos (.tc-blog-page-hero, .tc-article-hero) tienen
   foto CLARA en modo claro: ahí la tarjeta clara se usa desde el
   inicio, sin esperar al scroll (antes se forzaba un vidrio oscuro). ---- */
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-navbar-row,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-navbar-row,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-navbar-row {
    /* Vidrio esmerilado en claro: blanco translúcido con degradado, desenfoque y brillo en el borde superior; deja ver la
       foto o el contenido que pasa por detrás (en un fondo blanco liso solo se nota el borde y la sombra). */
    background: linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.7));
    border-color: rgba(255,255,255,.75);
    box-shadow: 0 10px 30px rgba(20,24,40,.14), inset 0 1px 0 rgba(255,255,255,.9), 0 0 0 1px rgba(20,24,40,.05);
    backdrop-filter: blur(22px) saturate(1.6); -webkit-backdrop-filter: blur(22px) saturate(1.6);
}
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-navbar-logo,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-navbar-logo,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-navbar-logo { filter: none; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-link.nav-link,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-link.nav-link,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-link.nav-link { color: rgba(20,20,26,.7) !important; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-link.nav-link:hover,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-link.nav-link:hover,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-link.nav-link:hover { color: #16161c !important; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-navbar-search-field,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-navbar-search-field,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-navbar-search-field { background: transparent !important; border-color: rgba(0,0,0,.2); }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-navbar-search-input,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-navbar-search-input,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-navbar-search-input { color: #16161c !important; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-rd3-navbar-search-fake-placeholder,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-rd3-navbar-search-fake-placeholder,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-rd3-navbar-search-fake-placeholder { color: rgba(20,20,26,.5); }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-rd3-navbar-search-item,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-rd3-navbar-search-item,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-rd3-navbar-search-item { color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-rd3-navbar-search-item:hover,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-rd3-navbar-search-item:hover,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-rd3-navbar-search-item:hover { background: rgba(0,0,0,.05); }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-icon-btn,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-icon-btn,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-icon-btn { background: transparent; color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-icon-btn:hover,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-icon-btn:hover,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-icon-btn:hover { background: rgba(0,0,0,.1); color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-track-btn,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-track-btn,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-track-btn { background: transparent; color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-track-btn:hover,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-track-btn:hover,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-track-btn:hover { background: rgba(0,0,0,.1); color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-user-btn,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-user-btn,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-user-btn { background: rgba(0,0,0,.05); color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-nav-user-btn:hover,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-nav-user-btn:hover,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-nav-user-btn:hover { background: rgba(0,0,0,.1); color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-toggler,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-toggler,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-toggler { color: #16161c; }
:root[data-theme="light"] .tc-p-navbar.is-scrolled .tc-p-burger span,
:root[data-theme="light"] body:has(.tc-cart-hero) .tc-p-navbar .tc-p-burger span,
:root[data-theme="light"] body:has(.tc-size-hero, .tc-blog-page-hero, .tc-article-hero) .tc-p-navbar .tc-p-burger span { background: #16161c; }
/* Mientras el navbar sigue sobre el hero (.is-scrolled aparte), en modo
   claro usa un vidrio más transparente (deja ver la foto oscura de fondo)
   en vez del vidrio oscuro casi opaco del modo oscuro. */
:root[data-theme="light"] .tc-p-navbar:not(.is-scrolled) .tc-p-navbar-row {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.4);
    backdrop-filter: blur(20px) saturate(1.3); -webkit-backdrop-filter: blur(20px) saturate(1.3);
}
/* (Antes hubo aquí un intento de oscurecer también .tc-p-nav-icon-btn en
   este estado "no scrolled" — mal: la foto detrás sigue siendo oscura
   siempre, así que un ícono oscuro quedaba oscuro-sobre-oscuro, casi
   invisible. El ícono debe seguir blanco (su color por default) mientras
   el navbar flota sobre el hero; solo se oscurece de verdad en
   .is-scrolled, donde el fondo ya es sólido y claro.) */

@media (max-width: 991.98px) {
    /* El panel desplegable de móvil SÍ es un fondo blanco opaco (no vidrio
       transparente), así que ahí adentro el texto vuelve a oscuro. */
    :root[data-theme="light"] .tc-p-navbar-collapse {
        background: #fff;
        border-color: rgba(0,0,0,.08);
        box-shadow: 0 16px 30px rgba(0,0,0,.16);
    }
    :root[data-theme="light"] .tc-p-nav-link.nav-link { color: rgba(20,20,26,.7) !important; }
    :root[data-theme="light"] .tc-p-nav-link.nav-link:hover { color: #16161c !important; }
    :root[data-theme="light"] .tc-p-nav-zip-btn--mobile { background: rgba(0,0,0,.05); color: #16161c; }
    :root[data-theme="light"] .tc-p-navbar-search-field { background: rgba(0,0,0,.05) !important; border-color: rgba(0,0,0,.1); }
    :root[data-theme="light"] .tc-p-navbar-search-input { color: #16161c !important; }
    :root[data-theme="light"] .tc-rd3-navbar-search-fake-placeholder { color: rgba(20,20,26,.5); }
    :root[data-theme="light"] .tc-rd3-navbar-search-item { color: #16161c; }
    :root[data-theme="light"] .tc-rd3-navbar-search-item:hover { background: rgba(0,0,0,.05); }
}

/* Tarjetas de producto/modelo "bestseller" (.tc-p-bestseller-*, usadas en
   Ofertas/Modelos más vendidos del home y en brandInformation/
   productInformation/modelInformation) — movidas a product-model-cards.css
   (cargado en layouts/app.blade.php) porque no tenían relación real con
   navbar/footer, solo vivían aquí por historia. */



/* ---- Tarjeta de oferta "Pulse" (deals en /v1-clean, listados reales con
   stock/precio como showBySize.blade.php) — SÍ cambia con el tema (tarjeta
   oscura por defecto, clara en modo claro). ---- */
.tc-p-deal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1199.98px) { .tc-p-deal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) {
    .tc-p-deal-grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 16px; padding: 6px 9% 16px; -webkit-overflow-scrolling: touch; }
    .tc-p-deal-card { flex: 0 0 78%; scroll-snap-align: center; }
}
.tc-p-deal-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--tc-p-orange) transparent;
}
.tc-p-deal-grid::-webkit-scrollbar { height: 5px; }
.tc-p-deal-grid::-webkit-scrollbar-track { background: transparent; margin: 0 20px; }
.tc-p-deal-grid::-webkit-scrollbar-thumb { background: var(--tc-p-orange); border-radius: 4px; }
.tc-p-deal-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
    color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
/* La foto siempre tiene fondo gris claro + multiply, igual que el resto de
   fotos reales de llanta en la página — no cambia con el tema. */
.tc-p-deal-photo {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    height: 190px;
    background: #eaeaea;
    padding: 18px;
}
.tc-p-deal-photo img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.tc-p-deal-photo .tc-p-deal-no-img { font-size: 28px; color: #b5b5b5; }
.tc-p-deal-discount {
    position: absolute; top: 0; left: 0; margin: 10px; z-index: 1;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 11px; font-weight: 800;
    padding: 4px 9px;
    border-radius: 999px;
}
.tc-p-deal-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.tc-p-deal-brand-logo { height: 36px; max-width: 84px; object-fit: contain; background: #fff; border-radius: 6px; padding: 4px 7px; margin-bottom: 8px; }
.tc-p-deal-name {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
    font-size: 13.5px; font-weight: 800; color: #fff; text-decoration: none; line-height: 1.3; margin-bottom: 8px;
}
.tc-p-deal-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.tc-p-deal-price-now { font-size: 17px; font-weight: 800; color: var(--tc-p-orange); }
.tc-p-deal-price-old { font-size: 12.5px; font-weight: 600; color: var(--tc-p-text-dim); text-decoration: line-through; }
.tc-p-deal-stock { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--tc-p-text-dim); margin-bottom: 12px; }
.tc-p-deal-stock--low { color: var(--tc-p-orange); }
.tc-p-deal-stock--out { color: #ff6b6b; }
.tc-p-deal-actions { display: flex; gap: 8px; margin-top: auto; }
.tc-p-deal-btn {
    flex: 1;
    text-align: center;
    border: none;
    border-radius: 8px;
    padding: 9px 0;
    font-size: 12.5px; font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}
.tc-p-deal-btn--primary { background: var(--tc-p-orange); color: #fff; }
.tc-p-deal-btn--primary:hover { opacity: .9; }
.tc-p-deal-btn--primary:disabled { background: var(--tc-p-border); color: var(--tc-p-text-dim); cursor: not-allowed; }
.tc-p-deal-btn--ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--tc-p-border); }
.tc-p-deal-btn--ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
:root[data-theme="light"] .tc-p-deal-card { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
:root[data-theme="light"] .tc-p-deal-name { color: #16161c; }
:root[data-theme="light"] .tc-p-deal-btn--ghost { background: rgba(0,0,0,.04); color: #16161c; }
:root[data-theme="light"] .tc-p-deal-btn--ghost:hover { background: rgba(0,0,0,.08); color: #16161c; }

/* ---- Flechas + puntos de carrusel "Pulse" (depth-carousel en /v1-clean,
   reusable en cualquier otro carrusel real como el de brandInformation). ---- */
.tc-p-depth-nav {
    flex: none;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(16,16,24,.65);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
    font-size: 17px;
    backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.tc-p-depth-nav:hover { background: rgba(16,16,24,.85); color: #fff; }
/* En modo claro el vidrio oscuro se veía fuera de lugar sobre el fondo
   claro de la página (tanto en /v1-clean como en brandInformation) —
   mismo tratamiento que el resto de botones de ícono en modo claro. */
:root[data-theme="light"] .tc-p-depth-nav {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.1);
    color: #16161c;
}
:root[data-theme="light"] .tc-p-depth-nav:hover { background: rgba(0,0,0,.1); color: #16161c; }
.tc-p-depth-dots { display: flex; align-items: center; gap: 8px; }
.tc-p-depth-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.35); border: none; cursor: pointer; transition: width .3s ease, background .3s ease; }
.tc-p-depth-dots button.is-active { width: 20px; border-radius: 4px; background: var(--tc-p-orange); }
:root[data-theme="light"] .tc-p-depth-dots button:not(.is-active) { background: rgba(0,0,0,.15); }

/* ---- Footer ---- */
/* padding-top en vez de margin-top: un margin aquí deja ver lo que hay
   detrás de AMBOS elementos adyacentes (.tc-p-page y este footer, o sea
   el fondo de <body>, blanco fuera de /v1-clean) en vez del fondo propio
   del footer — invisible en home porque ahí <body> ya es oscuro. */
.tc-p-footer { background: var(--tc-p-surface); border-top: 1px solid var(--tc-p-border); padding: 96px 0 0; }
.tc-p-footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--tc-p-border); }
@media (max-width: 991.98px) { .tc-p-footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575.98px) { .tc-p-footer-top { grid-template-columns: 1fr; gap: 28px; } }

.tc-p-footer-logo { height: 26px; margin-bottom: 14px; filter: brightness(0) invert(1); }
:root[data-theme="light"] .tc-p-footer-logo { filter: none; }
.tc-p-footer-brand p { font-size: 13.5px; line-height: 1.6; color: var(--tc-p-text-dim); max-width: 260px; margin-bottom: 18px; }
.tc-p-footer-social { display: flex; gap: 10px; }
.tc-p-footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: rgba(255,92,0,.1);
    color: var(--tc-p-orange);
    font-size: 15px;
    transition: background .15s ease, color .15s ease;
}
.tc-p-footer-social a:hover { background: var(--tc-p-orange); color: #fff; }

.tc-p-footer-heading { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: #fff; margin-bottom: 16px; }
:root[data-theme="light"] .tc-p-footer-heading { color: #16161c; }
.tc-p-footer-col { display: flex; flex-direction: column; gap: 10px; }
.tc-p-footer-col a, .tc-p-footer-col .tc-p-footer-address {
    display: flex; align-items: center; gap: 8px;
    font-size: 13.5px;
    color: var(--tc-p-text-dim);
    text-decoration: none;
}
.tc-p-footer-col a:hover { color: var(--tc-p-orange); }

.tc-p-footer-newsletter-copy { font-size: 13.5px; color: var(--tc-p-text-dim); margin: -6px 0 4px; }
.tc-p-footer-newsletter-form { display: flex; gap: 8px; }
/* !important necesario: app.css trae un "input { background: white !important }"
   genérico (pensado para formularios clásicos) que si no se pisa con la misma
   fuerza, gana siempre y deja este input blanco fijo sin importar el tema. */
.tc-p-footer-newsletter-form input {
    flex: 1; min-width: 0;
    background: rgba(255,255,255,.06) !important;
    border: 1px solid var(--tc-p-border) !important;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    color: #fff !important;
}
:root[data-theme="light"] .tc-p-footer-newsletter-form input {
    background: rgba(0,0,0,.04) !important;
    color: #16161c !important;
}
.tc-p-footer-newsletter-form input::placeholder { color: var(--tc-p-text-dim); }
.tc-p-footer-newsletter-form input:focus { outline: none; border-color: var(--tc-p-orange); }
.tc-p-footer-newsletter-form button {
    flex: none;
    width: 40px; height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--tc-p-orange);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
/* app.css tiene `i { color: #ff5c00; }` global, que gana sobre el color
   heredado del botón sin importar la especificidad — el ícono quedaba
   naranja sobre un botón también naranja (invisible). Mismo fix que
   .tc-p-nav-icon-btn i. */
.tc-p-footer-newsletter-form button i { color: inherit; }
.tc-p-footer-newsletter-status { font-size: 12px; margin: 8px 0 0; min-height: 16px; }
.tc-p-footer-newsletter-status.is-success { color: #2ecc71; }
.tc-p-footer-newsletter-status.is-error { color: #ff5c5c; }


.tc-p-footer-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 22px 0; font-size: 12.5px; color: var(--tc-p-text-dim); }
.tc-p-footer-bottom-links { display: flex; gap: 18px; }
.tc-p-footer-bottom-links a { color: var(--tc-p-text-dim); text-decoration: none; }
.tc-p-footer-bottom-links a:hover { color: var(--tc-p-orange); }

@media (max-width: 575.98px) {
    .tc-p-footer { padding-top: 40px; }
    .tc-p-footer .container { padding-left: 20px; padding-right: 20px; }
    .tc-p-footer-top { gap: 32px; }
    .tc-p-footer-brand p { max-width: none; }
        .tc-p-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ---- Banner de cookies propio de footer-v3 (ids distintos a los del
   footer real para no chocar con location.js — ver footer-cookie-banner.js
   y el guard agregado en location.js). ---- */
.tc-p-cookie-banner {
    display: none;
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1040;
    max-width: 640px;
    margin: 0 auto;
    align-items: center;
    gap: 16px;
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,.35);
}
.tc-p-cookie-text p { font-size: 12.5px; line-height: 1.5; color: var(--tc-p-text-dim); margin: 0 0 4px; }
.tc-p-cookie-text p:last-child { margin-bottom: 0; }
.tc-p-cookie-text a { color: var(--tc-p-orange); }
.tc-p-cookie-accept {
    flex: none;
    border: none;
    border-radius: 999px;
    background: var(--tc-p-orange);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    padding: 10px 22px;
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .tc-p-cookie-banner { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ---- Acordeón de preguntas frecuentes (tc-p-faq-accordion): compartido por
   el home (solo 4, ver index.blade.php) y por /preguntas-frecuentes
   (todas, ver faq-page.blade.php) — extraído de index.css, que se queda
   solo con la decoración exclusiva del home (grid de 2 columnas, llanta
   animada, badges). ---- */
.tc-p-faq-accordion { position: relative; z-index: 2; }
.tc-p-faq-accordion .accordion-item {
    background: var(--tc-p-surface);
    border: 1px solid var(--tc-p-border);
    border-radius: 14px !important;
    margin-bottom: 14px;
    overflow: hidden;
}
.tc-p-faq-accordion .accordion-button {
    background: transparent;
    color: #f2f2f5;
    font-weight: 700;
    font-size: .95rem;
    gap: 14px;
    box-shadow: none !important;
}
:root[data-theme="light"] .tc-p-faq-accordion .accordion-button { color: #16161c; }
.tc-p-faq-accordion .accordion-button:not(.collapsed) { color: var(--tc-p-orange) !important; background: transparent; }
.tc-p-faq-accordion .accordion-button:not(.collapsed)::after { --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon); }
:root:not([data-theme="light"]) .tc-p-faq-accordion .accordion-button::after { filter: invert(1); }
.tc-p-faq-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    flex: none;
    border-radius: 50%;
    background: rgba(255,92,0,.12);
    color: var(--tc-p-orange);
    font-size: 12px;
    font-weight: 800;
}

/* ─── Panel de filtros (offcanvas): patrón compartido por cualquier listado
   de productos con filtros (/medida/{slug}, /marca/{slug}, /ofertas...) —
   un botón fijo en el hero abre este panel lateral en vez de una barra de
   filtros flotando pegada arriba. Adapta el offcanvas (blanco fijo por
   default en Bootstrap) al tema claro/oscuro del sitio. Antes vivía
   duplicado en css/page/search/showBySize.css, ahora es de todo el sitio. */
.filter-icon {
    width: 24px;
    height: 24px;
    margin-right: 8px;
}
/* El offcanvas de Bootstrap trae su propio fondo blanco fijo
   (--bs-offcanvas-bg) separado del contenido — .tc-p-filters de abajo solo
   cubre el .offcanvas-body, así que el .offcanvas-header ("Filtrar por" +
   la X de cerrar) se quedaba blanco encima de un body ya oscuro. Mismo
   token --tc-p-bg que el body para que se vea como un solo panel. */
.tc-tire-filters-header { background: var(--tc-p-bg); color: #f2f2f5; }
:root[data-theme="light"] .tc-tire-filters-header { background: #fff; color: #16161c; }
.tc-p-filters { background: var(--tc-p-bg); color: #f2f2f5; }
.tc-p-filters .form-label { color: inherit; }
.tc-p-filter-input {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    color: #f2f2f5;
}
.tc-p-filter-input:focus {
    background: rgba(255,255,255,.09);
    color: #f2f2f5;
    border-color: var(--tc-p-orange);
    box-shadow: 0 0 0 .2rem rgba(255,92,0,.2);
}
.tc-p-filter-input::placeholder { color: rgba(255,255,255,.4); }
/* El <select> hereda el color de texto casi blanco del panel oscuro, pero
   el desplegable nativo de <option> no hereda el fondo oscuro (usa el
   blanco del sistema por default) — sin esto queda letra casi blanca
   sobre fondo casi blanco, ilegible. */
.tc-p-filter-input option {
    background: #1c1c22;
    color: #f2f2f5;
}
.tc-p-brand-checkboxes {
    max-height: 220px;
    overflow-y: auto;
    padding-right: 4px;
}
.tc-p-brand-checkboxes::-webkit-scrollbar { width: 5px; }
.tc-p-brand-checkboxes::-webkit-scrollbar-thumb { background: var(--tc-p-orange); border-radius: 4px; }

:root[data-theme="light"] .tc-p-filters { background: #fff; color: #16161c; }
:root[data-theme="light"] .tc-p-filter-input {
    background: #fff;
    border: 1px solid #dee2e6;
    color: #16161c;
}
:root[data-theme="light"] .tc-p-filter-input::placeholder { color: #9ca3af; }
:root[data-theme="light"] .tc-p-filter-input option {
    background: #fff;
    color: #16161c;
}
.offcanvas-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
:root[data-theme="light"] .offcanvas-header .btn-close { filter: none; }
.tc-p-faq-accordion .accordion-body { color: var(--tc-p-text-dim); font-size: .88rem; line-height: 1.6; padding-top: 0; }

/* ---- Celular: las tarjetas de llanta/modelo entran por su lado al hacer
   scroll (columna izquierda desde la izquierda, derecha desde la derecha).
   card-reveal.js les pone data-side según su columna y .is-in a cada una
   cuando aparece; se repite si sales y vuelves. Aquí (y no en index.css)
   porque este archivo lo cargan todas las páginas con estas rejillas. ---- */
@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
    [data-reveal-grid]:has([data-side]) { overflow-x: clip; }
    [data-reveal-grid] [data-reveal-card][data-side] {
        opacity: 0;
        transition: opacity .5s ease, transform .6s cubic-bezier(.22, .66, .32, 1);
        transition-delay: 0ms;
    }
    /* :not(.is-in) sube la especificidad sobre la entrada de la rejilla
       completa del home (index.css, [data-reveal-grid].is-in ...). */
    [data-reveal-grid] [data-reveal-card][data-side]:not(.is-in) { opacity: 0; }
    [data-reveal-grid] [data-reveal-card][data-side="left"]:not(.is-in) { transform: translateX(-60px); }
    [data-reveal-grid] [data-reveal-card][data-side="right"]:not(.is-in) { transform: translateX(60px); }
    [data-reveal-grid] [data-reveal-card][data-side].is-in { opacity: 1; transform: none; }
}

/* ---- Medida bajo el nombre en las tarjetas de llanta (inicio, /medida,
   /ofertas, recomendaciones): tire-card, product-card y la de "Ofertas"
   del home. Aquí porque este archivo lo cargan todas esas páginas. ---- */
.tc-card-measurement {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--tc-p-text-dim, #9a9aab);
}

/* "Modelos más vendidos" del home en celular: regla movida a
   product-model-cards.css junto con el resto de la variante --home. */

/* Desempeño de la llanta (atributo pa_performance): chip negro con ícono, ajustado a su contenido. */
.tc-card-performance {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    width: fit-content;
    max-width: 100%;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    color: #fff;
    background: #ff6000;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(255, 96, 0, .35);
}
.tc-card-performance i { font-size: 13px; line-height: 1; color: #fff; }
.tc-card-performance-text { overflow: hidden; text-overflow: ellipsis; }
/* Modo claro: chip negro. En oscuro (por defecto) es naranja para que resalte sobre la tarjeta. */
:root[data-theme="light"] .tc-card-performance { background: #0e0e14; box-shadow: 0 2px 8px rgba(14, 14, 20, .3); }