/* =========================================================================
   Arletex Design System v3.3 — Contenedor Halloween
   Registro: @news  ·  Apertura: NumberProtagonist  ·  Marco: Top-rule
   Hover dominante: lift-orange (cards) + press-chunky (CTAs)
   Surface: ink (uno de los 2-3 momentos oscuros permitidos en página)
   ========================================================================= */

.ax-halloween {
    /* tokens (fallback a valores si --ax-* no está cargado globalmente) */
    --hw-ink:         var(--ax-ink, #1F2530);
    --hw-paper:       var(--ax-paper, #FAF6EE);
    --hw-cream:       var(--ax-cream, #F2EDE4);
    --hw-white:       var(--ax-white, #FFFFFF);
    --hw-orange:      var(--ax-orange, #F15A29);
    --hw-orange-deep: var(--ax-orange-deep, #B0401A);
    --hw-purple:      var(--ax-purple, #6A52A2);
    --hw-yellow:      var(--ax-yellow, #FFEB3B);
    --hw-muted-dark:  var(--ax-muted-dark, #A8A39A);
    --hw-font-display: var(--ax-font-display, 'Anton', 'Arial Narrow', sans-serif);
    --hw-font-accent:  var(--ax-font-accent, 'Fraunces', 'Georgia', serif);
    --hw-font-body:    var(--ax-font-body, 'Lato', system-ui, sans-serif);
    --hw-font-mono:    var(--ax-font-mono, 'JetBrains Mono', ui-monospace, monospace);

    position: relative;
    background-color: var(--hw-ink);
    /* Patrón sutil: pequeñas cruces purple repetidas */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='%236A52A2' fill-opacity='0.07'><path d='M15 8 L17 8 L17 14 L23 14 L23 16 L17 16 L17 22 L15 22 L15 16 L9 16 L9 14 L15 14 Z'/><path d='M58 50 L60 50 L60 56 L66 56 L66 58 L60 58 L60 64 L58 64 L58 58 L52 58 L52 56 L58 56 Z'/></g><g fill='%23F15A29' fill-opacity='0.05'><text x='42' y='30' font-family='serif' font-size='12'>✦</text><text x='5' y='68' font-family='serif' font-size='10'>✦</text></g></svg>");
    background-repeat: repeat;
    color: var(--hw-paper);
    padding: clamp(64px, 8vw, 96px) 0;
    overflow: hidden;
    border-radius: 0;
}

/* Double top-rule: naranja + purple (marco) */
.ax-halloween::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 12px;
    background:
        linear-gradient(to bottom,
            var(--hw-orange) 0, var(--hw-orange) 4px,
            transparent 4px, transparent 8px,
            var(--hw-purple) 8px, var(--hw-purple) 10px,
            transparent 10px, transparent 12px);
    z-index: 3;
    pointer-events: none;
}

/* MegaTextBg — "HALLOWEEN" como segundo opening detrás de la grilla */
.ax-halloween::after {
    content: 'HALLOWEEN';
    position: absolute;
    bottom: -6%;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--hw-font-display);
    font-weight: 700;
    font-size: clamp(120px, 22vw, 340px);
    line-height: 0.82;
    color: transparent;
    -webkit-text-stroke: 2px var(--hw-orange);
    opacity: 0.28;
    letter-spacing: -0.03em;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    white-space: nowrap;
    text-transform: uppercase;
}

/* Container interior por encima del MegaTextBg */
.ax-halloween .ax-container {
    position: relative;
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 56px);
    z-index: 1;
}

/* ──────────────────────────────────────────────────────────────────────────
   Cabecera periódico — NumberProtagonist
   ────────────────────────────────────────────────────────────────────────── */

.ax-halloween__head {
    margin-bottom: clamp(40px, 6vw, 64px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: clamp(32px, 4vw, 48px);
}

.ax-halloween__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 24px;
    padding: 0;
    font-family: var(--hw-font-mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hw-orange);
    font-weight: 500;
}

.ax-halloween__dot {
    width: 8px;
    height: 8px;
    background: var(--hw-orange);
    display: inline-block;
    flex-shrink: 0;
}

.ax-halloween__headline-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}

.ax-halloween__number {
    font-family: var(--hw-font-display);
    font-weight: 700;
    font-size: clamp(80px, 14vw, 200px);
    line-height: 0.85;
    color: var(--hw-orange);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    display: block;
    user-select: none;
}

.ax-halloween__headline-block {
    padding-top: clamp(8px, 1.5vw, 20px);
}

.ax-halloween__title {
    font-family: var(--hw-font-display);
    font-weight: 500;
    font-size: clamp(32px, 5vw, 64px) !important;
    line-height: 0.95;
    text-transform: uppercase;
    color: var(--hw-white);
    margin: 0 0 16px;
    letter-spacing: -0.01em;
}

.ax-halloween__title em {
    font-family: var(--hw-font-accent);
    font-style: italic;
    font-weight: 400;
    text-transform: lowercase;
    color: var(--hw-orange);
    letter-spacing: 0;
    /* Sin rotate — gesto humano, no truco */
}

.ax-halloween__deck {
    font-family: var(--hw-font-body);
    font-size: clamp(15px, 1.1vw, 17px);
    line-height: 1.65;
    color: var(--hw-muted-dark);
    max-width: 60ch;
    margin: 0;
}

/* ──────────────────────────────────────────────────────────────────────────
   Grilla 4 colores
   ────────────────────────────────────────────────────────────────────────── */

.ax-halloween__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 2.5vw, 32px);
    margin-bottom: clamp(48px, 6vw, 80px);
}

/* ──────────────────────────────────────────────────────────────────────────
   Card de color (surface paper sobre ink)
   ────────────────────────────────────────────────────────────────────────── */

.ax-halloween .color-card.ax-halloween__card {
    /* reset legacy */
    background: var(--hw-paper);
    backdrop-filter: none;
    border: 1px solid var(--hw-ink);
    border-radius: 0;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    height: 100%;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 4px 4px 0 var(--hw-ink);
    opacity: 1;
    transform: none;
}

/* Anula la animación inyectada por el JS legacy */
.ax-halloween .color-card.ax-halloween__card,
.ax-halloween .color-card.ax-halloween__card.animate-in {
    opacity: 1;
    transform: none;
}

/* Anula pseudo-elemento legacy con gradient mask */
.ax-halloween .color-card.ax-halloween__card::before {
    display: none;
}

/* HOVER CANÓNICO: lift-orange */
.ax-halloween .color-card.ax-halloween__card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--hw-orange);
    border-color: var(--hw-ink);
}

/* Variaciones temáticas por tono — la sombra hover acompaña al color de la card */
.ax-halloween .color-card.ax-halloween__card[data-tone="blanco"]:hover {
    box-shadow: 7px 7px 0 var(--hw-white);
}

.ax-halloween .color-card.ax-halloween__card[data-tone="negro"]:hover {
    box-shadow: 7px 7px 0 var(--hw-purple);
}

.ax-halloween .color-card.ax-halloween__card[data-tone="gris"]:hover {
    box-shadow: 7px 7px 0 var(--hw-muted-dark);
}

/* Tonalidad por color: barra superior fina como índice cromático */
.ax-halloween__card::after {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 6px;
    background: var(--hw-ink);
    z-index: 1;
}
.ax-halloween__card[data-tone="blanco"]::after  { background: var(--hw-white); border-bottom: 1px solid var(--hw-ink); }
.ax-halloween__card[data-tone="negro"]::after   { background: var(--hw-ink); }
.ax-halloween__card[data-tone="naranja"]::after { background: var(--hw-orange); }
.ax-halloween__card[data-tone="gris"]::after    { background: var(--hw-muted-dark); }

/* Card head — índice mono + título Anton */
.ax-halloween__card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-top: 6px;
}

