.contenido-producto {
    flex: 1 1 60%;
    min-width: 0;
}

.caracteristicas-producto {
    flex: 0 0 35%;
    background: rgba(0, 0, 0, 0.15);
    padding: 1.5rem;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    line-height: 1.8;
}

/* Alineación de iconos en características técnicas */
.caracteristicas-producto svg,
.caracteristicas-producto .bi {
    display: inline-block;
    vertical-align: -0.125em;
    margin-right: 6px;
}

.caracteristicas-producto b {
    vertical-align: baseline;
}

@media (max-width: 992px) {
    .producto-header-flex {
        flex-direction: column;
    }

    .contenido-producto,
    .caracteristicas-producto {
        flex: 1 1 100%;
    }
}

.hr-styledoor {
    background: transparent;
    border: none;
    border-top: 6px solid #ff00f8;
    height: 0;
    margin: 6rem 0;
    width: 100%
}

@keyframes electricidad-styledoor {
    30% {
        filter: drop-shadow(0 0 8px #b3261e) drop-shadow(0 0 16px #fff) brightness(2)
    }

    40% {
        filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #b3261e) brightness(2.2)
    }

    50% {
        filter: drop-shadow(0 0 4px #b3261e) drop-shadow(0 0 12px #fff) brightness(1.7)
    }

    60% {
        filter: drop-shadow(0 0 16px #fff) drop-shadow(0 0 28px #b3261e) brightness(2.4)
    }

    70% {
        filter: drop-shadow(0 0 8px #b3261e) drop-shadow(0 0 16px #fff) brightness(2)
    }

    80% {
        filter: drop-shadow(0 0 12px #fff) drop-shadow(0 0 20px #b3261e) brightness(2.2)
    }

    90% {
        filter: drop-shadow(0 0 4px #b3261e) drop-shadow(0 0 12px #fff) brightness(1.7)
    }

    to {
        filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px #b3261e) brightness(1.7)
    }
}

.texto-electricidad-styledoor {
    animation: electricidad-styledoor .1s linear infinite;
    color: #ff3b30 !important;
    display: inline-block;
    font-weight: 700;
    text-shadow: 0 0 8px #b3261e, 0 0 2px #fff;
    will-change: filter
}

#encabezados-styledoor .caracteristicas-producto p,
#encabezados-styledoor .contenido-producto p {
    color: #fff !important;
    margin-bottom: 3%
}

.caracteristicas-producto .bi,
.caracteristicas-producto [class*=" bi-"],
.caracteristicas-producto [class^=bi-] {
    color: #fff !important;
    fill: #fff !important
}

.cuadroproductos.galeria-productos {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    margin: 0 auto;
    padding: 2rem 0;
    width: 90vw
}

.producto-link {
    border-radius: var(--border-radius-lg, 12px);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(0, 0, 0, .1));
    color: var(--color-white, #fff);
    display: flex;
    flex-direction: column;
    opacity: 0;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    transform: translateY(18px);
    transition: box-shadow .25s, transform .35s ease, filter .35s ease
}

.producto-link.visible {
    opacity: 1;
    transform: none
}

.producto-link:hover {
    box-shadow: 0 0 3px 1px #fff, 0 8px 32px hsla(0, 0%, 98%, .7);
    z-index: 2
}

.producto-link picture>img,
.producto-link>img {
    border-radius: var(--border-radius-lg, 12px);
    height: 260px;
    object-fit: cover;
    transition: inherit;
    width: 100%
}

.producto-info {
    overflow: hidden;
    padding: 1.5rem;
    position: relative;
    text-align: justify
}

.producto-info>* {
    position: relative;
    z-index: 1
}

@keyframes producto-info-shine {
    0% {
        background-position: 0 50%, 0 50%
    }

    50% {
        background-position: 100% 50%, 100% 50%
    }

    to {
        background-position: 0 50%, 0 50%
    }
}

@keyframes producto-fadein {
    0% {
        filter: brightness(.85) saturate(.8);
        opacity: 0;
        transform: translateY(12px) scale(.97)
    }

    to {
        filter: none;
        opacity: 1;
        transform: none
    }
}

.cuadroproductos.galeria-productos .producto-link.visible {
    animation: producto-fadein .85s ease both
}

.cuadroproductos.galeria-productos .producto-link.visible:nth-child(2) {
    animation-delay: .12s
}

.cuadroproductos.galeria-productos .producto-link.visible:nth-child(3) {
    animation-delay: .18s
}

.cuadroproductos.galeria-productos .producto-link.visible:nth-child(4) {
    animation-delay: .24s
}

.cuadroproductos.galeria-productos .producto-link.visible:nth-child(5) {
    animation-delay: .3s
}

.cuadroproductos.galeria-productos .producto-link.visible:nth-child(6) {
    animation-delay: .36s
}

.cuadroproductos.galeria-productos .producto-link:hover .producto-placeholder,
.cuadroproductos.galeria-productos .producto-link:hover>img {
    filter: brightness(1.06) saturate(1.05);
    transform: translateY(-3px);
    transition: transform .35s ease, filter .35s ease
}

.three-cards-row {
    align-items: stretch;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin: 0 5% 2rem;
    width: 90%
}

.three-cards-row .col {
    flex: 0 0 calc(33.3333% - 0.6667rem);
    min-width: 0
}

/* Estilos de tarjetas styleDOOR con tema magenta */
.tarjeta-detalles-sin-borde {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #ffffff;
    padding: 1.5rem;
    padding-bottom: 2rem;
    margin-bottom: 3rem !important;
    min-height: auto;
    height: auto;
}

.tarjeta-detalles-sin-borde:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 0, 248, 0.15);
}

.tarjeta-detalles-sin-borde .card-body {
    overflow: visible;
    white-space: normal;
    max-height: none;
    height: auto;
    padding: 0;
}

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

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

.tarjeta-detalles-sin-borde h3 {
    margin: 0 0 1rem 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #ff00f8;
    border-bottom: 3px solid #ff00f8;
    padding-bottom: 0.5rem;
}

.tarjeta-detalles-sin-borde p {
    margin: 0 0 1rem 0;
    line-height: 1.6;
    color: #333;
}

.tarjetas-detalles-contenedor {
    margin-bottom: 6rem !important;
    padding-bottom: 3rem !important;
    clear: both;
    overflow: visible;
}

.tarjetas-detalles-contenedor .col {
    margin-bottom: 3rem !important;
}

.tarjetas-detalles-contenedor .row {
    margin-bottom: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .tarjeta-detalles-sin-borde {
        padding: 1.25rem;
        margin-bottom: 2rem !important;
    }

    .tarjeta-detalles-sin-borde h3 {
        font-size: 1.2rem;
    }

    .tarjetas-detalles-contenedor {
        margin-bottom: 4rem !important;
        padding-bottom: 2rem !important;
    }
}

.row-flex {
    align-items: stretch;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem
}

.three-cards-row {
    justify-content: flex-start
}

.tarjeta-detalles-sin-borde figure {
    height: 500px !important
}

.cuadro-enmarcado.u-p-0 .h2-brand-strong {
    font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
    line-height: 1.15
}

.cuadro-enmarcado.u-p-0 .p-descriptivo {
    font-size: clamp(1.0625rem, .95rem + .6vw, 1.3125rem)
}

.entrada-secuencial {
    column-gap: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 5% 2rem;
    overflow: hidden;
    width: 90%
}

.entrada-secuencial .foto-seq {
    animation: none !important;
    border-radius: 12px;
    box-sizing: border-box;
    height: 500px;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-110%);
    will-change: transform, opacity
}

.entrada-secuencial.seq-start .foto-seq {
    animation: sw-glide-in-left 1.8s cubic-bezier(.22, .61, .36, 1) forwards
}

.entrada-secuencial.seq-start .foto-seq:first-child {
    animation-delay: 0s
}

.entrada-secuencial.seq-start .foto-seq:nth-child(2) {
    animation-delay: 1s
}

.entrada-secuencial.seq-start .foto-seq:nth-child(3) {
    animation-delay: 2s
}

@keyframes sw-glide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-110%)
    }

    60% {
        opacity: 1;
        transform: translateX(2%)
    }

    85% {
        transform: translateX(-.6%)
    }

    to {
        opacity: 1;
        transform: translateX(0)
    }
}

