/* ===================================================================== */
/*  TIENDA PÚBLICA VEL+ (Fase 5A, detalles tipo tienda de suplementos)  */
/*  Mismo estilo del panel y de la app del gimnasio: formas rectas,      */
/*  títulos condensados en mayúsculas y cursiva, teal y pizarra de VEL+. */
/*  Colores y tamaños: sección 1.                                        */
/* ===================================================================== */


/* ===================================================================== */
/* 1. TOKENS                                                             */
/* ===================================================================== */
:root {
    --t-fondo: #ffffff;
    --t-fondo-2: #f2f6f6;
    --t-pizarra: #1f2d36;          /* fondo oscuro de la barra, la portada y el pie */
    --t-pizarra-2: #2c3d47;        /* buscador sobre la barra oscura */
    --t-texto: #1f2d36;
    --t-texto-2: #51666f;
    --t-borde: #d6e2e1;
    --t-teal: #0b7a73;             /* botones */
    --t-teal-hover: #08625c;
    --t-teal-claro: #3fd0b8;       /* acentos sobre fondo oscuro */
    --t-agotado: #b42318;
    --t-titulo: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --t-letra: 'Barlow', system-ui, -apple-system, sans-serif;
    --t-ancho: 1200px;
    --t-curva: cubic-bezier(0.23, 1, 0.32, 1);
}


/* ===================================================================== */
/* 2. BASE                                                               */
/* ===================================================================== */
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;      /* el ancla #productos no queda debajo de la barra */
}
body {
    margin: 0;
    min-height: 100dvh;
    background-color: var(--t-fondo);
    color: var(--t-texto);
    font-family: var(--t-letra);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}
img {
    max-width: 100%;
    display: block;
}
a, button {
    touch-action: manipulation;
}
:focus-visible {
    outline: 2px solid var(--t-teal);
    outline-offset: 2px;
}
[hidden] {
    display: none !important;
}
.t-contenedor {
    width: 100%;
    max-width: var(--t-ancho);
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 32px);
}


/* ===================================================================== */
/* 3. BOTONES (iguales al panel)                                         */
/* ===================================================================== */
.t-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    background-color: var(--t-teal);
    color: #ffffff;
    border: 2px solid transparent;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease-out;
}
/* Al presionar se hunde un poco al instante */
.t-boton:active {
    transform: scale(0.97);
}
.t-boton-borde {
    background-color: transparent;
    color: var(--t-texto);
    border-color: var(--t-texto);
}
.t-boton-claro {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.t-boton-chico {
    min-height: 40px;
    padding: 0 14px;
    font-size: 15px;
}
.t-boton-ancho {
    width: 100%;
}
@media (hover: hover) and (pointer: fine) {
    .t-boton:hover {
        background-color: var(--t-teal-hover);
        color: #ffffff;
    }
    .t-boton-borde:hover {
        background-color: var(--t-texto);
        color: #ffffff;
    }
    .t-boton-claro:hover {
        background-color: #ffffff;
        color: var(--t-pizarra);
    }
}
.t-enlace-boton {
    background: none;
    border: 0;
    padding: 0;
    min-height: 40px;
    color: var(--t-texto-2);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}


/* ===================================================================== */
/* 4. BARRA SUPERIOR (oscura, con buscador)                              */
/* ===================================================================== */
.t-barra {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: var(--t-pizarra);
    color: #ffffff;
    padding-top: env(safe-area-inset-top);
}
.t-barra-dentro {
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 64px;
}
/* El logo nunca se encoge aunque el buscador ocupe el resto */
.t-logo {
    flex-shrink: 0;
}
.t-logo img {
    height: 38px;
    width: auto;
}
.t-menu {
    display: flex;
    gap: 20px;
}
.t-menu a,
.t-acceso-enlace {
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}
.t-acceso-enlace {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
}
@media (hover: hover) and (pointer: fine) {
    .t-menu a:hover,
    .t-acceso-enlace:hover {
        color: var(--t-teal-claro);
    }
}
/* Buscador ocupa el espacio libre de la barra */
.t-buscador {
    flex-grow: 1;
    display: flex;
    margin: 0;
    background-color: var(--t-pizarra-2);
    border: 1px solid transparent;
    transition: border-color 0.15s ease;
}
.t-buscador:focus-within {
    border-color: var(--t-teal-claro);
}
.t-buscador input {
    flex-grow: 1;
    min-width: 0;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    color: #ffffff;
    font: inherit;
    font-size: 16px;
}
.t-buscador input::placeholder {
    color: #9fb2b8;
}
.t-buscador input:focus {
    outline: none;
}
.t-buscador button {
    width: 44px;
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
}
.t-acceso {
    display: flex;
    align-items: center;
    gap: 12px;
}
.t-acceso form {
    margin: 0;
}
.t-saludo {
    font-weight: 600;
}
.t-barra .t-enlace-boton {
    color: #c9d6d9;
}
@media (max-width: 900px) {
    .t-menu {
        display: none;
    }
}
/* Celular: logo y buscador arriba; carrito y cuenta pasan a la barra inferior */
@media (max-width: 760px) {
    .t-barra-dentro {
        gap: 12px;
        min-height: 58px;
    }
    .t-logo img {
        height: 34px;
    }
    .t-acceso {
        display: none;
    }
}


/* ===================================================================== */
/* 5. BANNER PRINCIPAL (todo el ancho, deslizable)                       */
/* ===================================================================== */
.t-banner {
    position: relative;
    background-color: var(--t-pizarra);
    color: #ffffff;
}
/* Pista: las diapositivas en fila; con el dedo frena en cada una */
.t-banner-pista {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
}
.t-banner-pista::-webkit-scrollbar {
    display: none;
}
.t-diapo {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    min-height: clamp(440px, 72vh, 640px);
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* Colores de cada tema */
.t-diapo-oscuro {
    background:
        radial-gradient(ellipse at 78% 55%, rgba(18, 191, 164, 0.30), transparent 55%),
        linear-gradient(160deg, #26363f 0%, var(--t-pizarra) 70%);
}
.t-diapo-teal {
    background:
        radial-gradient(ellipse at 78% 50%, rgba(255, 255, 255, 0.16), transparent 55%),
        linear-gradient(160deg, #0d8c84 0%, #08625c 75%);
}
.t-diapo-teal .t-etiqueta {
    color: #bff3ea;
}
/* Foto de fondo opcional, oscurecida a la izquierda para leer el texto */
.t-diapo-fondo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.t-diapo:has(.t-diapo-fondo)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(20, 30, 36, 0.85) 0%, rgba(20, 30, 36, 0.35) 60%, transparent 100%);
}
.t-diapo-dentro {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 28px;
    padding-top: 48px;
    padding-bottom: 72px;                 /* espacio para los puntos */
}
.t-etiqueta {
    margin: 0 0 12px;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--t-teal-claro);
}
.t-diapo h1,
.t-diapo-titulo {
    margin: 0;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(42px, 6.5vw, 84px);
    line-height: 0.92;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}
.t-diapo h1::after,
.t-diapo-titulo::after {
    content: "";
    display: block;
    width: 64px;
    height: 6px;
    margin-top: 18px;
    background-color: var(--t-teal-claro);
}
.t-diapo-teal h1::after,
.t-diapo-teal .t-diapo-titulo::after {
    background-color: #ffffff;
}
.t-portada-sub {
    max-width: 46ch;
    margin: 18px 0 26px;
    font-size: 18px;
    color: #d5e1e3;
}
.t-portada-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.t-boton-oscuro {
    background-color: var(--t-pizarra);
}
@media (hover: hover) and (pointer: fine) {
    .t-boton-oscuro:hover {
        background-color: #10191f;
    }
}
.t-portada-img {
    width: 100%;
    max-width: 440px;
    height: auto;
    justify-self: center;
    filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45));
}

