.contenido-slide-centro {
            text-align: center;
        }
        
        .contenido-slide-centro .hero-botones {
            justify-content: center;
        }
        
        .contenido-slide-derecha {
            margin-left: auto;
            text-align: right;
        }
        
        .contenido-slide-derecha .hero-botones {
            justify-content: flex-end;
        }
        
        .slide-texto-claro .contenido-slide,
        .slide-texto-claro .contenido-slide h1,
        .slide-texto-claro .contenido-slide p {
            color: #ffffff;
        }
        
        .slide-texto-oscuro .contenido-slide,
        .slide-texto-oscuro .contenido-slide h1,
        .slide-texto-oscuro .contenido-slide p {
            color: var(--texto);
        }
        
        .imagen-principal-picture {
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .imagen-principal-picture .imagen-principal {
            width: 100%;
            height: 100%;
        }
        
        .marco-diapositiva > .imagen-fondo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            display: block;
        }
        
        .marco-diapositiva > .imagen-fondo img {
            width: 100%;
            height: 100%;
            display: block;
            object-fit: cover;
        }
        
        .marco-diapositiva .imagen-velo {
            pointer-events: none;
        }
        
        @media (max-width: 700px) {
        
            .contenido-slide-derecha,
            .contenido-slide-centro {
                margin-right: 0;
                margin-left: 0;
                text-align: left;
            }
        
            .contenido-slide-derecha .hero-botones,
            .contenido-slide-centro .hero-botones {
                justify-content: flex-start;
            }
        }
        
        
        /*
|--------------------------------------------------------------------------
| Información profesional
|--------------------------------------------------------------------------
*/

.medico-cargo {
    display: block;
    margin: 4px 0 6px;
    color:
        var(
            --texto-suave,
            #5d7478
        );
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
}

/*
|--------------------------------------------------------------------------
| IN2 — Orden administrable de las secciones de Inicio
|--------------------------------------------------------------------------
|
| Cada bloque conserva su diseño original. El contenedor principal solo se
| convierte en una columna flexible para que la propiedad CSS `order`,
| calculada desde inicio_secciones, pueda cambiar el orden sin duplicar ni
| reconstruir el HTML de las secciones existentes.
|
*/

main.inicio-configurable {
    display: flex;
    flex-direction: column;
    width: 100%;
}

main.inicio-configurable > * {
    flex: 0 0 auto;
    width: 100%;
}

/*
|--------------------------------------------------------------------------
| R4.8J.2 — Robustez responsive de Inicio
|--------------------------------------------------------------------------
| Protege contenido administrable frente a textos largos y evita que CTA,
| datos de contacto o embeds fuercen el ancho de la pantalla.
*/

.inicio-configurable .hero-etiqueta,
.inicio-configurable .hero h1,
.inicio-configurable .texto-principal,
.inicio-configurable .texto-secundario,
.inicio-configurable .web-etiqueta,
.inicio-configurable .web-titulo,
.inicio-configurable .web-descripcion,
.inicio-configurable .web-card-cuerpo h3,
.inicio-configurable .web-card-cuerpo p,
.inicio-configurable .web-card-enlace,
.inicio-configurable .medico-especialidad,
.inicio-configurable .medico-cargo,
.inicio-configurable .contacto-portada-info h2,
.inicio-configurable .contacto-portada-info > p,
.inicio-configurable .contacto-dato a,
.inicio-configurable .contacto-dato span,
.inicio-configurable .contacto-como-llegar,
.inicio-configurable .horario-linea span,
.inicio-configurable .horario-linea strong,
.inicio-configurable .red-resumen-identidad strong,
.inicio-configurable .red-resumen-identidad small,
.inicio-configurable .red-boton {
    overflow-wrap: anywhere;
}

.inicio-configurable .hero-etiqueta,
.inicio-configurable .contacto-como-llegar,
.inicio-configurable .red-boton {
    max-width: 100%;
}

.inicio-configurable .contacto-portada-grid > *,
.inicio-configurable .contacto-dato,
.inicio-configurable .red-resumen-card,
.inicio-configurable .red-resumen-identidad,
.inicio-configurable .red-resumen-identidad > span:last-child {
    min-width: 0;
}

@media (max-width: 700px) {
    .inicio-configurable .hero-botones {
        flex-wrap: wrap;
        align-items: stretch;
    }

    .inicio-configurable .hero-botones .boton {
        min-width: 0;
        max-width: 100%;
        white-space: normal;
        text-align: center;
        overflow-wrap: anywhere;
    }

    .inicio-configurable .contacto-como-llegar {
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .inicio-configurable .hero-botones {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .inicio-configurable .hero-botones .boton {
        width: 100%;
    }
}

/*
| TikTok declara 288 px como ancho mínimo. En móviles de 320 px se conserva
| ese mínimo reduciendo solo el aire interior de la tarjeta, sin recortar el
| embed ni imponer un ancho superior al viewport.
*/
@media (max-width: 360px) {
    .inicio-configurable .red-contenido {
        padding-right: 2px;
        padding-left: 2px;
    }

    .inicio-configurable .tiktok-caja {
        padding-right: 0;
        padding-left: 0;
    }
}

/*
|--------------------------------------------------------------------------
| R4.8K.1 — Título semántico de diapositivas secundarias
|--------------------------------------------------------------------------
| El primer slide conserva el H1 único de la portada. Los siguientes usan H2
| pero mantienen exactamente la misma presencia visual del título principal.
*/

.inicio-configurable .hero .hero-titulo-slide {
    max-width: 700px;
    margin: 0;
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    line-height: 1.02;
    letter-spacing: -0.05em;
    overflow-wrap: anywhere;
}

.slide-texto-claro .contenido-slide .hero-titulo-slide {
    color: #ffffff;
}

.slide-texto-oscuro .contenido-slide .hero-titulo-slide {
    color: var(--texto);
}

@media (max-width: 700px) {
    .inicio-configurable .hero .hero-titulo-slide {
        font-size: clamp(2rem, 10vw, 2.75rem);
        line-height: 1.01;
    }
}