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

/* --------------------------------------------------------------------------
   Cross-sell — "Otros clientes también buscan: bolsas de loneta en Fiubags"
   Registro: @showcase · Apertura: LabelLateral · Marco: Top-rule orange
   Hover: lift-orange (toda la tarjeta clickea vía stretched-link).
   Mismo componente que .rc-cross (tela-rayon-chalis.css); prefijo propio
   porque aún no está promovido a landing-producto.css.
   -------------------------------------------------------------------------- */
.ln-cross { padding: clamp(40px, 6vw, 64px) 0; }

.ln-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;
}
.ln-cross__eyebrow::before {
    content: ""; width: 36px; height: 3px; background: var(--ax-orange); flex: none;
}

.ln-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;
}
.ln-cross__card:hover, .ln-cross__card:focus-within {
    transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--ax-orange);
}

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

.ln-cross__body {
    padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column;
    align-items: flex-start; justify-content: center;
}
.ln-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;
}
.ln-cross__title em {
    font-family: var(--ax-font-accent); font-style: italic; text-transform: lowercase;
    color: var(--ax-orange); font-weight: 500;
}
.ln-cross__text {
    font-family: var(--ax-font-body); font-size: 15px; line-height: 1.65;
    color: var(--ax-muted); margin: 0 0 24px;
}
.ln-cross__text strong { color: var(--ax-ink); font-weight: 800; }

.ln-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;
}
.ln-cross__cta i { transition: transform .15s ease; }
.ln-cross__card:hover .ln-cross__cta { box-shadow: 0 9px 0 var(--ax-orange-deep); }
.ln-cross__card:hover .ln-cross__cta i { transform: translateX(4px); }
.ln-cross__cta:hover, .ln-cross__cta:focus { color: var(--ax-white); }
/* stretched-link: el ::after se posiciona respecto a .ln-cross__card
   (único ancestro con position:relative) → toda la tarjeta clickea. */
.ln-cross__cta::after { content: ""; position: absolute; inset: 0; z-index: 1; }

@media (max-width: 767px) {
    .ln-cross__card { grid-template-columns: 1fr; }
    .ln-cross__media img { min-height: 200px; }
}

/* --------------------------------------------------------------------------
   Color Sheet agrupado — Loneta normal vs. Loneta repelente al agua.
   Extiende .ax-color-sheet (landing-producto.css §17c) con subgrupos
   encabezados. El grid interior (.ax-color-sheet__grid) y los swatches
   (.ax-color-swatch) NO se tocan: landing-producto.js los sincroniza por
   clase/atributo (document.querySelectorAll), no depende del anidado del
   DOM, así que envolver cada mitad en su propio grupo es seguro.

   OJO — scroll: en el original, .ax-color-sheet__grid (el <ul>) es hijo
   DIRECTO de .ax-color-sheet__panel y por eso hereda flex:1/overflow-y:auto
   (panel = flex-column, overflow:hidden, max-height:85vh). Con 2 grupos ya
   no hay un único <ul> hijo directo, así que .ax-color-sheet__body toma esa
   función (flex:1/overflow-y:auto) y los .ax-color-sheet__grid internos
   pierden su propio padding/scroll — si no, el panel simplemente recorta
   los colores que no caben y no hay manera de hacer scroll para verlos.
   -------------------------------------------------------------------------- */
.ax-color-sheet__body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 20px 24px;
}

.ax-color-sheet__body .ax-color-sheet__grid {
    padding: 0;
    overflow: visible;
}

.ax-color-sheet__group + .ax-color-sheet__group {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--ax-rule);
}

.ax-color-sheet__group-title {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font-family: var(--ax-font-body);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: 12.5px;
    color: var(--ax-ink);
}
.ax-color-sheet__group-title i { color: var(--ax-orange); font-size: 13px; }

.ax-color-sheet__group-note {
    margin: 4px 0 16px;
    font-family: var(--ax-font-body);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ax-muted);
}

/* --------------------------------------------------------------------------
   Comparativa Normal vs. Repelente — tarjeta de dos columnas dentro de
   .tarjeta-beneficio (Descripción). Reusa tokens, sin nuevo layout base.
   -------------------------------------------------------------------------- */