/* Flechas a los lados (solo con mouse) */
.t-banner-flecha {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.12);
    border: 0;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.15s ease;
}
.t-banner-flecha.anterior {
    left: 16px;
}
.t-banner-flecha.siguiente {
    right: 16px;
}
@media (hover: hover) and (pointer: fine) {
    .t-banner-flecha {
        display: flex;
    }
    .t-banner-flecha:hover {
        background-color: var(--t-teal);
    }
}
.t-banner-flecha:active {
    transform: translateY(-50%) scale(0.94);
}

/* Puntos: el activo se alarga */
.t-banner-puntos {
    position: absolute;
    left: 50%;
    bottom: 22px;
    z-index: 2;
    display: flex;
    gap: 4px;
    transform: translateX(-50%);
}
.t-banner-puntos button {
    width: 28px;
    height: 28px;                         /* área de toque cómoda */
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.t-banner-puntos button::before {
    content: "";
    width: 10px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.45);
    transition: width 0.3s var(--t-curva), background-color 0.2s ease;
}
.t-banner-puntos button[aria-current]::before {
    width: 26px;
    background-color: #ffffff;
}

@media (max-width: 760px) {
    .t-diapo {
        min-height: 0;
        align-items: stretch;
    }
    .t-diapo-dentro {
        grid-template-columns: 1fr;
        gap: 18px;
        padding-top: 24px;
        padding-bottom: 60px;
    }
    .t-diapo h1,
    .t-diapo-titulo {
        font-size: clamp(38px, 11vw, 52px);
    }
    .t-portada-sub {
        font-size: 16px;
        margin: 14px 0 20px;
    }
    .t-portada-img {
        max-width: 160px;
        max-height: 160px;
        object-fit: contain;
        order: -1;
    }
    .t-portada-botones .t-boton {
        flex: 1 1 0;
        padding: 0 12px;
    }
}


