/*
 * catalogo.css — Specialty Explorer — Phase 1
 *
 * Namespace  : spe-*  (all selectors exclusively scoped to .spe-*)
 * Loads on   : /productos/ Explorer view
 * Depends on : --sif-* and --cat-* tokens already defined in style.css
 * Does NOT touch: cat-*, sp-*, or global selectors
 */

/* ==========================================================================
   §1  Main wrapper
   ========================================================================== */

.spe-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 56px 24px 96px;
    font-family: var(--sif-font);
    -webkit-font-smoothing: antialiased;
}

.spe-section__intro {
    text-align: center;
    margin-bottom: 24px;
}

.spe-section__label {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--cat-muted);
    margin: 0;
}

/* ==========================================================================
   §2  Hero — banner institucional de ancho completo
   La imagen técnica ocupa todo el ancho del hero como fondo; el texto va
   alineado a la izquierda sobre un overlay azul para garantizar legibilidad.
   Ya NO existe la caja/figura independiente de imagen.
   ========================================================================== */

.cat-hero--productos {
    /* La imagen de fondo se posiciona absolute dentro de este header
       (.cat-hero ya define position:relative y overflow:hidden). El padding
       horizontal lo hereda de .cat-hero (style.css) para dar aire al texto. */
    min-height: 340px;
    padding-top: 0;
    padding-bottom: 0;
    display: flex;
    align-items: center;
}

.cat-hero--productos .spe-hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    z-index: 0;
}

.cat-hero--productos .spe-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Más oscuro a la izquierda (zona del texto), más transparente a la derecha
       para dejar respirar la imagen. */
    background: linear-gradient(
        90deg,
        rgba(8, 21, 110, 0.81) 0%,
        rgba(8, 21, 110, 0.75) 38%,
        rgba(8, 21, 110, 0.49) 72%,
        rgba(8, 21, 110, 0.27) 100%
    );
}

.cat-hero--productos .cat-hero__inner.spe-hero {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding-top: 56px;
    padding-bottom: 56px;
}

.cat-hero--productos .spe-hero__text {
    min-width: 0;
    max-width: 640px;
}

.cat-hero--productos .spe-hero__text .cat-hero__badge {
    margin-top: 20px;
}

/* ==========================================================================
   §3  Specialty grid
   ========================================================================== */

.spe-specialty-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
}

/* ==========================================================================
   §4  Specialty card
   ========================================================================== */

.spe-card {
    -webkit-appearance: none;
    appearance: none;
    border: 1.5px solid rgba(214, 220, 236, 0.92) !important;
    border-color: rgba(214, 220, 236, 0.92) !important;
    background: var(--sif-white) !important;
    background-image: none !important;
    border-radius: var(--cat-radius);
    box-shadow: var(--sif-shadow-sm);
    cursor: pointer;
    font-family: var(--sif-font);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
    padding: 28px 22px 24px;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition:
        border-color 0.22s var(--sif-ease),
        box-shadow 0.22s var(--sif-ease),
        transform 0.24s var(--sif-ease),
        background 0.24s var(--sif-ease),
        color 0.24s var(--sif-ease);
    text-decoration: none !important;
    color: inherit !important;
}

.spe-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,0.08) 0 1px,
            transparent 1px 18px
        );
    transition: opacity 0.24s var(--sif-ease);
}

.spe-card:hover {
    transform: translateY(-2px);
    border-color: rgba(10, 28, 133, 0.22) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
    background-image: none !important;
    box-shadow: 0 16px 38px rgba(10, 28, 133, 0.10);
    color: inherit !important;
}

.spe-card:focus,
.spe-card:focus-visible {
    outline: none;
    border-color: rgba(10, 28, 133, 0.42) !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8faff 100%) !important;
    background-image: none !important;
    box-shadow:
        0 0 0 3px rgba(10, 28, 133, 0.12),
        0 14px 34px rgba(10, 28, 133, 0.10);
    color: inherit !important;
}

.spe-card.is-active {
    background-color: #0a1c85 !important;
    background-image: linear-gradient(180deg, rgba(10, 28, 133, 0.98) 0%, rgba(12, 36, 158, 0.98) 100%) !important;
    border-color: rgba(10, 28, 133, 0.95) !important;
    box-shadow: 0 18px 42px rgba(10, 28, 133, 0.22);
    color: var(--sif-white) !important;
}

.spe-card.is-active::before {
    opacity: 1;
}

.spe-specialty-grid .spe-card,
.spe-specialty-grid .spe-card:hover,
.spe-specialty-grid .spe-card:focus,
.spe-specialty-grid .spe-card:focus-visible {
    background-image: none !important;
}

