/* Juntas Sísmicas styleJOINT - Estilos Premium */

:root {
    --brand-stylejoint: #e97132;
    --brand-stylejoint-dark: #b3511d;
    --brand-stylejoint-light: #ff8c4a;
}

/* Fix general de contenedores para evitar conflictos con layout.astro */
body.page-stylejoint,
main.page-stylejoint {
    background-color: #fff;
}

/*
    Evitar “doble padding-top”:
    - `Layout.astro` ya aplica el offset del header fijo en `#main-content`.
    - `src/styles/global.css` aplica un padding-top legacy a `main` y `.container-sw`.
    En páginas styleJOINT (que renderizan su propio `<main class="page-stylejoint">` dentro de `#main-content`)
    esto se suma y genera un hueco excesivo arriba.
*/
#main-content main.page-stylejoint,
#main-content main.page-stylejoint .container-sw {
    padding-top: 0 !important;
}

.page-stylejoint section.cuerpo {
    padding: 2rem 0;
}

/* Reducir el margen inferior del bloque "Soluciones para cada aplicación" */
.page-stylejoint #soluciones-aplicacion {
    margin-bottom: 0.75rem;
}

.page-stylejoint #soluciones-aplicacion p {
    margin-bottom: 0 !important;
}

.page-stylejoint .jumbotron {
    background-color: #f8f9fa;
    padding: 2.25rem 5%;
    border-radius: 2rem;
    margin: 1.5rem 5%;
    text-align: justify;
}

/* Sección hidrófuga: 2 figuras alineadas en la misma fila */
.page-stylejoint .imagenes-alineadas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: start;
    margin: 1.25rem 0 0;
}

.page-stylejoint .imagenes-alineadas>figure {
    margin: 0;
    width: 100% !important;
    max-width: none !important;
}

@media (max-width: 768px) {
    .page-stylejoint .imagenes-alineadas {
        grid-template-columns: 1fr;
    }
}

.hr-stylejoint {
    background: transparent;
    border: none;
    border-top: 6px solid var(--brand-stylejoint);
    height: 0;
    margin: 6rem 0;
    width: 100%
}

/* Header Section styleJOINT */
#encabezados-stylejoint {
    background: var(--brand-stylejoint) !important;
    border-bottom: 6px solid var(--brand-stylejoint-dark) !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    box-shadow: none !important;
}

#encabezados-stylejoint::before {
    content: none !important;
}

/* Si la estructura coincide con styleVISION, asegurar ancho/paddings consistentes */
#encabezados-stylejoint .contenido.encabezado-flex-responsive {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    max-width: 100vw;
}

#encabezados-stylejoint .producto-header-flex {
    padding-left: 5%;
    padding-right: 5%;
}

#marca-stylejoint {
    background-color: var(--brand-stylejoint) !important;
}

/* Tipografía del encabezado alineada con styleVISION */
#encabezados-stylejoint .contenido-producto h1 {
    font-size: 1.75rem !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    margin-bottom: 1.5rem !important;
}

#encabezados-stylejoint .contenido-producto p,
#encabezados-stylejoint .contenido-producto strong {
    color: #ffffff !important;
}

/* Caja de características tipo styleVISION (sin glassmorphism) */
#encabezados-stylejoint .caracteristicas-producto {
    background-color: var(--brand-stylejoint) !important;
    line-height: 1.65 !important;
    color: #ffffff !important;
    border: 2.5px solid #ffffff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
}

#encabezados-stylejoint .caracteristicas-producto p {
    color: #f9fafb !important;
}

/* Marca: tamaño más cercano a styleVISION */
#marca-stylejoint .texto-electricidad-stylejoint {
    /* Igualar tamaño base con styleVISION: hereda el tamaño definido por el contenedor (.franklin/productos.css) */
    font-size: inherit !important;
    font-weight: 700 !important;
    text-transform: none !important;

    animation: electricidad-stylejoint 0.8s linear infinite;
    color: #ffffff !important;
    text-shadow: 0 0 8px var(--brand-stylejoint-light), 0 0 2px #fff;
    will-change: filter;
}

@media (max-width: 992px) {
    #marca-stylejoint .texto-electricidad-stylejoint {
        font-size: 2rem !important;
    }
}

/* Quitar espacio en blanco entre encabezado y primera fotografía */
.page-stylejoint #encabezados-stylejoint {
    margin-bottom: 0 !important;
}

.page-stylejoint #encabezados-stylejoint+section.cuerpo {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.page-stylejoint #encabezados-stylejoint+section.cuerpo>.contenido,
.page-stylejoint #encabezados-stylejoint+section.cuerpo .Fotografia-wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Efecto electricidad styleJOINT (aplicado a la marca en el encabezado) */
@keyframes electricidad-stylejoint {
    0% {
        filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--brand-stylejoint-light)) brightness(1.15);
    }

    50% {
        filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px var(--brand-stylejoint-light)) brightness(1.5);
    }

    100% {
        filter: drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px var(--brand-stylejoint-light)) brightness(1.15);
    }
}

