/* ==========================================================================
   Tela Rayón Chalis — estilos específicos de página
   Tokens --ax-* heredados de landing-producto.css / tergal-catalan.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cross-sell — "Otros clientes también buscan: telas para guayabera"
   Registro: @showcase · Apertura: LabelLateral · Marco: Top-rule orange
   Hover: lift-orange (toda la tarjeta clickea vía stretched-link).
   -------------------------------------------------------------------------- */
.rc-cross { padding: clamp(40px, 6vw, 64px) 0; }

.rc-cross__eyebrow {
    font-family: var(--ax-font-body); font-weight: 800; text-transform: uppercase;
    letter-spacing: .14em; font-size: 12px; color: var(--ax-muted);
    margin: 0 0 16px; display: flex; align-items: center; gap: 12px;
}
.rc-cross__eyebrow::before {
    content: ""; width: 36px; height: 3px; background: var(--ax-orange); flex: none;
}

.rc-cross__card {
    position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--ax-white); border-top: 4px solid var(--ax-orange);
    box-shadow: 8px 8px 0 var(--ax-ink); transition: transform .18s ease, box-shadow .18s ease;
}
.rc-cross__card:hover, .rc-cross__card:focus-within {
    transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ax-orange);
}

.rc-cross__media { overflow: hidden; margin: 0; }
.rc-cross__media img {
    display: block; width: 100%; height: 100%; min-height: 240px;
    object-fit: cover; object-position: center; transition: transform .4s ease;
}
.rc-cross__card:hover .rc-cross__media img { transform: scale(1.05); }

.rc-cross__body {
    padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
}
.rc-cross__title {
    font-family: var(--ax-font-display); text-transform: uppercase; line-height: .98;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem); color: var(--ax-ink); margin: 0 0 14px;
}
.rc-cross__title em {
    font-family: var(--ax-font-accent); font-style: italic; text-transform: lowercase;
    color: var(--ax-orange); font-weight: 500;
}
.rc-cross__text {
    font-family: var(--ax-font-body); font-size: 15px; line-height: 1.65;
    color: var(--ax-muted); margin: 0 0 24px;
}
.rc-cross__text strong { color: var(--ax-ink); font-weight: 800; }

.rc-cross__cta {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--ax-font-body); font-weight: 800; font-size: 15px;
    text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
    color: var(--ax-white); background: var(--ax-orange); padding: 15px 30px;
    box-shadow: 0 6px 0 var(--ax-orange-deep); transition: box-shadow .15s ease, transform .15s ease;
}
.rc-cross__cta i { transition: transform .15s ease; }
.rc-cross__card:hover .rc-cross__cta { box-shadow: 0 9px 0 var(--ax-orange-deep); }
.rc-cross__card:hover .rc-cross__cta i { transform: translateX(4px); }
.rc-cross__cta:hover, .rc-cross__cta:focus { color: var(--ax-white); }
/* stretched-link: el ::after se posiciona respecto a .rc-cross__card
   (único ancestro con position:relative) → toda la tarjeta clickea. */
.rc-cross__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (max-width: 767px) {
    .rc-cross__card { grid-template-columns: 1fr; }
    .rc-cross__media img { min-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
    .rc-cross__card, .rc-cross__media img, .rc-cross__cta, .rc-cross__cta i { transition: none; }
    .rc-cross__card:hover { transform: none; }
    .rc-cross__card:hover .rc-cross__media img { transform: none; }
}