/* ===================================================================== */
/* 6. CATEGORÍAS, SECCIONES Y CATÁLOGO                                   */
/* ===================================================================== */
/* Bloques de categoría: oscuro y teal intercalados, con el nombre gigante de fondo */
.t-categorias {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    padding-top: 24px;
}
.t-categoria {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    min-height: 150px;
    padding: 18px;
    background-color: var(--t-pizarra);
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.1s ease-out;
}
.t-categoria:nth-child(even) {
    background-color: var(--t-teal);
}
.t-categoria:active {
    transform: scale(0.97);
}
.t-categoria-fondo {
    position: absolute;
    top: -6px;
    left: 10px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 92px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: rgba(255, 255, 255, 0.07);
    transition: transform 0.4s var(--t-curva);
}
.t-categoria-nombre {
    position: relative;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1;
    text-transform: uppercase;
}
.t-categoria-ver {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.8);
}
.t-categoria-ver i {
    transition: transform 0.2s var(--t-curva);
}
@media (hover: hover) and (pointer: fine) {
    .t-categoria:hover .t-categoria-fondo {
        transform: translateX(-12px);
    }
    .t-categoria:hover .t-categoria-ver i {
        transform: translateX(4px);
    }
}
@media (max-width: 520px) {
    .t-categorias {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .t-categoria {
        min-height: 110px;
        padding: 14px;
    }
    .t-categoria-nombre {
        font-size: 20px;
    }
    .t-categoria-ver {
        font-size: 13px;
    }
}

/* Secciones con título centrado y una palabra gigante de fondo */
.t-seccion {
    padding: 56px 0 64px;
}
.t-seccion-gris {
    margin-top: 40px;
    background-color: var(--t-fondo-2);
}
.t-seccion-titulo {
    position: relative;
    margin: 0;
    text-align: center;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(30px, 4vw, 42px);
    line-height: 1;
    text-transform: uppercase;
    isolation: isolate;
}
.t-seccion-titulo::before {
    content: attr(data-fondo);
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    transform: translate(-50%, -50%);
    font-size: clamp(80px, 15vw, 190px);
    white-space: nowrap;
    color: rgba(31, 45, 54, 0.05);
    pointer-events: none;
}
.t-seccion-titulo::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 10px auto 0;
    background-color: var(--t-teal);
}
.t-seccion-sub {
    margin: 12px 0 28px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: var(--t-texto-2);
}
.t-seccion {
    overflow: hidden;
}