.spe-specialty-grid .spe-card.is-active {
    background-image: linear-gradient(180deg, rgba(10, 28, 133, 0.98) 0%, rgba(12, 36, 158, 0.98) 100%) !important;
}

.spe-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #eef1fa !important;
    color: var(--sif-blue) !important;
    flex: 0 0 auto;
    transition:
        background 0.24s var(--sif-ease),
        color 0.24s var(--sif-ease),
        transform 0.24s var(--sif-ease);
}

.spe-card:hover .spe-card__icon {
    background: #e8edff !important;
    color: var(--sif-blue) !important;
}

.spe-card.is-active .spe-card__icon {
    background: rgba(255, 195, 0, 0.14) !important;
    color: var(--sif-yellow) !important;
}

.spe-card:hover:not(.is-active) .sif-icon-swap--specialty .sif-icon-swap__base {
    opacity: 1;
}

.spe-card:hover:not(.is-active) .sif-icon-swap--specialty .sif-icon-swap__hover {
    opacity: 0;
}

.spe-card.is-active .sif-icon-swap--specialty .sif-icon-swap__base {
    opacity: 0;
}

.spe-card.is-active .sif-icon-swap--specialty .sif-icon-swap__hover {
    opacity: 1;
}

.spe-card__icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Mayor presencia visual del icono SIN agrandar la tarjeta ni el tile.
   El tile (.spe-card__icon) se mantiene en 44px; el icono oficial (img swap)
   pasa de 34px a 40px para ocupar mejor el espacio disponible y reducir el
   padding visual interno. */
.spe-card__icon .sif-icon-swap--specialty {
    width: 40px;
    height: 40px;
}

.spe-card__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.spe-card__label {
    font-size: 1.125rem;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--sif-blue) !important;
}

.spe-card[data-specialty="oftalmologia"] .spe-card__body,
.spe-card[data-specialty="oftalmologia"] .spe-card__label {
    width: 100%;
    max-width: 100%;
}

.spe-card[data-specialty="oftalmologia"] .spe-card__label {
    display: block;
    font-size: 1rem;
    overflow-wrap: anywhere;
}

.spe-card.is-active .spe-card__label {
    color: var(--sif-white) !important;
}

.spe-card__meta {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: rgba(26, 26, 46, 0.46) !important;
}

.spe-card.is-active .spe-card__meta {
    color: rgba(255, 255, 255, 0.62) !important;
}

.spe-card__arrow {
    width: 16px;
    height: 16px;
    color: rgba(26, 26, 46, 0.54) !important;
    transition:
        color 0.2s var(--sif-ease),
        transform 0.22s var(--sif-ease);
}

.spe-card:hover .spe-card__arrow {
    color: var(--sif-blue) !important;
}

.spe-card.is-active .spe-card__arrow {
    color: rgba(255, 255, 255, 0.72) !important;
    transform: rotate(90deg);
}

/* ==========================================================================
   §5  Panels container + collapse animation
   ========================================================================== */

.spe-panels {
    margin-top: 12px;
}

.spe-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.44s var(--sif-ease);
}

.spe-panel.is-visible {
    grid-template-rows: 1fr;
}

.spe-panel__inner {
    overflow: hidden;
    min-height: 0;
}

/* ==========================================================================
   §6  Panel layout
   ========================================================================== */

.spe-panel__layout {
    display: grid;
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
    background: var(--sif-white);
    border: 1px solid rgba(214, 220, 236, 0.92);
    border-radius: 18px;
    margin-top: 3px;
    box-shadow: var(--sif-shadow-md);
    overflow: hidden;
}

.spe-panel.is-visible .spe-panel__layout {
    animation: spe-panel-fadein 0.36s var(--sif-ease) both;
}

@keyframes spe-panel-fadein {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}

/* ==========================================================================
   §7  Panel nav — left column
   ========================================================================== */

.spe-panel__nav {
    background: #f8f9fc;
    border-right: 1px solid rgba(214, 220, 236, 0.92);
    padding: 24px 0 20px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.spe-panel__nav-title {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--cat-muted);
    padding: 0 18px 13px;
    margin: 0 0 6px;
    border-bottom: 1px solid rgba(214, 220, 236, 0.92);
}