/* Secciones: h2 y espaciados como styleVISION */
.page-stylejoint section h2,
.page-stylejoint .jumbotron h2,
.page-stylejoint .container-fluid h2 {
    font-size: 1.75rem;
    color: var(--brand-stylejoint);
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.page-stylejoint .jumbotron h2 {
    text-align: left;
}

/* Tarjetas de detalles: igualar look & feel de styleVISION (solo cambia el color de acento) */
.page-stylejoint .tarjeta-detalles-sin-borde {
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    margin-bottom: 2rem !important;
    border: none !important;
    padding: 1.5rem;
    position: relative;
    isolation: isolate;
}

.page-stylejoint .tarjeta-detalles-sin-borde:hover {
    transform: none;
    box-shadow: 0 8px 24px var(--brand-stylejoint-shadow-22, rgba(233, 113, 50, 0.22));
    outline: 1px solid var(--brand-stylejoint-outline-18, rgba(233, 113, 50, 0.18));
    outline-offset: 0;
}

/* En esta página el markup usa `card-body-stylejoint` (no `.card-body`): damos el comportamiento de “cuerpo flexible” */
.page-stylejoint .tarjeta-detalles-sin-borde .card-body,
.page-stylejoint .tarjeta-detalles-sin-borde .card-body-stylejoint {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.page-stylejoint .tarjeta-detalles-sin-borde h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brand-stylejoint);
    margin: 0 0 1rem 0;
    border-bottom: 3px solid var(--brand-stylejoint);
    padding-bottom: 0.5rem;
}

.page-stylejoint .tarjeta-detalles-sin-borde p {
    font-size: 1rem;
    line-height: 1.6;
    color: #4a4a4a;
    margin-bottom: 1rem;
}

.page-stylejoint .tarjeta-detalles-sin-borde figure {
    margin: 0 0 1rem 0;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: none;
}

.page-stylejoint .tarjeta-detalles-sin-borde figure img {
    width: 100%;
    height: auto;
    display: block;
}

/* Gap estilo styleVISION */
.page-stylejoint .gap-tarjetas-detalles {
    gap: 2rem;
}

/* Tarjetas StyleJoint: 3 en línea (desktop) */
.page-stylejoint .tarjetas-detalles-contenedor .tarjetas-detalles-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
    margin: 0;
}

/* GRID unificado: páginas styleJOINT I-* usan `.grid-sw` + `.card-sw` */
.page-stylejoint .grid-sw {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    align-items: stretch;
    margin: 0;
}

.page-stylejoint .grid-sw>* {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.page-stylejoint .tarjetas-detalles-contenedor .tarjetas-detalles-grid>* {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 992px) {
    .page-stylejoint .tarjetas-detalles-contenedor .tarjetas-detalles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .page-stylejoint .grid-sw {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .page-stylejoint .tarjetas-detalles-contenedor .tarjetas-detalles-grid {
        grid-template-columns: 1fr;
    }

    .page-stylejoint .grid-sw {
        grid-template-columns: 1fr;
    }
}

/* --- Mejoras de composición interna (profesional, sin colisiones) --- */

/* La tarjeta “especial” (JCuadro10) debe verse como las demás */
.page-stylejoint .card-sw {
    background: #ffffff !important;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    border: none !important;
    position: relative;
    isolation: isolate;
    overflow: visible;
}

/*
    FIX: algunas páginas traen clases utilitarias tipo `h-100` (Bootstrap) que fuerzan
    `height: 100%` y, combinadas con contenedores con overflow/alto implícito, pueden
    dar la impresión de “tarjetas truncadas”. En styleJOINT preferimos que la tarjeta
    crezca según su contenido.
*/
.page-stylejoint .card-sw.h-100 {
    height: auto !important;
    max-height: none !important;
}

.page-stylejoint .card-sw:hover {
    transform: none;
    box-shadow: 0 8px 24px var(--brand-stylejoint-shadow-22, rgba(233, 113, 50, 0.22));
    outline: 1px solid var(--brand-stylejoint-outline-18, rgba(233, 113, 50, 0.18));
    outline-offset: 0;
}

.page-stylejoint .card-sw-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Importante: no recortar contenido (textos largos, sombras/filtros de imágenes, etc.) */
    overflow: visible;
}

.page-stylejoint .card-sw-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--brand-stylejoint);
    margin: 0 0 1rem 0;
    border-bottom: 3px solid var(--brand-stylejoint);
    padding-bottom: 0.5rem;
}