.ax-halloween__card-index {
    font-family: var(--hw-font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--hw-ink);
    opacity: 0.55;
    text-transform: uppercase;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Símbolos editoriales por card — Fraunces para evitar emoji presentation */
.ax-halloween__symbol {
    font-family: var(--hw-font-accent);
    font-style: normal;
    font-size: 15px;
    line-height: 1;
    color: var(--hw-orange);
    opacity: 1;
    /* Forzar variante texto sobre emoji a color */
    font-variant-emoji: text;
}

.ax-halloween__card[data-tone="negro"] .ax-halloween__symbol {
    color: var(--hw-purple);
}

.ax-halloween__card-title {
    font-family: var(--hw-font-display);
    font-weight: 500;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1;
    text-transform: uppercase;
    color: var(--hw-ink);
    margin: 0;
    letter-spacing: -0.005em;
}

/* ──────────────────────────────────────────────────────────────────────────
   Carrusel (selectores requeridos por contenedor-dia-de-muertos.js)
   ────────────────────────────────────────────────────────────────────────── */

.ax-halloween .color-carousel {
    margin-bottom: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.ax-halloween .carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 0;
    margin-bottom: 14px;
    border: 1px solid var(--hw-ink);
    container-type: inline-size;
}

.ax-halloween .carousel-track {
    display: flex;
    width: 300%;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ax-halloween .carousel-slide {
    width: 33.333%;
    position: relative;
    opacity: 0;
    transition: opacity 500ms ease;
}

.ax-halloween .carousel-slide.active {
    opacity: 1;
}

.ax-halloween .carousel-slide a {
    display: block;
    width: 100%;
    position: relative;
    text-decoration: none;
}

.ax-halloween .carousel-slide img {
    width: 100%;
    aspect-ratio: 7 / 5;
    object-fit: cover;
    border-radius: 0;
    display: block;
}

/* Info bar editorial debajo de la imagen (no overlay) */
.ax-halloween .fabric-info {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: var(--hw-ink);
    color: var(--hw-paper);
    padding: 10px 14px;
    border-radius: 0;
    border-top: 1px solid var(--hw-ink);
}

.ax-halloween .fabric-name {
    font-family: var(--hw-font-body);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

.ax-halloween .color-badge {
    background: var(--hw-orange);
    color: var(--hw-white);
    padding: 4px 10px;
    border-radius: 0;
    font-family: var(--hw-font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* Botones prev/next del carrusel — cuadrados sobre ink, centrados sobre la imagen */
.ax-halloween .carousel-btn {
    position: absolute;
    /* Centrado sobre la imagen (aspect-ratio 7/5).
       Altura de imagen = 100cqi * 5/7. Centro vertical = (altura_img - height_btn) / 2. */
    top: calc((100cqi * 5 / 7 - 36px) / 2);
    transform: none;
    background: var(--hw-ink);
    color: var(--hw-paper);
    border: 1px solid var(--hw-paper);
    width: 36px;
    height: 36px;
    border-radius: 0;
    cursor: pointer;
    transition: background 150ms ease, color 150ms ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ax-halloween .carousel-btn:hover,
.ax-halloween .carousel-btn:focus-visible {
    background: var(--hw-orange);
    color: var(--hw-white);
    border-color: var(--hw-orange);
    transform: none;
    outline: none;
}

.ax-halloween .carousel-btn:focus-visible {
    outline: 2px solid var(--hw-orange);
    outline-offset: 3px;
}

.ax-halloween .carousel-btn.prev { left: 10px; }
.ax-halloween .carousel-btn.next { right: 10px; }

/* Dots — cuadrados, no círculos */
.ax-halloween .carousel-dots {
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 2px;
}

.ax-halloween .dot {
    width: 16px;
    height: 4px;
    border-radius: 0;
    background: var(--hw-ink);
    opacity: 0.25;
    cursor: pointer;
    transition: opacity 150ms ease, width 150ms ease, background 150ms ease;
    display: block;
}

.ax-halloween .dot:hover { opacity: 0.6; }

.ax-halloween .dot.active {
    background: var(--hw-orange);
    opacity: 1;
    width: 28px;
    transform: none;
}

.ax-halloween .dot:focus-visible {
    outline: 2px solid var(--hw-orange);
    outline-offset: 3px;
}

/* Card foot — CTA ghost */
.ax-halloween__card-foot {
    margin-top: auto;
    padding-top: 4px;
    text-align: left;
}

.ax-halloween__cta-ghost {
    font-family: var(--hw-font-body);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hw-ink);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 2px solid var(--hw-ink);
    transition: color 150ms ease, border-color 150ms ease, gap 150ms ease;
}

.ax-halloween__cta-ghost:hover,
.ax-halloween__cta-ghost:focus-visible {
    color: var(--hw-orange);
    border-bottom-color: var(--hw-orange);
    text-decoration: none;
    gap: 10px;
    outline: none;
}

.ax-halloween__cta-ghost:focus-visible {
    outline: 2px solid var(--hw-orange);
    outline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Footer de cierre — doble CTA chunky (press-chunky)
   ────────────────────────────────────────────────────────────────────────── */

.ax-halloween__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
    justify-content: center;
    align-items: center;
    padding-top: clamp(32px, 4vw, 48px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ax-halloween__cta {
    font-family: var(--hw-font-body);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 16px 28px;
    border-radius: 0;
    text-decoration: none;
    display: inline-block;
    transition: transform 120ms ease, box-shadow 120ms ease;
    border: 2px solid;
    cursor: pointer;
    min-height: 48px;
    line-height: 1.2;
}

.ax-halloween__cta--primary {
    background: var(--hw-orange);
    color: var(--hw-white);
    border-color: var(--hw-orange);
    box-shadow: 0 6px 0 var(--hw-orange-deep);
}

.ax-halloween__cta--primary:hover,
.ax-halloween__cta--primary:focus-visible {
    color: var(--hw-white);
    text-decoration: none;
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--hw-orange-deep);
    outline: none;
}

.ax-halloween__cta--secondary {
    background: transparent;
    color: var(--hw-paper);
    border-color: var(--hw-paper);
    box-shadow: 0 6px 0 transparent;
}

.ax-halloween__cta--secondary:hover,
.ax-halloween__cta--secondary:focus-visible {
    background: var(--hw-paper);
    color: var(--hw-ink);
    text-decoration: none;
    transform: translateY(3px);
    box-shadow: 0 3px 0 var(--hw-orange);
    outline: none;
}

.ax-halloween__cta:focus-visible {
    outline: 2px solid var(--hw-yellow);
    outline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Reduced motion
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ax-halloween .carousel-track,
    .ax-halloween .carousel-slide,
    .ax-halloween .color-card.ax-halloween__card,
    .ax-halloween__cta,
    .ax-halloween__cta-ghost {
        transition: none !important;
        animation: none !important;
    }
    .ax-halloween .color-card.ax-halloween__card:hover,
    .ax-halloween__cta:hover {
        transform: none !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .ax-halloween__headline-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .ax-halloween__number {
        font-size: clamp(72px, 18vw, 120px);
    }
    .ax-halloween__title {
        font-size: clamp(28px, 8vw, 44px);
    }
    .ax-halloween__deck { font-size: 14px; }
    .ax-halloween .carousel-btn { width: 32px; height: 32px; }
    .ax-halloween .color-badge { font-size: 9px; padding: 3px 8px; }
    .ax-halloween__cta { padding: 14px 22px; font-size: 13px; }
}

@media (max-width: 560px) {
    .ax-halloween__grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .ax-halloween__foot {
        flex-direction: column;
        align-items: stretch;
    }
    .ax-halloween__cta {
        text-align: center;
        width: 100%;
    }
    .ax-halloween .fabric-name { font-size: 12px; }
    .ax-halloween .fabric-info { padding: 8px 10px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   v3.3.1 — Variante "telas" (7 cards por tela + chips de color)
   Registro: news · Apertura: NumberProtagonist · Marco: Top-rule
   Hover dominante: lift-orange (cards) + press-chunky (CTAs)
   ═════════════════════════════════════════════════════════════════════════ */

/* Grilla 7 telas — auto-fit con minmax */
.ax-halloween__grid--telas {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: clamp(18px, 2vw, 28px);
}

/* Card tela (extiende ax-halloween__card pero sin carousel) */
.ax-halloween .hwtela-card.ax-halloween__card {
    background: var(--hw-paper);
    border: 1px solid var(--hw-ink);
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: visible;
    height: 100%;
    transition: transform 200ms ease, box-shadow 200ms ease;
    box-shadow: 4px 4px 0 var(--hw-ink);
}

/* Top-rule por tono — índice cromático sobre la card */
.ax-halloween__card[data-tone="tafetan"]::after      { background: var(--hw-orange); }
.ax-halloween__card[data-tone="bombay"]::after       { background: var(--hw-ink); }
.ax-halloween__card[data-tone="satin"]::after        { background: var(--hw-purple); }
.ax-halloween__card[data-tone="tul70"]::after        { background: var(--hw-muted-dark); }
.ax-halloween__card[data-tone="glitter"]::after      { background: var(--hw-yellow); }
.ax-halloween__card[data-tone="lentejuela"]::after   { background: var(--hw-purple); }
.ax-halloween__card[data-tone="razo"]::after         { background: var(--hw-orange); }
.ax-halloween__card[data-tone="popelina"]::after     { background: var(--hw-paper); border-bottom: 1px solid var(--hw-ink); }
.ax-halloween__card[data-tone="poliseda"]::after     { background: var(--hw-ink); }
.ax-halloween__card[data-tone="tafeta-forro"]::after { background: var(--hw-orange); }
.ax-halloween__card[data-tone="loneta"]::after       { background: var(--hw-orange-deep, #B0401A); }
.ax-halloween__card[data-tone="memory"]::after       { background: var(--hw-muted-dark); }
.ax-halloween__card[data-tone="microfibra"]::after   { background: var(--hw-muted-dark); }

/* Hover canónico lift-orange — sombra por tono */
.ax-halloween .hwtela-card.ax-halloween__card:hover {
    transform: translate(-3px, -3px);
    box-shadow: 7px 7px 0 var(--hw-orange);
}
.ax-halloween .hwtela-card[data-tone="bombay"]:hover       { box-shadow: 7px 7px 0 var(--hw-purple); }
.ax-halloween .hwtela-card[data-tone="satin"]:hover        { box-shadow: 7px 7px 0 var(--hw-purple); }
.ax-halloween .hwtela-card[data-tone="tul70"]:hover        { box-shadow: 7px 7px 0 var(--hw-white); }
.ax-halloween .hwtela-card[data-tone="glitter"]:hover      { box-shadow: 7px 7px 0 var(--hw-yellow); }
.ax-halloween .hwtela-card[data-tone="lentejuela"]:hover   { box-shadow: 7px 7px 0 var(--hw-purple); }
.ax-halloween .hwtela-card[data-tone="popelina"]:hover     { box-shadow: 7px 7px 0 var(--hw-white); }
.ax-halloween .hwtela-card[data-tone="poliseda"]:hover     { box-shadow: 7px 7px 0 var(--hw-purple); }
.ax-halloween .hwtela-card[data-tone="memory"]:hover       { box-shadow: 7px 7px 0 var(--hw-muted-dark); }
.ax-halloween .hwtela-card[data-tone="microfibra"]:hover   { box-shadow: 7px 7px 0 var(--hw-muted-dark); }

/* Card head — número + título + eyebrow (3 lineas verticales) */
.ax-halloween .hwtela-card .ax-halloween__card-head {
    display: block;
    padding: 18px 18px 12px;
    margin-bottom: 0;
}

.ax-halloween .hwtela-card .ax-halloween__card-index {
    display: inline-flex;
    margin-bottom: 8px;
}

.ax-halloween .hwtela-card .ax-halloween__card-title {
    margin: 0 0 4px;
}

.hwtela-card__eyebrow {
    font-family: var(--hw-font-accent);
    font-style: italic;
    font-size: 14px;
    color: var(--hw-purple);
    margin: 0;
    line-height: 1.2;
    text-transform: lowercase;
}

/* Card media — imagen como link */
.hwtela-card__media {
    display: block;
    width: 100%;
    background: var(--hw-ink);
    border-top: 1px solid var(--hw-ink);
    border-bottom: 1px solid var(--hw-ink);
    text-decoration: none;
    overflow: hidden;
}

.hwtela-card__media picture,
.hwtela-card__media img {
    display: block;
    width: 100%;
}

.hwtela-card__media img {
    aspect-ratio: 7 / 5;
    object-fit: cover;
    transition: transform 350ms cubic-bezier(.2,.7,.2,1), filter 200ms ease;
    filter: saturate(0.95);
}

.hwtela-card:hover .hwtela-card__media img,
.hwtela-card:focus-within .hwtela-card__media img {
    transform: scale(1.04);
    filter: saturate(1.08);
}

/* Body — etiqueta + chips */
.hwtela-card__body {
    padding: 16px 18px 14px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hwtela-card__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    font-family: var(--hw-font-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.hwtela-card__label-stamp {
    background: var(--hw-ink);
    color: var(--hw-paper);
    padding: 3px 8px;
    border-radius: 0;
    font-weight: 500;
}

.hwtela-card__label-count {
    color: var(--hw-ink);
    opacity: 0.55;
    font-weight: 500;
}

/* Chips de color — lista horizontal con swatch + label */
.hwtela-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.hwtela-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--hw-white);
    border: 1px solid var(--hw-ink);
    padding: 4px 9px 4px 5px;
    border-radius: 9999px;
    font-family: var(--hw-font-body);
    font-size: 11px;
    font-weight: 700;
    color: var(--hw-ink);
    line-height: 1;
    letter-spacing: 0.02em;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.hwtela-chip:hover {
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--hw-orange);
}

.hwtela-chip__swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    border: 1px solid rgba(31, 37, 48, 0.4);
    flex-shrink: 0;
}

.hwtela-chip--light .hwtela-chip__swatch {
    border-color: rgba(31, 37, 48, 0.6);
}

.hwtela-chip__name {
    line-height: 1;
}

/* Card foot — CTA chunky por card, ancho completo */
.ax-halloween .hwtela-card .ax-halloween__card-foot {
    margin-top: auto;
    padding: 4px 18px 22px;
    text-align: center;
}

.ax-halloween .hwtela-card .hwtela-card__cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    font-family: var(--hw-font-body);
    font-weight: 700;
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    background: var(--hw-ink);
    color: var(--hw-paper);
    border: 2px solid var(--hw-ink);
    border-radius: 0;
    box-shadow: 0 5px 0 #000;
    min-height: 48px;
}

.ax-halloween .hwtela-card .hwtela-card__cta:hover,
.ax-halloween .hwtela-card .hwtela-card__cta:focus-visible {
    background: var(--hw-orange);
    color: var(--hw-white);
    border-color: var(--hw-orange);
    box-shadow: 0 2px 0 var(--hw-orange-deep);
    transform: translateY(3px);
    text-decoration: none;
    outline: none;
}

.hwtela-card__cta i {
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.hwtela-card__cta span {
    display: inline-block;
    line-height: 1.25;
}

/* Responsive ajustes para grid telas */
@media (max-width: 768px) {
    .ax-halloween__grid--telas {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
    .ax-halloween .hwtela-card .ax-halloween__card-title {
        font-size: clamp(22px, 6vw, 26px);
    }
    .hwtela-chip { font-size: 10px; padding: 3px 8px 3px 4px; }
    .hwtela-chip__swatch { width: 12px; height: 12px; }
    .ax-halloween .hwtela-card .hwtela-card__cta {
        font-size: 11px;
        padding: 13px 12px;
        min-height: 46px;
        line-height: 1.3;
    }
    .hwtela-card__cta i { font-size: 12px; }
    .ax-halloween .hwtela-card .ax-halloween__card-foot {
        padding: 4px 14px 20px;
    }
}

@media (max-width: 480px) {
    .ax-halloween__grid--telas {
        grid-template-columns: 1fr;
    }
    .ax-halloween .hwtela-card .hwtela-card__cta {
        font-size: 11px;
        padding: 12px 10px;
        gap: 6px;
        letter-spacing: 0.04em;
    }
    .ax-halloween .hwtela-card .ax-halloween__card-foot {
        padding: 4px 12px 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ax-halloween .hwtela-card,
    .hwtela-card__media img,
    .hwtela-chip,
    .hwtela-card__cta {
        transition: none !important;
        transform: none !important;
    }
}