.spe-sys-list {
    list-style: none;
    margin: 0;
    padding: 8px 12px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.spe-sys-list li {
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.spe-panel__nav .spe-sys-btn {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border: 1px solid rgba(10, 28, 133, 0.14) !important;
    border-color: rgba(10, 28, 133, 0.14) !important;
    border-radius: 12px;
    background: var(--sif-white) !important;
    color: var(--sif-blue) !important;
    font-family: var(--sif-font);
    font-size: 0.915rem;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
    padding: 12px 14px;
    box-shadow: 0 1px 0 rgba(10, 28, 133, 0.03);
    transition:
        background 0.18s var(--sif-ease),
        color 0.18s var(--sif-ease),
        border-color 0.18s var(--sif-ease),
        box-shadow 0.18s var(--sif-ease),
        transform 0.18s var(--sif-ease);
    /* Hello Elementor carga reset.css después y fuerza nowrap en
       [type="button"]. El !important neutraliza ese reset en este control. */
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 0;
    text-decoration: none !important;
}

/* Etiquetas largas (p. ej. "Instrumental de Titanio para Oftalmología"):
   tipografía ligeramente más compacta + guionado limpio para que el texto
   quepa dentro de la caja sin desbordarse ni ensanchar la columna lateral. */
.spe-sys-btn--long {
    font-size: 0.82rem;
    line-height: 1.3;
    padding: 11px 13px;
    hyphens: auto;
    -webkit-hyphens: auto;
}

.spe-sys-btn:hover {
    background: rgba(10, 28, 133, 0.05) !important;
    border-color: rgba(10, 28, 133, 0.24) !important;
    color: var(--sif-blue) !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(10, 28, 133, 0.07);
}

.spe-sys-btn:focus,
.spe-sys-btn:focus-visible {
    outline: none;
    background: rgba(10, 28, 133, 0.05) !important;
    border-color: rgba(10, 28, 133, 0.42) !important;
    color: var(--sif-blue) !important;
    box-shadow: 0 0 0 3px rgba(10, 28, 133, 0.10);
}

.spe-sys-btn.is-active,
.spe-sys-btn[aria-selected="true"] {
    background-color: #0a1c85 !important;
    background-image: linear-gradient(180deg, #0a1c85 0%, #1230b3 100%) !important;
    border-color: #0a1c85 !important;
    color: #ffffff !important;
    font-weight: 800;
    box-shadow: 0 12px 24px rgba(10, 28, 133, 0.18);
    transform: none;
}

.spe-panel__nav .spe-sys-btn,
.spe-panel__nav .spe-sys-btn:hover,
.spe-panel__nav .spe-sys-btn:focus,
.spe-panel__nav .spe-sys-btn:focus-visible {
    background-image: none !important;
}

.spe-panel__nav .spe-sys-btn.is-active,
.spe-panel__nav .spe-sys-btn[aria-selected="true"] {
    background-image: linear-gradient(180deg, #0a1c85 0%, #1230b3 100%) !important;
}

/* ==========================================================================
   §8  Panel detail — right column
   ========================================================================== */

.spe-panel__detail {
    padding: 28px 28px 32px;
    min-height: 420px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(250,251,255,0.98) 100%);
}

/* ==========================================================================
   §9  Detail block
   ========================================================================== */

.spe-detail-block {
    display: none;
}

.spe-detail-block.is-visible {
    display: block;
    animation: spe-detail-fade 0.22s var(--sif-ease);
}

@keyframes spe-detail-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spe-detail-block__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

.spe-detail-block__content {
    min-width: 0;
}

.spe-detail-block__header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.spe-detail-block__specialty {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    background: #eef1fa;
    color: var(--sif-blue);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.spe-detail-block__title {
    margin: 0;
    font-size: clamp(2rem, 2.3vw, 2.7rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-weight: 800;
    color: #181c34;
}

.spe-detail-block__desc {
    margin: 0;
    max-width: 62ch;
    font-size: 1.03rem;
    line-height: 1.72;
    color: rgba(26, 26, 46, 0.68);
}

.spe-detail-block__indications {
    margin-top: 24px;
}

.spe-detail-block__ind-label {
    margin: 0 0 12px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(26, 26, 46, 0.42);
}

.spe-detail-block__ind-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.spe-detail-block__ind-list li {
    list-style: none;
    margin: 0;
    padding: 10px 14px;
    border-radius: 999px;
    background: #f2f4f9;
    border: 1px solid rgba(10, 28, 133, 0.08);
    color: rgba(26, 26, 46, 0.82);
    font-size: 0.89rem;
    line-height: 1.2;
    font-weight: 600;
}

/* CTA con aire suficiente: botones en una fila propia y la nota debajo,
   separados del contenido y de la imagen (gap del layout). */
.spe-detail-block__cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    margin-top: 34px;
}

.spe-detail-block__buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.spe-cta-btn,
.spe-cta-btn:link,
.spe-cta-btn:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 54px;
    padding: 0 22px;
    border-radius: 12px;
    background: #ffc300 !important;
    color: #11162e !important;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none !important;
    box-shadow: 0 14px 28px rgba(255, 195, 0, 0.22);
    transition:
        transform 0.18s var(--sif-ease),
        box-shadow 0.18s var(--sif-ease),
        background 0.18s var(--sif-ease),
        color 0.18s var(--sif-ease);
}

.spe-cta-btn:hover,
.spe-cta-btn:focus-visible {
    background: #0a1c85 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 18px 34px rgba(10, 28, 133, 0.16);
    outline: none;
}

/* Botón secundario "Ver catálogo": coherente pero menos dominante que el CTA. */
.spe-cta-btn--secondary,
.spe-cta-btn--secondary:link,
.spe-cta-btn--secondary:visited {
    background: transparent !important;
    color: var(--sif-blue) !important;
    border: 1.5px solid rgba(10, 28, 133, 0.30);
    box-shadow: none;
}

.spe-cta-btn--secondary:hover,
.spe-cta-btn--secondary:focus-visible {
    background: rgba(10, 28, 133, 0.06) !important;
    color: var(--sif-blue) !important;
    border-color: rgba(10, 28, 133, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(10, 28, 133, 0.10);
}

.spe-cta-btn--secondary svg {
    flex: 0 0 auto;
}

.spe-detail-block__note {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.45;
    color: rgba(26, 26, 46, 0.32);
}

/* ==========================================================================
   §10  Detail media
   ========================================================================== */

.spe-detail-block__media {
    display: block;
}

/* Máscara de capa: la caja envuelve la imagen "ajustada" (shrink-wrap). La imagen
   se muestra COMPLETA (sin recorte ni deformación) y el border-radius + overflow
   de la caja recortan sus esquinas, dándole a la propia imagen esquinas
   redondeadas premium. Las imágenes de sistema son tarjetas fotográficas ya
   compuestas por el diseñador, por eso se muestran íntegras. */
.spe-detail-block__figure {
    margin: 0;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(10, 28, 133, 0.08);
    background: #ffffff;
    line-height: 0;
    font-size: 0;
}

.spe-detail-block__img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: inherit;
}

/* El placeholder (sistemas sin imagen) sí conserva una caja de proporción fija,
   ya que su SVG necesita un lienzo definido para centrarse. */
.spe-detail-block__placeholder {
    margin: 0;
    width: 100%;
    aspect-ratio: 2 / 1;
    min-height: 0;
    max-height: 340px;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, #fbfcff 0%, #eef2fb 100%);
    border: 1px solid rgba(10, 28, 133, 0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Soporte futuro para varias imágenes dentro de la misma figura: se acomodan
   en una grilla fluida sin deformar el layout. Solo se activa con 2+ imágenes. */
.spe-detail-block__figure:has(img + img) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px;
    align-items: center;
    justify-items: center;
}

.spe-detail-block__figure:has(img + img) .spe-detail-block__img {
    max-height: 220px;
    padding: 4px;
}

.spe-detail-block__placeholder-svg {
    width: min(140px, 36%);
    height: auto;
    opacity: 0.18;
}

/* ==========================================================================
   §10b  Rama lateral de subsistemas (p. ej. IMF bajo Sistema 2.0)
   El subsistema NO es un sistema principal: su botón de navegación es un hijo
   indentado del sistema padre, visible solo cuando el padre (o el propio
   subsistema) está activo. Su contenido se muestra en el panel derecho con la
   misma maquetación .spe-detail-block que cualquier sistema.
   ========================================================================== */

/* Lista de subsistemas: colapsada por defecto, se revela cuando el <li> padre
   recibe .is-open (vía JS, al activar el sistema padre o un subsistema). */
.spe-subsys-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height 0.28s var(--sif-ease),
                opacity 0.2s var(--sif-ease),
                transform 0.2s var(--sif-ease);
}

.spe-sys-item--has-children.is-open > .spe-subsys-list {
    max-height: 240px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 4px;
}

.spe-subsys-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Botón hijo indentado: visualmente subordinado al sistema padre. */
.spe-sys-btn--child {
    padding-left: 22px;
    font-size: 0.86em;
    font-weight: 600;
    color: rgba(26, 26, 46, 0.62);
}

.spe-sys-btn__branch {
    display: inline-block;
    margin-right: 6px;
    color: rgba(10, 28, 133, 0.45);
    font-weight: 700;
}

.spe-sys-btn--child.is-active .spe-sys-btn__branch,
.spe-sys-btn--child[aria-selected="true"] .spe-sys-btn__branch {
    color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   §11 Trust strip
   ========================================================================== */

.spe-trust {
    margin-top: 72px;
    padding-top: 42px;
    border-top: 1px solid rgba(10, 28, 133, 0.10);
}

.spe-trust__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.spe-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 22px;
    color: var(--sif-blue);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1;
}

.spe-trust__item svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.spe-trust__sep {
    width: 1px;
    height: 18px;
    background: rgba(10, 28, 133, 0.16);
}

/* ==========================================================================
   §12 Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .spe-specialty-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .spe-panel__layout {
        grid-template-columns: minmax(250px, 280px) minmax(0, 1fr);
    }

    .spe-panel__detail {
        padding: 24px 22px 28px;
        min-height: 0;
    }
}

@media (max-width: 768px) {
    /* Hero de ancho completo en móvil: overlay más oscuro y parejo para que el
       texto sea legible sobre la imagen de fondo. */
    .cat-hero--productos {
        min-height: 260px;
    }

    .cat-hero--productos .spe-hero__overlay {
        background: linear-gradient(
            180deg,
            rgba(8, 21, 110, 0.73) 0%,
            rgba(8, 21, 110, 0.78) 100%
        );
    }

    .cat-hero--productos .cat-hero__inner.spe-hero {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .cat-hero--productos .spe-hero__text {
        max-width: none;
    }

    .cat-hero--productos .spe-hero__text .cat-hero__badge {
        margin-top: 16px;
    }

    /* Imagen de sistema en móvil: la figura sigue envolviendo la imagen completa
       (shrink-wrap); solo el placeholder mantiene proporción fija. */
    .spe-detail-block__placeholder {
        aspect-ratio: 2 / 1;
        min-height: 0;
        max-height: 260px;
    }

    .spe-main {
        padding: 38px 16px 64px;
    }

    .spe-specialty-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .spe-card {
        padding: 20px 16px 18px;
        gap: 12px;
    }

    .spe-card__icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }

    .spe-card__icon svg {
        width: 20px;
        height: 20px;
    }

    /* Tile móvil es de 40px; mantenemos el icono en 36px para que ocupe bien
       el espacio sin tocar los bordes. */
    .spe-card__icon .sif-icon-swap--specialty {
        width: 36px;
        height: 36px;
    }

    .spe-card__label {
        font-size: 1rem;
    }

    .spe-panel__layout {
        grid-template-columns: 1fr;
    }

    .spe-panel__nav {
        border-right: 0;
        border-bottom: 1px solid rgba(214, 220, 236, 0.92);
        padding: 16px 0 14px;
    }

    .spe-sys-list {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 16px 2px;
    }

    .spe-sys-btn {
        width: auto;
        min-width: 0;
        padding: 10px 14px;
        border-radius: 999px;
        font-size: 0.84rem;
    }

    /* En el nav horizontal móvil, el sistema con rama ocupa toda la fila para
       que su subsistema aparezca como pill justo debajo, no a la derecha. */
    .spe-sys-item--has-children {
        flex: 1 0 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
    }

    .spe-subsys-list {
        flex: 1 1 100%;
        transition: none;
    }

    .spe-sys-item--has-children.is-open > .spe-subsys-list {
        max-height: none;
    }

    .spe-sys-btn--child {
        padding-left: 14px;
    }

    .spe-panel__detail {
        padding: 22px 18px 24px;
    }

    .spe-detail-block__title {
        font-size: 1.7rem;
    }

    .spe-detail-block__desc {
        font-size: 0.96rem;
        line-height: 1.65;
    }

    .spe-detail-block__ind-list li {
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .spe-detail-block__cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .spe-cta-btn,
    .spe-cta-btn:link,
    .spe-cta-btn:visited {
        width: 100% !important;
        justify-content: center !important;
    }

    .spe-trust {
        margin-top: 56px;
        padding-top: 34px;
    }

    .spe-trust__inner {
        gap: 6px 0;
    }

    .spe-trust__item {
        font-size: 0.84rem;
        padding: 8px 14px;
    }

    .spe-trust__sep {
        display: none;
    }
}

@media (max-width: 560px) {
    .spe-specialty-grid {
        grid-template-columns: 1fr;
    }

    .spe-card {
        min-height: 118px;
    }

    .spe-detail-block__specialty {
        font-size: 9px;
        letter-spacing: 0.14em;
    }

    .spe-detail-block__title {
        font-size: 1.46rem;
    }
}