/* Footer siempre “abajo” y sin posiciones absolutas */
.page-stylejoint .card-footer-transparent,
.page-stylejoint .card-sw-footer {
    margin-top: auto;
    padding-top: 1rem;
}

.page-stylejoint .card-footer-transparent .centered-text,
.page-stylejoint .card-sw-footer .centered-text {
    margin: 0 0 0.75rem 0;
    text-align: center;
    font-size: 0.95rem;
    color: #374151;
}

/* Botones/enlaces de footer: bloque, ancho completo */
.page-stylejoint .card-footer-transparent a,
.page-stylejoint .card-sw-footer a {
    display: block;
}

.page-stylejoint .btn-link-tarjeta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border: 0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    background: var(--brand-stylejoint);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.page-stylejoint .btn-link-tarjeta:hover {
    filter: brightness(1.05);
}

/* Iconos de beneficios: grid responsivo y tamaño fijo (evita que `productos.css` los infle a 100% de ancho) */
.page-stylejoint .producto-secciones-i8 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    gap: 0.85rem;
    align-items: center;
    justify-items: center;
    margin: 1rem 0 0.5rem;
}

.page-stylejoint .producto-secciones-i8>picture,
.page-stylejoint .producto-secciones-i8>img,
.page-stylejoint .producto-secciones-i8>svg {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.page-stylejoint .producto-secciones-i8 img,
.page-stylejoint .producto-secciones-i8 svg {
    --sw-i8-size: clamp(58px, 5vw, 82px);
    width: var(--sw-i8-size) !important;
    height: var(--sw-i8-size) !important;
    max-width: var(--sw-i8-size) !important;
    max-height: var(--sw-i8-size) !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Variante: icono + etiqueta (usada en Tarjeta 11) */
.page-stylejoint .producto-secciones-i8--labels {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.page-stylejoint .producto-secciones-i8--labels .beneficio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
}

.page-stylejoint .producto-secciones-i8--labels .beneficio-label {
    display: block;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.15;
}

.page-stylejoint .producto-secciones-i8--labels .beneficio-svg {
    color: var(--brand-stylejoint);
}

@media (max-width: 992px) {
    .page-stylejoint .producto-secciones-i8 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .page-stylejoint .producto-secciones-i8 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/*
  Efecto de aparición “imagen 2” para imágenes principales:
  `imagenes-aparicion2.js` añade/quita `.activo` en `.contenedor-imagen-resplandor`.
  Aquí hacemos que el contenedor entre desde la derecha y se acomode en su posición.
*/
html.sw-imagenes-aparicion .page-stylejoint .contenedor-imagen-resplandor {
    opacity: 0;
    /* Menos desplazamiento para evitar que “invada” la tarjeta vecina mientras aparece */
    transform: translateX(24px);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
    will-change: transform, opacity;
}

html.sw-imagenes-aparicion .page-stylejoint .contenedor-imagen-resplandor.activo {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    html.sw-imagenes-aparicion .page-stylejoint .contenedor-imagen-resplandor {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Aparición de tarjetas desde la derecha (controlada por `imagenes-aparicion.js` + `.is-visible`) */
html.sw-imagenes-aparicion .page-stylejoint .efecto-aparicion.efecto-aparicion-derecha {
    opacity: 0;
    /* Menos desplazamiento para reducir solapamientos visuales */
    transform: translateX(48px);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.9s ease;
    will-change: transform, opacity;
}

html.sw-imagenes-aparicion .page-stylejoint .efecto-aparicion.efecto-aparicion-derecha.is-visible {
    opacity: 1;
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    html.sw-imagenes-aparicion .page-stylejoint .efecto-aparicion.efecto-aparicion-derecha {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Opciones/variantes (las dos imágenes pequeñas): que no se encimen y se adapten */

/*
  “Opciones de SERIE”: siempre 2 en la misma fila (si hay espacio).
  Se aplica a los bloques que usan `.producto-secciones-i3.producto-secciones-horizontal` dentro de las tarjetas.
*/
.page-stylejoint .producto-secciones-i3.producto-secciones-horizontal {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
    justify-items: stretch;
}

.page-stylejoint .producto-secciones-i3.producto-secciones-horizontal .figure {
    margin: 0;
    width: 100%;
    max-width: none;
    min-width: 0;
}

@media (max-width: 520px) {
    .page-stylejoint .producto-secciones-i3.producto-secciones-horizontal {
        grid-template-columns: 1fr;
    }
}

.page-stylejoint .producto-secciones-horizontal img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain;
}

.page-stylejoint .figure-caption {
    margin-top: 0.35rem;
    line-height: 1.35;
    color: #374151;
}

/* Evitar que textos largos rompan el grid */
.page-stylejoint .tarjeta-detalles-sin-borde,
.page-stylejoint .card-sw {
    overflow-wrap: anywhere;
}