/* =========================================================
   Cabecera y pie del sitio dentro de las portadas de catálogo.
   Todas las clases van prefijadas con .rx- y no se usan selectores
   de elemento globales, para no interferir con embedshop.css
   ni con catalogos-shell.css.
   ========================================================= */

/* La cabecera es fija y mide exactamente --cat-header-gap (100px / 92px),
   que es el hueco que el shell del catálogo ya reserva arriba. */
.rx-detail-header{
    position:fixed; top:0; left:0; right:0; z-index:70;
    height:100px;
    display:flex; align-items:center;
    background:#000;
    border-bottom:2px solid #ff1400;
}
.rx-detail-header__inner{
    width:min(1400px, calc(100% - 32px));
    margin-inline:auto;
    display:flex; align-items:center; gap:24px;
}

.rx-detail-brand{ width:min(230px,42vw); flex:0 0 auto; display:block; }
.rx-detail-brand img{ display:block; width:100%; height:auto; }

.rx-detail-nav{ margin-left:auto; display:flex; align-items:center; gap:26px; }
.rx-detail-nav a{
    color:#9b9b9f; text-decoration:none;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:.92rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    transition:color .16s ease;
}
.rx-detail-nav a:hover{ color:#fff; }

.rx-detail-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

.rx-detail-back,
.rx-detail-wa{
    display:inline-flex; align-items:center; gap:8px;
    height:42px; padding:0 16px; border-radius:4px;
    text-decoration:none;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:.92rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
    transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.rx-detail-back{ color:#fff; border:1px solid rgba(255,255,255,.18); background:transparent; }
.rx-detail-back:hover{ border-color:#ff1400; color:#ff1400; }
.rx-detail-wa{ color:#fff; background:#ff1400; border:1px solid #ff1400; }
.rx-detail-wa:hover{ background:#fff; color:#000; border-color:#fff; }

.rx-detail-back svg,
.rx-detail-wa svg{
    width:17px; height:17px; flex:0 0 auto;
    fill:none; stroke:currentColor; stroke-width:1.9;
    stroke-linecap:round; stroke-linejoin:round;
}

/* ---------- Pie ---------- */
.rx-detail-footer{
    position:relative; z-index:20;
    background:#000; color:#fff;
    border-top:2px solid #ff1400;
    font-family:"Manrope","Helvetica Neue",Arial,sans-serif;
    padding-bottom:24px;
}
.rx-detail-footer a{ color:inherit; }

.rx-detail-footer__cta{
    width:min(1220px, calc(100% - 36px)); margin-inline:auto;
    display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center;
    padding:44px 0 34px;
    border-bottom:1px solid rgba(255,255,255,.08);
}
.rx-detail-footer__kicker{
    margin:0 0 8px; color:#ff1400;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:.84rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
}
.rx-detail-footer__cta h2{
    margin:0 0 10px;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:clamp(1.9rem,3.8vw,2.9rem); font-weight:800;
    line-height:.96; letter-spacing:-.01em; text-transform:uppercase; color:#fff;
}
.rx-detail-footer__cta p{ margin:0; color:#9b9b9f; font-size:.95rem; max-width:56ch; line-height:1.55; }
.rx-detail-footer__actions{ display:flex; flex-wrap:wrap; gap:10px; }

.rx-btn{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:48px; padding:0 24px; border-radius:4px; text-decoration:none;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:1rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
    border:1px solid transparent; transition:background .16s ease, color .16s ease, border-color .16s ease;
}
.rx-btn--solid{ background:#ff1400; color:#fff; }
.rx-btn--solid:hover{ background:#fff; color:#000; }
.rx-btn--ghost{ color:#fff; border-color:rgba(255,255,255,.18); }
.rx-btn--ghost:hover{ border-color:#ff1400; color:#ff1400; }

.rx-detail-footer__grid{
    width:min(1220px, calc(100% - 36px)); margin-inline:auto;
    display:grid; grid-template-columns:1.4fr 1fr 1.2fr; gap:34px;
    padding:38px 0;
}
.rx-detail-footer__brand img{ display:block; width:min(220px,72%); height:auto; margin-bottom:14px; }
.rx-detail-footer__brand p{ margin:0; color:#9b9b9f; font-size:.9rem; max-width:36ch; line-height:1.55; }

.rx-detail-footer__col h3{
    margin:0 0 14px; color:#fff;
    font-family:"Saira Condensed","Arial Narrow",Arial,sans-serif;
    font-size:.86rem; font-weight:800; letter-spacing:.19em; text-transform:uppercase;
}
.rx-detail-footer__col a{ display:block; color:#9b9b9f; font-size:.92rem; text-decoration:none; margin-bottom:9px; }
.rx-detail-footer__col a:hover{ color:#ff1400; }
.rx-detail-footer__col p{ margin:0 0 9px; color:#9b9b9f; font-size:.92rem; line-height:1.55; }
.rx-detail-footer__col p a{ display:inline; color:#fff; font-weight:600; }

.rx-detail-footer__bottom{
    width:min(1220px, calc(100% - 36px)); margin-inline:auto;
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px;
    padding-top:18px; border-top:1px solid rgba(255,255,255,.08);
    color:#6e6e73; font-size:.8rem;
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
    /* El shell del catálogo no reserva hueco superior en móvil:
       lo añadimos aquí para que la cabecera fija no tape la galería. */
    .rx-detail-header{ height:92px; }
    html body.cat-page .cat-shell{ padding-top:calc(92px + 12px); }
    /* El cajón lateral (z-index 10020) sigue cubriendo toda la pantalla,
       incluida la cabecera: es el comportamiento normal de un drawer. */

    /* La barra de acciones inferior es fija: el pie necesita ese margen. */
    .rx-detail-footer{ padding-bottom:calc(var(--cat-mobilebar-h, 132px) + 20px); }

    .rx-detail-nav{ display:none; }
    .rx-detail-actions{ margin-left:auto; }
    .rx-detail-footer__cta{ grid-template-columns:1fr; }
    .rx-detail-footer__grid{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:560px){
    .rx-detail-header__inner{ width:calc(100% - 20px); gap:10px; }
    .rx-detail-brand{ width:min(148px,40vw); }
    .rx-detail-actions{ gap:7px; }
    .rx-detail-back span{ display:none; }
    .rx-detail-back{ width:40px; padding:0; justify-content:center; }
    .rx-detail-wa{ padding:0 13px; font-size:.86rem; }
    .rx-detail-footer__bottom{ flex-direction:column; align-items:flex-start; }
}

@media (max-width:380px){
    .rx-detail-brand{ width:min(126px,38vw); }
    .rx-detail-wa span{ display:none; }
    .rx-detail-wa{ width:40px; padding:0; justify-content:center; }
}