.ln-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin: 20px 0 4px;
}
.ln-compare__col {
    background: var(--ax-cream);
    border-top: 3px solid var(--ax-orange);
    padding: 18px 20px;
}
.ln-compare__col--repelente { background: var(--ax-paper); }
.ln-compare__col h4 {
    font-family: var(--ax-font-body); font-weight: 800; text-transform: uppercase;
    letter-spacing: .04em; font-size: 14px; color: var(--ax-ink); margin: 0 0 10px;
    display: flex; align-items: center; gap: 8px;
}
.ln-compare__col h4 i { color: var(--ax-orange); }
.ln-compare__col p { font-family: var(--ax-font-body); font-size: 13.5px; line-height: 1.6; color: var(--ax-muted); margin: 0; }
.ln-compare__col strong { color: var(--ax-ink); }

@media (max-width: 767px) {
    .ln-compare { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .ln-cross__card, .ln-cross__media img, .ln-cross__cta, .ln-cross__cta i { transition: none; }
    .ln-cross__card:hover { transform: none; }
    .ln-cross__card:hover .ln-cross__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   FAQ — acordeón ax-faq.js (data-ax-faq). Contrato: <details>/<summary>,
   el <h3> vive dentro del <summary> (HTML válido) y el ícono +/× es un
   ::after; el envoltorio de respuesta (.ln-reveal) lo anima el JS inline,
   sin necesitar estilos propios. Mismo patrón que .pop-faq (popelina-tsg.css).
   -------------------------------------------------------------------------- */
.ln-faq { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ln-faq__item {
    background: var(--ax-white);
    border: 1.5px solid var(--ax-rule);
    transition: border-color var(--ax-motion-fast) var(--ax-ease-out),
                box-shadow var(--ax-motion-fast) var(--ax-ease-out);
}
.ln-faq__item:hover { border-color: var(--ax-ink); }
.ln-faq__item[open] {
    border-color: var(--ax-ink);
    border-left: 4px solid var(--ax-orange);
    box-shadow: 5px 5px 0 var(--ax-ink);
}
.ln-faq__q {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 20px;
    transition: padding-left var(--ax-motion-fast) var(--ax-ease-out);
}
.ln-faq__q::-webkit-details-marker { display: none; }
.ln-faq__q::marker { content: ""; }
.ln-faq__item:hover .ln-faq__q { padding-left: 25px; }
.ln-faq__q-text {
    flex: 1;
    font-family: var(--ax-font-body);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.35;
    color: var(--ax-ink);
    margin: 0;
    transition: color var(--ax-motion-fast) var(--ax-ease-out);
}
/* Icono +/× como pseudo-elemento (summary contiene solo el <h3> → HTML válido) */
.ln-faq__q::after {
    content: '+';
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    font-family: var(--ax-font-display);
    font-size: 1.35rem;
    line-height: 1;
    background: var(--ax-cream);
    border: 1.5px solid var(--ax-rule);
    color: var(--ax-ink);
    transition: transform var(--ax-motion-fast) var(--ax-ease-out),
                background var(--ax-motion-fast) var(--ax-ease-out),
                color var(--ax-motion-fast) var(--ax-ease-out),
                border-color var(--ax-motion-fast) var(--ax-ease-out);
}
.ln-faq__item[open] .ln-faq__q-text { color: var(--ax-orange); }
.ln-faq__item[open] .ln-faq__q::after {
    transform: rotate(45deg);
    background: var(--ax-orange);
    color: var(--ax-paper);
    border-color: var(--ax-orange);
}
/* .ln-reveal: envoltorio que ax-faq.js anima (height+opacity) inline;
   no requiere estilos propios. */
.ln-faq__a {
    font-family: var(--ax-font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--ax-muted);
    max-width: 72ch;
    padding: 0 20px 18px;
    margin: 0;
}
.ln-faq__a a {
    color: var(--ax-ink);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--ax-orange);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ln-faq__item, .ln-faq__q, .ln-faq__q-text, .ln-faq__q::after { transition: none; }
}