/* Filtros por categoría (chips) */
.t-filtros {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
.t-chip {
    min-height: 40px;
    padding: 0 14px;
    background-color: transparent;
    border: 1px solid var(--t-borde);
    color: var(--t-texto-2);
    font-family: var(--t-titulo);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.t-chip.activo {
    background-color: var(--t-pizarra);
    border-color: var(--t-pizarra);
    color: #ffffff;
}
@media (max-width: 640px) {
    .t-filtros {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .t-chip {
        flex-shrink: 0;
    }
}
.t-aviso {
    padding: 12px 14px;
    border-left: 4px solid var(--t-teal);
    background-color: var(--t-fondo-2);
}

/* Cuadrícula de productos: se acomoda sola según el ancho */
.t-grilla {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 28px 18px;
}
@media (max-width: 520px) {
    .t-grilla {
        grid-template-columns: 1fr 1fr;
        gap: 22px 10px;
    }
}
/* Fila de "Recién llegados": se desliza de lado y frena en cada tarjeta */
.t-fila {
    list-style: none;
    margin: 0;
    padding: 0 0 8px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(220px, calc((100% - 54px) / 4));
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.t-fila .t-producto {
    scroll-snap-align: start;
}
@media (max-width: 520px) {
    .t-fila {
        grid-auto-columns: 46%;
        gap: 10px;
    }
}

/* Tarjeta de producto: sin borde, foto sobre fondo gris y botón "+" */
.t-producto {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.t-producto-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--t-fondo-2);
}
.t-seccion-gris .t-producto-img {
    background-color: #ffffff;
}
.t-producto-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s var(--t-curva);
}
.t-producto-img img.t-sin-foto {
    width: 38%;
    height: auto;
    opacity: 0.35;
}
@media (hover: hover) and (pointer: fine) {
    .t-producto:hover .t-producto-img img {
        transform: scale(1.05);
    }
}
.t-agotado {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 10px;
    background-color: var(--t-agotado);
    color: #ffffff;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.t-producto.agotado .t-producto-img img {
    filter: grayscale(1);
    opacity: 0.6;
}
/* Botón "+" en la esquina de la foto */
.t-form-carrito {
    position: absolute;
    right: 10px;
    bottom: 10px;
    margin: 0;
}
.t-agregar {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--t-pizarra);
    color: #ffffff;
    border: 0;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease-out;
}
.t-agregar:active {
    transform: scale(0.92);
}
.t-agregar:disabled {
    opacity: 0.6;
}
@media (hover: hover) and (pointer: fine) {
    .t-agregar:hover,
    .t-producto:hover .t-agregar {
        background-color: var(--t-teal);
    }
}
.t-producto-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.t-marca {
    margin: 0;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--t-texto-2);
}
.t-producto h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: uppercase;
    color: var(--t-texto);
}
.t-descripcion {
    margin: 0;
    font-size: 14px;
    color: var(--t-texto-2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.t-precios {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}
.t-precio {
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 24px;
    line-height: 1;
}
.t-precio-mayorista {
    font-size: 14px;
    font-weight: 600;
    color: var(--t-teal);
}
.t-precio-mayorista small {
    color: var(--t-texto-2);
    font-weight: 400;
}
.t-vacio {
    grid-column: 1 / -1;
    padding: 40px 0;
    text-align: center;
    color: var(--t-texto-2);
}
@media (max-width: 520px) {
    .t-producto h3 {
        font-size: 13px;
    }
    .t-marca {
        font-size: 12px;
    }
    .t-precio {
        font-size: 21px;
    }
    .t-descripcion {
        display: none;
    }
    .t-form-carrito {
        right: 6px;
        bottom: 6px;
    }
}


/* ===================================================================== */
/* 7. PIE, WHATSAPP Y BARRA INFERIOR DEL CELULAR                         */
/* ===================================================================== */
.t-pie {
    background-color: var(--t-pizarra);
    color: #c9d6d9;
    padding: 48px 0 24px;
}
.t-pie-columnas {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 32px;
}
.t-pie-columnas > div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.t-pie-marca p {
    max-width: 32ch;
    margin: 6px 0 0;
}
.t-pie h2 {
    margin: 0 0 4px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 22px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ffffff;
}
.t-pie a {
    color: #c9d6d9;
    text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
    .t-pie a:hover {
        color: var(--t-teal-claro);
    }
}
.t-pie-copy {
    margin: 36px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 14px;
}
@media (max-width: 760px) {
    .t-pie-columnas {
        grid-template-columns: 1fr 1fr;
    }
    .t-pie-marca {
        grid-column: 1 / -1;
    }
}

/* Botón flotante de WhatsApp */
.t-whatsapp {
    position: fixed;
    right: 18px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    z-index: 30;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #25d366;
    color: #ffffff;
    font-size: 30px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    transition: transform 0.15s var(--t-curva);
}
.t-whatsapp:active {
    transform: scale(0.94);
}

/* Barra inferior: solo en el celular */
.t-barra-inferior {
    display: none;
}
@media (max-width: 760px) {
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
    }
    .t-barra-inferior {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 25;
        display: flex;
        background-color: #ffffff;
        border-top: 1px solid var(--t-borde);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .t-barra-inferior > a,
    .t-barra-inferior > form {
        flex: 1 1 0;
        margin: 0;
    }
    .t-barra-inferior a,
    .t-barra-inferior button {
        position: relative;
        width: 100%;
        height: 64px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: none;
        border: 0;
        color: var(--t-texto-2);
        font: inherit;
        font-size: 12px;
        text-decoration: none;
        cursor: pointer;
    }
    .t-barra-inferior i {
        font-size: 19px;
    }
    .t-barra-inferior .activo {
        color: var(--t-teal);
        font-weight: 600;
    }
    .t-barra-inferior .t-carrito-numero {
        top: 8px;
        right: calc(50% - 22px);
    }
    .t-whatsapp {
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: 52px;
        height: 52px;
        font-size: 28px;
    }
    .t-aviso-flotante {
        bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
}


/* ===================================================================== */
/* 8. ACCESIBILIDAD                                                      */
/* ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
    }
    .t-banner-flecha:active {
        transform: translateY(-50%);
    }
    .t-boton:active,
    .t-agregar:active,
    .t-categoria:active {
        transform: none;
    }
}


/* ===================================================================== */
/* 9. CARRITO (Fase 5C)                                                  */
/* ===================================================================== */
/* Ícono del carrito con su número */
.t-carrito {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #ffffff;
    font-size: 19px;
    text-decoration: none;
}
.t-carrito-numero {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--t-teal);
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* Aviso flotante abajo (sube y se desvanece) */
.t-aviso-flotante {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 50;
    max-width: calc(100% - 32px);
    padding: 12px 18px;
    background-color: var(--t-pizarra);
    color: #ffffff;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 12px);
    transition: opacity 0.2s var(--t-curva), transform 0.2s var(--t-curva);
}
.t-aviso-flotante.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
.t-aviso-flotante.error {
    background-color: var(--t-agotado);
}
.t-boton:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Página del carrito */
.t-pagina {
    padding-top: 28px;
    padding-bottom: 64px;
}
.t-volver {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--t-texto-2);
    text-decoration: none;
}
.t-titulo-pagina {
    margin: 10px 0 22px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1;
    text-transform: uppercase;
}
.t-titulo-pagina::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin-top: 8px;
    background-color: var(--t-teal);
}
.t-error {
    padding: 12px 14px;
    border-left: 4px solid var(--t-agotado);
    background-color: #fde3e1;
    color: var(--t-agotado);
}
.t-vacio-carrito {
    padding: 40px 0;
    text-align: center;
    color: var(--t-texto-2);
}
.t-vacio-carrito i {
    font-size: 44px;
    opacity: 0.4;
}
.t-carrito-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr);
    gap: 24px;
    align-items: start;
}
@media (max-width: 860px) {
    .t-carrito-grid {
        grid-template-columns: 1fr;
    }
}
.t-lineas {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--t-borde);
}
.t-linea {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--t-borde);
}
.t-linea-img {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--t-fondo-2);
}
.t-linea-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.t-linea-img img.t-sin-foto {
    width: 50%;
    height: auto;
    opacity: 0.35;
}
.t-linea-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.t-linea-precio {
    font-size: 14px;
    color: var(--t-texto-2);
}
.t-linea-subtotal {
    font-variant-numeric: tabular-nums;
    min-width: 90px;
    text-align: right;
}
.t-cantidad {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
}
.t-cantidad input {
    width: 64px;
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--t-borde);
    font: inherit;
    font-size: 16px;
    text-align: center;
}
.t-quitar {
    width: 40px;
    height: 40px;
    background: var(--t-fondo-2);
    border: 0;
    color: var(--t-agotado);
    cursor: pointer;
}
@media (max-width: 560px) {
    .t-linea {
        grid-template-columns: 56px minmax(0, 1fr) auto;
        grid-template-areas: "img info info" "img cant sub";
        gap: 8px 12px;
    }
    .t-linea-img { grid-area: img; width: 56px; height: 56px; }
    .t-linea-info { grid-area: info; }
    .t-cantidad { grid-area: cant; }
    .t-linea-subtotal { grid-area: sub; }
}