@media (prefers-reduced-motion:reduce) {
    .entrada-secuencial .foto-seq {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

.tarjeta-detalles-sin-borde .figure-cover {
    opacity: 0;
    perspective: 1000px;
    position: relative;
    transform: translateY(18px) scale(.98) rotateX(2deg);
    will-change: transform, opacity, filter
}

.tarjeta-detalles-sin-borde .figure-cover:after {
    border-radius: inherit;
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .18), 0 0 24px rgba(255, 0, 248, .35);
    content: "";
    inset: -1px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .5s ease, box-shadow .5s ease
}

.tarjeta-detalles-sin-borde .figure-cover.sw-enter {
    animation: sw-impact-in .85s cubic-bezier(.2, .8, .2, 1) var(--delay, 0s) both
}

.tarjeta-detalles-sin-borde .figure-cover img {
    transform-origin: center;
    transition: transform .45s ease, filter .45s ease
}

.tarjeta-detalles-sin-borde:hover .figure-cover img {
    filter: brightness(1.04) saturate(1.08) contrast(1.03);
    transform: scale(1.06) translateY(-2px)
}

.tarjeta-detalles-sin-borde:hover .figure-cover:after {
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .25), 0 0 34px rgba(255, 0, 248, .55);
    opacity: 1
}

@keyframes sw-impact-in {
    0% {
        filter: brightness(.85) saturate(.9) blur(1px);
        opacity: 0;
        transform: translateY(22px) scale(.96) rotateX(6deg)
    }

    55% {
        filter: drop-shadow(0 2px 16px rgb(255, 0, 248, .28)) brightness(1.08) saturate(1.05);
        opacity: 1;
        transform: translateY(-2px) scale(1.02) rotateX(0)
    }

    to {
        filter: none;
        opacity: 1;
        transform: none
    }
}

