/* ==========================================================================
   ZonaTrendy · Sistema de diseño
   Dorado y negro con acentos del plumaje del pavo real.
   ========================================================================== */

:root {
    --zt-negro: #0A0A0A;
    --zt-carbon: #161616;
    --zt-grafito: #2B2B2B;
    --zt-oro: #C5B358;
    --zt-oro-claro: #E3D69A;
    --zt-oro-oscuro: #8C7D35;
    --zt-oro-tinta: #6B5F26;
    --zt-marfil: #FAF8F2;
    --zt-arena: #F1ECDF;
    --zt-linea: #E5DECD;
    --zt-turquesa: #0F7C80;
    --zt-azul: #1D4E9E;
    --zt-esmeralda: #146B3A;
    --zt-peligro: #B42318;
    --zt-texto: #1C1B18;
    --zt-texto-suave: #5F5A4E;

    --zt-grad-oro: linear-gradient(135deg, #8C7D35 0%, #C5B358 35%, #E3D69A 55%, #C5B358 75%, #8C7D35 100%);
    --zt-grad-pavo: linear-gradient(90deg, #146B3A 0%, #0F7C80 35%, #1D4E9E 65%, #0F7C80 85%, #146B3A 100%);

    --zt-radio: 2px;
    --zt-sombra: 0 10px 30px -12px rgba(10, 10, 10, .25);
    --zt-transicion: 200ms cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { font-family: 'Montserrat', system-ui, sans-serif; color: var(--zt-texto); background: var(--zt-marfil); }
.font-display { font-family: 'Cinzel', Georgia, serif; letter-spacing: .04em; }
::selection { background: var(--zt-oro); color: var(--zt-negro); }

:focus-visible { outline: 2px solid var(--zt-oro); outline-offset: 2px; }
.zt-skip { position: absolute; left: -9999px; top: 0; z-index: 999; }
.zt-skip:focus { left: 1rem; top: 1rem; background: var(--zt-oro); color: var(--zt-negro); padding: .5rem 1rem; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Detalles de marca ---------- */
.zt-pluma { height: 3px; background: var(--zt-grad-pavo); }
.zt-texto-oro {
    background: var(--zt-grad-oro); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.zt-eyebrow {
    font-size: .7rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--zt-oro-tinta);
}
.zt-eyebrow--claro { color: var(--zt-oro); }
.zt-ornamento { display: flex; align-items: center; gap: .9rem; color: var(--zt-oro); }
.zt-ornamento::before, .zt-ornamento::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55; }
.zt-ornamento > span {
    width: 9px; height: 9px; transform: rotate(45deg); flex: none;
    background: radial-gradient(circle at 50% 50%, var(--zt-azul) 0 30%, var(--zt-turquesa) 31% 60%, var(--zt-oro) 61%);
}
.zt-titulo-seccion { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .06em; line-height: 1.15; }

/* ---------- Botones ---------- */
.zt-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    min-height: 2.75rem; padding: .7rem 1.4rem; border: 1px solid transparent; border-radius: var(--zt-radio);
    font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; line-height: 1;
    cursor: pointer; transition: background var(--zt-transicion), color var(--zt-transicion), border-color var(--zt-transicion), transform var(--zt-transicion), box-shadow var(--zt-transicion);
    white-space: nowrap; text-decoration: none; user-select: none;
}
.zt-btn:active { transform: translateY(1px); }
.zt-btn:disabled, .zt-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.zt-btn--sm { min-height: 2.25rem; padding: .5rem .95rem; font-size: .68rem; letter-spacing: .14em; }
.zt-btn--lg { min-height: 3.25rem; padding: .9rem 2rem; font-size: .8rem; }
.zt-btn--block { width: 100%; }

.zt-btn--oro { background: var(--zt-oro); color: var(--zt-negro); border-color: var(--zt-oro); }
.zt-btn--oro:hover:not(:disabled) { background: var(--zt-oro-claro); border-color: var(--zt-oro-claro); box-shadow: 0 8px 22px -10px rgba(197, 179, 88, .8); }
.zt-btn--negro { background: var(--zt-negro); color: #fff; border-color: var(--zt-negro); }
.zt-btn--negro:hover:not(:disabled) { background: var(--zt-grafito); color: var(--zt-oro-claro); }
.zt-btn--contorno { background: transparent; color: var(--zt-negro); border-color: var(--zt-negro); }
.zt-btn--contorno:hover:not(:disabled) { background: var(--zt-negro); color: var(--zt-oro); }
.zt-btn--contorno-oro { background: transparent; color: var(--zt-oro); border-color: var(--zt-oro); }
.zt-btn--contorno-oro:hover:not(:disabled) { background: var(--zt-oro); color: var(--zt-negro); }
.zt-btn--fantasma { background: transparent; color: var(--zt-texto-suave); }
.zt-btn--fantasma:hover:not(:disabled) { color: var(--zt-negro); background: var(--zt-arena); }
.zt-btn--peligro { background: transparent; color: var(--zt-peligro); border-color: rgba(180, 35, 24, .35); }
.zt-btn--peligro:hover:not(:disabled) { background: var(--zt-peligro); color: #fff; border-color: var(--zt-peligro); }
.zt-btn--whatsapp { background: #1F9D55; color: #fff; border-color: #1F9D55; }
.zt-btn--whatsapp:hover:not(:disabled) { background: #17803F; border-color: #17803F; }

.zt-icon-btn {
    display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem;
    border-radius: 999px; color: inherit; transition: color var(--zt-transicion), background var(--zt-transicion);
}
.zt-icon-btn:hover { color: var(--zt-oro); }

/* ---------- Formularios ---------- */
.zt-label { display: block; margin-bottom: .4rem; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--zt-texto-suave); }
.zt-input {
    width: 100%; min-height: 2.75rem; padding: .65rem .85rem; background: #fff; color: var(--zt-texto);
    border: 1px solid var(--zt-linea); border-radius: var(--zt-radio); font-size: .9rem;
    transition: border-color var(--zt-transicion), box-shadow var(--zt-transicion);
}
.zt-input::placeholder { color: #A39C8B; }
.zt-input:hover { border-color: #CFC6AF; }
.zt-input:focus { outline: none; border-color: var(--zt-oro-oscuro); box-shadow: 0 0 0 3px rgba(197, 179, 88, .25); }
textarea.zt-input { min-height: 6rem; resize: vertical; }
.zt-select {
    appearance: none; padding-right: 2.25rem; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B5F26' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .8rem center;
}
.zt-check { width: 1.15rem; height: 1.15rem; accent-color: var(--zt-negro); cursor: pointer; vertical-align: middle; }
.zt-file { width: 100%; font-size: .8rem; color: var(--zt-texto-suave); border: 1px dashed #CFC6AF; padding: .6rem; border-radius: var(--zt-radio); background: #fff; }
.zt-file::file-selector-button {
    margin-right: .8rem; padding: .5rem .9rem; border: 0; border-radius: var(--zt-radio); cursor: pointer;
    background: var(--zt-negro); color: var(--zt-oro); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.zt-error { margin-top: .35rem; font-size: .75rem; font-weight: 500; color: var(--zt-peligro); }
.zt-ayuda { margin-top: .35rem; font-size: .72rem; color: var(--zt-texto-suave); }

/* Selector de opciones (tallas / colores) */
.zt-opcion { position: relative; }
.zt-opcion input { position: absolute; opacity: 0; pointer-events: none; }
.zt-opcion span {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-width: 3rem; height: 3rem; padding: 0 1rem;
    border: 1px solid var(--zt-linea); background: #fff; border-radius: var(--zt-radio); cursor: pointer;
    font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; transition: all var(--zt-transicion);
}
.zt-opcion span:hover { border-color: var(--zt-negro); }
.zt-opcion input:checked + span { background: var(--zt-negro); border-color: var(--zt-negro); color: var(--zt-oro); }
.zt-opcion input:focus-visible + span { outline: 2px solid var(--zt-oro); outline-offset: 2px; }
.zt-opcion input:disabled + span {
    color: #B5AE9E; background: repeating-linear-gradient(135deg, #fff 0 6px, #F4F0E6 6px 7px); cursor: not-allowed; text-decoration: line-through;
}
.zt-swatch { width: 1rem; height: 1rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, .15); flex: none; }

/* Cantidad */
.zt-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--zt-linea); border-radius: var(--zt-radio); background: #fff; }
.zt-stepper button { width: 2.5rem; font-size: 1.1rem; color: var(--zt-texto); transition: background var(--zt-transicion); }
.zt-stepper button:hover:not(:disabled) { background: var(--zt-arena); }
.zt-stepper button:disabled { color: #C9C2B2; cursor: not-allowed; }
.zt-stepper output, .zt-stepper input { width: 2.75rem; text-align: center; font-weight: 600; font-size: .9rem; display: flex; align-items: center; justify-content: center; border: 0; background: transparent; }

/* ---------- Insignias ---------- */
.zt-badge {
    display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border-radius: var(--zt-radio);
    font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; line-height: 1;
}
.zt-badge--oro { background: var(--zt-oro); color: var(--zt-negro); }
.zt-badge--negro { background: var(--zt-negro); color: var(--zt-oro); }
.zt-badge--turquesa { background: var(--zt-turquesa); color: #fff; }
.zt-badge--esmeralda { background: var(--zt-esmeralda); color: #fff; }
.zt-badge--azul { background: var(--zt-azul); color: #fff; }
.zt-badge--gris { background: #E8E4DA; color: #5F5A4E; }
.zt-badge--peligro { background: #FDECEA; color: var(--zt-peligro); }

/* ---------- Encabezado de la tienda ---------- */
.zt-header { position: sticky; top: 0; z-index: 60; background: var(--zt-negro); color: #fff; transition: box-shadow var(--zt-transicion); }
.zt-header.is-scrolled { box-shadow: 0 6px 24px -10px rgba(0, 0, 0, .7); }
.zt-header .zt-logo img { height: 60px; width: auto; transition: height var(--zt-transicion); }
.zt-header.is-scrolled .zt-logo img { height: 48px; }
@media (max-width: 640px) { .zt-header .zt-logo img, .zt-header.is-scrolled .zt-logo img { height: 40px; } }
.zt-nav-link { position: relative; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #E8E2CF; padding: .5rem 0; transition: color var(--zt-transicion); }
.zt-nav-link::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--zt-oro); transition: right var(--zt-transicion); }
.zt-nav-link:hover, .zt-nav-link[aria-current="page"] { color: var(--zt-oro); }
.zt-nav-link:hover::after, .zt-nav-link[aria-current="page"]::after { right: 0; }

.zt-search { position: relative; }
.zt-search input {
    width: 100%; height: 2.6rem; padding: 0 2.75rem 0 1rem; border-radius: 999px; border: 1px solid #3A3A3A;
    background: #151515; color: #fff; font-size: .82rem; transition: border-color var(--zt-transicion), background var(--zt-transicion);
}
.zt-search input::placeholder { color: #8E887A; }
.zt-search input:focus { outline: none; border-color: var(--zt-oro); background: #1B1B1B; }
.zt-search button { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-items: center; color: var(--zt-oro); }
.zt-search-results {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0; z-index: 80; max-height: 70vh; overflow-y: auto;
    background: #fff; color: var(--zt-texto); border: 1px solid var(--zt-linea); border-radius: var(--zt-radio); box-shadow: var(--zt-sombra);
}
.zt-search-results a[aria-selected="true"], .zt-search-results a:hover { background: var(--zt-arena); }

.zt-cart-count {
    position: absolute; top: 2px; right: 0; min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem; border-radius: 999px;
    background: var(--zt-oro); color: var(--zt-negro); font-size: .62rem; font-weight: 700; display: grid; place-items: center;
}
.zt-cart-count.is-bump { animation: zt-bump .45s ease; }
@keyframes zt-bump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.35); } }

.zt-subnav { background: var(--zt-carbon); border-top: 1px solid #222; }
.zt-subnav a { font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: #BDB6A3; white-space: nowrap; transition: color var(--zt-transicion); }
.zt-subnav a:hover, .zt-subnav a[aria-current="page"] { color: var(--zt-oro); }

/* Menú lateral móvil */
.zt-drawer { position: fixed; inset: 0; z-index: 90; visibility: hidden; }
.zt-drawer.is-open { visibility: visible; }
.zt-drawer__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity var(--zt-transicion); }
.zt-drawer.is-open .zt-drawer__fondo { opacity: 1; }
.zt-drawer__panel {
    position: absolute; top: 0; bottom: 0; left: 0; width: min(86vw, 22rem); background: var(--zt-negro); color: #fff;
    transform: translateX(-100%); transition: transform 280ms cubic-bezier(.2, .7, .2, 1); display: flex; flex-direction: column; overflow-y: auto;
}
.zt-drawer.is-open .zt-drawer__panel { transform: none; }

/* ---------- Carrusel principal ---------- */
.zt-hero { position: relative; background: var(--zt-negro); overflow: hidden; }
/* Diapositivas superpuestas con fundido: la nueva aparece SOBRE la anterior, nunca queda un hueco.
   width: 100% evita que max-height encoja el ancho al aplicar aspect-ratio. */
.zt-hero__pista {
    position: relative; width: 100%; touch-action: pan-y;
    aspect-ratio: var(--hero-r, 16 / 7); max-height: 82vh; min-height: 260px;
}
@media (max-width: 767px) {
    .zt-hero__pista { aspect-ratio: var(--hero-rm, var(--hero-r, 16 / 7)); max-height: 78vh; }
    .zt-hero--texto .zt-hero__pista { min-height: 440px; }
}
.zt-hero__pista > .zt-hero__slide {
    position: absolute; inset: 0; overflow: hidden; z-index: 0; isolation: isolate;
    opacity: 0; visibility: hidden; transition: opacity 900ms ease, visibility 0s linear 900ms;
}
.zt-hero__pista > .zt-hero__slide.is-activa { opacity: 1; visibility: visible; z-index: 1; transition: opacity 900ms ease, visibility 0s; }
.zt-hero__pista > .zt-hero__slide.is-saliente { visibility: visible; z-index: 0; opacity: 1; }
.zt-hero__slide .zt-media__img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Zoom lento y sutil sobre la foto activa (efecto editorial) */
.zt-hero__slide .zt-fit-cover { transform: scale(1.06); transition: transform 7s ease-out; }
.zt-hero__slide.is-activa .zt-fit-cover { transform: scale(1); }
.zt-hero__slide.is-activa .zt-hero__texto { animation: zt-hero-texto 900ms 200ms both cubic-bezier(.2, .7, .2, 1); }
@keyframes zt-hero-texto { from { opacity: 0; transform: translateY(18px); } }
.zt-hero__velo { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .45) 45%, rgba(10, 10, 10, .05) 100%); }
@media (max-width: 768px) { .zt-hero__velo { background: linear-gradient(0deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .35) 60%, rgba(10, 10, 10, .15) 100%); } }
.zt-hero__flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 2.9rem; height: 2.9rem; border-radius: 999px;
    display: grid; place-items: center; background: rgba(10, 10, 10, .45); color: var(--zt-oro); border: 1px solid rgba(197, 179, 88, .5);
    backdrop-filter: blur(4px); transition: background var(--zt-transicion);
}
.zt-hero__flecha:hover { background: var(--zt-oro); color: var(--zt-negro); }
.zt-hero__puntos { position: absolute; bottom: 1.25rem; left: 0; right: 0; display: flex; justify-content: center; gap: .5rem; z-index: 5; }
.zt-hero__puntos button { width: 1.75rem; height: 3px; background: rgba(255, 255, 255, .35); transition: background var(--zt-transicion), width var(--zt-transicion); }
.zt-hero__puntos button[aria-current="true"] { background: var(--zt-oro); width: 2.75rem; }

.zt-hero-vacio { position: relative; background: radial-gradient(ellipse at 70% 40%, #1a1a12 0%, var(--zt-negro) 60%); overflow: hidden; }
.zt-hero-vacio__pavo { position: absolute; right: 6%; top: 50%; transform: translateY(-50%); height: 88%; opacity: .9; filter: drop-shadow(0 0 40px rgba(197, 179, 88, .18)); }
@media (max-width: 768px) { .zt-hero-vacio__pavo { opacity: .18; right: -10%; height: 100%; } }

/* ---------- Tarjeta de producto ---------- */
.zt-card { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: var(--zt-radio); }
.zt-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: var(--zt-arena); }
.zt-card__media .zt-media__img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 450ms ease, transform 900ms cubic-bezier(.2, .7, .2, 1); }
.zt-card__media .zt-card__alt { opacity: 0; }
.zt-card:hover .zt-card__media .zt-media__img { transform: scale(1.04); }
.zt-card:hover .zt-card__media .zt-card__alt { opacity: 1; }
.zt-card__badges { position: absolute; top: .75rem; left: .75rem; display: flex; flex-direction: column; gap: .35rem; z-index: 2; }
.zt-card__cta {
    position: absolute; left: .75rem; right: .75rem; bottom: .75rem; z-index: 2; opacity: 0; transform: translateY(8px);
    transition: opacity var(--zt-transicion), transform var(--zt-transicion);
}
.zt-card:hover .zt-card__cta, .zt-card:focus-within .zt-card__cta { opacity: 1; transform: none; }
@media (hover: none) { .zt-card__cta { display: none; } }
.zt-card--agotado .zt-card__media .zt-media__img { filter: grayscale(.85); opacity: .7; }
.zt-card__body { padding: .9rem .25rem 0; }
.zt-card__nombre { font-size: .92rem; font-weight: 500; line-height: 1.35; color: var(--zt-texto); }
.zt-card__nombre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.zt-precio { font-weight: 700; color: var(--zt-negro); }
.zt-precio--oferta { color: var(--zt-esmeralda); }
.zt-precio-tachado { color: #9A9383; text-decoration: line-through; font-weight: 400; }

/* ---------- Chips de filtros ---------- */
.zt-chip {
    display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--zt-linea); background: #fff; font-size: .72rem; font-weight: 500; letter-spacing: .06em; color: var(--zt-texto);
    transition: all var(--zt-transicion);
}
.zt-chip:hover { border-color: var(--zt-negro); }
.zt-chip[aria-current="true"], .zt-chip--activo { background: var(--zt-negro); border-color: var(--zt-negro); color: var(--zt-oro); }
.zt-scroll-x { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.zt-scroll-x::-webkit-scrollbar { display: none; }

/* ---------- Paginación ---------- */
.zt-paginacion { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; }
.zt-paginacion a, .zt-paginacion span {
    min-width: 2.6rem; height: 2.6rem; padding: 0 .75rem; display: grid; place-items: center; border-radius: var(--zt-radio);
    border: 1px solid var(--zt-linea); background: #fff; font-size: .8rem; font-weight: 600; transition: all var(--zt-transicion);
}
.zt-paginacion a:hover { border-color: var(--zt-negro); }
.zt-paginacion [aria-current="page"] { background: var(--zt-negro); color: var(--zt-oro); border-color: var(--zt-negro); }

/* ---------- Galería de producto ---------- */
.zt-galeria__principal { position: relative; aspect-ratio: 3 / 4; max-height: 82vh; width: 100%; background: var(--zt-arena); overflow: hidden; border-radius: var(--zt-radio); cursor: zoom-in; }
.zt-galeria__principal .zt-media__img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 300ms ease, opacity 200ms ease; }
.zt-galeria__principal.is-zoom .zt-media__img { transform: scale(1.9); cursor: zoom-out; }
.zt-galeria__thumb { flex: none; width: 4.75rem; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid transparent; border-radius: var(--zt-radio); opacity: .6; transition: all var(--zt-transicion); }
.zt-galeria__thumb img { width: 100%; height: 100%; object-fit: cover; }
.zt-galeria__thumb:hover { opacity: 1; }
.zt-galeria__thumb[aria-current="true"] { opacity: 1; border-color: var(--zt-oro-oscuro); box-shadow: 0 0 0 1px var(--zt-oro-oscuro); }

.zt-acordeon { border-top: 1px solid var(--zt-linea); }
.zt-acordeon summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 1rem 0; font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.zt-acordeon summary::-webkit-details-marker { display: none; }
.zt-acordeon summary::after { content: "+"; font-size: 1.1rem; font-weight: 400; color: var(--zt-oro-oscuro); transition: transform var(--zt-transicion); }
.zt-acordeon[open] summary::after { transform: rotate(45deg); }

/* ---------- Pie de página ---------- */
.zt-footer { background: var(--zt-negro); color: #BDB6A3; }
.zt-footer a { transition: color var(--zt-transicion); }
.zt-footer a:hover { color: var(--zt-oro); }
.zt-footer h3 { color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 1.1rem; }
.zt-social { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: 999px; border: 1px solid #3A3A3A; color: var(--zt-oro); transition: all var(--zt-transicion); }
.zt-social:hover { background: var(--zt-oro); border-color: var(--zt-oro); color: var(--zt-negro) !important; }

.zt-wa-flotante {
    position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 70; width: 3.5rem; height: 3.5rem; border-radius: 999px;
    display: grid; place-items: center; background: #1F9D55; color: #fff; box-shadow: 0 10px 25px -8px rgba(0, 0, 0, .45);
    transition: transform var(--zt-transicion);
}
.zt-wa-flotante:hover { transform: scale(1.07); }
.zt-wa-flotante::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 1px solid var(--zt-oro); opacity: .7; }

/* ---------- Esqueleto de carga ---------- */
.zt-skeleton { background: linear-gradient(90deg, #EFEADD 25%, #F7F3EA 50%, #EFEADD 75%); background-size: 200% 100%; animation: zt-shimmer 1.2s infinite; border-radius: var(--zt-radio); }
@keyframes zt-shimmer { to { background-position: -200% 0; } }

/* Aparición suave al hacer scroll */
.zt-js .zt-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms ease, transform 600ms ease; }
.zt-js .zt-reveal.is-visible { opacity: 1; transform: none; }

/* ---------- SweetAlert con la marca ---------- */
.swal2-popup.zt-swal { border-radius: var(--zt-radio) !important; font-family: 'Montserrat', sans-serif !important; border-top: 3px solid var(--zt-oro); }
.swal2-popup.zt-swal .swal2-title { font-family: 'Cinzel', serif !important; letter-spacing: .04em; font-size: 1.35rem !important; }
.swal2-popup.swal2-toast.zt-toast { border-radius: var(--zt-radio) !important; background: var(--zt-negro) !important; color: #fff !important; border-left: 3px solid var(--zt-oro); }
.swal2-popup.swal2-toast.zt-toast .swal2-title { color: #fff !important; font-size: .85rem !important; font-weight: 500 !important; }
.swal2-popup.swal2-toast.zt-toast .swal2-timer-progress-bar { background: var(--zt-oro) !important; }

/* ==========================================================================
   Panel administrativo
   ========================================================================== */
.zt-panel { background: #F6F4EE; }
.zt-sidebar { background: var(--zt-negro); color: #CFC8B5; }
.zt-sidebar__link {
    display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem; border-radius: var(--zt-radio); font-size: .78rem; font-weight: 500;
    letter-spacing: .04em; color: #CFC8B5; transition: all var(--zt-transicion); border-left: 2px solid transparent;
}
.zt-sidebar__link svg { width: 1.15rem; height: 1.15rem; flex: none; opacity: .8; }
.zt-sidebar__link:hover { background: #1A1A1A; color: #fff; }
.zt-sidebar__link[aria-current="page"] { background: linear-gradient(90deg, rgba(197, 179, 88, .16), transparent); color: var(--zt-oro); border-left-color: var(--zt-oro); }

.zt-panel-card { background: #fff; border: 1px solid #E9E4D6; border-radius: 6px; box-shadow: 0 1px 2px rgba(10, 10, 10, .04); }
/* Indicadores: el ícono va junto a la etiqueta (no compite con la cifra) y la cifra puede
   reducirse/partirse en vez de salirse de la tarjeta */
.zt-kpi { position: relative; padding: 1.1rem 1.2rem; overflow: hidden; min-width: 0; }
.zt-kpi__cabeza { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.zt-kpi__icono { width: 1.9rem; height: 1.9rem; border-radius: 6px; display: grid; place-items: center; flex: none; font-size: .72rem; font-weight: 700; }
.zt-kpi__icono svg { width: 1rem; height: 1rem; }
.zt-kpi__valor { margin-top: .7rem; font-size: clamp(1.2rem, 5.2vw, 1.75rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (min-width: 640px) { .zt-kpi__valor { font-size: clamp(1.3rem, 2.2vw, 1.75rem); } }
.zt-kpi__etiqueta { font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--zt-texto-suave); line-height: 1.25; }
.zt-kpi__nota { margin-top: .5rem; font-size: .72rem; color: #6B6659; }

.zt-tabla { width: 100%; border-collapse: collapse; font-size: .85rem; }
.zt-tabla thead th { position: sticky; top: 0; z-index: 1; background: #FAF8F2; text-align: left; padding: .8rem 1rem; font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zt-texto-suave); border-bottom: 1px solid #E9E4D6; white-space: nowrap; }
.zt-tabla tbody td { padding: .8rem 1rem; border-bottom: 1px solid #F0ECE2; vertical-align: middle; }
.zt-tabla tbody tr:hover { background: #FCFBF7; }
.zt-tabla tbody tr:last-child td { border-bottom: 0; }

/* Tablas en celular: cada fila se convierte en una tarjeta.
   - td.zt-td-titulo   -> primera línea, ancho completo
   - td[data-label]    -> pares "etiqueta: valor" en dos columnas
   - td.zt-td-acciones -> botones al pie, ancho completo
   - .zt-td-solo-tabla -> se oculta en modo tarjeta */
@media (max-width: 767px) {
    .zt-tabla--tarjetas thead { display: none; }
    .zt-tabla--tarjetas, .zt-tabla--tarjetas tbody { display: block; width: 100%; }
    .zt-tabla--tarjetas tbody tr {
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem 1rem;
        padding: .95rem 1rem; border-bottom: 1px solid #F0ECE2;
    }
    .zt-tabla--tarjetas tbody tr:last-child { border-bottom: 0; }
    .zt-tabla--tarjetas tbody tr[hidden] { display: none; }
    .zt-tabla--tarjetas tbody td { display: block; padding: 0; border: 0; text-align: left !important; min-width: 0; }
    .zt-tabla--tarjetas tbody td[data-label]::before {
        content: attr(data-label); display: block; margin-bottom: .15rem;
        font-size: .58rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #8A8474;
    }
    .zt-tabla--tarjetas tbody td.zt-td-titulo, .zt-tabla--tarjetas tbody td.zt-td-acciones,
    .zt-tabla--tarjetas tbody td.zt-td-vacia, .zt-tabla--tarjetas tbody td.zt-td-ancha { grid-column: 1 / -1; }
    .zt-tabla--tarjetas tbody td.zt-td-titulo { order: -1; }
    .zt-tabla--tarjetas tbody td.zt-td-acciones { order: 99; }
    .zt-tabla--tarjetas tbody td.zt-td-acciones {
        display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .55rem; margin-top: .1rem; border-top: 1px dashed #EEE9DC;
    }
    .zt-tabla--tarjetas tbody td.zt-td-acciones > * { flex: 1 1 auto; }
    .zt-tabla--tarjetas .zt-td-solo-tabla, .zt-tabla--tarjetas .zt-sep,
    .zt-tabla--tarjetas tbody td.hidden { display: none !important; }
    .zt-tabla--3col tbody tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zt-tabla--tarjetas tbody td.zt-td-acciones .zt-link-accion {
        display: inline-flex; justify-content: center; align-items: center; min-height: 2.5rem; padding: 0 .8rem;
        border: 1px solid #E9E4D6; border-radius: 6px; background: #FCFBF7;
    }
}
/* Botón de acción con aspecto de enlace (para formularios POST dentro de tablas) */
.zt-link-accion { background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Barra inferior tipo app (celular / PWA) ---------- */
.zt-panel { --zt-barra-alto: 4.1rem; }
.zt-barra-app {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-template-columns: repeat(5, 1fr);
    height: calc(var(--zt-barra-alto) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgba(10, 10, 10, .97); backdrop-filter: blur(10px); border-top: 1px solid #222;
}
.zt-barra-app a, .zt-barra-app button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .25rem;
    font-size: .6rem; font-weight: 600; letter-spacing: .06em; color: #A8A190; min-width: 0;
}
.zt-barra-app svg { width: 1.35rem; height: 1.35rem; }
.zt-barra-app [aria-current="page"] { color: var(--zt-oro); }
.zt-barra-app__accion span.zt-barra-app__mas {
    width: 3.1rem; height: 3.1rem; margin-top: -1.35rem; border-radius: 999px; display: grid; place-items: center;
    background: var(--zt-oro); color: var(--zt-negro); box-shadow: 0 8px 20px -6px rgba(197, 179, 88, .7); border: 3px solid var(--zt-negro);
}
@media (max-width: 1023px) {
    .zt-panel main { padding-bottom: calc(var(--zt-barra-alto) + env(safe-area-inset-bottom) + 1rem); }
    .zt-wa-flotante { display: none; }
}

/* Encabezado móvil respetando la muesca del celular en modo app */
.zt-panel-top { padding-top: env(safe-area-inset-top); }



/* Aviso de instalación / actualización de la app */
.zt-aviso-app {
    position: fixed; left: 1rem; right: 1rem; bottom: calc(var(--zt-barra-alto) + env(safe-area-inset-bottom) + .75rem); z-index: 60;
    display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border-radius: 10px;
    background: var(--zt-negro); color: #fff; border-left: 3px solid var(--zt-oro); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
}
@media (min-width: 1024px) { .zt-aviso-app { left: auto; right: 1.5rem; bottom: 1.5rem; max-width: 26rem; } }

.zt-stock { display: inline-flex; min-width: 2.25rem; justify-content: center; padding: .25rem .5rem; border-radius: 999px; font-weight: 700; font-size: .78rem; }
.zt-stock--ok { background: #E7F3EC; color: var(--zt-esmeralda); }
.zt-stock--bajo { background: #FFF4E0; color: #9A5B00; }
.zt-stock--cero { background: #FDECEA; color: var(--zt-peligro); }

.zt-link-accion { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--zt-azul); transition: color var(--zt-transicion); }
.zt-link-accion:hover { color: var(--zt-oro-tinta); }
.zt-link-accion--peligro { color: var(--zt-peligro); }

/* Diálogos nativos */
dialog.zt-modal { width: min(92vw, 36rem); max-height: 90vh; padding: 0; border: 0; border-radius: 6px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .5); overflow: visible; }
dialog.zt-modal--ancho { width: min(94vw, 48rem); }
dialog.zt-modal::backdrop { background: rgba(10, 10, 10, .6); backdrop-filter: blur(2px); }
dialog.zt-modal[open] { animation: zt-modal-in 220ms cubic-bezier(.2, .7, .2, 1); }
@keyframes zt-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.zt-modal__cabecera { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.4rem; border-bottom: 1px solid #EEE9DC; border-top: 3px solid var(--zt-oro); border-radius: 6px 6px 0 0; }
.zt-modal__cuerpo { padding: 1.4rem; overflow-y: auto; max-height: calc(90vh - 9rem); }
.zt-modal__pie { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.4rem; border-top: 1px solid #EEE9DC; background: #FCFBF7; border-radius: 0 0 6px 6px; }


/* ==========================================================================
   Imágenes adaptables
   cover   -> la foto tiene la proporción del marco: lo llena.
   contain -> proporción distinta: se ve completa sobre un fondo difuminado de sí misma.
   ========================================================================== */
.zt-media { position: relative; overflow: hidden; background: var(--zt-arena); isolation: isolate; }
.zt-media__fondo {
    position: absolute; inset: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; z-index: -1;
    filter: blur(28px) saturate(1.15) brightness(1.02); opacity: .65; pointer-events: none;
}
.zt-fit-cover { object-fit: cover; }
.zt-fit-contain { object-fit: contain; }
/* En el carrusel el fondo difuminado cubre todo: nunca se ve negro vacío */
.zt-hero .zt-media__fondo { opacity: 1; filter: blur(36px) saturate(1.1) brightness(.8); }

/* ==========================================================================
   Categorías
   ========================================================================== */
/* Portada editorial */
.zt-cats { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) {
    .zt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .zt-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .zt-cats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .zt-cats--destacada > :first-child { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 640px) and (max-width: 1023px) { .zt-cats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px) {
    .zt-cats { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -1rem; padding: 0 1rem .25rem; }
    .zt-cats::-webkit-scrollbar { display: none; }
    .zt-cats > * { flex: 0 0 68%; scroll-snap-align: start; }
}
.zt-cat {
    position: relative; display: block; overflow: hidden; aspect-ratio: 3 / 4; background: var(--zt-negro); color: #fff;
    border-radius: var(--zt-radio);
}
@media (min-width: 1024px) { .zt-cats--destacada > :first-child { aspect-ratio: auto; } }
.zt-cat .zt-media__img { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1); }
.zt-cat:hover .zt-media__img { transform: scale(1.06); }
.zt-cat::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(10, 10, 10, 0) 35%, rgba(10, 10, 10, .45) 62%, rgba(10, 10, 10, .9) 100%);
}
.zt-cat::after {
    content: ""; position: absolute; inset: .75rem; z-index: 2; border: 1px solid rgba(197, 179, 88, 0);
    transition: border-color 400ms ease, inset 400ms ease; pointer-events: none;
}
.zt-cat:hover::after, .zt-cat:focus-visible::after { border-color: rgba(197, 179, 88, .75); inset: 1rem; }
.zt-cat__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.5rem 1.4rem; }
.zt-cat__nombre { font-family: 'Cinzel', Georgia, serif; font-weight: 600; letter-spacing: .06em; line-height: 1.1; font-size: clamp(1.15rem, 2vw, 1.6rem); }
.zt-cats--destacada > :first-child .zt-cat__nombre { font-size: clamp(1.4rem, 3vw, 2.4rem); }
.zt-cat__frase { margin-top: .35rem; font-size: .8rem; font-weight: 300; color: #DCD5C2; }
.zt-cat__cta {
    display: inline-flex; align-items: center; gap: .5rem; margin-top: .9rem; font-size: .66rem; font-weight: 600;
    letter-spacing: .22em; text-transform: uppercase; color: var(--zt-oro);
}
.zt-cat__cta::after { content: ""; width: 1.5rem; height: 1px; background: currentColor; transition: width 300ms ease; }
.zt-cat:hover .zt-cat__cta::after { width: 2.75rem; }
.zt-cat__num {
    position: absolute; top: 1.1rem; right: 1.1rem; z-index: 3; padding: .35rem .6rem; border-radius: 999px;
    background: rgba(10, 10, 10, .6); backdrop-filter: blur(4px);
    font-size: .58rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--zt-oro-claro);
}

/* Selector circular (estilo boutique) */
.zt-circulos { display: flex; gap: 1.1rem; overflow-x: auto; scrollbar-width: none; padding: .35rem .25rem .5rem; }
.zt-circulos::-webkit-scrollbar { display: none; }
@media (min-width: 768px) { .zt-circulos { justify-content: center; gap: 1.75rem; } }
.zt-circulo { flex: none; width: 5.25rem; display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; }
.zt-circulo__aro {
    position: relative; width: 4.75rem; height: 4.75rem; border-radius: 999px; padding: 3px;
    background: var(--zt-linea); transition: background 300ms ease, transform 300ms ease;
}
.zt-circulo__img { width: 100%; height: 100%; border-radius: 999px; overflow: hidden; border: 2px solid var(--zt-marfil); background: var(--zt-negro); display: grid; place-items: center; }
.zt-circulo__img img { width: 100%; height: 100%; object-fit: cover; }
.zt-circulo__nombre { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--zt-texto-suave); line-height: 1.25; transition: color 200ms ease; }
.zt-circulo:hover .zt-circulo__aro { background: var(--zt-grad-pavo); transform: translateY(-2px); }
.zt-circulo[aria-current="true"] .zt-circulo__aro { background: var(--zt-grad-oro); }
.zt-circulo[aria-current="true"] .zt-circulo__nombre, .zt-circulo:hover .zt-circulo__nombre { color: var(--zt-negro); }

/* Debe ir después de las reglas base de dialog.zt-modal */
/* En celular los diálogos se abren como hoja inferior */
@media (max-width: 639px) {
    dialog.zt-modal, dialog.zt-modal--ancho {
        width: 100%; max-width: 100%; max-height: 92vh; margin: auto 0 0; inset: auto 0 0 0; border-radius: 14px 14px 0 0;
    }
    dialog.zt-modal[open] { animation: zt-hoja-in 260ms cubic-bezier(.2, .7, .2, 1); }
    .zt-modal__cabecera { border-radius: 14px 14px 0 0; }
    .zt-modal__cuerpo { max-height: calc(92vh - 9rem); }
    .zt-modal__pie { border-radius: 0; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .zt-modal__pie .zt-btn { flex: 1; }
}
@keyframes zt-hoja-in { from { transform: translateY(100%); } }