/* Formulario para confirmar */
.t-checkout {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
    background-color: var(--t-fondo-2);
    border: 1px solid var(--t-borde);
}
.t-checkout h2 {
    margin: 0;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.t-campo {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.t-campo label,
.t-opciones legend {
    font-family: var(--t-titulo);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t-texto-2);
}
.t-campo input,
.t-campo textarea {
    min-height: 46px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #a9bdbc;
    font: inherit;
    font-size: 16px;
}
.t-campo textarea {
    padding: 10px 12px;
    min-height: 70px;
    resize: vertical;
}
.t-campo input:focus,
.t-campo textarea:focus {
    outline: 2px solid var(--t-teal);
    outline-offset: -1px;
}
.t-opciones {
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.t-opciones legend {
    margin-bottom: 6px;
}
.t-opcion {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #a9bdbc;
    font-weight: 600;
    cursor: pointer;
}
.t-opcion:has(input:checked) {
    border-color: var(--t-teal);
    box-shadow: inset 0 0 0 1px var(--t-teal);
}
.t-opcion input {
    accent-color: var(--t-teal);
    width: 18px;
    height: 18px;
}
.t-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 12px;
    border-top: 2px solid var(--t-texto);
}
.t-total span {
    font-family: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.t-total strong {
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 34px;
    font-variant-numeric: tabular-nums;
}
.t-ayuda {
    margin: 0;
    font-size: 14px;
    color: var(--t-texto-2);
}
.solo-lectores {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

/* Pedido recibido */
.t-recibido {
    max-width: 560px;
    text-align: center;
}
.t-recibido-icono {
    font-size: 54px;
    color: var(--t-teal);
}
.t-recibido .t-titulo-pagina::after {
    margin-left: auto;
    margin-right: auto;
}
.t-resumen {
    list-style: none;
    margin: 18px 0;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--t-borde);
}
.t-resumen li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--t-borde);
}
.t-recibido .t-ayuda {
    margin-bottom: 18px;
}


/* ===================================================================== */
/* 10. CARGA PROGRESIVA DE FOTOS (Fase 5B)                               */
/* ===================================================================== */
/* Mientras llega la foto: esqueleto gris con un brillo que pasa */
.js .t-foto::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%) 0 0 / 220% 100%,
        var(--t-fondo-2);
    animation: t-brillo 1.3s linear infinite;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.js .t-foto.lista::after {
    opacity: 0;
    animation: none;
}
/* La foto aparece suavemente cuando ya está lista */
.js .t-foto img {
    opacity: 0;
    transition: opacity 0.35s ease, transform 0.5s var(--t-curva);
}
.js .t-foto.lista img {
    opacity: 1;
}
.js .t-foto.lista img.t-sin-foto {
    opacity: 0.35;
}
.t-linea-img {
    position: relative;
}
@keyframes t-brillo {
    from { background-position: 120% 0, 0 0; }
    to { background-position: -120% 0, 0 0; }
}
/* Las tarjetas fuera de la pantalla no se dibujan hasta acercarse (rinde con muchos productos) */
.t-grilla .t-producto {
    content-visibility: auto;
    contain-intrinsic-size: auto 380px;
}
@media (prefers-reduced-motion: reduce) {
    .js .t-foto::after {
        animation: none;
    }
}
/* La etiqueta "Agotado" y el botón "+" siempre por encima del esqueleto */
.t-agotado,
.t-form-carrito {
    z-index: 2;
}
.js .t-producto.agotado .t-foto.lista img {
    opacity: 0.6;
}


