/* ==========================================================================
   ROCO · UI compartida (KUBYKA 25/09/2026)
   CSS propio con prefijos: el Tailwind de la web está purgado y no admite
   clases nuevas. Se carga con ?v= (style.css no lleva cache-busting).
   Modo oscuro = html.dark, como el resto de la web.
   ========================================================================== */

/* ---------- Tarjeta de producto: nombre en dos niveles (listado y sectores) ---------- */
.p_title .p_model { display: block; font-size: 22px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; line-height: 1.15; }
.p_title .p_name  { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; text-transform: lowercase; opacity: .72; }

/* ---------- Página de sector (sector.php) ---------- */
.sc { --sc-ink: #172430; --sc-text: #5F6B73; --sc-line: rgba(23, 36, 48, .14); --sc-paper: #F8F8F9; }
html.dark .sc { --sc-ink: #F2F0EC; --sc-text: #A9B4BC; --sc-line: rgba(242, 240, 236, .16); --sc-paper: #1D2C3A; }

.sc-eyebrow {
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--sc-ink);
}

.sc-h1 { font-weight: 500; line-height: 1.15; font-size: 1.75rem; }
@media (min-width: 768px) { .sc-h1 { font-size: 2.25rem; } }

.sc-lead { font-size: 1.1rem; line-height: 1.55; color: var(--sc-ink); }

/* Botones del hero: mismos que la portada (.rh-btn) pero sin depender de su CSS */
.sc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.sc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    min-height: 50px; padding: 0 24px; font-size: .95rem; font-weight: 500; line-height: 1;
    text-decoration: none; border: 1px solid var(--sc-ink); border-radius: 2px;
    transition: background-color .25s ease, color .25s ease;
}
.sc-btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s ease; }
.sc-btn--primary { background: var(--sc-ink); color: #fff; }
html.dark .sc-btn--primary { color: #172430; }
.sc-btn--primary:hover { background: transparent; color: var(--sc-ink); }
.sc-btn--primary:hover svg { transform: translateX(4px); }
.sc-btn--ghost { background: transparent; color: var(--sc-ink); }
.sc-btn--ghost:hover { background: var(--sc-ink); color: #fff; }
html.dark .sc-btn--ghost:hover { color: #172430; }
.sc a:focus-visible, .sc-cta a:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

/* Icono de los argumentos (mismo estilo que las tarjetas de la página Roco) */
.sc-icon { width: 36px; height: 36px; color: var(--sc-ink); }

/* Selección de productos: cabecera con contador y enlace */
.sc-sel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 24px; }
.sc-sel-count { font-size: .9rem; color: var(--sc-text); }
.sc-sel-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--sc-ink); padding-bottom: 2px; }
.sc-sel-link svg { width: 16px; height: 16px; transition: transform .25s ease; }
.sc-sel-link:hover svg { transform: translateX(4px); }
.sc-empty { padding: 32px 0; color: var(--sc-text); }

/* Banda de cierre */
.sc-cta {
    background: #172430; color: #F2F0EC;
    padding: 56px clamp(20px, 4.4vw, 74px);
}
html.dark .sc-cta { background: #F2F0EC; color: #172430; }
.sc-cta__inner { max-width: 1720px; margin: 0 auto; display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) { .sc-cta__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.sc-cta__title { margin: 0; font-weight: 300; font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; letter-spacing: -.02em; }
.sc-cta__text { margin: 14px 0 0; max-width: 34em; font-size: 1.02rem; line-height: 1.6; opacity: .82; }
.sc-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 900px) { .sc-cta__actions { justify-content: flex-end; } }
.sc-cta .sc-btn { border-color: currentColor; color: inherit; background: transparent; }
.sc-cta .sc-btn--primary { background: #F2F0EC; color: #172430; }
html.dark .sc-cta .sc-btn--primary { background: #172430; color: #F2F0EC; }
.sc-cta .sc-btn--primary:hover { background: transparent; color: inherit; }
.sc-cta .sc-btn--ghost:hover { background: #F2F0EC; color: #172430; }
html.dark .sc-cta .sc-btn--ghost:hover { background: #172430; color: #F2F0EC; }

/* Otros sectores */
.sc-others { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .sc-others { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sc-other {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; border: 1px solid var(--sc-line); border-radius: 6px;
    color: var(--sc-ink); text-decoration: none; transition: border-color .25s ease, transform .25s ease;
}
.sc-other:hover { border-color: var(--sc-ink); transform: translateY(-2px); }
.sc-other strong { display: block; font-weight: 600; font-size: 1rem; }
.sc-other span { display: block; font-size: .82rem; color: var(--sc-text); margin-top: 2px; }
.sc-other svg { width: 18px; height: 18px; flex: none; }