/* ==========================================================================
   PB Design System
   PAGE · Info Tratamiento
   ========================================================================== */

/* --------------------------------------------------------------
   Intro
-------------------------------------------------------------- */

.pb-root .info-tratamiento__intro {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    align-items: start;
}

.pb-root .info-tratamiento__contenido {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-5);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
}

.pb-root .info-tratamiento__contenido .section-header {
    width: 100%;
    max-width: none;
}

.pb-root .info-tratamiento__contenido .section-header__text {
    max-width: none;
}

/* --------------------------------------------------------------
   Indicaciones, Contraindicaciones y Beneficios (3 Columnas)
-------------------------------------------------------------- */

.pb-root .info-tratamiento__tres-columnas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    gap: var(--space-8);
    align-items: stretch;
}

.pb-root .info-tratamiento__columna-tarjeta {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
}

.pb-root .info-tratamiento__columna-tarjeta h3 {
    margin: 0;
    font-family: var(--fuente-acento);
    font-size: var(--fs-500);
    text-align: center;
    letter-spacing: .08em;
    color: var(--color-bordoy);
    line-height: 1.3;
}

.pb-root .info-tratamiento__lista-iconos {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pb-root .info-tratamiento__lista-iconos li {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    line-height: 1.4;
}

.pb-root .info-tratamiento__lista-iconos li .icono-texto__texto {
    flex: 1;
    color: var(--color-seleccion);
}

.pb-root .info-tratamiento__lista-iconos li svg {
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.pb-root .info-tratamiento__lista-iconos li svg.icono-check {
    color: var(--color-bordoy);
}

.pb-root .info-tratamiento__lista-iconos li svg.icono-prohibido {
    color: var(--color-rojo);
}

/* --------------------------------------------------------------
   FAQs
-------------------------------------------------------------- */

.pb-root .info-tratamiento__faqs {
    display: grid;
    gap: var(--space-5);
}

.pb-root .info-tratamiento__faqs .section-header__text {
    max-width: 60%;
    margin-inline: auto;
}

.pb-root .info-tratamiento__faqs-lista {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
    justify-items: center;
}

.pb-root .info-tratamiento__faq {
    min-width: 60%;
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    text-align: center;
    overflow: hidden;
}

.pb-root .info-tratamiento__faq summary {
    padding: var(--space-4) var(--space-5);
    font-family: var(--fuente-acento);
    font-size: var(--fs-200);
    font-weight: 700;
    color: var(--color-seleccion);
    cursor: pointer;
}

.pb-root .info-tratamiento__faq p {
    margin: 0;
    padding: 0 var(--space-5) var(--space-5);
    color: var(--color-texto);
    text-align: left;
}

/* --------------------------------------------------------------
   Galería
-------------------------------------------------------------- */

.pb-root .info-tratamiento__galeria {
    display: grid;
    gap: var(--space-8);
}

.pb-root .info-tratamiento__galeria-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-9);
    margin-top: var(--space-5);
}

.pb-root .info-tratamiento__galeria-item {
    display: grid;
    grid-template-rows: auto auto;
}

.pb-root .info-tratamiento__galeria-item img {
    display: block;
    width: 100%;
    height: auto;
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    box-shadow: var(--shadow-bordoy);
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.pb-root .info-tratamiento__galeria-item figcaption {
    display: block;
    position: relative;
    padding: var(--space-4);
    line-height: 1.6;
    color: var(--color-texto);
    z-index: 1;
}

/* --------------------------------------------------------------
   Sección Video + Formulario de contacto (Columna derecha 25%/25%/50%)
-------------------------------------------------------------- */

.pb-root .info-tratamiento__video-contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: stretch;
    margin-bottom: var(--space-7);
}

.pb-root .info-tratamiento__video {
    display: grid;
    order: 0;
}

.pb-root .info-tratamiento__video-media {
    width: 100%;
    margin: 0 auto; /* Lo centra en su columna */
    padding: 0;
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
    overflow: hidden;
}

.pb-root .info-tratamiento__video-media video {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

.pb-root .info-tratamiento__columna-derecha {
    display: contents; /* Convierte los 2 bloques hijos en celdas directas del grid principal para el diseño a 3 columnas */
}

.pb-root .info-tratamiento__bloque-resultados {
    display: grid;
    order: 1;
    align-content: start;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-5);
    border: var(--border-gold);
    border-radius: var(--radio-xl);
    background: var(--color-blanco);
    box-shadow: var(--shadow-bordoy);
}

.pb-root .info-tratamiento__bloque-resultados h3 {
    margin: 0;
    font-family: var(--fuente-acento);
    font-size: var(--fs-400);
    text-align: center;
    letter-spacing: .08em;
    color: var(--color-bordoy);
    line-height: 1;
}



.pb-root .info-tratamiento__video-contacto .info-tratamiento__formulario {
    align-self: stretch;
    align-content: start;
    gap: var(--space-7);
    order: -1;
}

.pb-root .info-tratamiento__video-contacto .info-tratamiento__formulario h3 {
    margin: 0;
    font-family: var(--fuente-acento);
    font-size: var(--fs-400);
    font-weight: 700;
    text-align: center;
    letter-spacing: .08em;
    color: var(--color-bordoy);
}

.pb-root .info-tratamiento__video-contacto .info-tratamiento__formulario .form-campo {
    align-content: start;
    gap: var(--space-5);
    max-width: 100%;
}

/* --------------------------------------------------------------
   Responsive
-------------------------------------------------------------- */

@media (max-width: 980px) {
    .pb-root .info-tratamiento__tres-columnas {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: var(--space-5);
    }

    .pb-root .info-tratamiento__columna-tarjeta {
        display: flex;
        flex-direction: column;
        grid-row: auto;
        gap: var(--space-4);
    }

    .pb-root .info-tratamiento__galeria-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .pb-root .info-tratamiento__faq {
        width: 100%;
    }

    .pb-root .info-tratamiento__faqs .section-header__text {
        max-width: 100%;
    }

    .pb-root .info-tratamiento__video-contacto {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }

    .pb-root .info-tratamiento__video-contacto .info-tratamiento__formulario {
        order: -1;
    }

    .pb-root .info-tratamiento__video {
        order: 0;
    }

    .pb-root .info-tratamiento__bloque-resultados {
        order: 1;
    }

    .pb-root .info-tratamiento__video-media video {
        height: auto;
        aspect-ratio: 3 / 4;
    }
}