.row-flex .tarjeta-detalles-sin-borde .figure-cover:first-child,
.three-cards-row .tarjeta-detalles-sin-borde .figure-cover:first-child {
    --delay: 0s
}

.row-flex .tarjeta-detalles-sin-borde .figure-cover:nth-child(2),
.three-cards-row .tarjeta-detalles-sin-borde .figure-cover:nth-child(2) {
    --delay: 0.12s
}

.row-flex .tarjeta-detalles-sin-borde .figure-cover:nth-child(3),
.three-cards-row .tarjeta-detalles-sin-borde .figure-cover:nth-child(3) {
    --delay: 0.24s
}

@media (prefers-reduced-motion:reduce) {
    .tarjeta-detalles-sin-borde .figure-cover {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }

    .tarjeta-detalles-sin-borde .figure-cover:after {
        opacity: 0 !important
    }

    .tarjeta-detalles-sin-borde .figure-cover img {
        transition: none !important
    }
}

.tarjeta-detalles-sin-borde .sw-visual-in {
    filter: brightness(.95) saturate(.92);
    opacity: 0;
    transform: translateY(12px) scale(.98);
    transition: transform .55s ease, opacity .55s ease, filter .55s ease;
    transition-delay: var(--delay, 0s)
}

.tarjeta-detalles-sin-borde .sw-visual-in.is-inview {
    filter: none;
    opacity: 1;
    transform: none
}

@media (prefers-reduced-motion:reduce) {
    .tarjeta-detalles-sin-borde .sw-visual-in {
        filter: none !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important
    }
}