/**
 * Single Producto - layout segun Figma 2026 (node 2725:556).
 *
 * Estructura:
 *   1. Hero (2 cols sobre fondo blanco): eyebrow + titulo + descripcion + CTA + imagen
 *   2. Especificaciones tecnicas (lista centrada con borde inferior)
 *   3. Galeria de imagenes (foto principal + 4 thumbs)
 *   4. Caracteristicas destacadas (card azul contenida con panel interior
 *      oscuro; titulo blanco + 3 features con iconos amarillos)
 *   5. Mini banner Eficiencia A+ (pildora azul con badge amarillo)
 *   6. Productos relacionados (grid de 3 product cards, ESTRICTO por tipo_producto)
 *   7. Botonera descargar (3 botones pildora azul oscuro)
 *
 * Reglas:
 *   - Todo lo que es modificador "solo para single" usa prefijo --single-producto
 *     o el namespace de su bloque + modifier con `--single` para no afectar
 *     las demas paginas que reusen el mismo modulo.
 */

.wp-block-onlines-single-producto.single-producto,
.wp-block-onlines-single-producto.single-producto *,
.wp-block-onlines-single-producto.single-producto *::before,
.wp-block-onlines-single-producto.single-producto *::after {
    box-sizing: border-box;
}

.wp-block-onlines-single-producto.single-producto {
    --sp-azul: var(--wp--preset--color--custom-azul, #09364d);
    --sp-azul-dark: color-mix(in srgb, var(--sp-azul) 88%, #000 12%);
    --sp-amarillo: var(--wp--preset--color--custom-amarillo, #fec52d);
    --sp-blanco: var(--wp--preset--color--custom-blanco, #ffffff);
    --sp-oscuro: var(--wp--preset--color--custom-oscuro, #292929);
    --sp-soft: color-mix(in srgb, var(--sp-azul) 3%, var(--sp-blanco));
    --sp-border-soft: rgba(9, 54, 77, 0.2);
    --sp-text-soft-azul: rgba(255, 255, 255, 0.85);
    --sp-font-display: var(--wp--preset--font-family--greycliff-cf, sans-serif);
    --sp-font-body: var(--wp--preset--font-family--alexandria, var(--wp--preset--font-family--greycliff-cf, sans-serif));
    width: 100%;
    margin-top: 0 !important;
    background: var(--sp-blanco);
}

/* ============================================================
 * 1. HERO (fondo BLANCO)
 *
 * Padding-top suficiente para que el header (position: absolute, ~113px
 * de alto) no tape el eyebrow. Mobile: el header colapsa a una pildora
 * mas baja, asi que alcanza con ~90px.
 * ============================================================ */

.single-producto__hero {
    background: var(--sp-blanco);
    padding: 150px 1rem 50px;
}

.single-producto__hero-shell {
    display: grid;
    grid-template-columns: minmax(0, 397px) minmax(0, 1fr);
    gap: 65px;
    align-items: stretch;
    width: min(100%, var(--wp--style--global--wide-size, 1396px));
    margin: 0 auto;
    max-width: 1351px;
}

/* Columna izquierda: contenido textual stretcheado a la altura de la
 * imagen. Eyebrow/titulo/descripcion se apilan arriba (orden natural
 * del DOM) y el boton CTA se empuja al fondo via `margin-top: auto`,
 * dejando un espacio entre el bloque de texto y el boton. */
.single-producto__hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 35px 0;
    min-height: 100%;
}

.single-producto__hero-cta {
    margin-top: auto;
}

.single-producto__eyebrow {
    display: inline-flex;
    align-items: center;
    margin: 0 0 27px;
    padding: 8px 15px 6px;
    border-radius: 999px;
    background: var(--sp-amarillo);
    color: var(--sp-azul);
    font-family: var(--sp-font-display);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.single-producto__title {
    margin: 0 0 25px;
    color: var(--sp-azul);
    font-family: var(--sp-font-display);
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.single-producto__hero-description {
    color: var(--sp-oscuro);
    font-family: var(--sp-font-body);
    font-size: 17px;
    font-weight: 300;
    line-height: 1.45;
    max-width: 399px;
    margin-bottom: 40px;
}

.single-producto__hero-description p {
    margin: 0 0 1em;
}

.single-producto__hero-description p:last-child {
    margin-bottom: 0;
}

/* CTA del hero: pildora estilo "Ver todos" home, palette-opposite. */
.single-producto__hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 54px;
    padding: 18px 30px;
    background: var(--sp-azul);
    color: var(--sp-blanco);
    border: 0;
    border-radius: 999px;
    font-family: var(--sp-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
}

.single-producto__hero-cta > svg {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.single-producto__hero-cta--disabled {
    opacity: 0.55;
    cursor: default;
}

.single-producto__hero-media {
    height: 670px;
    border-radius: 15px;
    overflow: hidden;
    background: var(--sp-soft);
}

.single-producto__hero-image,
.single-producto__hero-image img {
    display: block;
    width: 100%;
    height: 100%;
}

.single-producto__hero-image img {
    object-fit: cover;
}

/* ============================================================
 * 2. ESPECIFICACIONES TECNICAS
 * ============================================================ */

.single-producto__specs {
    padding: 100px 1rem 80px;
    background: var(--sp-blanco);
}

.single-producto__specs-shell {
    width: min(100%, 932px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.single-producto__section-title {
    margin: 0;
    color: var(--sp-azul);
    font-family: var(--sp-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.02em;
    text-align: center;
}

.single-producto__spec-list {
    display: flex;
    flex-direction: column;
    gap: 23px;
    margin: 0;
    padding: 0;
}

.single-producto__spec-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sp-border-soft);
    font-size: 16px;
    line-height: 1.45;
}

.single-producto__spec-row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.single-producto__spec-row dt {
    margin: 0;
    color: var(--sp-azul);
    font-family: var(--sp-font-body);
    font-weight: 400;
    opacity: 0.9;
}

.single-producto__spec-row dd {
    margin: 0;
    color: var(--sp-oscuro);
    font-family: var(--sp-font-body);
    font-weight: 300;
    opacity: 0.9;
    text-align: right;
}

/* ============================================================
 * 3. GALERIA
 * ============================================================ */

.single-producto__gallery {
    padding: 0 1rem 150px;
    background: var(--sp-blanco);
}

.single-producto__gallery-shell {
    width: min(100%, 914px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.single-producto__gallery-main {
    margin: 0;
    height: 470px;
    border-radius: 15px;
    overflow: hidden;
    background: var(--sp-soft);
}

.single-producto__gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.single-producto__gallery-main img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.single-producto__gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 135px;
    align-items: stretch;
    gap: 18px;
}

.single-producto__gallery-thumb {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 15px;
    overflow: hidden;
    background: var(--sp-soft);
    cursor: zoom-in;
}

.single-producto__gallery-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ============================================================
 * 4. CARACTERISTICAS DESTACADAS
 * ============================================================ */

.single-producto__features {
    background: var(--sp-blanco);
    padding: 0 1rem 64px;
}

.single-producto__features-shell {
    position: relative;
    width: min(100%, 1351px);
    margin: 0 auto;
    min-height: 500px;
    padding: clamp(58px, 6vw, 82px) clamp(44px, 7vw, 92px);
    display: grid;
    grid-template-columns: minmax(280px, 0.78fr) minmax(420px, 1fr);
    gap: clamp(64px, 8vw, 118px);
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    border-radius: 32px;
}

.single-producto__features-panel {
    position: absolute;
    pointer-events: none;
}

.single-producto__features-panel--back {
    inset: 0;
    background: var(--sp-azul);
    z-index: -2;
}

.single-producto__features-panel--front {
    top: 28px;
    right: 28px;
    bottom: 28px;
    width: 56%;
    background: var(--sp-azul-dark);
    border: 1px solid color-mix(in srgb, var(--sp-blanco) 8%, transparent);
    border-radius: 24px;
    z-index: -1;
}

.single-producto__features-title {
    position: relative;
    margin: 0;
    color: var(--sp-blanco);
    font-family: var(--sp-font-display);
    font-size: clamp(48px, 4.7vw, 64px);
    font-weight: 700;
    line-height: 0.94;
    letter-spacing: -0.035em;
    max-width: 430px;
    align-self: center;
}

.single-producto__features-list {
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    max-width: 500px;
    justify-self: end;
    color: var(--sp-blanco);
}

.single-producto__feature {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
    padding: 22px 0;
}

.single-producto__feature + .single-producto__feature {
    border-top: 1px solid color-mix(in srgb, var(--sp-blanco) 13%, transparent);
}

.single-producto__feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--sp-amarillo) 14%, transparent);
    color: var(--sp-amarillo);
    flex: 0 0 auto;
}

.single-producto__feature-icon svg {
    width: 28px;
    height: 28px;
}

.single-producto__feature-icon img {
    display: block;
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.single-producto__feature-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.single-producto__feature-title {
    margin: 0;
    color: var(--sp-blanco);
    font-family: var(--sp-font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

.single-producto__feature-description {
    margin: 0;
    color: var(--sp-text-soft-azul);
    font-family: var(--sp-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

/* ============================================================
 * 5. MINI BANNER EFICIENCIA A+
 * ============================================================ */

.single-producto__benefit {
    background: var(--sp-blanco);
    padding: 0 1rem 90px;
}

.single-producto__benefit-shell {
    position: relative;
    width: min(100%, 1375px);
    margin: 0 auto;
    padding-left: 45px;
    display: flex;
    align-items: center;
}

.single-producto__benefit-badge {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 91px;
    height: 87px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.single-producto__benefit-badge svg {
    width: 100%;
    height: 100%;
    display: block;
}

.single-producto__benefit-pill {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    background: var(--sp-azul);
    border-radius: 999px;
    padding: 30px 65px 30px 110px;
    display: grid;
    grid-template-columns: minmax(0, 417px) minmax(0, 342px);
    gap: 40px;
    justify-content: space-between;
    align-items: center;
    min-height: 0;
}

.single-producto__benefit-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.single-producto__benefit-title {
    color: var(--sp-blanco);
    font-family: var(--sp-font-body);
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.single-producto__benefit-subtitle {
    color: var(--sp-blanco);
    font-family: var(--sp-font-body);
    font-size: 22px;
    font-weight: 300;
    line-height: 1.1;
}

.single-producto__benefit-description {
    margin: 0;
    color: var(--sp-text-soft-azul);
    font-family: var(--sp-font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.45;
    text-align: right;
}

/* ============================================================
 * 6. PRODUCTOS RELACIONADOS
 * ============================================================ */

.single-producto__related {
    padding: 95px 1rem 0;
    background: var(--sp-blanco);
}

.single-producto__related-shell {
    width: min(100%, var(--wp--style--global--wide-size, 1396px));
    margin: 0 auto;
}

.single-producto__related-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-bottom: 35px;
}

.single-producto__related-header h2 {
    margin: 0 0 8px;
    color: var(--sp-azul);
    font-family: var(--sp-font-display);
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.single-producto__related-header p {
    margin: 0;
    color: var(--sp-oscuro);
    font-family: var(--sp-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 680px;
}

.single-producto__related-button {
    flex: 0 0 auto;
    min-height: 57px;
    padding: 20px 30px;
    background: var(--sp-azul);
    color: var(--sp-blanco);
    border-radius: 999px;
    font-family: var(--sp-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.single-producto__related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.single-producto__related-card {
    min-width: 0;
}

.single-producto__empty {
    margin: 0;
    color: var(--sp-oscuro);
    font-family: var(--sp-font-body);
    font-size: 16px;
}

/* ============================================================
 * 7. BOTONERA DESCARGAR
 * ============================================================ */

.single-producto__downloads {
    padding: 60px 1rem 100px;
    background: var(--sp-blanco);
}

.single-producto__downloads-shell {
    width: min(100%, 680px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.single-producto__downloads h2 {
    margin: 0;
    color: var(--sp-azul);
    font-family: var(--sp-font-display);
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
}

.single-producto__downloads p {
    margin: 0;
    color: var(--sp-azul);
    font-family: var(--sp-font-body);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.45;
    max-width: 550px;
}

.single-producto__download-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 216px));
    gap: 16px;
    margin-top: 25px;
}

.single-producto__download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 20px 25px 20px 30px;
    background: var(--sp-azul);
    color: var(--sp-blanco);
    border-radius: 999px;
    border: 0;
    font-family: var(--sp-font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    text-decoration: none;
    min-height: 58px;
}

.single-producto__download svg {
    width: 16px;
    height: 18px;
    flex: 0 0 auto;
}

.single-producto__hero-cta:focus-visible,
.single-producto__related-button:focus-visible,
.single-producto__download:focus-visible {
    outline: 2px solid var(--sp-amarillo);
    outline-offset: 3px;
}

.single-producto__download--disabled {
    cursor: default;
    opacity: 0.6;
}

/* ============================================================
 * OVERRIDES SCOPED AL SINGLE (no afectan otras paginas)
 *
 * Para los bloques compartidos onlines/faq, onlines/header,
 * onlines/cta-banda, etc. que viven en templates/single-producto.html,
 * usamos modificador `--single-producto` en su className para inyectar
 * cambios de esta pagina sin tocar el CSS del modulo.
 * ============================================================ */

/* HEADER del single: banda azul institucional con menu blanco.
 *
 * El bloque onlines/header viene en variant `home-transparent` que lo
 * posiciona absolute sin fondo. En la single agregamos el modificador
 * `header--single-producto` que le pone fondo azul + ancho 100% para
 * que se vea como una banda solida arriba (sobre el hero blanco). El
 * texto blanco y el logo blanco que ya trae el variant se leen perfecto
 * sobre el azul.
 */
.wp-block-onlines-header.header__wrapper.header--home-transparent.header--single-producto {
    background: var(--wp--preset--color--custom-azul, #09364d);
    width: 100%;
    left: 0;
    right: 0;
}

.wp-block-onlines-faq.faq.faq--single-producto {
    padding-top: 135px;
}

/* ============================================================
 * MOBILE
 * ============================================================ */

@media (max-width: 1023px) {
    /* Padding top suficiente para que el header fijo (banda azul ~80-90px
     * de alto sobre el hero blanco) no tape el eyebrow ni el titulo. */
    .single-producto__hero {
        padding: 140px 1rem 32px;
    }

    .single-producto__hero-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .single-producto__hero-copy {
        padding: 0;
    }

    .single-producto__title {
        font-size: 36px;
    }

    .single-producto__hero-description {
        font-size: 16px;
        max-width: none;
    }

    .single-producto__hero-media {
        height: 320px;
    }

    .single-producto__specs {
        padding: 64px 1rem 56px;
    }

    .single-producto__section-title {
        font-size: 28px;
    }

    .single-producto__spec-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .single-producto__spec-row dd {
        text-align: left;
    }

    .single-producto__gallery {
        padding: 0 1rem 64px;
    }

    .single-producto__gallery-main {
        height: 220px;
    }

    .single-producto__gallery-thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-auto-rows: 70px;
        gap: 8px;
    }

    .single-producto__gallery-thumb {
        height: 100%;
    }

    /* CARACTERISTICAS: stack vertical en una unica card. */
    .single-producto__features {
        padding: 0 1rem 48px;
    }

    .single-producto__features-shell {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto;
        gap: 22px;
        padding: 38px 28px 30px;
        min-height: 0;
        border-radius: 24px;
    }

    .single-producto__features-panel--back {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        background: var(--sp-azul);
        border-radius: 24px;
    }

    .single-producto__features-panel--front {
        display: none;
    }

    .single-producto__features-title {
        font-size: clamp(36px, 8vw, 48px);
        line-height: 0.98;
        max-width: 520px;
    }

    .single-producto__features-list {
        max-width: none;
        justify-self: stretch;
    }

    .single-producto__feature {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 16px;
        padding: 20px 0;
    }

    .single-producto__feature-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .single-producto__feature-title {
        font-size: 20px;
    }

    .single-producto__feature-description {
        font-size: 15px;
    }

    /* MINI BANNER: stack vertical, badge encima a la izquierda. */
    .single-producto__benefit {
        padding: 0 1rem 56px;
    }

    .single-producto__benefit-shell {
        padding-left: 0;
        padding-top: 36px;
    }

    .single-producto__benefit-badge {
        top: 0;
        left: 16px;
        transform: none;
        width: 60px;
        height: 58px;
    }

    .single-producto__benefit-badge svg {
        width: 100%;
        height: 100%;
    }

    .single-producto__benefit-pill {
        flex: 1 1 100%;
        width: 100%;
        border-radius: 24px;
        padding: 32px 24px;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .single-producto__benefit-title {
        font-size: 20px;
    }

    .single-producto__benefit-subtitle {
        font-size: 18px;
    }

    .single-producto__benefit-description {
        text-align: left;
    }

    /* RELATED + DOWNLOADS: paddings ajustados para mobile. */
    .single-producto__related {
        padding: 56px 1rem 0;
    }

    .single-producto__related-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
    }

    .single-producto__related-header h2 {
        font-size: 24px;
    }

    .single-producto__related-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .single-producto__downloads {
        padding: 48px 1rem 64px;
    }

    .single-producto__downloads h2 {
        font-size: 28px;
    }

    .single-producto__downloads p {
        font-size: 16px;
    }

    .single-producto__download-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        width: 100%;
        max-width: 320px;
    }

    /* FAQ override mobile: 72px en lugar de 135px. */
    .wp-block-onlines-faq.faq.faq--single-producto {
        padding-top: 72px;
    }
}