/* ===================================================================== */
/* 11. CUENTAS DE CLIENTES (Fase 5D)                                     */
/* ===================================================================== */
/* Registro y activación: formulario angosto y centrado */
.t-acceso-pagina {
    max-width: 520px;
}
.t-acceso-pagina .t-checkout {
    background-color: #ffffff;
}
.t-checkout a:not(.t-boton) {
    color: var(--t-teal);
    font-weight: 600;
}
.t-checkout form {
    margin: 0;
}
.t-pasos {
    margin: 0;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.t-acceso-pagina > .t-error {
    margin: 0 0 16px;
}
.t-checkout .t-aviso,
.t-checkout .t-error {
    margin: 0;
}

/* Mi cuenta: datos a un lado, pedidos al otro */
.t-cuenta-grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.4fr);
    gap: 24px;
    align-items: start;
}
.t-cuenta-lado {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
@media (max-width: 860px) {
    .t-cuenta-grid {
        grid-template-columns: 1fr;
    }
    /* En el celular primero se ven los pedidos */
    .t-cuenta-lado {
        order: 2;
    }
}
.t-datos {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
}
.t-datos dt {
    font-family: var(--t-titulo);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--t-texto-2);
}
.t-datos dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}
/* Saldo: grande, en rojo si debe */
.t-saldo {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 18px 20px;
    background-color: var(--t-pizarra);
    color: #ffffff;
    border-left: 6px solid var(--t-teal-claro);
}
.t-saldo.debe {
    border-left-color: #f97066;
}
.t-saldo span {
    font-family: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.t-saldo strong {
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 34px;
    font-variant-numeric: tabular-nums;
}
.t-subtitulo {
    margin: 28px 0 12px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 26px;
    text-transform: uppercase;
}
/* Lista de pedidos del cliente */
.t-pedidos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.t-pedido {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--t-borde);
}
.t-pedido p {
    margin: 0;
}
.t-pedido-cabeza {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.t-pedido-cabeza strong {
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
}
.t-pedido-productos {
    font-weight: 500;
}
.t-pedido-valores {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 14px;
    color: var(--t-texto-2);
    font-variant-numeric: tabular-nums;
}
.t-pedido-valores strong {
    color: var(--t-texto);
}
.t-debe,
.t-debe strong {
    color: var(--t-agotado);
}
/* Estado del pedido (siempre con texto, no solo color) */
.t-estado {
    padding: 3px 10px;
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    white-space: nowrap;
    background-color: var(--t-fondo-2);
    color: var(--t-texto-2);
}
.t-estado-pendiente { background-color: #fdf0d5; color: #8a4b00; }
.t-estado-confirmado { background-color: #e3f3f1; color: #08625c; }
.t-estado-despachado { background-color: #dbeafe; color: #1e4fa3; }
.t-estado-entregado { background-color: #dff5e7; color: #146c34; }
.t-estado-cancelado { background-color: #eef1f4; color: #51666f; text-decoration: line-through; }


/* ===================================================================== */
/* 12. OFERTAS, CUPONES Y AVISOS (Fase 5D-2)                             */
/* ===================================================================== */
/* Barra de avisos debajo del menú */
.t-anuncios {
    background-color: var(--t-teal);
    color: #ffffff;
}
.t-anuncios-dentro {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    padding-top: 9px;
    padding-bottom: 9px;
    text-align: center;
}
.t-anuncios p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}
.t-codigo {
    display: inline-block;
    padding: 1px 8px;
    border: 1px dashed currentColor;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 700;
    letter-spacing: 1.5px;
}
/* Etiqueta "-20%" sobre la foto */
.t-oferta {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 4px 10px;
    background-color: var(--t-teal);
    color: #ffffff;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
}
/* Precio con oferta: nuevo grande, el anterior tachado */
.t-precio-oferta {
    color: var(--t-teal);
}
.t-precio s,
.t-linea-precio s {
    margin-left: 4px;
    font-family: var(--t-letra);
    font-weight: 400;
    font-size: 14px;
    color: var(--t-texto-2);
}
.t-oferta-texto {
    font-size: 13px;
    font-weight: 600;
    color: var(--t-teal);
}
/* Carrito: cupón y desglose */
.t-carrito-lado {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.t-cupon-form {
    display: flex;
    gap: 8px;
    margin: 0;
}
.t-cupon-form input {
    flex-grow: 1;
    min-width: 0;
    min-height: 44px;
    padding: 0 12px;
    background-color: #ffffff;
    border: 1px solid #a9bdbc;
    font: inherit;
    font-size: 16px;
    text-transform: uppercase;
}
.t-cupon-aplicado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--t-teal);
    font-weight: 600;
}
.t-desglose {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    font-variant-numeric: tabular-nums;
}
.t-desglose dt {
    color: var(--t-texto-2);
}
.t-desglose dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
}
.t-desglose dd:not(:nth-of-type(1)) {
    color: var(--t-teal);
}
.t-ahorro,
.t-ahorro strong {
    color: var(--t-teal);
}


/* ===================================================================== */
/* 13. DATOS DE PAGO (Fase 5E)                                           */
/* ===================================================================== */
.t-pago {
    margin: 0 0 18px;
    padding: 18px;
    border: 2px solid var(--t-teal);
    text-align: left;
}
.t-pago h2 {
    margin: 0 0 6px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 22px;
    text-transform: uppercase;
}
.t-pago p {
    margin: 4px 0;
}
.t-pago-numero {
    display: flex;
    align-items: center;
    gap: 12px;
}
.t-pago-numero strong {
    font-family: var(--t-titulo);
    font-weight: 800;
    font-size: 30px;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
}
.t-pie-columnas span {
    display: inline-flex;
    gap: 6px;
}


/* ===================================================================== */
/* 14. PÁGINAS, APARICIÓN GRADUAL, CATEGORÍAS CON IMAGEN Y MODO ADMIN    */
/* ===================================================================== */
/* Aparición gradual al desplazarse (solo con JavaScript; sin él todo se ve normal) */
.js .t-revelar {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.9s var(--t-curva), transform 0.9s var(--t-curva);
}
.js .t-revelar.visible {
    opacity: 1;
    transform: none;
}
.js .t-categoria.t-revelar.visible:active {
    transform: scale(0.97);
}
@media (prefers-reduced-motion: reduce) {
    .js .t-revelar {
        opacity: 1;
        transform: none;
    }
}

/* Páginas del catálogo */
.t-paginas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 32px;
}
.t-paginas[hidden] {
    display: none;
}
.t-paginas button {
    min-width: 44px;
    height: 44px;
    padding: 0 10px;
    background-color: #ffffff;
    border: 1px solid var(--t-borde);
    color: var(--t-texto);
    font-family: var(--t-titulo);
    font-weight: 700;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease-out;
}
.t-paginas button:active {
    transform: scale(0.95);
}
.t-paginas button[aria-current] {
    background-color: var(--t-pizarra);
    border-color: var(--t-pizarra);
    color: #ffffff;
}
.t-paginas button:disabled {
    opacity: 0.35;
    cursor: default;
}
@media (hover: hover) and (pointer: fine) {
    .t-paginas button:not(:disabled):not([aria-current]):hover {
        border-color: var(--t-teal);
        color: var(--t-teal);
    }
}
.t-paginas span {
    padding: 0 4px;
    color: var(--t-texto-2);
}
.t-paginas-info {
    width: 100%;
    margin: 6px 0 0;
    text-align: center;
    font-size: 14px;
    color: var(--t-texto-2);
}

/* Celular: 3 productos por fila con fotos y textos más compactos */
@media (max-width: 520px) {
    .t-grilla {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px 8px;
    }
    .t-grilla .t-producto {
        contain-intrinsic-size: auto 250px;
    }
    .t-fila {
        grid-auto-columns: 31%;
        gap: 8px;
    }
    .t-producto {
        gap: 8px;
    }
    .t-producto h3 {
        font-size: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .t-marca {
        font-size: 10px;
        letter-spacing: 1px;
    }
    .t-precio {
        font-size: 17px;
    }
    .t-precio s {
        display: block;
        margin: 2px 0 0;
        font-size: 11px;
    }
    .t-precio-mayorista,
    .t-oferta-texto {
        font-size: 11px;
    }
    .t-precio-mayorista small {
        display: none;
    }
    .t-agregar {
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
    .t-form-carrito {
        right: 4px;
        bottom: 4px;
    }
    .t-oferta,
    .t-agotado {
        top: 4px;
        left: 4px;
        padding: 2px 6px;
        font-size: 11px;
    }
}
/* Pantallas muy angostas: 2 por fila */
@media (max-width: 359px) {
    .t-grilla {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Categorías: marco con el lápiz de admin y bloques con imagen */
.t-categorias-marco {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 24px;
}
.t-categorias {
    padding-top: 0;
}
.t-categoria-img {
    position: absolute;
    right: -4px;
    bottom: -4px;
    height: 90%;
    width: auto;
    max-width: 58%;
    object-fit: contain;
    filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.35));
    transition: transform 0.4s var(--t-curva);
}
.t-categoria.con-imagen .t-categoria-nombre,
.t-categoria.con-imagen .t-categoria-ver {
    max-width: 60%;
}
.t-categoria-nombre,
.t-categoria-ver {
    z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
    .t-categoria:hover .t-categoria-img {
        transform: scale(1.05) rotate(-2deg);
    }
}

/* Modo admin en la tienda: barra superior y lápices para editar */
.t-barra-admin {
    background-color: #0d1418;
    color: #c9d6d9;
    font-size: 14px;
}
.t-barra-admin-dentro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}
.t-barra-admin nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
}
.t-barra-admin a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    color: var(--t-teal-claro);
    font-weight: 600;
    text-decoration: none;
}
.t-editar {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background-color: #ffffff;
    border: 1px solid var(--t-borde);
    color: var(--t-pizarra);
    font-family: var(--t-titulo);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.t-editar-banner {
    top: 16px;
    right: 16px;
}
.t-editar-seccion {
    position: static;
    align-self: flex-end;
}
@media (hover: hover) and (pointer: fine) {
    .t-editar:hover {
        background-color: var(--t-teal);
        border-color: var(--t-teal);
        color: #ffffff;
    }
}
@media (max-width: 520px) {
    .t-editar:not(.t-editar-banner):not(.t-editar-seccion) {
        top: 4px;
        right: 4px;
        min-width: 30px;
        height: 30px;
        padding: 0;
    }
}
/* Hasta 7 categorías caben en una fila en PC; la imagen no tapa el nombre */
@media (min-width: 521px) {
    .t-categorias {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}
.t-categoria.con-imagen .t-categoria-img {
    height: 78%;
    max-width: 50%;
}
.t-categoria-nombre {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}


/* ===================================================================== */
/* 15. SOLO SE DIBUJA LO QUE ESTÁ EN PANTALLA                            */
/* ===================================================================== */
/* El navegador se salta el dibujo de las secciones que no se ven (y lo retoma al acercarse) */
.t-categorias-marco,
.t-seccion,
.t-pie {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}
.t-pie {
    contain-intrinsic-size: auto 360px;
}


/* ===================================================================== */
/* 16. CAMBIO SUAVE DE CATEGORÍA Y DE PÁGINA                             */
/* ===================================================================== */
/* La grilla se desvanece un instante y los productos nuevos entran uno a uno */
.t-grilla {
    transition: opacity 0.22s ease;
}
.t-grilla.saliendo {
    opacity: 0;
}
@keyframes t-entrar {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
.t-producto.entrando {
    animation: t-entrar 0.6s var(--t-curva) both;
    animation-delay: calc(var(--i, 0) * 50ms);
}
/* Los chips cambian de color suavemente */
.t-chip {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .t-grilla {
        transition: none;
    }
    .t-producto.entrando {
        animation: none;
    }
}


/* ===================================================================== */
/* 17. PESTAÑAS CATEGORÍAS / MARCAS                                      */
/* ===================================================================== */
.t-pestanas {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--t-borde);
}
.t-pestanas button {
    position: relative;
    min-height: 44px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--t-texto-2);
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s ease;
}
/* Franja teal debajo de la pestaña activa */
.t-pestanas button::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background-color: var(--t-teal);
    transform: scaleX(0);
    transition: transform 0.3s var(--t-curva);
}
.t-pestanas button.activa {
    color: var(--t-texto);
}
.t-pestanas button.activa::after {
    transform: scaleX(1);
}
.t-chip small {
    margin-left: 4px;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
}


/* ===================================================================== */
/* 18. PÁGINAS LEGALES, AUTORIZACIÓN Y AVISO DE COOKIES                  */
/* ===================================================================== */
.t-legal {
    max-width: 820px;
    line-height: 1.65;
}
.t-legal h2 {
    margin: 32px 0 10px;
    font-family: var(--t-titulo);
    font-weight: 800;
    font-style: italic;
    font-size: 24px;
    text-transform: uppercase;
}
.t-legal ul,
.t-legal ol {
    padding-left: 22px;
}
.t-legal li {
    margin-bottom: 6px;
}
.t-legal a {
    color: var(--t-teal);
    font-weight: 600;
}
.t-legal-vigencia {
    margin-top: -6px;
    font-size: 14px;
    color: var(--t-texto-2);
}
.t-legal-datos {
    list-style: none;
    padding: 14px 16px !important;
    background-color: var(--t-fondo-2);
    border-left: 4px solid var(--t-teal);
}
.t-legal-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}
.t-legal-tabla th,
.t-legal-tabla td {
    padding: 10px;
    border: 1px solid var(--t-borde);
    text-align: left;
    vertical-align: top;
}
.t-legal-tabla th {
    background-color: var(--t-fondo-2);
    font-family: var(--t-titulo);
    letter-spacing: 1px;
    text-transform: uppercase;
}
.t-legal-enlaces {
    margin-top: 32px;
    padding-top: 16px;
    border-top: 1px solid var(--t-borde);
}
/* Casillas de autorización en registro y pedido */
.t-acepto {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    line-height: 1.45;
    cursor: pointer;
}
.t-acepto input {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    accent-color: var(--t-teal);
}
.t-acepto a {
    color: var(--t-teal);
    font-weight: 600;
}
/* Aviso de cookies abajo (encima de la barra inferior en el celular) */
.t-cookies {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 40;
    max-width: 420px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background-color: var(--t-pizarra);
    color: #ffffff;
    font-size: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.t-cookies[hidden] {
    display: none;
}
.t-cookies p {
    margin: 0;
}
.t-cookies a {
    color: var(--t-teal-claro);
}
@media (max-width: 760px) {
    .t-cookies {
        left: 8px;
        right: 8px;
        max-width: none;
        bottom: calc(72px + env(safe-area-inset-bottom));
    }
}
/* El pie ahora tiene 4 columnas en PC */
@media (min-width: 761px) {
    .t-pie-columnas {
        grid-template-columns: 1.4fr 1fr 1fr 1fr;
    }
}

/* ============================================================
   19. Página no encontrada (404)
   ============================================================ */
.t-error-pagina {
    text-align: center;
    padding-top: 64px;
    padding-bottom: 96px;
}

.t-error-codigo {
    font-family: "Barlow Condensed", sans-serif;
    font-weight: 800;
    font-style: italic;
    font-size: 6rem;
    line-height: 1;
    color: var(--t-teal);
    margin: 0 0 8px;
}

.t-error-pagina p {
    margin-bottom: 28px;
}

.t-error-pagina .t-titulo-pagina::after {
    margin-left: auto;
    margin-right: auto;
}